#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 vec2 pos;",
    "attribute vec2 aTextureCoord;",
    
    "varying vec2 vTextureCoord;",
    
    "void main(void) {",
    "gl_Position = vec4(pos, 0.0, 1.0);",
    "vTextureCoord = aTextureCoord;",
    "}"].join("\n");

var fragmentShaderSource = [
    "precision mediump float;",
    "varying vec2 vTextureCoord;"
    
    "void main(void) {",
    "gl_FragColor = vec4(1, 0, 1, 1.0);",
    "}"].join("\n");

function initGL() {
    try {
        var canvas = document.querySelector("canvas");
        var gl = canvas.getContext("experimental-webgl");
        gl.canvas.width = 1024;
        gl.canvas.height = 1024;
        gl.viewportWidth = canvas.width;
        gl.viewportHeight = canvas.height;
        gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
        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, 0);
    // 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 Object3D = function () {

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