#1 Basic WebGL program

by Michal Vodicka

HTML

<script src="http://glmatrix.net/dist/gl-matrix-min.js"></script>
<canvas></canvas>

CSS

canvas {
    width: 600px;
    height: 400px;
}

JavaScript

var vertexShaderSource = [
    "attribute vec3 pos;",

    "uniform mat4 OMatrix;",

    "void main(void) {",
    "gl_Position = OMatrix * vec4(pos, 1.0);",
    "}"].join("\n");

var fragmentShaderSource = [
    "precision mediump float;",

    "void main(void) {",
    "gl_FragColor = vec4(0.5, 0.0, 0.5, 1.0);",
    "}"].join("\n");

function initGL() {
    try {
        var canvas = document.querySelector("canvas");
        var gl = canvas.getContext("experimental-webgl");
        gl.viewportWidth = canvas.width;
        gl.viewportHeight = canvas.height;
        return gl;
    } catch (e) {
    }
    if (!gl) {
        alert("Could not initialise WebGL, sorry :-(");
    }
    return null;
}

var gl = initGL();

function initShader(type, source) {
    var shader = gl.createShader(type);
    gl.shaderSource(shader, source);
    gl.compileShader(shader);
    return shader;
}

var shaders = [initShader(gl.VERTEX_SHADER, vertexShaderSource), initShader(gl.FRAGMENT_SHADER, fragmentShaderSource)];

var program = (function () {
    var program = gl.createProgram();
    for (var i = 0; i < shaders.length; i++) {
        gl.attachShader(program, shaders[i]);
    }

    gl.linkProgram(program);
    return program;
})();

gl.useProgram(program);

(function initWebGL() {
    gl.enable(gl.DEPTH_TEST);
    gl.clearColor(0.0, 0.0, 0.0, 1);
    // gl.enable(gl.CULL_FACE);
    // gl.cullFace(gl.FRONT_AND_BACK);
    window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || function (cb) {
        setTimeout(cb, 1000 / 60);
    };
})();


var mmatrix = mat4.create();
mat4.scale(mmatrix, mmatrix, vec3.fromValues(0.4, 0.4, 0.4));

var vmatrix = mat4.create();
mat4.scale(vmatrix, vmatrix, vec3.fromValues( 2, 2.5, 2));
mat4.translate(vmatrix, vmatrix, vec3.fromValues( 0, -0.1, 0));

var pmatrix = mat4.create();
// mat4.perspective(pmatrix, Math.PI / 3, 2, 0.1, 100);


var omatrix = mat4.create();
var outLoc...