八角研究所 : JavaScript で 3D プログラミング（1）

JavaScript で 3D プログラミング（1） - O3Dを動かしてみよう！

『3D に向けたオープン Web 標準－O3D の紹介』
まずはこちらをご覧ください！なんかもうすごいことになってるんですよ！

「パッション」とか聞くと、どうしてもパッション屋良を思い浮かべてしまう方も多いでしょうが、重要なのはそこではありません。そう。重要なのは、JavaScriptだけでこれだけの3Dグラフィックが表現できるようになってしまったということです！描画の美しさでもFlashを超えているのではないでしょうか。驚きです！！

3DグラフィックAPI : 「Google O3D」

先述のとおり、O3DはGoogleの発表したOpenGLベースのWebブラウザ向け3D APIです。
Google I/O 2009ではHTML 5の機能としても紹介されていました。
特徴を列挙してみましょう。

ブラウザ上で利用できる3D環境である
オープンソースである
JavaScriptだけで3D描画が扱える
JavaScriptを使用して3DデータとHTMLが連携できる
JavaScriptでキーイベントの取得もできるのでゲームコンテンツの制作も可能
GPU(※1)を直接使用できるので、
ネイティブアプリのように描画処理を高速に行うことができる
コンバーターの使用(※2)により、既存のモデリングデータを簡単に使用することができる

う～む。かなり面白いことになってますね。
JavaScriptだけで3Dプログラミングができるという点は、開発者から見ても非常に大きな魅力だと思います。これまで3Dを利用したアプリケーションを作ろうとした場合、開発環境の準備に手間取ることが多かったように思います。それが、ブラウザとエディタだけあれば3Dプログラミングができるようになるわけで、興味があっても手が出なかった開発者には非常に嬉しいことです。

O3Dは現在プラグインとして提供されていて、IE、Firefox、Chrome、Safari、Operaの主要なブラウザで動作します。そして、すでに開発版のChromeには3D関連機能が統合されていてプラグインや拡張なしにO3Dが利用可能になっているようです。他のブラウザでの標準搭載が待ち遠しいところです。

※１：GPU
Graphics Processing Unitの略。描画専門の計算処理を行うハードウェアで、GPUがCPUの処理量を減らすことで高速な描画処理を実現する。
※２：コンバーターの使用
collada形式の3Dデータのインポートが可能。collada形式は Maya、 Softimage XSI、Google Sketchup など多くの3Dソフトで対応している。

O3Dを動かしてみよう！

それでは、さっそくO3Dを動かしてみましょう！
O3D API - Google Code　より「Download O3D」ボタンをクリックして、O3Dのプラグインをインストールします。
これで準備は完了です。これだけでこちらのO3Dのサンプルが動かせるようになります。
せっかくなので、どんなDemoがあるのか見てみましょう。

Demoその１ : Beach Scene

O3Dの紹介ムービーに使われていたデモです。画面ドラッグで360°方向転換、ホイールか上下キーで前後移動です。

キレイです！
しかも、ネットブックからでも十分サクサク動いてしまうから驚きです！

Demoその２ : Prince IO: The SketchUp Knight

映画のアバンにでも使われそうな、3Dの絵本のようなものです。こういうこともできるんですね。

画面クリックでページをめくれます。ただし、めくりすぎるとハングするので注意！

Demoその３ : Stenciled Teapot

４つのシーンを別々に描画したものを、１つに重ね合わせて表示しています。
これは実際に動かしてみると、おおっ！て思いますよ。

Demoその４ : Scene Viewer

こちらはよくある3Dモデルビューアです。
デフォルトでは木箱（Cube)が表示されていますが、見たい3Dモデルのバス（ GoogleCodeのSubVersionにいくつかあるよ）を指定すれば、このように他の3Dモデルも表示させることができます。
画面ドラッグでモデルの回転、ホイールで視点の前後移動です。

ここで指定している3Dモデルファイルの拡張子は「o3dtgz」になっています。3Dソフトでcollada形式で出力したモデルデータを、コンバーターでo3dtgzファイルに変換して使うことになるのでしょう。