CX's JavaScript Diary

 | 

2015-01-20HTA で WebGL を使う方法(その3) このエントリーを含むブックマーク

cx2020150120

HTA で WebGL を使うシリーズ第三弾です。

今回は、前回のサンプルコードをダイエット(HTML のコード込みで200行→100行)させてみました。

本サンプルはライブラリを使用していない為、HTA ファイルだけで動作します。

<!DOCTYPE html>
<html>
<head>
<title>Hello, WebGL World!</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<script id="vs" type="x-shader/x-vertex">
attribute vec3 position;
attribute vec4 color;
varying   vec4 vColor;

void main()
{
    vColor = color;
    gl_Position = vec4(position, 1.0);
}
</script>

<script id="fs" type="x-shader/x-fragment">
precision mediump float;
varying   vec4 vColor;

void main()
{
    gl_FragColor = vColor;
}
</script>

<canvas id="c" width="465" height="465"></canvas>

<script>
var c, gl;

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);
    var v = document.getElementById("vs").text;
    var f = document.getElementById("fs").text;
    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.bindAttribLocation(p, 1, "color");
    gl.enableVertexAttribArray(0);
    gl.enableVertexAttribArray(1);
}

function draw() {
    // 頂点データ
    var data = [ 
         0.0, 1.0, 0.0,
         1.0, 0.0, 0.0,
        -1.0, 0.0, 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);

    // 色データ
    var colors = [
        1.0, 0.0, 0.0, 1.0,
        0.0, 1.0, 0.0, 1.0,
        0.0, 0.0, 1.0, 1.0
    ];
    gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
    gl.vertexAttribPointer(1, 4, gl.FLOAT, false, 0, 0);
    
    // ポリゴンの描画
    gl.drawArrays(gl.TRIANGLES, 0, 3);
    gl.flush();
}

initWebGL();
initShaders();
draw();
</script>
</body>
</html>
 |