shadow.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 ATLAS_SIZE = 8; /* in emoji, along one axis (total # supported is ATLAS_SIZE*ATLAS_SIZE) */
const TEXELS_PER_QUAD = 300;
const DEPTH_TEX_SIZE = 1 << 9;

const canvas = document.getElementById('glcanvas');
const gl = canvas.getContext('webgl2', {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 geo_vs = 
        'attribute vec3 a_pos;' +
        'attribute vec3 a_normal;' +
        'attribute vec2 a_uv;' +

        'uniform mat4 u_matrix;' +
        'uniform mat4 u_light_matrix;' +

        'varying vec4 v_light_pos;' +
        'varying vec3 v_normal;' +
        'varying vec2 v_uv;' +

        'void main() {' +
        '    gl_Position = u_matrix       * vec4(a_pos.xyz, 1.0);' +
        '    v_light_pos = u_light_matrix * vec4(a_pos.xy, 0.0, 1.0);' +
        '    v_normal = a_normal;' +
        '    v_uv = a_uv;' +
        '}';

    const geo_fs = 
        'precision mediump float;' +

        'uniform sampler2D u_texture;' +
        'uniform vec3 u_light_dir;' +

        'varying vec3 v_normal;' +
        'varying vec4 v_light_pos;' +
        'varying vec2 v_uv;' +
        'varying float v_depth;' +

        'float decode_float_rgba(vec4 rgba) {' +
        '  return dot(rgba, vec4(1.0, 1.0/255.0, 1.0/65025.0, 1.0/16581375.0));' + 
        '}' +

        'void main() {' +
        '  const float bias = -0.002;' +
        '  float occluding_depth = decode_float_rgba(texture2D(u_texture, (v_light_pos.xy / v_light_pos.w * 0.5) + 0.5));' +
        '  float frag_depth = (v_light_pos.z / v_light_pos.w * 0.5) + 0.5;' +
        '  float occlusion = step(frag_depth, occluding_depth - bias);' + 
        '  occlusion = step(0.0, dot(v_normal, normalize(u_light_dir))) * occlusion;' +
        '  gl_FragColor = vec4(vec3(v_uv * (0.1 + 0.4*occlusion), 0.2*occlusion), 1.0);' +
        '}';


    const depth_vs = 
        'precision mediump float;' +

        'uniform mat4 u_matrix;' +

        'attribute vec4 a_pos;' +

        'varying vec4 v_pos;' +

        'void main() {' +
        '  gl_Position = v_pos = u_matrix * a_pos;' +
        '}';

    const depth_fs = 
        'precision mediump float;' +

        'varying vec4 v_pos;' +

        'vec4 encode_float_rgba(float v) {' +
        '  vec4 enc = vec4(1.0, 255.0, 65025.0, 16581375.0) * v;' +
        '  enc = fract(enc);' +
        '  enc -= enc.yzww * vec4(1.0/255.0,1.0/255.0,1.0/255.0,0.0);' +
        '  return enc;' +
        '}' +

        'void main() {' +
        '  float depth = v_pos.z / v_pos.w;' +
        '  gl_FragColor = encode_float_rgba(depth * 0.5 + 0.5);' +
        '}';


    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, geo_vs , geo_fs),
        depth:  createProgram(gl, depth_vs , depth_fs),
    }
}

let depth_color = gl.createTexture();
let depth_depth = gl.createTexture();
let depth_fb = gl.createFramebuffer();
{
    gl.bindTexture(gl.TEXTURE_2D, depth_color);
    gl.texImage2D(
        /* target         */ gl.TEXTURE_2D,
        /* level          */ 0,
        /* internalformat */ gl.RGBA,
        /* width          */ DEPTH_TEX_SIZE,
        /* height         */ DEPTH_TEX_SIZE,
        /* border,        */ 0,
        /* format,        */ gl.RGBA,
        /* type,          */ gl.UNSIGNED_BYTE,
        /* data           */ null
    );
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

    gl.bindFramebuffer(gl.FRAMEBUFFER, depth_fb);
    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, depth_color, 0);
}
{
    gl.bindTexture(gl.TEXTURE_2D, depth_depth);

    // define size and format of level 0
    gl.texImage2D(
        gl.TEXTURE_2D,
        /* level,          */ 0,
        /* internalFormat, */ gl.DEPTH_COMPONENT24,
        /* width,          */ DEPTH_TEX_SIZE,
        /* height,         */ DEPTH_TEX_SIZE,
        /* border,         */ 0,
        /* format,         */ gl.DEPTH_COMPONENT,
        /* type,           */ gl.UNSIGNED_INT,
        /* data            */ null
    );

    // set the filtering so we don't need mips
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

    /* bind depth tex to our framebuffer */
    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, depth_depth, 0);
}


