WebGL を使ってみました

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

WebGLが気になると言いだして約1年の月日が経ちました. 当時は, Chromeでのみ, しかも起動オプションを指定しないと動かなかったWebGLでしたが, 今ではChromeはもちろんのことIE9やFireFoxでも動作するようになりました.

まったく使いこなせてはいないですが、とりあえず動作するサンプルを作ったので載せておきます.

SAMPLE

ここを下のリンクをクリックすると実際に動作するページに飛びます. 三角形を3つ表示するシンプルなプログラムです.

実際のソースは下のリンクからダウンロードできます

Download

FLOW

  1. canvasを取得
  2. canvasからgl用コンテキストを取得
  3. シェーダ初期化
  4. 頂点初期化
  5. 描画

SOURCE

ソースです。解説は直接コードにコメントとして書いています。

HTML

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8" />
        <title>WebGL Sample</title>
        
        <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 id="shader-vs" type="x-shader/x-vertex">
            attribute vec3 pos;
            
            void main() {
                gl_Position = vec4(pos, 1.0);
            }
        </script>
        
        <script type="text/javascript">
            "use strict";

            var $id = function(id)
            {
                return document.getElementById(id);
            };
            
        </script>
        <script type="text/javascript" src="webgl-util.js"></script>
        <script type="text/javascript" src="script.js"></script>
    </head>
    
    <body onload="init();">
        <canvas id="c" style="border:none" width="640" height="480">
    </body>
</html>
    

JavaScript

/**
 * @author phi
 */


(function(np){
    
    var triangleVertexPositionBuffer = null;
    
    /**
     * 初期化
     */
    np.init = function()
    {
        // canvasを取得
        var canvas = $id("c");
        // canvasからgl用コンテキストを取得
        initGL(canvas);
        
        // シェーダ初期化
        var vertex_shader   = $id("shader-vs").innerText;
        var fragment_shader = $id("shader-fs").innerText;
        initShaders(vertex_shader, fragment_shader);
        
        // 頂点初期化
        initBuffers();
        
        // 描画
        setInterval(
            function() { drawScene(); }, 1000/30
            );
    }
        
    
    /**
     * 頂点バッファ初期化
     */
    var initBuffers = function()
    {
        // バッファを生成
        triangleVertexPositionBuffer = createBuffer();
        // バッファに頂点をセット
        initBuffer(triangleVertexPositionBuffer, [
            0.0,  0.25, 0.0,
            -0.25, -0.25, 0.0,
            0.25, -0.25, 0.0,
            
            -0.5,  0.25, 0.0,
            -0.75, -0.25, 0.0,
            -0.25, -0.25, 0.0,
            
            0.5,  0.25, 0.0,
            0.25, -0.25, 0.0,
            0.75, -0.25, 0.0
        ]);
    }
    
    
    /**
     * 描画
     */
    function drawScene(gl)
    {
        // 画面クリア
        clearDisplay(gl);
        // 描画        
        drawArrays(triangleVertexPositionBuffer);
    }

})(this);
    

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT