WebGL を始める前に canvas を知る
HTML5
canvasタグ
リッチな表現ができるようになった
WebGLもcanvasタグを使う
canvas タグの基礎知識
従来よりある img タグなどと同様、
自由に大きさなどを指定できる矩形領域
javascript によって矩形領域内に操作を加えることが可能
図形、文字などを自由に描画することができる
それらに影をつけたり
色を塗ったり
あるいは回転させて描画させたりなど
かなり柔軟に操作できます。
また、ウェブ上で一般的に使われているフォーマット
(gif、jpg、png など)
であれば、画像を使った描画処理も可能となっています。
ただし、
アニメーション処理を一括で管理するようなオブジェクトやメソッドは存在しません。
つまり、動きのあるコンテンツを作成するためには、
javascript による恒常的なループ処理を自前で実装してやる必要があります。
javascriptは近年はかなり高速
余程複雑なことをしなければ 60 fps くらいまでなら結構余裕でキープできます。
WebGL を用いずに canvas の一般的な描画能力だけで処理しても、ある程度はできる
WebGL と canvas
如何にして WebGL を使った処理を行なうのか
canvas タグには 2d コンテキストがある
描画処理を行なうための API を実装したオブジェクトのこと
このオブジェクトは、
各種描画を行なうためのメソッドをはじめとして、
描画を行なう際に必要となるパラメータとしてのプロパティなど、
それら一式をまるまる持っています。
全ての設定や処理を一括で行なってくれる canvas 描画の司令塔のような役割だと考えればわかりやすいでしょうか。
図形や文字や、あるいは画像データなどを描画できます。
それ以上のことはできません。
2d の名が示すように、二次元の描画処理をサポートするのが 2d コンテキストなのですね。
それに対して、
WebGL は 3D で描画することを可能にします。
WebGL を扱うためのコンテキストは先ほどの 2d コンテキストとは厳密に区別されてる
それは webgl コンテキストと呼ばれています。
webgl コンテキストは
2d コンテキストと同様にオブジェクトとして振る舞い、
様々なプロパティやメソッドを実装しています。
webgl コンテキストを介して処理を行うことで、初めて WebGL による描画が可能になるわけです。