WebGLその4：頂点カラー

WebGL

ポリゴンが前回だせたので、頂点に色をつけてみようと思います。
■index.html

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

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

varying vec4 vColor;
void main(void)
{
    gl_FragColor = vColor;
}
</script>
<script>
//------------------------------------------------------------------------
//    
//------------------------------------------------------------------------
var    gl;                //gl用コンテキスト
var    vertexModel;    //頂点
var    colorModel;        //頂点カラー
var    shaderProgram;    //シェーダー
//------------------------------------------------------------------------
//    初期化
//------------------------------------------------------------------------
function    init()
{
    // gl用コンテキストを取得
    gl    = Ginit( document.getElementById("c") );
    // シェーダ初期化
    shaderProgram    = GinitShaders( "shader-vs", "shader-fs" );
    shaderProgram.vertexPositionAttribute = gl.getAttribLocation( shaderProgram, "pos" );
    gl.enableVertexAttribArray( shaderProgram.vertexPositionAttribute );
    shaderProgram.vertexColorAttribute = gl.getAttribLocation( shaderProgram, "color" );
    gl.enableVertexAttribArray( shaderProgram.vertexColorAttribute );
    //    モデル設定
    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;
    //    頂点カラーの設定
    var colors = [
        1.0, 0.0, 0.0, 1.0,
        0.0, 1.0, 0.0, 1.0,
        0.0, 0.0, 1.0, 1.0
    ];
    colorModel = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, colorModel);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
    colorModel.itemSize = 4;
    colorModel.numItems = 3;
}
//------------------------------------------------------------------------
//    モデル情報の描画
//------------------------------------------------------------------------
function    drawMode()
{
    gl.bindBuffer( gl.ARRAY_BUFFER, vertexModel );
    gl.vertexAttribPointer( shaderProgram.vertexPositionAttribute, vertexModel.itemSize, gl.FLOAT, false, 0, 0 );

    gl.bindBuffer( gl.ARRAY_BUFFER, colorModel );
    gl.vertexAttribPointer(　shaderProgram.vertexColorAttribute, colorModel.itemSize, gl.FLOAT, false, 0, 0);

    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

■モデルデータと頂点カラーデータが別々になっているのが、最初戸惑いましたが慣れてしまえば、こんなものです。
ヴァーテックスシェーダとピクセルしぇーだ「vColor」を使って情報のやり取りをしています。
ちゃんと、間は保管してくれるんですね。