cube_building.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('webgl2', {antialias: true});
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, 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
    );
})();

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

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(1.0 - v_color.xyz*0.35, 1.0);
        }`;


    const vs_grid = `#version 300 es
        in vec3 a_pos;
        in vec2 a_uv;

        uniform mat4 u_matrix;

        out vec2 v_uv;

        void main() {
            gl_Position = u_matrix * vec4(a_pos.xyz, 1);
            v_uv = (a_uv - 0.5)*abs(a_pos.xy);
        }`;

    const fs_grid = `#version 300 es
        precision mediump float;

        in vec2 v_uv;

        /* https://iquilezles.org/articles/filterableprocedurals/ */

        const float N = 50.0; // grid ratio
        float gridTextureGradBox(in vec2 p, in vec2 ddx, in vec2 ddy) {
            // filter kernel
            vec2 w = max(abs(ddx), abs(ddy)) + 0.01;

            // analytic (box) filtering
            vec2 a = p + 0.5*w;                        
            vec2 b = p - 0.5*w;           
            vec2 i = (floor(a)+min(fract(a)*N,1.0)-
                      floor(b)-min(fract(b)*N,1.0))/(N*w);
            //pattern
            return (1.0-i.x)*(1.0-i.y);
        }

        out vec4 frag_color;

        void main() {
            // vec2 d = 1.0 - step(0.01, fract(v_uv*10.0));
            // gl_FragColor = vec4(max(d.x, d.y));

            float spotlight = 0.3 + 0.6*smoothstep(0.0, 0.1, 1.0 - length(v_uv)/5.5);

            vec2 uv = (v_uv - 0.5) + 0.5/N;
            float grid = gridTextureGradBox(uv, dFdx(uv), dFdy(uv));
            frag_color = vec4(vec3(1.0 - 0.25*(1.0 - grid)), 1);
        }`;


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

const buf = {
    geo_v_pos:   gl.createBuffer(),
    geo_v_color: gl.createBuffer(),
    geo_i:       gl.createBuffer(),
    geo_i_count: 0,

    grid_v_pos:  gl.createBuffer(),
    grid_v_uv:   gl.createBuffer(),
    grid_i:      gl.createBuffer(),
    grid_i_count: 0,
};


/* generate/upload building geometry */
{
    const data = ({
      "data": {
        "buildings": [
          {
            "floors": [
              {
                "properties": [
                  {
                    "name": "elevation",
                    "currentValue": 3.3500000000000005
                  }
                ],
                "zones": []
              },
              {
                "properties": [],
                "zones": [
                  {
                    "surfaces": []
                  }
                ]
              },
              {
                "properties": [
                  {
                    "name": "level",
                    "currentValue": 0
                  },
                  {
                    "name": "elevation",
                    "currentValue": 0.2
                  }
                ],
                "zones": [
                  {
                    "surfaces": [
                      {
                        "shapes": [
                          {
                            "vertices": [
                              {
                                "x": -12.780168388795403,
                                "y": -6.539407355163124
                              },
                              {
                                "x": -10.132827695249453,
                                "y": -6.539407355163124
                              },
                              {
                                "x": -10.132827695249453,
                                "y": -5.43003471321051
                              },
                              {
                                "x": -12.780168388795403,
                                "y": -5.43003471321051
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "surfaces": [
                      {
                        "shapes": [
                          {
                            "vertices": [
                              {
                                "x": -17.638818637928146,
                                "y": 0.06337344227294801
                              },
                              {
                                "x": -17.638819068916835,
                                "y": -5.43003417725016
                              },
                              {
                                "x": -2.626835978033626,
                                "y": -5.430035355024561
                              },
                              {
                                "x": -2.6268356439850127,
                                "y": -1.172231677434357
                              },
                              {
                                "x": 1.230801299281198,
                                "y": -1.1722319800876448
                              },
                              {
                                "x": 1.230801396221269,
                                "y": 0.06337196184526163
                              },
                              {
                                "x": -0.49775605006144874,
                                "y": 0.06337209746030491
                              },
                              {
                                "x": -0.4977559410772011,
                                "y": 1.452491837767456
                              },
                              {
                                "x": -2.5469155137341217,
                                "y": 1.4524919985355367
                              },
                              {
                                "x": -2.5469156227183607,
                                "y": 0.06337225822838795
                              },
                              {
                                "x": -12.780168606993668,
                                "y": 0.06337306108460682
                              },
                              {
                                "x": -12.780168438037014,
                                "y": 2.216904559013114
                              },
                              {
                                "x": -16.050413778959797,
                                "y": 1.709264433672245
                              },
                              {
                                "x": -16.050413908089187,
                                "y": 0.06337331765367456
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "surfaces": [
                      {
                        "shapes": [
                          {
                            "vertices": [
                              {
                                "x": -2.6268356439850127,
                                "y": -6.539407517133058
                              },
                              {
                                "x": -0.49775677638767196,
                                "y": -6.539407517133058
                              },
                              {
                                "x": -0.49775677638767196,
                                "y": -5.430035427303043
                              },
                              {
                                "x": -2.6268356439850127,
                                "y": -5.430035427303043
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "surfaces": [
                      {
                        "shapes": [
                          {
                            "vertices": [
                              {
                                "x": -2.5469156146359,
                                "y": 3.7385063905727502
                              },
                              {
                                "x": -2.5469156384773997,
                                "y": 6.049351552935114
                              },
                              {
                                "x": -5.647919360455556,
                                "y": 6.827981372090198
                              },
                              {
                                "x": -5.64791952361278,
                                "y": 3.2713281222539354
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "surfaces": [
                      {
                        "shapes": [
                          {
                            "vertices": [
                              {
                                "x": -2.5469153942047624,
                                "y": 0.0633736748658841
                              },
                              {
                                "x": -2.5469156146359,
                                "y": 3.7385063905727502
                              },
                              {
                                "x": -11.058287069972524,
                                "y": 2.4729343755914712
                              },
                              {
                                "x": -11.05828687069302,
                                "y": 0.06337316436151684
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "surfaces": [
                      {
                        "shapes": [
                          {
                            "vertices": [
                              {
                                "x": -0.49775652651448604,
                                "y": 4.0375429891818975
                              },
                              {
                                "x": -0.4977566446034872,
                                "y": 0.0322281016309284
                              },
                              {
                                "x": 3.379101974322438,
                                "y": 0.03222805831270525
                              },
                              {
                                "x": 3.379102025478727,
                                "y": 4.610571356693302
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "surfaces": [
                      {
                        "shapes": [
                          {
                            "vertices": [
                              {
                                "x": -2.5469153875852535,
                                "y": 1.4524918251183103
                              },
                              {
                                "x": -0.49775629178839675,
                                "y": 1.4524920111846997
                              },
                              {
                                "x": -0.49775652651448604,
                                "y": 4.0375429891818975
                              },
                              {
                                "x": -2.5469156146359,
                                "y": 3.7385063905727502
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "surfaces": [
                      {
                        "shapes": [
                          {
                            "vertices": [
                              {
                                "x": -2.6268356439850127,
                                "y": -5.430035427303043
                              },
                              {
                                "x": 1.2308012350549649,
                                "y": -5.430035427303043
                              },
                              {
                                "x": 1.2308012350549649,
                                "y": -1.172231677434357
                              },
                              {
                                "x": -2.6268356439850127,
                                "y": -1.172231677434357
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "surfaces": [
                      {
                        "shapes": [
                          {
                            "vertices": [
                              {
                                "x": 1.2308015603606057,
                                "y": -5.430035115453304
                              },
                              {
                                "x": 4.8631940768045325,
                                "y": -5.430035115453304
                              },
                              {
                                "x": 4.8631940768045325,
                                "y": 0.06337206860599433
                              },
                              {
                                "x": 1.2308015603606057,
                                "y": 0.06337206860599433
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              },
              {
                "properties": [],
                "zones": [
                  {
                    "surfaces": []
                  }
                ]
              }
            ]
          }
        ]
      }
    }).data.buildings[0];

    const ACTIVE_FLOOR = data.floors.findIndex(x => x.properties.some(p => p.name == "level" && p.currentValue == 0));

    /* getting the bounds lets us center the camera on the building, no matter where it is. */
    // const bounds = {
    //   x: { min: Infinity, max: -Infinity },
    //   y: { min: Infinity, max: -Infinity },
    // };
    // for (const floor of data.floors) {
    //   for (const zone of data.floors[ACTIVE_FLOOR].zones) {
    //     zone.surfaces.sort((a, b) => Date.parse(a.lastModified) - Date.parse(b.lastModified));

    //     for (const surface of zone.surfaces) {
    //       for (const shape of surface.shapes) {
    //         for (const vtx of shape.vertices) {
    //           bounds.x.min = Math.min(bounds.x.min, vtx.x);
    //           bounds.x.max = Math.max(bounds.x.max, vtx.x);

    //           bounds.y.min = Math.min(bounds.y.min, vtx.y);
    //           bounds.y.max = Math.max(bounds.y.max, vtx.y);
    //         }
    //       }
    //     }
    //   }
    // }


    let building_walls = [];
    for (const zone of data.floors[ACTIVE_FLOOR].zones) {
        for (const surface of zone.surfaces) {
            for (const shape of surface.shapes) {
                if (shape.vertices.length == 0) continue;

                for (let i = 0; i < shape.vertices.length; i++) {
                    const from = shape.vertices[(i+0) % shape.vertices.length];
                    const   to = shape.vertices[(i+1) % shape.vertices.length];

                    const cx = (from.x + to.x) * 0.5;
                    const cy = (from.y + to.y) * 0.5;

                    const dx = from.x - to.x;
                    const dy = from.y - to.y;
                    const len = Math.sqrt(dx*dx + dy*dy);

                    const angle = Math.atan2(dy, dx);

                    // building_walls.push(
                    //     mat4_mul(
                    //         mat4_create(),
                    //         mat4_mul(
                    //             mat4_create(),
                    //             mat4_from_translation(mat4_create(), [cx, cy, 0.0]),
                    //             mat4_from_scaling(mat4_create(), 0.1, len)
                    //         ),
                    //         mat4_from_x_rotation(mat4_create(), angle)
                    //     )
                    // )

                    building_walls.push(
                        mat4_mul(
                            mat4_create(),
                            mat4_mul(
                                mat4_create(),
                                mat4_from_translation(mat4_create(),[cx, cy, 0.0]),
                                mat4_from_z_rotation(mat4_create(), angle)
                            ),
                            mat4_from_scaling(mat4_create(), 0.1, 0.5*len, 1.0)
                        )
                    )
                }

            }
        }
    }

    const geo_idx   = [];
    const geo_pos   = [];
    const geo_color = [];
    for (let m of building_walls) {
        const e = 0.8;
        const corners = [
            -1, -1,  1,   1, -1,  1,   1,  1,  1,  -1,  1,  1, /* Top face    */
            -1, -1, -e,  -1,  1, -e,   1,  1, -1,   1, -1, -e, /* 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   */
        ];

        const p = [0, 0, 0, 1];
        for (let corner_i = 0; corner_i < corners.length; corner_i += 3) {
            corners[corner_i+2] += 1.0;
            p[0] = corners[corner_i+0];
            p[1] = corners[corner_i+1];
            p[2] = corners[corner_i+2];
            mat4_transform_vec4(p, p, m);
            corners[corner_i+0] = p[0];
            corners[corner_i+1] = p[1];
            corners[corner_i+2] = p[2];
        }

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

    {
        gl.bindBuffer(gl.ARRAY_BUFFER, buf.geo_v_pos);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(geo_pos), gl.STATIC_DRAW);

        gl.bindBuffer(gl.ARRAY_BUFFER, buf.geo_v_color);
        gl.bufferData(gl.ARRAY_BUFFER, new Uint8Array(geo_color), gl.STATIC_DRAW);

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

        buf.geo_i_count = geo_idx.length;
    }
}

/* generate/upload grid geometry */
{
    const grid_idx = [];
    const grid_pos = [];
    const grid_uv  = [];
    {
        const corners = [
            -999, -999, -0,  -999,  999, -0,   999,  999, -0,   999, -999, -0, /* Bottom face */
        ];

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

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

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

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

    {
        gl.bindBuffer(gl.ARRAY_BUFFER, buf.grid_v_pos);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(grid_pos), gl.STATIC_DRAW);

        gl.bindBuffer(gl.ARRAY_BUFFER, buf.grid_v_uv);
        gl.bufferData(gl.ARRAY_BUFFER, new Uint8Array(grid_uv), gl.STATIC_DRAW);

        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buf.grid_i);
        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(grid_idx), gl.STATIC_DRAW);

        buf.grid_i_count = grid_idx.length;
    }
}


let input = {
    pitch:  Math.PI*0.25,
    yaw:   -Math.PI*0.25,
    eye: [0, 0, 0, 1],

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

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

    zoom:   10,
    scroll:  0,

    lmb_down:    false,
    lmb_clicked: false, /* true for a frame after down */
    rmb_down:    false,
    mouse_x: 0,
    mouse_y: 0,
};

{
    const opts = { passive: false };

    window.addEventListener('wheel', e => {
        e.preventDefault();

        if (input.mouse_down) return;
        input.scroll += e.deltaY;
    }, opts);
    window.addEventListener('mousedown', ev => {
        ev.preventDefault();

        input.dampedEvent.button = ev.button ? 2 : 0;

        if (ev.button == 0) input.lmb_down = true;
        if (ev.button == 2) input.rmb_down = true;
    }, opts);
    window.addEventListener('mousemove', ev => {
        ev.preventDefault();

        if (input.lmb_down || input.rmb_down) {
            input.dampedEvent.movementX += ev.movementX;
            input.dampedEvent.movementY += ev.movementY;
        }

        input.mouse_x = ev.offsetX*window.devicePixelRatio;
        input.mouse_y = ev.offsetY*window.devicePixelRatio;
    }, opts);
    window.addEventListener("contextmenu", ev => {
        ev.preventDefault();
    }, opts);
    window.addEventListener('mouseup', ev => {
        ev.preventDefault();

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

let then = 0;
requestAnimationFrame(function frame(now) {
    requestAnimationFrame(frame);

    now *= 0.001;
    const deltaTime = now - then;
    then = now;

    {
        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 (ev.button == 0) {
            input.pitch -= ev.movementX * 0.0005 * zoom_fudge;
            input.yaw   -= ev.movementY * 0.0005 * zoom_fudge;
            input.yaw = Math.max(-Math.PI*0.5 + 0.01, Math.min(Math.PI*0.5 - 0.01, input.yaw));
        }
        if (ev.button == 2) {
            const unit = [0, -ev.movementX*0.00075*zoom_fudge, ev.movementY*0.00075*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.movementX *= Math.pow(1 - 0.17, 60*deltaTime);
        ev.movementY *= Math.pow(1 - 0.17, 60*deltaTime);
    }

    {
        const t = Math.cbrt(Math.abs(input.scroll)) * Math.sign(input.scroll);

        input.zoom += 0.005*t*input.zoom;
        input.scroll *= Math.pow(1 - 0.5, 60*deltaTime);
        input.zoom = Math.min(20, input.zoom);
    }

    const ORTHO = false;
    const mvp = mat4_create();
    const scratch = mat4_create();
    {
        const model = mat4_create();

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

            mat4_mul(mvp, projection, model);
        } else {
            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);

            const view = mat4_create();
            {
                const eye = input.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);
            }

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


    {
        /* 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(1, 1, 1, 1);
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

        /* grid pass */
        gl.disable(gl.DEPTH_TEST);
        {
            gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
            gl.enable(gl.BLEND);

            gl.useProgram(shaders.grid.program);
            gl.enableVertexAttribArray(shaders.grid.a_pos);
            gl.enableVertexAttribArray(shaders.grid.a_color);

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

            /* upload/bind geometry */
            {
                gl.bindBuffer(gl.ARRAY_BUFFER, buf.grid_v_pos);
                gl.vertexAttribPointer(shaders.grid.a_pos, 3, gl.FLOAT, false, 0, 0);

                gl.bindBuffer(gl.ARRAY_BUFFER, buf.grid_v_uv);
                gl.vertexAttribPointer(shaders.grid.a_uv, 2, gl.UNSIGNED_BYTE, true, 0, 0);

                gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buf.grid_i);
            }

            gl.drawElements(gl.TRIANGLES, buf.grid_i_count, gl.UNSIGNED_SHORT, 0);
        }
        gl.enable(gl.DEPTH_TEST);

        /* 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, buf.geo_v_pos);
                gl.vertexAttribPointer(shaders.geo.a_pos, 3, gl.FLOAT, false, 0, 0);

                gl.bindBuffer(gl.ARRAY_BUFFER, buf.geo_v_color);
                gl.vertexAttribPointer(shaders.geo.a_color, 4, gl.UNSIGNED_BYTE, true, 0, 0);

                gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buf.geo_i);
            }

            gl.drawElements(gl.TRIANGLES, buf.geo_i_count, 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, x, y=x, z=x) {
    out[0] = x;
    out[1] = 0;
    out[2] = 0;
    out[3] = 0;
    out[4] = 0;
    out[5] = y;
    out[6] = 0;
    out[7] = 0;
    out[8] = 0;
    out[9] = 0;
    out[10] = z;
    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>