|
canvas要素のコンテキストを取得するgetContext()には、通常引数として「2d」を指定します。この2dコンテキストがあれば、いわゆるビットマップ、具体的には2次元平面上のRGBAフレームバッファ（ピクセル集合）に対する描画処理を行うためのAPIにアクセスできるわけですね。 最近のWebブラウザでは、2dコンテキストに加えて3D描画が可能なWebGLが実装され始めています。このWebGLは、AndroidやiPhoneなどで使われているOpenGL ES2.0をWebブラウザ上のJavaScript（canvas要素）から扱えるようにしたものです。 WebGLを使うと、GPUの機能を活用して高速な3D描画やピクセルに対する画像処理を行える「可能性」があります（実際の処理性能はGPUとJavaScriptの実装に依存する）。GPUのシェーダーに直接アクセスする仕組みが用意され（というか描画処理は必ずシェーダーを通して行う必要がある）、パソコンの世界でも広まりつつある「シェーダープログラミング」が可能なのが利点でしょう。 ただ、これは同時に敷居の高さにもつながっているんですけどね。WebGLには、一般的な3D描画のための機能がほとんどありません。たとえば表面材質を持つ「モデル」を定義してそれを3D空間上に配置し、「座標を設定したカメラ」を通して描画する、という3Dソフトや3DCGのライブラリには当たり前の概念そのものが存在しないのです。 WebGLに用意されているのは、「3D座標上に三角形の座標を設定する」機能と「シェーダーのコードを読み込んで実行する」機能だけ。具体的な3D描画の処理は、シェーダーのコードを自分で書いて行わないといけないのです。 三角形の頂点を画面のピクセルとしてどのように描画するか、各ピクセルの色はどうするか……こうした具体的な描画処理（主に行列演算）をJavaScriptとはかけ離れた原始的コードを使って記述していく……想像するだけでめまいがしそうですよね。 幸い、現在ではWebGLの「周辺」に通常の3DCGの概念で描画を行うためのライブラリが整理され、3DCGソフトでモデルを作ったりアニメの設定を行うのと大差ない感覚で3D世界を作れるようになっています。最初は、こうしたJavaScriptと一般的な3DCGの知識でWebGLを扱えるライブラリを使ってみるのも良いでしょう。 実際に、WebGLを使ってみると、それなりの性能が出るようです。JavaScript（canvasの2Dコンテキスト）では望むべくもない「本物」の3D表現への道が、意外に身近なところにもあるんですね。 ゲーム開発においても、WebGLの3D表現は魅力でしょう。私もいつかポリゴンで構成される仮想世界に入り込む3Dゲームならではの「異世界体験」ができるようなゲームを作ってみたいものです。 |