外装はもちろんインテリアなどのパーツもカスタム可能な自動車メーカー Volvo の WebGL 製コンフィギュレータ

doxas : 2019-03-20 13:59:33

three.js で glTF をロードして実現

今回ご紹介するのは、スウェーデンの自動車メーカー VOLVO のコンフィギュレータ実装です。

three.js を利用して glTF のデータをロードしているみたいですが、WebGL の実装としてはフォトリアルな方向に寄せた感じのビジュアルになっており、動作も比較的軽快でサクサクと閲覧できます。

インテリアなども結構しっかり作ってあり、カスタマイズしたあとの車の状態をイメージするには十分なクオリティになっていると思います。

今回のサイトでは、４種類の車種をコンフィギュレータを使ってカスタマイズできるようになっており、ステーションワゴンタイプと SUV タイプが用意されています。

どちらの場合も、ボディカラーはもちろんのこと、ホイールやインテリアなど、結構いろいろな部分をカスタムすることができるようになっていて、好みの構成を作ってイメージをふくらませるのに役立ちそうです。

干潟のような景観に、車が一台ポツンと置かれたような感じになっています。

車のボディには周囲の風景が映り込み、金属っぽさがしっかりと演出できていると思います。

実際にマウスカーソルを使って角度を変えてみたりしてもらうとわかると思うのですが、風景の映り込みは視点との位置関係によっては微妙に質感が変わるようになっていて、結構リアルな感じですね。

またギミックとしてドアを開いたりもできるようになっています。

画面の右側にある、コンフィギュレータのメニューでは、そのヘッダ部分にある左右の矢印をクリックすることで次々に項目を切り替えていくことができます。

初期状態ではボディの色の変更が行えるようになっていますが、ヘッダ部分で切り替えを行えば、ホイールの変更、シートの材質の変更など、結構いろいろなことができるようになっています。

インテリアを操作する項目も用意されているからだと思いますが、車の中も結構しっかりと作り込まれたモデルを使っています。

three.js では glTF を使って手軽にフォトリアル系の質感を再現することができ、今回のデモではそれらの機能をうまく活用していますね。

スクラッチで WebGL の開発をしていると、こういった金属の質感などをシェーダで独自に実装できますが、その分、難易度は高くなってしまいます。その点、three.js ならばライブラリ側である程度このへんはカバーしてくれるので、とても手軽です。

もともとのモデルデータのほうがよくできているというのもあるかもしれませんが、軽快な動作でなかなか楽しいコンフィギュレータ実装になっていると思います。