#1 Basic WebGL program

by Michal Vodicka

HTML

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

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(1.0, 0.9, 0.0, 1.0);",
    "}"].join( "\n" );


var gl = document.querySelector("canvas").getContext("experimental-webgl");

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);

    window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || function (cb) {
        setTimeout(cb, 1000 / 60);
    };
})();


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

var vmatrix = mat4.create();
// mat4.translate(vmatrix, vmatrix, vec3.fromValues(0, -0.2, -1));

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


var omatrix = mat4.create();
var outLoc = gl.getUniformLocation(program, "OMatrix");

var Object3D = function () {

    this.data = {
        indices: [1, 2, 5, 1, 3, 5, 1, 4, 5, 1, 2, 3, 1, 2, 4, 1, 3, 4],
        vertexPositions: [0, 0, 0, 1, -1, 1, -1, -1, 1, 0, -1, -1, 0, 1, 0],
    }

    this.vertexCount = this.data.indices.length;

    var posLoc = gl.getAttribLocation(program, "pos");
    gl.enableVertexAttribArray(posLoc);

    var vertexBuffer =...