HTML5でwebGL+threejsを使った3Dオブジェクトのサンプル

HTML5と言うとタグが増えたのとCSS3になっただけと思われがちですが、HTML5が対応した様々な技術はたくさんあります。

その中でもwebGLを紹介。
ブラウザから直接PCのグラフィックボードの性能を引き出す技術で3Dのリアルタイムレンダリングなどが可能になります。

GoogleChromeで閲覧を推奨しますが
PCのグラフィックボードが対応していないと見れない場合もあります。

スクリーンショットを見ただけだと信じられない人もいるかもしれませんが、これブラウザです。

車種やボディーカラー、ホイールカラーなど選択できます。

オブジェクトがゆっくり回転しながら
ボディに風景が写りこみリアルタイムレンダリングを行っているサンプルです。

マウスで視点の操作もできます。

車がかっこよかったのでスクリーンショットたくさん撮ってしまいました（笑）

この3Dオブジェクトを出力するにはjavascritpの力を借りる訳ですが、
javascript 3Dエンジン three.js が使われています。

HTML5が持つ性能は、一般的なwebサイトではまだ一部でしか扱われていませんが、
今回紹介したwebGL以外にもまだまだたくさんの機能があります。

webGL+threejsを使った驚くほど優秀なサイトはまだまだあるので、
また紹介していきないなと思っています。

[…] 前回は「webGL」についてお話したので今回は、HTML5で使えるようになった映像・音声ストリーム通信「webRTC」についてお話です。 […]

返信

コメント