[WebGL] WebGLを使ってみる

by
3517 PV

今回から実際にWebGLを使って何らかのオブジェクトを描画してみたいと思います。

まずは、サンプルを記します。

<!DOCTYPE html>
<head>
    <title>Hello WebGL</title>
</head>
<body onload="main()">
    <canvas id="sample" width="640" height="480">キャンバスがサポートされていないよ！</canvas>

    <script src="./webgl-utils.js"></script>

    <script>
        alert("ようこそWebGLへ")
        function main() {
            // canvas要素取得
            var canvas = document.getElementById("sample");

            // WebGL描画コンテキスト取得
            var gl = WebGLUtils.setupWebGL(canvas);
            if (!gl) {
                alert("WebGL用コンテキストの取得に失敗！");
                return;
            }

            // キャンバスをクリアする色を指定
            gl.clearColor(1.0, 1.0, 0.0, 1.0);
            // キャンバスクリア
            gl.clear();
        }
    </script>
</body>
</html>

上記を正しく動作させるためには、webgl-utils.jsというJavascriptファイルを同階層に配置する必要があります。
これは下記サイトからダウンロードできます。

http://code.google.com/p/webglsamples/source/browse/book/webgl-utils.js?r=41401f8a69b1f8d32c6863ac8c1953c8e1e8eba0

リンク先のソースコードをwebgl-utils.jsというファイルにコピー＆ペーストして配置します。
上記Javascriptは以下のようにインクルードします。

    <script src="./webgl-utils.js"></script>

これでWebGLの使用準備は完了です。

次に、WebGLの初期化を行います。
HTML5ではキャンバス要素をIDで取得し、キャンバスから描画用のコンテキストを取得してそこに文字や図形などを描画していました。
WebGLではキャンバスからWebGL専用の描画コンテキストを取得してこれに描画します。

    // WebGL描画コンテキスト取得
    var gl = WebGLUtils.setupWebGL(canvas);

キャンバスにさまざまなオブジェクトを動的に描画していくためには、キャンバス内を随時クリアしていかなくてはなりません。
今回はこのクリアのみ行う処理を書いています。

    // キャンバスをクリアする色を指定
    gl.clearColor(1.0, 1.0, 0.0, 1.0);
    // キャンバスクリア
    gl.clear(gl.CLEAR_BUFFER_BIT);

gl.clearColor()でクリア色を指定し、gl.clear()でクリアを実行しています。
次回からは図形を実際に描画してみたいと思います。

ftvoid
Follow :