Animating objects with WebGL

webgl-animate-object.js

<script type="text/javascript" src="sylvester.js"></script>
<script type="text/javascript" src="glUtils.js"></script>
<script type="text/javascript">
<!--
    document.addEventListener('DOMContentLoaded', function() {
        var webGL                     = null;
        var canvas                    = document.querySelector('canvas');
        var shaderProgram             = null;
        var vertexPositionAttribute   = null;
        var vertexColorAttribute      = null;
        var squareVerticesBuffer      = null;
        var squareVerticesColorBuffer = null;

        var mvMatrixStacks = [];
        var rotation       = 0.0;
        var lastUpdateTime = 0.0;

        var offsets = {
            x : 0.0,
            y : 0.0,
            z : 0.0
        };

        var increases = {
            x : 0.2,
            y : -0.4,
            z : 0.3
        };

        var ROTATION_AMOUNT      = 60;
        var ROTATION_PERSPECTIVE = 12.5;

        try {
            webGL = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
            console.dir(webGL);

            webGL.clearColor(0.0, 0.0, 0.0, 1.0);  //Clear to Black
            webGL.clearDepth(1.0);                 //Clear
            webGL.enable(webGL.DEPTH_TEST);
            webGL.depthFunc(webGL.LEQUAL);
        } catch (error) {
            console.error(error);
            return;
        }

        var setupShader = function() {
            var getShader = function(id) {
                var shader       = null;
                var shaderScript = document.getElementById(id);

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

                var source = '';
                var currentChild = shaderScript.firstChild;

                while (currentChild) {
                    if (currentChild.nodeType === currentChild.TEXT_NODE) {
                        source += currentChild.textContent;
                    }

                    currentChild = currentChild.nextSibling;
                }

                webGL.shaderSource(shader, source);
                webGL.compileShader(shader);

                if (webGL.getShaderParameter(shader, webGL.COMPILE_STATUS)) {
                    return shader;
                } else {
                    return null;
                }
            };

            var fragmentShader = getShader('shader-fs');
            var vertexShader   = getShader('shader-vs');

            if ((fragmentShader === null) || (vertexShader   === null)) {
                return false;
            }

            shaderProgram = webGL.createProgram();

            webGL.attachShader(shaderProgram, vertexShader);
            webGL.attachShader(shaderProgram, fragmentShader);
            webGL.linkProgram(shaderProgram);

            if (!webGL.getProgramParameter(shaderProgram, webGL.LINK_STATUS)) {
                return false;
            }

            webGL.useProgram(shaderProgram);

            vertexPositionAttribute = webGL.getAttribLocation(shaderProgram, 'aVertexPosition');
            webGL.enableVertexAttribArray(vertexPositionAttribute);

            vertexColorAttribute = webGL.getAttribLocation(shaderProgram, 'aVertexColor');
            webGL.enableVertexAttribArray(vertexColorAttribute);
        };

        var setupBuffers = function() {
            squareVerticesBuffer = webGL.createBuffer();
            webGL.bindBuffer(webGL.ARRAY_BUFFER, squareVerticesBuffer);

            var vertices = [
                +1.0, +1.0, +0.0,
                -1.0, +1.0, +0.0,
                +1.0, -1.0, +0.0,
                -1.0, -1.0, +0.0
            ];

            webGL.bufferData(webGL.ARRAY_BUFFER, new Float32Array(vertices), webGL.STATIC_DRAW);

            squareVerticesColorBuffer = webGL.createBuffer();
            webGL.bindBuffer(webGL.ARRAY_BUFFER, squareVerticesColorBuffer);

            var colors = [
                1.0, 1.0, 1.0, 1.0,  //White
                1.0, 0.0, 0.0, 0.0,  //Red
                0.0, 1.0, 0.0, 1.0,  //Green
                0.0, 0.0, 1.0, 1.0   //Blue
            ];

            webGL.bufferData(webGL.ARRAY_BUFFER, new Float32Array(colors), webGL.STATIC_DRAW);
        };

        var drawScene = function() {
            webGL.clear(webGL.COLOR_BUFFER_BIT | webGL.DEPTH_BUFFER_BIT);

            var perspectiveMatrix = makePerspective(45, parseFloat(canvas.width / canvas.height), 0.1, 100);

            var mvMatrix = Matrix.I(4);
            mvMatrixStacks.push(mvMatrix.dup());
            mvMatrix = mvMatrix.x(Matrix.Translation($V([-0.0, 0.0, -6.0])).ensure4x4());  //update mvMatrix
            mvMatrix = mvMatrix.x(Matrix.Rotation((rotation * (Math.PI / 180.0)), $V([1.0, 0.0, 1.0])).ensure4x4());  //update mvMatrix
            mvMatrix = mvMatrix.x(Matrix.Translation($V([offsets.x, offsets.y, offsets.z])).ensure4x4());  //update mvMatrix

            webGL.bindBuffer(webGL.ARRAY_BUFFER, squareVerticesBuffer);
            webGL.vertexAttribPointer(vertexPositionAttribute, 3, webGL.FLOAT, false, 0, 0);

            webGL.bindBuffer(webGL.ARRAY_BUFFER, squareVerticesColorBuffer);
            webGL.vertexAttribPointer(vertexColorAttribute, 4, webGL.FLOAT, false, 0, 0);

            var pUniform = webGL.getUniformLocation(shaderProgram, 'uPMatrix');
            webGL.uniformMatrix4fv(pUniform, false, new Float32Array(perspectiveMatrix.flatten()));

            var mvUniform = webGL.getUniformLocation(shaderProgram, 'uMVMatrix');
            webGL.uniformMatrix4fv(mvUniform, false, new Float32Array(mvMatrix.flatten()));

            webGL.drawArrays(webGL.TRIANGLE_STRIP, 0, 4);

            if (mvMatrixStacks.length > 0) {
                mvMatrix = mvMatrixStacks.pop();  //Revert mvMatrix
            }

            var currentTime = (new Date()).getTime();

            if (lastUpdateTime > 0.0) {
                var delta       = currentTime - lastUpdateTime;
                var amount      = (ROTATION_AMOUNT * delta) / 1000.0;

                rotation  += amount;
                offsets.x += increases.x * amount;
                offsets.y += increases.y * amount;
                offsets.z += increases.z * amount;

                if ((Math.abs(offsets.y)) > ROTATION_PERSPECTIVE) {
                    increases.x = -1 * increases.x;
                    increases.y = -1 * increases.y;
                    increases.z = -1 * increases.z;
                }
            }

            //Update
            lastUpdateTime = currentTime;
        };

        setupShader();
        setupBuffers();

        window.setInterval(drawScene, 10);
}, true);
//-->
</script>

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

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

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

    uniform mat4 uMVMatrix;
    uniform mat4 uPMatrix;

    varying lowp vec4 vColor;

    void main(void) {
        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
        vColor = aVertexColor;
    }
</script>