WebGLでの文字描画 / magicien　

WebGLで文字を表示させようとすると、いろいろと面倒なので、そのときに使った方法。

2Dの文字や図形を描画する場合、WebGLでまともに実現しようとすると、canvasのオブジェクトをもう一つ作って、字を描いて、テクスチャに貼付けて、それをレンダリングする、というような流れになるかと思います。
が、わざわざそんなことしなくても、作ったcanvasをそのままHTMLの画面上に貼付けた方が手間がかからないし、描画も早かったので、下のようなコードで3Dのcanvasの上に2Dのcanvasを同じサイズ、位置で重ねて使いました。

function create2DContext(canvas3D) {
  var canvas2D = document.createElement('canvas');
  canvas3D.insert( { after: canvas2D } );
  Element.setStyle( canvas2D, {
    position: 'absolute',
    'z-index': 10
  });
  Position.clone( canvas3D, canvas2D );
  canvas2D.width = canvas3D.width
  canvas2D.height = canvas3D.height

  var context2D = canvas2D.getContext('2d');
  return context2D;
}

prototype.js、scriptaculousを使っているので、ソースはそのまま使えないかもですが...
1つのcanvasで2Dのコンテキストと3Dのコンテキストを両方取得できれば問題無いのですが、一度どちらかのコンテキストを取得してしまうと、もう一方のコンテキストが取得できなくなってしまうため、2D用canvasと3D用canvasの2つが必要になるわけです。