LoginSignup
26

More than 3 years have passed since last update.

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

Last updated at Posted at 2015-01-18

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

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

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

ポリゴン1枚を描画する 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 超絶圧縮コードを紐解いてみる

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
26