WebGL を始める前に canvas を知る
HTML5 と canvas タグ
現在(2012年2月)も策定中の次世代 HTML 標準規格である HTML5。
HTML5 ではオーディオやグラフィックなど、よりリッチなウェブコンテンツを表現できるようになりました。いくつかのタグが新たに追加され、各ブラウザベンダーも少しずつそれらに対応を進めている状況です。
グラフィック関連のタグとして追加された canvas は、その名の通り図形や画像を描画するためのキャンバスとして動作するタグで、javascript を使って操作することが可能です。もちろん、WebGL もこの canvas を利用することになるわけですが、まずは WebGL の前に canvas タグについて簡単に解説します。
canvas タグの基礎知識
canvas は 従来よりある img タグなどと同様、自由に大きさなどを指定できる矩形領域です。
javascript によって矩形領域内に操作を加えることが可能で、図形、文字などを自由に描画することができます。それらに影をつけたり、色を塗ったり、あるいは回転させて描画させたりなど、かなり柔軟に操作できます。また、ウェブ上で一般的に使われているフォーマット(gif、jpg、png など)であれば、画像を使った描画処理も可能となっています。
ただし、アニメーション処理を一括で管理するようなオブジェクトやメソッドは存在しません。つまり、動きのあるコンテンツを作成するためには、javascript による恒常的なループ処理を自前で実装してやる必要があります。
描画速度の面を見てみると、javascript が近年かなり実行速度の向上を続けていることもあって、それなりに高速です。余程複雑なことをしなければ 60 fps くらいまでなら結構余裕でキープできます。試しに、以前きまぐれで作った canvas 製ゲームを貼っておきます。※jsdo.it に上げたやつです
WebGL を用いずに canvas の一般的な描画能力だけで処理しても、このくらいのことはできます。いわゆるソフトウェアによるレンダリングなので限界はありますが、意外とできちゃうもんだなという感じもするのではないでしょうか。
WebGL と canvas
さて、canvas タグを用いれば、比較的自由に描画処理を行なうことができるというところまでは理解できたと思います。気になるのは、如何にして WebGL を使った処理を行なうのかということでしょう。
実は、先ほど貼り付けた jsdo.it に上げたミニゲームは、canvas タグの 2d コンテキストによる実装で成り立っています。
コンテキストとは要するに、描画処理を行なうための API を実装したオブジェクトのことです。このオブジェクトは、各種描画を行なうためのメソッドをはじめとして、描画を行なう際に必要となるパラメータとしてのプロパティなど、それら一式をまるまる持っています。全ての設定や処理を一括で行なってくれる canvas 描画の司令塔のような役割だと考えればわかりやすいでしょうか。
2d コンテキストは、先ほどから書いているように図形や文字や、あるいは画像データなどを描画できます。しかし、そこまでです。それ以上のことはできません。2d の名が示すように、二次元の描画処理をサポートするのが 2d コンテキストなのですね。
それに対して、WebGL は 三次元、つまり 3D で描画することを可能にします。WebGL を扱うためのコンテキストは先ほどの 2d コンテキストとは厳密に区別されており、それは webgl コンテキストと呼ばれています。
webgl コンテキストは、2d コンテキストと同様にオブジェクトとして振る舞い、様々なプロパティやメソッドを実装しています。webgl コンテキストを介して処理を行うことで、初めて WebGL による描画が可能になるわけです。
まとめ
今回は canvas タグと、canvas に内包されているコンテキストについてお話しました。
コンテキストは、当テキスト執筆時では 2d と webgl の 2 種類しか定義されていません。しかも、webgl コンテキストに関してはまだ暫定的に別名(experimental-webgl など)で指定しなければならない状況です。今後、新しいコンテキストのタイプが登場する可能性もありますが、これに関しては現状なんとも言えません。
しかし、当サイトではあくまでも WebGL の使い方を解説していきますので、たとえば 2d コンテキストや、今後登場するであろう別のコンテキストタイプについては解説しない予定です。※2d については別コンテンツとしてやるかもしれませんが……
次回は、3D 描画のための基礎知識のおさらいをします。
