cube.html

<!-- vim: sw=4 ts=4 expandtab smartindent ft=javascript
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>WebGL Demo</title>
    <style> document, body { margin: 0px; padding: 0px; overflow: hidden; } </style>
  </head>

  <body>
    <canvas id="glcanvas"></canvas>
    <script>
const canvas = document.getElementById('glcanvas');
const gl = canvas.getContext('webgl', {antialias: true});
if (!gl) { alert('Failed to initialize WebGL'); }

(window.onresize = () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    /* account for e.g. high-retina macbook screens */
    if (window.devicePixelRatio > 1) {
        canvas.style.width = `${canvas.width}px`;
        canvas.style.height = `${canvas.height}px`;
        canvas.width *= window.devicePixelRatio;
        canvas.height *= window.devicePixelRatio;
    }

    gl.viewport(
        0,
        0,
        canvas.width,
        canvas.height
    );
})();

let shaders;
/* compile shaders */
{
    const vs_geo = `
        attribute vec3 a_pos;
        attribute vec4 a_color;

        uniform mat4 u_matrix;

        varying vec4 v_color;

        void main() {
            gl_Position = u_matrix * vec4(a_pos.xyz, 1);
            v_color = a_color;
        }`;

    const fs_geo = `
        precision mediump float;

        varying vec4 v_color;

        void main() {
            gl_FragColor = vec4(v_color.xyz*0.3, 1.0);
        }`;

    function createProgram(gl, vertexSource, fragmentSource) {
        function createShader(gl, type, source) {
            const shader = gl.createShader(type);
            gl.shaderSource(shader, source);
            gl.compileShader(shader);
            if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
                throw new Error(gl.getShaderInfoLog(shader));
            }
            return shader;
        }

        const program = gl.createProgram();

        const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexSource);
        const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentSource);

        gl.attachShader(program, vertexShader);
        gl.attachShader(program, fragmentShader);

        gl.linkProgram(program);
        if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
            throw new Error(gl.getProgramInfoLog(program));
        }

        const wrapper = {program};

        const numAttributes = gl.getProgramParameter(program, gl.ACTIVE_ATTRIBUTES);
        for (let i = 0; i < numAttributes; i++) {
            const attribute = gl.getActiveAttrib(program, i);
            wrapper[attribute.name] = gl.getAttribLocation(program, attribute.name);
        }
        const numUniforms = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS);
        for (let i = 0; i < numUniforms; i++) {
            const uniform = gl.getActiveUniform(program, i);
            wrapper[uniform.name] = gl.getUniformLocation(program, uniform.name);
        }

        return wrapper;
    }


    shaders = {
        geo: createProgram(gl, vs_geo, fs_geo)
    }
}

const geo_vbuf_pos = gl.createBuffer();
const geo_vbuf_color = gl.createBuffer();
const geo_ibuf = gl.createBuffer();

