HTML5＋WebGLでBMW i8の3Dモデルをブラウザでグリグリと動かしまくり＆カラー変更＆中も見えるPlayCanvasのデモがすごい

BMWがラインナップする次世代スポーツカー「i8」は、エンジンとモーターの力でパワフルな走りと低燃費性能を実現するという文字どおり次の世代を示すスポーツカー。そんな先進的なスポーツカーをHTML5とWebGLを使ってブラウザ上に再現しているのがゲームエンジン「PlayCanvas」のデモサイトです。サイトではi8がフル3DCGで表示され、車体色や内装色を変更できるほか、特徴的な跳ね上げ式のドアをあけて車内に滑り込めるなどとにかく驚愕のデモを体験することができます。

BMW i8 - PLAYCANVAS
http://playcanv.as/p/RqJJ9oU9

サイトを訪れ、ページのロードが完了すると3Dで表現されたi8が表示されました。実際に車輪が回転し、緩やかに前進している様子が再現されています。

車体はマウスを使って360度全ての角度に回転させることが可能。リヤのルーフからテールライトにかけての特徴的なボディの造型も、このように再現されており……

車体を真上から見てみることも可能。

真横から眺めると実にスタイリッシュな車体デザインになっていることがわかります。なお、車体の回転は可能ですが、ズームイン・アウトはできない仕様。

画面左下のアイコンをクリックすると、内装やボディの色を変えることができます。上の3つは内装色となっており……

下の4つがボディ色になっています。

左側のドアには、思わせぶりな四角いアイコンが表示されています。クリックしてみると……

斜め上に跳ね上がるポップアップ式ドアがガバッと開き……

ドライバーズシートに滑り込むことができました。まるでオーナーになったような気分。

もちろん車内をぐるっと見回すことも可能。

i8が持つ、子どもでも狭くて厳しそうなリヤシートもキッチリと再現。

ハンドルの上にある四角をクリックすると、タイヤを左右にステアすることも可能。

再びドアをあけて外に出てみると……

ちゃんと前輪が左に切れている状態となっていました。タイヤの角度も、作り込みの甘い3DCGにみられる妙な角度になることがなく、自然な状態となっていました。

非常にリアルな状態が再現されており、もはや全ての自動車メーカーが導入すべきといってもおかしくないレベル。このコンテンツを支えているのが、HTML5とWebGLを駆使するゲームエンジン「PlayCanvas」というわけです。PlayCanvasはWebGLを使った3Dゲームはもちろんのこと、リッチコンテンツをフル活用した企業広告などさまざまなアプリケーションが可能なエンジンです。

PlayCanvas | 3D HTML5 & WebGL Game Engine

サイトでは、BMW i8のような広告タイプのコンテンツの他、PlayCanvasを使ったブラウザゲームのサンプルをいろいろと試してその実力を体験してみることが可能です。