マスタングを好みに合わせて自由にカスタマイズできるフォード純正 WebGL カスタマイザがすごい!
あらゆる面で高い完成度を誇る逸品
今回ご紹介するのは、米国フォード純正の WebGL 製カスタマイザです。
先日ご紹介したポルシェのサイトも、WebGL 作品としては気合が入りすぎぐらいにすごかったですが、今回のフォードのサイトも、負けず劣らずなかなか素晴らしい出来栄え。
デモ作品というよりは、いかにもカスタマイザという感じですが、インターフェースがとても良く出来ていて、UI の面でも参考にできる点が多いでしょう。
カスタマイズできるパーツがとても多い!
全体的に軽いというわけではないですが、そこまで重たいという感じでもなく、比較的さくさくとパーツを切り替えながらオリジナルのマスタングをデザインできます。
ページが表示された直後は、まずは背景に動画が流れている状態からスタートしますが、一度データをロードしたあとは美しい WebGL によるレンダリングモードに切り替わります。
まず最初は、カスタマイズするためのベースとなる車種を選びます。
マスタングには詳しくないですが、最近のやつはなんかデザインも今風ですね。個人的には嫌いじゃないデザインです。
今回は GT を選択してみました。
これ、写真じゃなくて WebGL によるリアルタイムレンダリングです。
なかなか綺麗ですよね。
背景の感じもそうですが、ボディに適用されているライティングや環境マッピングが非常にいい感じになってます。
画面内には、小さな丸印かいくつか浮いています。その部分のパーツを自由に切り替えることができるようになっていて、それぞれの箇所ごとに何種類かのカスタマイズできる選択肢があります。
こちらはボンネットの部分を選択した状態ですね。
カメラは、選択したパーツが視認しやすい位置に自動的に移動します。
さらに、すべてのパーツを一度にプレビューして比較することもできます。
こんなふうに描画結果を一度に画面分割して表示するという方法は、あまり見たことがないです。でも、とても比較しやすいですし、見やすいですね。
考えてみれば WebGL ならこういったことも簡単にできるわけですし、とても素晴らしいインターフェースだなと思いました。
今回はわかりやすく見せる意味でボンネットを選びましたが、他のパーツでも同じように比較しながら見ることができます。
その他には、ボディカラーを変更することもできます。
単純にボディカラーを変更できることに加え、メタリックな、環境マッピングを強めに適用したボディーカラーにすることもできます。
背景が味のある風景ということもありますが、本当に描画結果が美しいですね。
インターフェースも、描画処理も、あらゆる面で完成度が高い実装だと感じます。フォードのような大企業が、こうして WebGL を利用したサイトを普通に展開しているところが、大変素晴らしいです。
日本でも、自動車メーカーさんはぜひこういうのやってほしいです。
なんなら、私やりますから!(笑)
とまあ、冗談はさておき非常に素晴らしい仕上がりになっていますので、ぜひチェックしてみてください。