requestAnimationFrame(function frame(timestamp) {
    requestAnimationFrame(frame);

    const geo_idx   = [];
    const geo_pos   = [];
    const geo_color = [];

    const ORTHO = false;
    const mvp = mat4_create();
    {
        const model = mat4_create();
        {
            const scratch = mat4_create();
            mat4_from_z_rotation(model, Date.now() * 0.0002);

            // mat4_from_x_rotation(scratch, Date.now() * 0.0002);
            // mat4_mul(model, scratch, model);

            mat4_from_scaling(scratch, 0.5)
            mat4_mul(model, scratch, model);
        }

        if (ORTHO) {
            const ar = window.innerWidth / window.innerHeight;
            const projection = mat4_ortho(mat4_create(), -ar, ar, -1, 1, 0.01, 100.0);

            const view = mat4_target_to(mat4_create(), [5, 5, 5], [0, 0, 0.5], [0, 0, 1]);
            mat4_invert(view, view);

            mat4_mul(mvp, projection, view);
            mat4_mul(mvp, mvp, model);
        } else {
            const FIELD_OF_VIEW = 75 / 180 * Math.PI;
            const ar = window.innerWidth / window.innerHeight;
            const projection = mat4_perspective(mat4_create(), FIELD_OF_VIEW, ar, 0.01, 100.0);

            const view = mat4_target_to(mat4_create(), [5, 5, 5], [0, 0, 0], [0, 0, 1]);
            mat4_invert(view, view);

            mat4_mul(mvp, projection, view);
            mat4_mul(mvp, mvp, model);
        }
    }

    {
        const corners = [
            -1, -1,  1,   1, -1,  1,   1,  1,  1,  -1,  1,  1, /* Top face    */
            -1, -1, -1,  -1,  1, -1,   1,  1, -1,   1, -1, -1, /* Bottom face */

            -1,  1, -1,  -1,  1,  1,   1,  1,  1,   1,  1, -1, /* Front face  */
            -1, -1, -1,   1, -1, -1,   1, -1,  1,  -1, -1,  1, /* Back face   */

             1, -1, -1,   1,  1, -1,   1,  1,  1,   1, -1,  1, /* Right face  */
            -1, -1, -1,  -1, -1,  1,  -1,  1,  1,  -1,  1, -1, /* Left face   */
        ];

        for (let corner_i = 0; corner_i < corners.length; corner_i += 3)
            corners[corner_i+2] += 1;

        for (let corner_i = 0; corner_i < corners.length; corner_i += 12) {
            geo_color.push(
                255,   0,   0, 255,
                  0, 255,   0, 255,
                  0,   0, 255, 255,
                255,   0, 255, 255
            )

            const vbuf_i = geo_pos.length / 3;
            geo_pos.push(corners[corner_i +  0], corners[corner_i +  1], corners[corner_i +  2]);
            geo_pos.push(corners[corner_i +  3], corners[corner_i +  4], corners[corner_i +  5]);
            geo_pos.push(corners[corner_i +  6], corners[corner_i +  7], corners[corner_i +  8]);
            geo_pos.push(corners[corner_i +  9], corners[corner_i + 10], corners[corner_i + 11]);

            geo_idx.push(
              vbuf_i + 0,
              vbuf_i + 1,
              vbuf_i + 2,
              vbuf_i + 2,
              vbuf_i + 3,
              vbuf_i + 0
            );
        }
    }

    {
        /* set up premultiplied alpha */
        gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
        gl.enable(gl.BLEND);

        gl.enable(gl.DEPTH_TEST);
        gl.depthFunc(gl.LEQUAL);

        /* clear all */
        gl.clearColor(0, 0, 0, 1);
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

        /* geo pass */
        {
            gl.useProgram(shaders.geo.program);
            gl.enableVertexAttribArray(shaders.geo.a_pos);
            gl.enableVertexAttribArray(shaders.geo.a_color);

            gl.uniformMatrix4fv(shaders.geo.u_matrix, false, mvp);

            /* upload/bind geometry */
            {
                gl.bindBuffer(gl.ARRAY_BUFFER, geo_vbuf_pos);
                gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(geo_pos), gl.STATIC_DRAW);
                gl.vertexAttribPointer(shaders.geo.a_pos, 3, gl.FLOAT, false, 0, 0);

                gl.bindBuffer(gl.ARRAY_BUFFER, geo_vbuf_color);
                gl.bufferData(gl.ARRAY_BUFFER, new Uint8Array(geo_color), gl.STATIC_DRAW);
                gl.vertexAttribPointer(shaders.geo.a_color, 4, gl.UNSIGNED_BYTE, true, 0, 0);

                gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, geo_ibuf);
                gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(geo_idx), gl.STATIC_DRAW);
            }

            gl.drawElements(gl.TRIANGLES, geo_idx.length, gl.UNSIGNED_SHORT, 0);
        }
    }
})

function mat4_create() {
    let out = new Float32Array(16);
    out[0] = 1;
    out[5] = 1;
    out[10] = 1;
    out[15] = 1;
    return out;
}

function mat4_ortho(out, left, right, bottom, top, near, far) {
    let lr = 1 / (left - right);
    let bt = 1 / (bottom - top);
    let nf = 1 / (near - far);
    out[0] = -2 * lr;
    out[1] = 0;
    out[2] = 0;
    out[3] = 0;
    out[4] = 0;
    out[5] = -2 * bt;
    out[6] = 0;
    out[7] = 0;
    out[8] = 0;
    out[9] = 0;
    out[10] = 2 * nf;
    out[11] = 0;
    out[12] = (left + right) * lr;
    out[13] = (top + bottom) * bt;
    out[14] = (far + near) * nf;
    out[15] = 1;
    return out;
}

