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

ツール

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

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

360°回転させながらスポーツカーをレンダリング

Car Visualizer

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

360o   Car Visualizer   Three.js03

360o   Car Visualizer   Three.js 02

360o   Car Visualizer   Three.js

360o   Car Visualizer   Three.js05

360o   Car Visualizer   Three.js04

360o   Car Visualizer   Three.js06

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

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

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

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

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

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

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

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

Car Visualizer

Chrome Experiments:Car Visualizer
動画で見たい人:http://www.google.com/think/campaigns/car-visualizer.html
製作元:http://www.plus360degrees.com/

コメント

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

タイトルとURLをコピーしました