WebGLその3：ポリゴン表示

WebGL

初期化もできたので、さっそくポリゴンを表示しましょう
■index.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SanoWebGLSample03.html</title>
</head>
<script type="text/javascript" src="webglut01.js"></script>
<script id="shader-vs" type="x-shader/x-vertex">
//------------------------------------------------------------------------
//    ヴァーテックスシェーダー
//------------------------------------------------------------------------
attribute vec2 pos;
void main(void)
{
    gl_Position = vec4( pos, 0.0, 1.0 );
}
</script>
<script id="shader-fs" type="x-shader/x-fragment">
//------------------------------------------------------------------------
//    ピクセルシェーダー
//------------------------------------------------------------------------
void main(void)
{
    gl_FragColor = vec4( 1.0, 1.0, 1.0, 1.0 );
}
</script>
<script>
//------------------------------------------------------------------------
//    
//------------------------------------------------------------------------
var    gl;                //gl用コンテキスト
var    vertexModel;    //頂点
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 );
    //    モデル設定
    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;
}
//------------------------------------------------------------------------
//    モデル情報の描画
//------------------------------------------------------------------------
function    drawMode()
{
    gl.bindBuffer( gl.ARRAY_BUFFER, vertexModel );
    gl.vertexAttribPointer( shaderProgram.vertexPositionAttribute, vertexModel.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>

■webglut01.js

(function(np){
    var gl = null;
    np.Ginit = function( canvas )
    {
        try {
            gl = canvas.getContext( "experimental-webgl" );
            gl.viewportWidth = canvas.width;
            gl.viewportHeight= canvas.height;
        }
        catch (e) {}

        if (!gl) {
            alert( "WebGL に対応してないです" );
            return;
        }
        gl.clearColor( 0.0, 0.0, 0.0, 1.0 );
        gl.clearDepth( 1.0 );
        gl.enable( gl.DEPTH_TEST );
        gl.depthFunc( gl.LEQUAL );
        return gl;
    };
    //--------------------------------------------------------------
    //
    //--------------------------------------------------------------
    np.Gclear = function()
    {
        gl.viewport( 0, 0, gl.viewportWidth, gl.viewportHeight );
        gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT );
    }

    //--------------------------------------------------------------
    //
    //--------------------------------------------------------------
    var ggetShader = function( gl, str, type )
    {
        var shader;

        shader = gl.createShader( type )
        gl.shaderSource( shader, str );
        gl.compileShader( shader );
        if (!gl.getShaderParameter( shader, gl.COMPILE_STATUS ) ) {
            alert( gl.getShaderInfoLog( shader ) );
            return null;
        }
        return shader;
    };

    //--------------------------------------------------------------
    //
    //--------------------------------------------------------------
    np.GinitShaders = function( vsName, fsName )
    {
        var    vsStr    = document.getElementById( vsName ).innerText;
        var    fsStr    = document.getElementById( fsName ).innerText;
        var    shaderProgram;
        shaderProgram  = gl.createProgram();

        var vertex_shader   = ggetShader( gl, vsStr, gl.VERTEX_SHADER );
        var fragment_shader = ggetShader( gl, fsStr, gl.FRAGMENT_SHADER );
        
        gl.attachShader( shaderProgram, vertex_shader );
        gl.attachShader( shaderProgram, fragment_shader );
        
        gl.linkProgram( shaderProgram );
        if (!gl.getProgramParameter( shaderProgram, gl.LINK_STATUS ) )
        {
            alert( "initShaders" );
        }
        gl.useProgram( shaderProgram );

        return    shaderProgram;
    };
})(this);

■シェーダーが必要
固定シェーダーがないので、簡単なシェーダーを書きましょう
[ヴァーテックスシェーダー]

attribute vec2 pos;
void main(void)
{
    gl_Position = vec4( pos, 0.0, 1.0 );
}

[ピクセルシェーダー]

void main(void)
{
    gl_FragColor = vec4( 1.0, 1.0, 1.0, 1.0 );
}