WebGLで最小限のコードで三角形を描く

WebGLのはじめの一歩をさがしていたところ、こんなページ(https://sites.google.com/site/hackthewebgl/learning-webglhon-yaku/the-lessons/lesson-1 )を見つけまして、かなりコンパクトでよいとは思ったものの、まだ外部の行列演算ライブラリを使ってパースペクティブ変換を行うなど「最初の一歩」としてはムダなコードが多いので、不要なところを削ってみました。ファイル一つで実行可能です。

参考になれば幸いです。

```html:triangle.html
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>WebGL triangle</title>

    <script id="shader-vs" type="x-shader/x-vertex">
        attribute vec3 aVertexPosition;

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

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

        void main(void) {
            gl_FragColor = vec4(0.9, 0.9, 0.9, 1.0);
        }
    </script>

    <script type="text/javascript">
        var gl;
        var shaderProgram;
        var triangleVertexPositionBuffer;

        function initGL(canvas) {
            try {
                gl = canvas.getContext("experimental-webgl");
                gl.viewport(0, 0, canvas.width, canvas.height);
            } catch (e) {
            }
            if (!gl) {
                alert("Could not initialise WebGL, sorry :-(");
            }
        }

        function getShader(id) {
            var shaderScript = document.getElementById(id);
            if (!shaderScript) {
                return null;
            }

            var str = "";
            var k = shaderScript.firstChild;
            while (k) {
                if (k.nodeType == 3) {
                    str += k.textContent;
                }
                k = k.nextSibling;
            }

            var shader;
            if (shaderScript.type == "x-shader/x-fragment") {
                shader = gl.createShader(gl.FRAGMENT_SHADER);
            } else if (shaderScript.type == "x-shader/x-vertex") {
                shader = gl.createShader(gl.VERTEX_SHADER);
            } else {
                return null;
            }

            gl.shaderSource(shader, str);
            gl.compileShader(shader);

            if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
                alert(gl.getShaderInfoLog(shader));
                return null;
            }

            return shader;
        }

        function initShaders() {
            var fragmentShader = getShader("shader-fs");
            var vertexShader = getShader("shader-vs");

            shaderProgram = gl.createProgram();
            gl.attachShader(shaderProgram, vertexShader);
            gl.attachShader(shaderProgram, fragmentShader);
            gl.linkProgram(shaderProgram);

            if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
                alert("Could not initialise shaders");
            }

            gl.useProgram(shaderProgram);

            shaderProgram.vertexPositionAttribute =
                gl.getAttribLocation(shaderProgram, "aVertexPosition");
            gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
        }

        function initBuffers() {
            triangleVertexPositionBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
            var vertices = [
                 0.0,  1.0,  0.0,
                -1.0, -1.0,  0.0,
                 1.0, -1.0,  0.0
            ];
            gl.bufferData(
                gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
            triangleVertexPositionBuffer.itemSize = 3;
            triangleVertexPositionBuffer.numItems = 3;
        }


        function drawScene() {
            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

            gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
            gl.vertexAttribPointer(
                shaderProgram.vertexPositionAttribute,
                triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
            gl.drawArrays(
                gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems);
        }

        function webGLStart() {
            var canvas = document.getElementById("gl-canvas");
            initGL(canvas);
            initShaders();
            initBuffers();

            gl.clearColor(0.0, 0.0, 0.0, 1.0);
            gl.enable(gl.DEPTH_TEST);

            drawScene();
        }
    </script>


</head>

  <body onload="webGLStart();">
    <canvas id="gl-canvas" width="480" height="320"></canvas>
  </body>

</html>
```