最近、three.jsで遊んでいます。

thee.jsは、その名のとおりWebブラウザ上で3DグラフィックスをレンダリングするJavaScriptのライブラリです。canvas要素のWebGLコンテキストにレンダリングを行うのが基本ですが、canvas要素の2dコンテキストに(描画性能は低下するものの)レンダリングすることもできます。
つまり、IEでも簡単な描画なら行うことができるわけですね。

このthree.jsの利点は、「普通」の3Dグラフィックライブラリ感覚で使える点でしょうか。実は、少し前にWebブラウザ上のJavaScriptからGPUの3Dグラフィック機能にアクセスするWebGLに挑戦してみたのですが、見事に挫折しました。図形一つ描く前にやらないといけない「最初の準備」が、とんでもなく多くて……

WebGLはOpenGL ES2.0ベースなので、描画を行うには自分で「シェーダー」を設定しないといけません。で、このシェーダーの設定というのは、GLSL ESという「プログラミング言語」でコードを書いて「コンパイル」することなんですね。

Webブラウザ内のJavaScriptで構成される世界に、「別世界の言語、概念」が持ち込まれてしまっているわけです。かなり敷居が高い……

しかし、この敷居が高いWebGLも、three.jsを通してなら「普通」の3D描画機能として扱えます。

まずは、直方体や球、円柱などthree.jsに豊富に用意されているジオメトリ(物体を構成する頂点情報)オブジェクトを作成し、マテリアル(表面材質)を設定します。これで、3D世界に配置できる物体ができたので、配置すべき座標などを設定して、シーンに追加(必要に応じて光源となるライトを追加することもできます)。あとは、レンダラーとカメラのオブジェクトを作ってシーンをレンダリングすれば、Webブラウザ上のcanvas要素に描画されるわけです。

こうした「3DCGの標準的手続き」を、JavaScriptの世界で「完結」させられるのが、three.jsの利点でしょう。オブジェクトのメソッドやプロパティといったインターフェースも直感的で、JavaScriptと3DCGの基本概念がわかっていれば、すぐに使えます。
私も、three.jsで簡単なシューティングゲームやフライトシミュレータもどきを作って遊んでいますが、WebGLレンダラーでは旧型のGeForce 8600GTのマシンで数百の物体をレンダリングしてもスムーズに動いていて、性能面でも十分実用的な感じです。

ただ、現時点ではドキュメントがあまり整備されていません。JavaScriptのソースコードを調べないと何ができるのか全体像を把握しにくいのが、難点でしょうか。このあたりは、今後の「使いやすい環境整備」に期待したいところ。

先日@ITで多彩な表現力のWebGLを扱いやすくする「Three.js」と題する入門記事が公開されるなど、注目を集め始めているようです。高度化・高性能化するGPUの機能を、手軽にWebブラウザ上で活用できるライブラリとして順調に成長していってほしいですね。


創作プログラミングの街 > ノート