WebGLその5：テクスチャ描画

WebGL

■index.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SanoWebGLSample05.html</title>
</head>
<script type="text/javascript" src="webglut01.js"></script>
<script id="shader-vs" type="x-shader/x-vertex">
//------------------------------------------------------------------------
//    ヴァーテックスシェーダー
//------------------------------------------------------------------------
attribute vec2 pos;
attribute vec2 uv;

varying vec2 texCoord;
void main(void)
{
    gl_Position = vec4( pos, 0.0, 1.0 );
    texCoord = uv;
}
</script>
<script id="shader-fs" type="x-shader/x-fragment">
//------------------------------------------------------------------------
//    ピクセルシェーダー
//------------------------------------------------------------------------
#ifdef GL_ES
precision highp float;
#endif

uniform sampler2D sampler2d;
varying vec2 texCoord;
void main(void)
{
    gl_FragColor = texture2D( sampler2d, texCoord );
}
</script>
<script>
//------------------------------------------------------------------------
//    
//------------------------------------------------------------------------
var    gl;             //gl用コンテキスト
var    vertexModel;    //頂点
var    uvModel;        //UV
var    imageData;      //イメージデータ
var    shaderProgram;  //シェーダー
//------------------------------------------------------------------------
//    初期化
//------------------------------------------------------------------------
function    init()
{
    // gl用コンテキストを取得
    gl    = Ginit( document.getElementById("c") );
    //    
    gl.enable( gl.DEPTH_TEST );
    gl.enable( gl.BLEND );
    gl.blendFunc( gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA ); 
    gl.enable( gl.TEXTURE_2D );
    // シェーダ初期化
    shaderProgram    = GinitShaders( "shader-vs", "shader-fs" );
    shaderProgram.vertexPositionAttribute = gl.getAttribLocation( shaderProgram, "pos" );
    gl.enableVertexAttribArray( shaderProgram.vertexPositionAttribute );
    shaderProgram.textureCoordAttribute = gl.getAttribLocation( shaderProgram, "uv" );
    gl.enableVertexAttribArray( shaderProgram.textureCoordAttribute );
    // モデル設定
    initMode();
    // メインループ登録
    setInterval( "MainLoop()", 33 );
}
//------------------------------------------------------------------------
//    メインループ
//------------------------------------------------------------------------
function MainLoop()
{
    // 画面クリア
    Gclear();
    // 描画
    drawMode();
}
//------------------------------------------------------------------------
//モデル情報の初期化
//------------------------------------------------------------------------
function    initMode()
{
    // 頂点情報の設定
    var    vertices    =[
         0.0,  0.5,
        -0.5, -0.5,
         0.5, -0.5
    ];
    vertexModel    = gl.createBuffer();
    gl.bindBuffer( gl.ARRAY_BUFFER, vertexModel );
    gl.bufferData( gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW );        
    vertexModel.itemSize = 2;
    vertexModel.numItems = 3;
    // UV情報の設定
    var uvData = [
        1.0, 0.0,
        0.0, 0.0,
        1.0, 1.0
    ];
    uvModel = gl.createBuffer();
    gl.bindBuffer( gl.ARRAY_BUFFER, uvModel );
    gl.bufferData( gl.ARRAY_BUFFER, new Float32Array(uvData), gl.STATIC_DRAW );        
    uvModel.itemSize = 2;
    uvModel.numItems = 3;
    // イメージ情報の設定
    imageData = gl.createTexture();
    imageData.image = new Image();
    imageData.image.onload = function() { 
        gl.bindTexture( gl.TEXTURE_2D, imageData );
        gl.texImage2D( gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, imageData.image );
        gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR );
        gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR );
        gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE );
        gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE );
        gl.bindTexture( gl.TEXTURE_2D, null );
    }
    imageData.image.src = "ren01.jpg";
}
//------------------------------------------------------------------------
//    モデル情報の描画
//------------------------------------------------------------------------
function    drawMode()
{
    gl.bindBuffer( gl.ARRAY_BUFFER, vertexModel );
    gl.vertexAttribPointer( shaderProgram.vertexPositionAttribute, vertexModel.itemSize, gl.FLOAT, false, 0, 0 );

    gl.bindBuffer( gl.ARRAY_BUFFER, uvModel );
    gl.vertexAttribPointer(　shaderProgram.textureCoordAttribute, uvModel.itemSize, gl.FLOAT, false, 0, 0);

    gl.bindTexture( gl.TEXTURE_2D, imageData );

    gl.drawArrays( gl.TRIANGLES, 0, vertexModel.numItems );
}

</script>
</head>
<body onload="init();">
<canvas id="c" style="border:none" width="640" height="480">
</body>
</html>

■[WebGLその3：ポリゴン表示]で使われた「webglut01.js」を使います。
http://d.hatena.ne.jp/sanoh/20120328

■イメージファイル
このサンプルではまったのが、テクスチャファイルの場所、最初、ローカル環境で開発していたのですが、いくらやってもファイルが読み込めず、サーバにおいたら、すんなり読み込めてショックでした。
「ren01.jpg」

■UV値は頂点カラーと同じように、別途、送りましょう
あと、テクスチャ表示には、おまじないのようにこれを記述

    gl.enable( gl.DEPTH_TEST );
    gl.enable( gl.BLEND );
    gl.blendFunc( gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA ); 
    gl.enable( gl.TEXTURE_2D );

■こを描画すると