function mat4_invert(out, a) {
    let a00 = a[0], a01 = a[1], a02 = a[2], a03 = a[3];
    let a10 = a[4], a11 = a[5], a12 = a[6], a13 = a[7];
    let a20 = a[8], a21 = a[9], a22 = a[10], a23 = a[11];
    let a30 = a[12], a31 = a[13], a32 = a[14], a33 = a[15];
    let b00 = a00 * a11 - a01 * a10;
    let b01 = a00 * a12 - a02 * a10;
    let b02 = a00 * a13 - a03 * a10;
    let b03 = a01 * a12 - a02 * a11;
    let b04 = a01 * a13 - a03 * a11;
    let b05 = a02 * a13 - a03 * a12;
    let b06 = a20 * a31 - a21 * a30;
    let b07 = a20 * a32 - a22 * a30;
    let b08 = a20 * a33 - a23 * a30;
    let b09 = a21 * a32 - a22 * a31;
    let b10 = a21 * a33 - a23 * a31;
    let b11 = a22 * a33 - a23 * a32;
    /* Calculate the determinant */
    let det = b00 * b11 - b01 * b10 + b02 * b09 + b03 * b08 - b04 * b07 + b05 * b06;
    if (!det) {
        return null;
    }
    det = 1.0 / det;
    out[0] = (a11 * b11 - a12 * b10 + a13 * b09) * det;
    out[1] = (a02 * b10 - a01 * b11 - a03 * b09) * det;
    out[2] = (a31 * b05 - a32 * b04 + a33 * b03) * det;
    out[3] = (a22 * b04 - a21 * b05 - a23 * b03) * det;
    out[4] = (a12 * b08 - a10 * b11 - a13 * b07) * det;
    out[5] = (a00 * b11 - a02 * b08 + a03 * b07) * det;
    out[6] = (a32 * b02 - a30 * b05 - a33 * b01) * det;
    out[7] = (a20 * b05 - a22 * b02 + a23 * b01) * det;
    out[8] = (a10 * b10 - a11 * b08 + a13 * b06) * det;
    out[9] = (a01 * b08 - a00 * b10 - a03 * b06) * det;
    out[10] = (a30 * b04 - a31 * b02 + a33 * b00) * det;
    out[11] = (a21 * b02 - a20 * b04 - a23 * b00) * det;
    out[12] = (a11 * b07 - a10 * b09 - a12 * b06) * det;
    out[13] = (a00 * b09 - a01 * b07 + a02 * b06) * det;
    out[14] = (a31 * b01 - a30 * b03 - a32 * b00) * det;
    out[15] = (a20 * b03 - a21 * b01 + a22 * b00) * det;
    return out;
}

function mat4_perspective(out, fovy, aspect, near, far) {
    let f = 1.0 / Math.tan(fovy / 2),
        nf;
    out[0] = f / aspect;
    out[1] = 0;
    out[2] = 0;
    out[3] = 0;
    out[4] = 0;
    out[5] = f;
    out[6] = 0;
    out[7] = 0;
    out[8] = 0;
    out[9] = 0;
    out[11] = -1;
    out[12] = 0;
    out[13] = 0;
    out[15] = 0;
    if (far != null && far !== Infinity) {
        nf = 1 / (near - far);
        out[10] = (far + near) * nf;
        out[14] = 2 * far * near * nf;
    } else {
        out[10] = -1;
        out[14] = -2 * near;
    }
    return out;
}

function mat4_from_x_rotation(out, rad) {
    let s = Math.sin(rad);
    let c = Math.cos(rad);
    /* Perform axis-specific matrix multiplication */
    out[0] = 1;
    out[1] = 0;
    out[2] = 0;
    out[3] = 0;
    out[4] = 0;
    out[5] = c;
    out[6] = s;
    out[7] = 0;
    out[8] = 0;
    out[9] = -s;
    out[10] = c;
    out[11] = 0;
    out[12] = 0;
    out[13] = 0;
    out[14] = 0;
    out[15] = 1;
    return out;
}

function mat4_from_y_rotation(out, rad) {
    let s = Math.sin(rad);
    let c = Math.cos(rad);
    /* Perform axis-specific matrix multiplication */
    out[0] = c;
    out[1] = 0;
    out[2] = -s;
    out[3] = 0;
    out[4] = 0;
    out[5] = 1;
    out[6] = 0;
    out[7] = 0;
    out[8] = s;
    out[9] = 0;
    out[10] = c;
    out[11] = 0;
    out[12] = 0;
    out[13] = 0;
    out[14] = 0;
    out[15] = 1;
    return out;
}

