HTML5 Canvas 2D Context で描いた内容を WebGL の テクスチャにする
追記 2013/10/23: 書いた「WebGLのTextureをCanvasに文字(Web Fonts)を書いて動的に作ってみる(jQuery/ThreeJS使用, Firefox 24.0/Safari 6.0.5で動作)」
一応まとめておく.
やってみた.
ここのこちらをベースにする.
0.他の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
1.追加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>
2.追加HTMLコード(Javascriptで動的でもできるかも)
'body'タグの閉じる前に追加.
<canvas style='visibility:hidden;' id='canvas' width='512' height='512'></canvas>
3.追加したJavascriptの関数を呼び出させる
繰り返し呼ばれるdrawPicture関数の先頭に追加コードのCanvasの更新, Textureの更新の関数を呼びださせる.
function drawPicture(gl)
{
updateCanvas();
updateTexture();
…
}
結果
toDataURLを利用した際のだが,動画.(上記のやってみたはgetImageDataでImageDataを利用している)
これはgetImageDataを利用した場合
0 件のコメント:
コメントを投稿