cube.js

function main() {
  "use strict";
  let $       = (...x) => document.getElementById(...x),
    canvas    = $('canvas'),
    log       = (x => (y => x.innerHTML = y))($('log')),
    trackball = new Trackball(canvas),
    gl        = WebGLUtils.setupWebGL(canvas),
    cube      = {
      vertices: [
        -1, -1, -1, +1, -1, -1, +1, +1, -1, -1, +1, -1,
        -1, -1, +1, +1, -1, +1, +1, +1, +1, -1, +1, +1,
        -1, -1, -1, -1, +1, -1, -1, +1, +1, -1, -1, +1,
        +1, -1, -1, +1, +1, -1, +1, +1, +1, +1, -1, +1,
        -1, -1, -1, -1, -1, +1, +1, -1, +1, +1, -1, -1,
        -1, +1, -1, -1, +1, +1, +1, +1, +1, +1, +1, -1,
      ],
      colors: [
        // #FFA500
        1,.65,0, 1,.65,0, 1,.65,0, 1,.65,0,
        1,1,1, 1,1,1, 1,1,1, 1,1,1,
        0,0,1, 0,0,1, 0,0,1, 0,0,1,
        1,0,0, 1,0,0, 1,0,0, 1,0,0,
        1,1,0, 1,1,0, 1,1,0, 1,1,0,
        0,1,0, 0,1,0, 0,1,0, 0,1,0
      ],
      indices: [
        0,  1, 2,  0, 2, 3,  4, 5, 6,  4, 6, 7,
        8,  9,10,  8,10,11, 12,13,14, 12,14,15,
        16,17,18, 16,18,19, 20,21,22, 20,22,23
      ]
    };

  let vertex_buffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(cube.vertices), gl.STATIC_DRAW);
  gl.bindBuffer(gl.ARRAY_BUFFER, null);

  let color_buffer = gl.createBuffer ();
  gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(cube.colors), gl.STATIC_DRAW);

  let index_buffer = gl.createBuffer ();
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer);
  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(cube.indices), gl.STATIC_DRAW);

  let vertCode = `
    attribute vec3 position;
    uniform mat4 Pmatrix;
    uniform mat4 Vmatrix;
    uniform mat4 Mmatrix;
    attribute vec3 color;
    varying vec3 vColor;
    void main(void) {
        gl_Position = Pmatrix*Vmatrix*Mmatrix*vec4(position, 1.);
    vColor = color;
    }`,
    fragCode = `
    precision mediump float;
    varying vec3 vColor;
    void main(void) {
    gl_FragColor = vec4(vColor, 1.);
    }`;

  let vertShader = gl.createShader(gl.VERTEX_SHADER);
  gl.shaderSource(vertShader, vertCode);
  gl.compileShader(vertShader);

  let fragShader = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(fragShader, fragCode);
  gl.compileShader(fragShader);

  let shaderprogram = gl.createProgram();
  gl.attachShader(shaderprogram, vertShader); 
  gl.attachShader(shaderprogram, fragShader);
  gl.linkProgram(shaderprogram);

  let _Pmatrix = gl.getUniformLocation(shaderprogram, "Pmatrix"),
    _Vmatrix = gl.getUniformLocation(shaderprogram, "Vmatrix"),
    _Mmatrix = gl.getUniformLocation(shaderprogram, "Mmatrix");

  gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
  let _position = gl.getAttribLocation(shaderprogram, "position");
  gl.vertexAttribPointer(_position, 3, gl.FLOAT, false,0,0);
  gl.enableVertexAttribArray(_position);

  gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
  let _color = gl.getAttribLocation(shaderprogram, "color");
  gl.vertexAttribPointer(_color, 3, gl.FLOAT, false,0,0) ;
  gl.enableVertexAttribArray(_color);
  gl.useProgram(shaderprogram);

  function get_projection(angle, a, zMin, zMax) {
    let ang = Math.tan((angle*.5)*Math.PI/180);//angle*.5
    return mat4.fromValues(
      0.5/ang, 0 , 0, 0,
      0, 0.5*a/ang, 0, 0,
      0, 0, -(zMax+zMin)/(zMax-zMin), -1,
      0, 0, (-2*zMax*zMin)/(zMax-zMin), 0 
    );
  }

  let proj_matrix = get_projection(40, canvas.width/canvas.height, 1, 100),
    view_matrix = mat4.create();

  view_matrix[14] = view_matrix[14]-6;

  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  gl.enable(gl.DEPTH_TEST);
  gl.viewport(0,0,canvas.width,canvas.height);


  function animate() {
    gl.clearColor(0.5, 0.5, 0.5, 0.9);
    gl.clearDepth(1.0);
    gl.viewport(0.0, 0.0, canvas.width, canvas.height);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    gl.uniformMatrix4fv(_Pmatrix, false, proj_matrix);
    gl.uniformMatrix4fv(_Vmatrix, false, view_matrix);
    gl.uniformMatrix4fv(_Mmatrix, false, trackball.matrix);

    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer);
    gl.drawElements(gl.TRIANGLES, cube.indices.length, gl.UNSIGNED_SHORT, 0);

    window.requestAnimationFrame(animate);
    log("The determinant of the motion matrix is " + mat4.determinant(trackball.matrix));
  }

  animate();

}