WebGLでのゲーム開発。ぼちぼちと進んでいます。
ゲームのジャンルは何かというとRPGなのですが、最近のRPGといえば、キャラクター同士の会話シーンがありますね。ノベルゲームとかADVゲームみたいなゲームによくある、キャラクターの立ち絵があって、画面下にメッセージボックスがある感じの。
ああいうのは、WebGLで描画するより、2D Canvasで描画する方がいろいろとやりやすいです。
とはいえ、それでも2D Canvasを直に触るのもめんどいので、enchant.jsを採用しました。enchant.js、そういうノベルゲームを簡単に作れるプラグインがありますし（そのプラグインまで実際に採用するかは別にして）
最近のenchant.jsは、デフォルトではDOMベースではなく、Canvasベースの描画システムです。
さてさて、本題はここから。
WebGLは、jpgやpngといった画像ファイルだけでなく、2D Canvasもテクスチャとして利用できるのです。
ということは、enchant.jsで描画した2D Canvasを、WebGLのテクスチャとして利用できるはずなのです。
実際に、こちらのサイト様のコードをベースに、実験してみました。
http://edotprintstacktrace.blogspot.jp/2012/01/html5-canvas-2d-context-webgl.html
実験結果がこちらの動画。
http://www.screencast.com/t/P6rMKeKn
通常のテクスチャ（犬の画像）に、マルチテクスチャでenchant.jsで描画したCanvasテクスチャ（クマ）を合成しています。
enchant.jsのCanvasの中で、描画していない部分（クマの周り）は、アルファが0なので、アルファ抜きもできているわけです。
試してませんが、当然アルファブレンディングもできるはずですね。
というわけで、WebGLと2D Canvasの描画の使い分け、おすすめです。
