株式会社八角研究所 > 【連載】JavaScript で 3D プログラミング - 第2回 Canvas:3Dも動かしてみよう！

～前回までのあらすじ～

Google O3Dを動かしてみた少年。
しかし、Webブラウザ向け3D APIは O3D だけではなかった。
パッションの重要さに気がついた少年は、Canvas:3Dと向き合う決意を固めるのだった。

自分で「少年」とか書いてる自分が少しかわいそうになりつつも、Canvas:3Dについて見ていきたいと思います。

Mozilla 3DグラフィックAPI : 「Canvas:3D」

Canvas 3DはO3Dとはそもそも設計思考がまったく異なるものなのだ、 とはMozillaのChristopher Blizzard氏のお話です。

O3Dがゲームに用いられるような緻密な3Dシーンを作成できるだけの機能を得る代わりに、APIの内容も複雑になっているのに対して、 Canvas 3Dは、将来の変更を容易にし他の標準規格との相互関係を明確にできるように、APIをシンプルにしているのだそうです。

Canvas:3Dを動かしてみよう！

それではシンプルな3D API、Canvas:3Dはどれだけのことができるのか、さっそく動かしてみましょう！

当然使用するブラウザはMozilla Firefoxです。インストールされていない方はこちらからインストールしましょう。すでにインストールされている方でも、バージョンが最新の3.5よりも古い場合はアップデートが必要ですよ。Firefoxの準備ができたら、FirefoxからこちらにアクセスしてCanvas:3Dのアドオンをインストールします。

これで準備は完了です。例のごとく、サンプルコードを実行してみましょう。サンプルはこちらにあります。ここでは、３つほど紹介しておきましょう。

その１：simple-texture-cubemap

いきなり、ひと目見ただけではよくわからないサンプルです。

3Dの描画テクニックに”キューブ環境マッピング”というものがあります。これは、反射率の高い物体に周囲の風景が映りこんでいる様子を擬似的に作り出すものです。（こんなの）

つまり、そのサンプルコードは、天井が青で床が黄色、左右の壁が緑と赤というナゾ部屋に置かれたナゾの球体を描画しているわけです。

その２：multitexture

次は、マルチテクスチャのサンプルです。

何をしているのかというと、次の２つのテクスチャを同じ面に画素値をブレンドして貼り付けたというものです。

これができないと先ほどの"環境マッピング"もできなくなるので地味に重要な基本です。

その３：ModelView

そして、いよいよ3Dっぽいものの登場です。3Dの入門といえば、やっぱりティーポットですよね。

なるほど。シンプルなAPIとはいえ、最低限のことはゆうにこなすことができそうです。 それでも、COLLADA形式のデータを使えたりと、O3Dはやっぱり魅力的に感じてしまいます。

そしてWebGLへ

さて、これまでにO3D、Canvas:3Dとを扱ってきましたが、実はWebブラウザ向け3D APIはまだこれだけではなく、Opera SoftwareもOpera 3Dに取り組んでいたりと、各ベンダごと個別に実装化が進んでいました。「結局どれを使っていくべきなのさー？」 と思ってたところに先日朗報が！

『Khronos Group、インターネットにハードウェア・アクセラレート3Dグラフィックスをもたらす 「WebGL」イニシアティブを発表』

Webブラウザ向け3D APIもいよいよ標準化に向けて動き出すようです！ 最初のリリースも来年の前半とそう遠い未来ではありません。ということは、どれかひとつの技術について集中して知見を深めておいても無駄にはならないはず。

というわけで、次回はO3Dについてもう少し理解を深めていきたいと思います。 とりあえずは、サンプルソースの読解からかな～。