■WebGLその１：初期化

WebGL

WebGL自体、Chrome、FireFoxだけの対応なのですが、今後、サポートしていくブラウザが増えていくことを期待（IE10はWebGL対応してないので、残念）

なにあともあれ、WebGLを初期化し、黒い画面を出してみましょう。
■index.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SanoWebGLSample01.html</title>
</head>
<script>
//------------------------------------------------------------------------
//    
//------------------------------------------------------------------------
var    gl;                //gl用コンテキスト
//------------------------------------------------------------------------
//    初期化
//------------------------------------------------------------------------
function init()
{
    // 初期化
    var canvas = document.getElementById( "c" );
    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 );
    //    メインループ登録
    setInterval( "MainLoop()", 33 );
}
//------------------------------------------------------------------------
//    メインループ
//------------------------------------------------------------------------
{
    //画面クリア
    gl.viewport( 0, 0, gl.viewportWidth, gl.viewportHeight );
    gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT );
}
</script>
<body onload="init();">
<canvas id="c" style="border:none" width="640" height="480">
</body>
</html>