HTML5 Canvas 2D Context で描いた内容を WebGL の テクスチャにする

追記 2013/10/23: 書いた「WebGLのTextureをCanvasに文字(Web Fonts)を書いて動的に作ってみる(jQuery/ThreeJS使用, Firefox 24.0/Safari 6.0.5で動作)」

一応まとめておく．

やってみた．
ここのこちらをベースにする．

０．他のjsファイルの呼び出しをどうにかしておく

downloadして配置した場合はパスを変えておく．以下の3種が必要となる．

<script type="text/javascript" src="./webgl-utils.js"></script>

<script type="text/javascript" src="./J3DI.js"> </script>

<script type="text/javascript" src="./J3DIMath.js"> </script>

webgl-utils.js link

J3DI.js link

J3DIMath.js link

１．追加Javascriptコード

<script type="text/javascript">

var imageData;

var spiritTexture;



function updateCanvas() {

if (!spiritTexture) {

spiritTexture= gl.createTexture(512, 512);

}

var canvas = document.getElementById('canvas');

if ( ! canvas || ! canvas.getContext ) { return false; }

var ctx = canvas.getContext('2d');

ctx.fillStyle = "rgba(255, 255, 255, 255)";

ctx.fillRect(0, 0, canvas.width, canvas.height);



ctx.fillStyle= "rgba(0,0,0,255)";

ctx.font = "italic bold 52px 'HiraMinProN-W3'";

ctx.fillText("itailc bold 52px", 10, 64);

ctx.fillText("ヒラギノ明朝ProN", 10, 128);

ctx.fillText("(canvas 512x512)", 10, 192);



ctx.save();

var gradient = ctx.createLinearGradient(0, 0, 150, 100);

gradient.addColorStop(0, "rgb(255, 255, 0)");

gradient.addColorStop(1, "rgb(255, 0, 0)");

ctx.fillStyle = gradient;

ctx.translate(0, 0);

ctx.rotate(Math.PI/4.0);

ctx.fillText((new Date()).toLocaleString(), 0, 0);

ctx.restore();



imageData= ctx.getImageData(0, 0, 512, 512);

};



function updateTexture() {

gl.bindTexture(gl.TEXTURE_2D, spiritTexture);



gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, imageData);



gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);

gl.generateMipmap(gl.TEXTURE_2D);

gl.bindTexture(gl.TEXTURE_2D, null);

}

</script>

２．追加HTMLコード(Javascriptで動的でもできるかも)
'body'タグの閉じる前に追加．

<canvas style='visibility:hidden;' id='canvas' width='512' height='512'></canvas>

３．追加したJavascriptの関数を呼び出させる
繰り返し呼ばれるdrawPicture関数の先頭に追加コードのCanvasの更新, Textureの更新の関数を呼びださせる．

function drawPicture(gl)

{

updateCanvas();

updateTexture();



…



}

結果

toDataURLを利用した際のだが，動画．(上記のやってみたはgetImageDataでImageDataを利用している)

これはgetImageDataを利用した場合