function mat4_from_z_rotation(out, rad) {
    let s = Math.sin(rad);
    let c = Math.cos(rad);
    /* Perform axis-specific matrix multiplication */
    out[0] = c;
    out[1] = s;
    out[2] = 0;
    out[3] = 0;
    out[4] = -s;
    out[5] = c;
    out[6] = 0;
    out[7] = 0;
    out[8] = 0;
    out[9] = 0;
    out[10] = 1;
    out[11] = 0;
    out[12] = 0;
    out[13] = 0;
    out[14] = 0;
    out[15] = 1;
    return out;
}

function mat4_from_scaling(out, f) {
    out[0] = f;
    out[1] = 0;
    out[2] = 0;
    out[3] = 0;
    out[4] = 0;
    out[5] = f;
    out[6] = 0;
    out[7] = 0;
    out[8] = 0;
    out[9] = 0;
    out[10] = f;
    out[11] = 0;
    out[12] = 0;
    out[13] = 0;
    out[14] = 0;
    out[15] = 1;
    return out;
}

function mat4_from_translation(out, v) {
    out[0] = 1;
    out[1] = 0;
    out[2] = 0;
    out[3] = 0;
    out[4] = 0;
    out[5] = 1;
    out[6] = 0;
    out[7] = 0;
    out[8] = 0;
    out[9] = 0;
    out[10] = 1;
    out[11] = 0;
    out[12] = v[0];
    out[13] = v[1];
    out[14] = v[2];
    out[15] = 1;
    return out;
}

function mat4_transform_vec4(out, a, m) {
    let x = a[0], y = a[1], z = a[2], w = a[3];
    out[0] = m[0] * x + m[4] * y + m[8] * z + m[12] * w;
    out[1] = m[1] * x + m[5] * y + m[9] * z + m[13] * w;
    out[2] = m[2] * x + m[6] * y + m[10] * z + m[14] * w;
    out[3] = m[3] * x + m[7] * y + m[11] * z + m[15] * w;
    return out;
}

function mat4_mul(out, a, b) {
    let a00 = a[0], a01 = a[1], a02 = a[2], a03 = a[3];
    let a10 = a[4], a11 = a[5], a12 = a[6], a13 = a[7];
    let a20 = a[8], a21 = a[9], a22 = a[10], a23 = a[11];
    let a30 = a[12], a31 = a[13], a32 = a[14], a33 = a[15];
    /* Cache only the current line of the second matrix */
    let b0 = b[0], b1 = b[1], b2 = b[2], b3 = b[3];
    out[0] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30;
    out[1] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31;
    out[2] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32;
    out[3] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33;
    b0 = b[4];
    b1 = b[5];
    b2 = b[6];
    b3 = b[7];
    out[4] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30;
    out[5] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31;
    out[6] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32;
    out[7] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33;
    b0 = b[8];
    b1 = b[9];
    b2 = b[10];
    b3 = b[11];
    out[8] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30;
    out[9] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31;
    out[10] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32;
    out[11] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33;
    b0 = b[12];
    b1 = b[13];
    b2 = b[14];
    b3 = b[15];
    out[12] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30;
    out[13] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31;
    out[14] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32;
    out[15] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33;
    return out;
}

function mat4_target_to(out, eye, target, up=VEC3_UP) {
    let eyex = eye[0], eyey = eye[1], eyez = eye[2],
         upx =  up[0],  upy =  up[1],  upz =  up[2];
    let z0 = eyex - target[0],
        z1 = eyey - target[1],
        z2 = eyez - target[2];
    let len = z0 * z0 + z1 * z1 + z2 * z2;
    if (len > 0) {
        len = 1 / Math.sqrt(len);
        z0 *= len;
        z1 *= len;
        z2 *= len;
    }
    let x0 = upy * z2 - upz * z1,
        x1 = upz * z0 - upx * z2,
        x2 = upx * z1 - upy * z0;
    len = x0 * x0 + x1 * x1 + x2 * x2;
    if (len > 0) {
        len = 1 / Math.sqrt(len);
        x0 *= len;
        x1 *= len;
        x2 *= len;
    }
    out[0] = x0;
    out[1] = x1;
    out[2] = x2;
    out[3] = 0;
    out[4] = z1 * x2 - z2 * x1;
    out[5] = z2 * x0 - z0 * x2;
    out[6] = z0 * x1 - z1 * x0;
    out[7] = 0;
    out[8] = z0;
    out[9] = z1;
    out[10] = z2;
    out[11] = 0;
    out[12] = eyex;
    out[13] = eyey;
    out[14] = eyez;
    out[15] = 1;
    return out;
}

    </script>
  </body>
</html>