2012年1月28日土曜日

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 件のコメント: