日本国内の WebGL 事例としては珍しい 3D カーモデルのビジュアライザコンテンツ
three.js を利用したリアル系デモ
今回ご紹介するのは、現在ではまだまだ珍しい日本国内における WebGL 活用事例のひとつです。
日本国内のウェブ制作会社 AgWORKS さんの、サービスのデモとして今回のカービジュアライザは公開されています。ショールームや、ディーラーさんなどでの利用を想定しているのか、モバイル機器でも動くように、調整がされているようですね。
ウェブサービスというよりは、あくまでもデモコンテンツという感じですが、ご紹介します。
カラーチェンジやワイヤーフレーム化が可能
今回のカービジュアライザは、three.js をベースにした、どちらかというとリアリスティック系の表現を主体にしたレンダリングとなっています。
個人的には、ロード時間がそれほど長すぎず、すんなり読み込めているところが素晴らしいと思いましたね。その分、カーモデルはそこまで精巧なものではなく、よーく観察してしまえばエッジが見える程度のディティールになっています。
状況によりけりだとは思いますが、ロード時間をある程度抑えるためには、あまりモデルデータが重すぎるのは良くないと思いますので、ちょうどいい落とし所なのではないかと感じます。
車のボディやフロントガラスなどには、風景が映り込んだような環境マッピングも適用されており、なかなかの質感です。
いわゆる物理ベースのような、本当のフォトリアリスティックな実装というわけではありませんが、一般的な three.js の事例としては、平均以上の品質が実現できているように感じます。
画面の下のところには、丸い形のアイコンが並んでいますが、これらを選択すれば、ボディカラーをインタラクティブに変更することができます。
もちろん、マウス操作によるカメラの移動も行えます。
ボディカラーを変更するのとはまた別に、ワイヤーフレームモードが一緒に用意されています。
これは結構珍しいなと感じました。
特にフォトリアルなものを目指す場合は、あえてワイヤーフレームで描画することのメリットってあまりないような気がします。
でも、このワイヤーフレームモードが今回のデモに組み込まれていることによって、たとえば、インテリアを見せるモードとかも作れるということが顧客に伝わり、より柔軟にビジネスチャンスを広げられるのかな……とも思いました。
こういうふうにボディが透けて中身が見えるっていうのも、見せ方として面白いですよね。
公式サイトでは、あえて WebGL や three.js といったキーワードは利用せずに、わかりやすさ重視で WEB 3D という表現を使っていますね。
まあ確かに、ウェブに詳しくない人にいきなり WebGL っていうのがあってですね……みたいに営業するのは、ちょっと難しい。そういう意味では、なんかいろいろと考えて作られているなあというのを感じます。
今回のデモは「技術研究サンプルコンテンツ」という扱いのようなので、今後もどんどんレンダリングがきれいになったり、新しい機能が追加されたりしていくのかもしれません。
これまでにも当サイトでは、海外の事例としてカービジュアライザをいくつかご紹介してきました。
そのなかには、メーカー純正のサイトに、カスタマイザ付きで本格的なリアルタイムレンダリングを実装しているものがあったりして、当時は海外と国内のレベルの差にちょっとだけさみしい思いをしたのを覚えています。
今回のサイトはベータ版というか、サンプルコンテンツという扱いですので、これからまだまだグレードアップしていくことを期待したいところ。ぜひ、国内でも、自動車メーカーがこぞって WebGL を利用したウェブサイトを発表できるように、今回のようなプロジェクトは本当に素直に応援したい気持ちです。
興味のある方は、ぜひチェックしてみてください。