/* potential optimization: reuse pos, index buffer between geo and depth passes */
const buf = {
    depth_v_pos:   gl.createBuffer(),
    depth_i:   gl.createBuffer(),

    geo_v_pos:    gl.createBuffer(),
    geo_v_normal: gl.createBuffer(),
    geo_v_uv:     gl.createBuffer(),
    geo_i:        gl.createBuffer(),
};

let input = {
    pitch:  Math.PI*0.20,
    yaw:   -Math.PI*0.25,

    dampedEvent: { button: 0, movementX: 0, movementY: 0 },

    cam_pivot_x: 0,
    cam_pivot_y: 0,
    cam_pivot_z: 0,

    zoom:    5,
    scroll:  0,

    lmb_down: false,
    rmb_down: false,
}
let wheelTimeout;
window.onwheel = e => {
    if (input.mouse_down) return;
    input.scroll = Math.sign(e.deltaY);

    clearTimeout(wheelTimeout);
    wheelTimeout = setTimeout(() => input.scroll = 0, 100)
};
window.onmousedown = ev => {
    ev.preventDefault();

    if (ev.button == 0) input.lmb_down = true;
    if (ev.button == 2) input.rmb_down = true;
};
window.onmousemove = ev => {
    input.dampedEvent.button    = ev.button;
    input.dampedEvent.movementX = ev.movementX;
    input.dampedEvent.movementY = ev.movementY;
};
window.oncontextmenu = ev => ev.preventDefault();
window.onmouseup = ev => {
    ev.preventDefault();

    if (ev.button == 0) input.lmb_down = false;
    if (ev.button == 2) input.rmb_down = false;
};

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

    /* we could apply these changes directly in the event handlers, but the result feels "low fps"
     * because we don't get input events at 60fps. so instead, we apply the changes every frame
     * and simply "damp them" so that they get weaker every frame.
     *
     * (this should probably use delta time rather than simply *= 0.8) */
    {
        const ev = input.dampedEvent;

        /* based on the assumption that if you're zoomed in more,
         * you're doing finer-detailed work and want more precise movements. */
        const zoom_fudge = Math.sqrt(input.zoom/10.0)*2.0;

        if (input.lmb_down) {
            input.pitch -= ev.movementX * 0.0035 * zoom_fudge;
            input.yaw   -= ev.movementY * 0.0035 * zoom_fudge;
        }
        if (input.rmb_down) {
            const unit = [0, -ev.movementX*0.0075*zoom_fudge, ev.movementY*0.0075*zoom_fudge, 1];
            {
                const view    = mat4_create();
                const scratch = mat4_create();

                mat4_from_z_rotation(scratch, input.pitch);
                mat4_mul(view, view, scratch);

                mat4_from_y_rotation(scratch, input.yaw);
                mat4_mul(view, view, scratch);

                mat4_transform_vec4(unit, unit, view);
            }

            input.cam_pivot_x += unit[0];
            input.cam_pivot_y += unit[1];
            input.cam_pivot_z += unit[2];
        }

        ev.button    *= 0.8;
        ev.movementX *= 0.8;
        ev.movementY *= 0.8;
    }

    input.zoom += 0.025*input.scroll*input.zoom;

    const mvp = mat4_create();
    const mvp_light = mat4_create();
    const light_dir = [1, 0, 0, 1];
    const scratch = mat4_create();
    {
        const view = mat4_create();
        const model = mat4_create();

        {
            /* assign view */
            {
                const pitch =  Math.PI*0.35;
                const yaw   = -Math.PI*0.25;
                {
                    mat4_from_z_rotation(scratch, pitch);
                    mat4_mul(view, view, scratch);

                    mat4_from_y_rotation(scratch, yaw);
                    mat4_mul(view, view, scratch);

                    mat4_transform_vec4(light_dir, light_dir, view);
                }

                mat4_target_to(
                    view,
                    light_dir,
                    [0, 0, 0],
                    [0, 0, 1]
                );
                mat4_invert(view, view);
            }

            const scale = 3.0;
            const projection = mat4_ortho(mat4_create(), -scale, scale, -scale, scale, -1.0, 3.0);

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

        {
            /* reset "view" */
            mat4_from_scaling(view, 1, 1, 1);

            /* assign view */
            {
                const eye = [input.zoom, 0, 0, 1];
                {
                    mat4_from_z_rotation(scratch, input.pitch);
                    mat4_mul(view, view, scratch);

                    mat4_from_y_rotation(scratch, input.yaw);
                    mat4_mul(view, view, scratch);

                    mat4_transform_vec4(eye, eye, view);
                }

                eye[0] += input.cam_pivot_x;
                eye[1] += input.cam_pivot_y;
                eye[2] += input.cam_pivot_z;
                mat4_target_to(
                    view,
                    eye,
                    [input.cam_pivot_x, input.cam_pivot_y, input.cam_pivot_z],
                    [                0,                 0,                 1]
                );
                mat4_invert(view, view);
            }

            const FIELD_OF_VIEW = 70 / 180 * Math.PI;
            const ar = window.innerWidth / window.innerHeight;
            const projection = mat4_perspective(mat4_create(), FIELD_OF_VIEW, ar, 0.01, 100.0);

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

    const geo_idx    = [];
    const geo_pos    = [];
    const geo_normal = [];
    const geo_uv     = [];
    {
        const corners = [
            -0.5,  0,  0,
            -0.5,  0,  1,
             0.5,  0,  1,
             0.5,  0,  0, /* Front face  */
        ];
        for (let y = -1; y <= 2; y++) {
            for (let x = -1; x <= 2; x++) {
                corners.push(
                    x-1, y-1,  0,
                    x  , y-1,  0,
                    x  , y  ,  0,
                    x-1, y  ,  0
                );
            }
        }

        const backfaces = new Array(corners.length);
        for (let quad_index = 0; quad_index < corners.length; quad_index += 12) {

            for (let vert_index = 0; vert_index < 4; vert_index++) {
                const src_i = quad_index + 3*(4 - vert_index - 1);
                const dst_i = quad_index + 3*(vert_index);
                backfaces[dst_i + 0] = corners[src_i + 0];
                backfaces[dst_i + 1] = corners[src_i + 1];
                backfaces[dst_i + 2] = corners[src_i + 2];
            }
        }
        corners.push(...backfaces);

        for (let corner_i = 0; corner_i < corners.length; corner_i += 12) {
            /* generate UVs from atlas_index */
            {
                const atlas_index = corner_i / 12;
                if (atlas_index > (ATLAS_SIZE*ATLAS_SIZE)) debugger;

                const u = (           atlas_index % ATLAS_SIZE );
                const v = (Math.floor(atlas_index / ATLAS_SIZE));

                geo_uv.push(
                    1, 1, // (u+1)/ATLAS_SIZE, (v+1)/ATLAS_SIZE,
                    0, 1, // (u+0)/ATLAS_SIZE, (v+1)/ATLAS_SIZE,
                    0, 0, // (u+0)/ATLAS_SIZE, (v+0)/ATLAS_SIZE,
                    1, 0, // (u+1)/ATLAS_SIZE, (v+0)/ATLAS_SIZE,
                );
            }

            /* calculate the normal using the cross product */
            {
                let cross_x, cross_y, cross_z;
                {
                    const lhs_x = corners[corner_i + 3] - corners[corner_i + 0];
                    const lhs_y = corners[corner_i + 4] - corners[corner_i + 1];
                    const lhs_z = corners[corner_i + 5] - corners[corner_i + 2];
                    const rhs_x = corners[corner_i + 6] - corners[corner_i + 0];
                    const rhs_y = corners[corner_i + 7] - corners[corner_i + 1];
                    const rhs_z = corners[corner_i + 8] - corners[corner_i + 2];
                    cross_x = lhs_y * rhs_z - rhs_y * lhs_z;
                    cross_y = lhs_z * rhs_x - rhs_z * lhs_x;
                    cross_z = lhs_x * rhs_y - rhs_x * lhs_y;

                    /* normalize */
                    const len = Math.sqrt(cross_x*cross_x +
                                          cross_y*cross_y +
                                          cross_z*cross_z);
                    cross_x /= len;
                    cross_y /= len;
                    cross_z /= len;
                }

                geo_normal.push(
                    cross_x, cross_y, cross_z,
                    cross_x, cross_y, cross_z,
                    cross_x, cross_y, cross_z,
                    cross_x, cross_y, cross_z,
                );
            }

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

    {
        /* depth_pass */
        {
            /* bind depth and clear */
            {
                gl.viewport(
                    0,
                    0,
                    DEPTH_TEX_SIZE,
                    DEPTH_TEX_SIZE
                );
                gl.bindFramebuffer(gl.FRAMEBUFFER, depth_fb);
                // gl.bindFramebuffer(gl.FRAMEBUFFER, null);

                /* enable depth */
                gl.enable(gl.DEPTH_TEST);
                gl.depthFunc(gl.LEQUAL);

                /* backface culling */
                gl.cullFace(gl.BACK);
                gl.enable(gl.CULL_FACE);

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

            gl.useProgram(shaders.depth.program);
            gl.enableVertexAttribArray(shaders.depth.a_pos);

            gl.uniformMatrix4fv(shaders.depth.u_matrix, false, mvp_light);

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

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

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

        /* geo_pass */
        {
            /* bind to screen and clear */
            {
                gl.bindFramebuffer(gl.FRAMEBUFFER, null);
                gl.viewport(
                    0,
                    0,
                    canvas.width,
                    canvas.height
                );


                /* enable depth */
                gl.enable(gl.DEPTH_TEST);
                gl.depthFunc(gl.LEQUAL);

                /* backface culling */
                gl.cullFace(gl.BACK);
                gl.enable(gl.CULL_FACE);

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

            gl.useProgram(shaders.geo.program);
            gl.enableVertexAttribArray(shaders.geo.a_pos);
            gl.enableVertexAttribArray(shaders.geo.a_normal);
            gl.enableVertexAttribArray(shaders.geo.a_uv);

            gl.uniformMatrix4fv(shaders.geo.u_light_matrix, false, mvp_light);
            gl.uniformMatrix4fv(shaders.geo.u_matrix, false, mvp);
            gl.uniform3f(shaders.geo.u_light_dir, light_dir[0], light_dir[1], light_dir[2]);

            /* upload/bind atlas */
            {
                gl.activeTexture(gl.TEXTURE0);
                gl.bindTexture(gl.TEXTURE_2D, depth_color);
                gl.uniform1i(shaders.geo.u_texture, 0);
            }

            /* upload/bind geometry */
            {
                gl.bindBuffer(gl.ARRAY_BUFFER, buf.geo_v_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, buf.geo_v_normal);
                gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(geo_normal), gl.STATIC_DRAW);
                gl.vertexAttribPointer(shaders.geo.a_normal, 3, gl.FLOAT, true, 0, 0);

                gl.bindBuffer(gl.ARRAY_BUFFER, buf.geo_v_uv);
                gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(geo_uv), gl.STATIC_DRAW);
                gl.vertexAttribPointer(shaders.geo.a_uv, 2, gl.FLOAT, false, 0, 0);

                gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buf.geo_i);
                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>
/html>