[忙しい人向け] 30行から始めるWebGL

WebGL を試そうと思って、ポリゴン１枚書こうとしたら、100行以上のコードを目のあたりにして、挫折した人も多いのではないかと思います。

ただ、初期化処理やエラー処理を省いたら、ポリゴン１枚書く程度であれば、30行程度で行えたりします。

忙しい人向けに、あらゆる贅肉をそぎ落とした簡易版のコードを書いてみました。

ポリゴン１枚を描画する WebGL コード

index.js

var c, gl;
var v = "attribute vec3 position; void main() { gl_Position = vec4(position, 1.0); }";
var f = "precision mediump float; void main() { gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0); }";

function initWebGL() {
    c = document.getElementById("c");
    gl = c.getContext("experimental-webgl");
}

function initShaders() {
    var p = gl.createProgram();
    var vs = gl.createShader(gl.VERTEX_SHADER);
    var fs = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(vs, v);
    gl.shaderSource(fs, f);
    gl.compileShader(vs);
    gl.compileShader(fs);
    gl.attachShader(p, vs);
    gl.attachShader(p, fs);
    gl.linkProgram(p);
    gl.useProgram(p);
    gl.bindAttribLocation(p, 0, "position");
    gl.enableVertexAttribArray(0);
}

function draw() {
    var data = [ 0.0, 0.5, 0.0, -0.5, -0.5, 0.0, 0.5, -0.5, 0.0 ];
    gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);
    gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
    gl.drawArrays(gl.TRIANGLES, 0, 3);
    gl.flush();
}

initWebGL();
initShaders();
draw();

推奨するコードではないですが、学習用に短いコードで試したいという用途であれば、使えるのではないかと思います。

実際は、もう少し削れるのですが、これ以上消すと、意味不明なコードになるので、そこまではしないでおきます。

コードのダウンロード

実際に動作するコードは jsdo.it github にアップしてありますので、ご利用ください。
[簡易版] 30行で WebGL を試してみるテスト
※ jsdo.it のサービス終了に伴い、リンク先を github に変更しました

JS1k について

さらなる、圧縮を目指したいという方がいらっしゃいましたら、JS1k の作品を解析するのがよいのではないかと思います。

[WebGL寄稿] JS1k 作品で見つけた WebGL 超絶圧縮コードを紐解いてみる