こんにちわ、オオバです。

生のWebGLで三角形を描画するショートコード

この記事書いたのが既に3年前。

あれから全くWebGLを書かずに過ごし、
今また再ブームが自分の中に到来しております。

生WebGL最小コード
<!DOCTYPE html>  
<html>  
    <head>  
        <title>mingl</title>  
        <meta charset="UTF-8">  
        <script type="text/javascript" src="script.js"></script>  
        <script id="vs" type="x-shader/vertex">  
attribute vec3 pos;  
void main()  
{
    gl_Position = vec4(pos, 1.0);  
}
        </script>  

        <script id="fs" type="x-shader/fragment">  
void main()  
{
    gl_FragColor = vec4(1,0,0,1);  
}
        </script>  
    </head>  
    <body>  
        <canvas id='canvas'></canvas>  
    </body>  
</html>  
window.onload = function()  
{
    var canvas = document.getElementById('canvas');  
    canvas.width = canvas.height = 300;  
    var gl = canvas.getContext('webgl');  
    var vsObj = gl.createShader(gl.VERTEX_SHADER);  
    gl.shaderSource(vsObj, document.getElementById('vs').text);  
    gl.compileShader(vsObj);  

    var fsObj = gl.createShader(gl.FRAGMENT_SHADER);  
    gl.shaderSource(fsObj, document.getElementById('fs').text);  
    gl.compileShader(fsObj);  

    var prog = gl.createProgram();  
    gl.attachShader(prog, vsObj);  
    gl.attachShader(prog, fsObj);  

    gl.linkProgram(prog);  

    if (gl.getProgramParameter(prog, gl.LINK_STATUS)==false)  
    {
        console.log(gl.getProgramInfoLog(prog));  
        return;  
    }
    gl.useProgram(prog);  

    var positionAttr = gl.getAttribLocation(prog, "pos");  

    var data =[  
        0, 0.5, 0.5,  
        -0.5, -0.5, 0,  
        0.5, -0.5, -0.2  
    ];  

    var vbo = gl.createBuffer();  
    gl.bindBuffer(gl.ARRAY_BUFFER, vbo);  
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);  

    gl.enableVertexAttribArray(positionAttr);  
    gl.vertexAttribPointer(positionAttr, 3, gl.FLOAT, false, 0, 0);  
    gl.bindBuffer(gl.ARRAY_BUFFER,null);  

    gl.clearColor(0,0,0,1);  
    gl.clear(gl.COLOR_BUFFER_BIT);  

    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3);  
};  

まずは勘を取り戻すために、ライブラリなど使用せず
生WebGLで三角形を出してみようと思って書きました。

もう諦めないWebGL_0

実行するとこんな邪悪な色味の三角形が表示されます。

  1. シェーダーをコンパイルする
  2. プログラムオブジェクトを作って、シェーダーをリンクする
  3. 頂点座標のバッファを作って頂点情報をセットする
  4. 頂点シェーダーの頂点属性posに値をバインドして渡す
  5. 画面をクリアして、描画

という手順を踏んでいます。

あきらめたくないので、
WebGL 開発支援サイト wgld.org
こちらのサイトを参考に1つずつお題をこなして、コンスタントにアウトプットしていきたいです。

オススメ記事