超高解像度な画像が生み出すリアリティ！ BMW の WebGL 製デジタルモーターショー！
ただの全方位デモと侮るなかれ！
今回ご紹介するのは、フランスで行われた BMW のモーターショーを、そのままウェブに持ってきた全方位オンラインモーターショーコンテンツです。
最近では、youtube なども含めて、かなり様々なところで全方位マップを利用したコンテンツを見ることができるようになりました。今回のコンテンツも、広い意味では、もちろんこれらと同様のものだと考えることができます。
ただ、今回のサイトがちょっと特殊なのは、その全方位マップを使ったコンテンツの上に、見事に Web の既存の技術を使った表現を重ねて描画している点だと言えるでしょう。
かなり完成度が高く、ブランドの名に恥じない見事な出来栄えとなっています。
全方位マップとウェブ要素の見事な融合
今回のコンテンツは、一般的によく見られる全方位マップ系のコンテンツと同じように、自由に視点を動かしながら、あらゆる方向を見ることができるような作りになっています。
上下方向こそ、一定のところまでしか視線が動かせないように制御されていますが、円を描くようにぐるりと 360 度、すべての方向を自由に見ることができます。
恐らくご自身で実行していただければわかるかと思いますが、使われている画像の解像度がかなり高めになっており、とても高精細な仕上がりです。
まるで本当にそのショールームのなかに足を踏み入れたかのような、リアルな風景を堪能することができるでしょう。
キャプチャした画像なので多少縮小されてしまっていますが、よーく見ると、風景の中に黒いアイコンが浮かんでいるのがわかるかと思います。
このアイコンは視線の動きにある程度しっかりと追従してくるので、まるでディスプレイのなかに再現されたショールームの空間上に、アイコンが実際に置いてあるかのように動く様子がすごいですね。
3D のシーンのなかにレンダリングしたオブジェクトではなく、あくまでも DIV エレメントのような、普通の DOM としてウェブページ上に存在しているオブジェクトがぐりぐりと動きます。
かなり見事な位置制御ですね。すごいです。
そして床の部分には、場所によっては矢印のようなアイコンが出てきます。これもしっかりシーンに追従して描画されるのですが、これをクリックすると、ブースのなかを移動して、別の場所からの風景を見ることができるようになっています。ちなみに床面の矢印アイコンは SVG みたいですね。
黒いアイコン部分にも工夫が凝らしてあり、マウスカーソルをホバーさせると、その部分に黒い靄のようなものが現れ、うっすらと 3D のワイヤーフレームで描かれた幾何学オブジェクトが出てきます。
シーン全体を WebGL の球体（を内側から見ている状態）として描画しつつも、一般的なウェブページのエレメントを、違和感なく見事にひとつのシーンとして溶け込ませています。
これはゲームエンジンなどから出力したような、オートマチックな実装ではけして作ることのできない、職人技のようなコンテンツの作り方ですね。
高解像度な画像が使われていることもあって、本当にリアルで、近未来な、見事なオンラインショールームがそこにはあります。
車内の様子を見るモードも用意されています。
対象となる車種もかなり種類があり、見ごたえがありますね。
さらには、俯瞰した視点からブースの全体像を見ることができる 3D マップモードも用意されており、こちらも WebGL 全開という感じです。
マウスカーソルのホバーに対するインタラクションや、さりげないですが、しっかりと質感を下支えするアニメーションなども、本当にそつなく作られていて頭が上がりません。
高級外車ブランドだけあって、ウェブサイトにもかなり高い質感が感じられます。そのブランドイメージどおりの、老舗としての歴史を大切にしながらも最先端を行く、見事に洗練されたウェブサイトという感じです。
3D マップモードなどに見られるような、余白をうまく利用した表現はウェブデザインとしての感性の高さを感じさせてくれますし、全天球モードの DOM 制御は、CSS などを駆使したフロントエンドの技術力の高さを感じさせます。
ただ単に 3D で派手に見る人を驚かせる……けしてそういうところで終わってしまうことのない、高いレベルを見据えているウェブサイトだと感じました。
とてもかっこいいサイトなので、みなさんもぜひチェックしてみてください。
