bigint-cube.js

let trackball;

function main() {
    let canvas    = document.getElementById('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 
            ]
        };

        trackball = new Trackball(canvas);

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


    let animate = function () {
        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);
        document.getElementById("largest_number").value =
        [ trackball.denominator, ...trackball.submatrix ].
            map(x => x < 0 ? -x : x).
            reduce((a,b) => a < b ? b : a);
    }

    animate();

}