index_all.html

<!DOCTYPE html><html>
    <style type="text/css">
        .body {
            color: black;
        }
        .text {
            position:absolute;
            width: 100%;
            z-index: 1;
            font-size: 200%;
            font-family: consolas;
            color: orange;
            text-align:center;
        }
    </style>
    <div id="upper" class="text" style="bottom:5%;"></div>
<body>
    <!--script src="shared.js"></script>
    <script src="heavy_min.js"></script>
    <script src="quadtree_min.js"></script>
    <script src="sim_min.js"></script>
    <script src="map_min.js"></script>
    <script src="textures_min.js"></script-->
    <script>


'use strict';

// SHARED




function rnd(a, b)
{
    if(!b){ b = a; a = 0; }
    return (Math.random() * (b-a)) + a;
}

function rndi(a, b)
{
    return parseInt(rnd(a, b));
}

function rndf(a, b)
{
    return Math.floor(rnd(a, b)); // floored random
}

/*
function pingpong(input, min, max)
{
    let range = max - min;
    return min + Math.abs(((input + range) % (range * 2)) - range);
}
*/

/*
// random color: https://www.paulirish.com/2009/random-hex-color-code-snippets/
function rndc(m)
{
    //return '#'+Math.floor(Math.random()*16777215).toString(16);
    return '#' + rndi(1+m, 9) + rndi(1+m, 9) + rndi(1+m, 9);
}
*/

// another random color but this time as [0.1]  ----[255,255,255,255]
function rndc()
{
    return [rnd(0, 1), rnd(0, 1), rnd(0, 1), 1.0];
}

function rndc256()
{
    return [rnd(0, 255), rnd(0, 255), rnd(0, 255), 1.0];
}

// returns a random element from array a
function rnda(a)
{
    return a[Math.floor(Math.random()*a.length)];
}




function rgba(r, g, b, a)
{
    return 'rgba(' + r + ',' + g + ',' + b + ',' + (a || 1.0) + ')';
}


// array to rgba
function argba(v)
{
    //console.log("argba: ", v)
    if(v.length == 1) return rgba(v[0], v[0], v[0], 1.0);
    return rgba(v[0], v[1], v[2], v[3] || 1.0);
}


// I still wonder why there's no clamping method in Math
function clamp(a,b,c)
{
    return Math.min(Math.max(a, b), c);
};

/*
// clamp between 0 and 1
function clamp01(v)
{
    return Math.min(Math.max(0.0, 1.0), v);
}
*/


function lerp(a, b, v)
{
    return a + v * (b - a);
}



// lerp from color 1 to color 2 (both are [r,g,b,a]); lerp by a amount. alpha always remains 1.0
function lerpc(c1, c2, a)
{
    let ret =
    [
        lerp(c1[0], c2[0], a),
        lerp(c1[1], c2[1], a),
        lerp(c1[2], c2[2], a),
        1.0
    ];

    return ret;
}





/*
// TAKEN FROM TEXGEN.JS
// NOT BAD BUT NOT VERY USEFUL
function hashRNG( seed, x, y )
{
    seed = ( Math.abs( seed % 2147483648 ) == 0 ) ? 1 : seed;

    var a = ( ( seed * ( x + 1 ) * 777 ) ^ ( seed * ( y + 1 ) * 123 ) ) % 2147483647;
    a = (a ^ 61) ^ (a >> 16);
    a = a + (a << 3);
    a = a ^ (a >> 4);
    a = a * 0x27d4eb2d;
    a = a ^ (a >> 15);
    a = a / 2147483647;

    return a;
};
*/

/*
// vec2 distance. check if we have distance in lightgl !!!!
function dist(p1, p2)
{
    var a = p1.x - p2.x,
        b = p1.y - p2.y;
    return Math.sqrt( a * a + b * b );
}


function dist2(x1, y1, x2, y2)
{
    var a = x1 - x2,
        b = y1 - y2;
    return Math.sqrt( a * a + b * b );
}


// calculate distance from a vector to an array. useful for calculating the distance between a {x,y,z} and a [x,y,z]
function distVtoA(v, a)
{
    return Math.sqrt
    (
        v.x * a[0] +
        v.y * a[1] +
        v.z * a[2]
    );
}
*/

/*

function distanceVector( v1, v2 )
{
    var dx = v1.x - v2.x;
    var dy = v1.y - v2.y;
    var dz = v1.z - v2.z;

    return Math.sqrt( dx * dx + dy * dy + dz * dz );
}

*/


/*
function distv(v1, v2)
{
    let dx = v1.x - v2.x,
        dy = v1.y - v2.y,
        dz = v1.z - v2.z;

    return Math.sqrt( dx * dx + dy * dy + dz * dz );
}


function map(v, in_min, in_max, out_min, out_max)
{
    return (v - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}
*/

// HEAVY


//
// NEW LIGHT.GL JS CUSTOMIZED FOR HEAVY.JS
//
// STARTED WORK 29.10.2023
// TODO: this will now be called basically "heavy.js", and from now on will be known as "the engine"
// This was originally lightgl.js. Original link and license:
//
// http://github.com/evanw/lightgl.js/
// Copyright 2011 Evan Wallace
// Released under the MIT license
//
// This is a hand-made almost-minified version that contains only what I need.
//

// before GL
var GL = (function()
{

    // The internal `gl` variable holds the current WebGL context.
    var gl;

    // A value to bitwise-or with new enums to make them distinguishable from the
    // standard WebGL enums.
    var ENUM = 0x12340000;




    // src/matrix.js
    // Represents a 4x4 matrix stored in row-major order that uses Float32Arrays
    // when available. Matrix operations can either be done using convenient
    // methods that return a new matrix for the result or optimized methods
    // that store the result in an existing matrix to avoid generating garbage.

    // assume we have Float32Array
    //var hasFloat32Array = (typeof Float32Array != 'undefined');

    // ### new GL.Matrix([elements])
    //
    // This constructor takes 16 arguments in row-major order, which can be passed
    // individually, as a list, or even as four lists, one for each row. If the
    // arguments are omitted then the identity matrix is constructed instead.
    class Matrix
    {
        constructor()
        {
            var m = Array.prototype.concat.apply([], arguments);
            if (!m.length)
            {
                m =
                [
                    1, 0, 0, 0,
                    0, 1, 0, 0,
                    0, 0, 1, 0,
                    0, 0, 0, 1
                ];
            }
            //this.m = hasFloat32Array ? new Float32Array(m) : m;
            this.m = new Float32Array(m);
        }

/*
        // ### .inverse()
        //
        // Returns the matrix that when multiplied with this matrix results in the
        // identity matrix.
        inverse()
        {
            return Matrix.inverse(this, new Matrix());
        }

        // ### .transpose()
        //
        // Returns this matrix, exchanging columns for rows.
        transpose()
        {
            return Matrix.transpose(this, new Matrix());
        }
*/

        // ### .multiply(matrix)
        //
        // Returns the concatenation of the transforms for this matrix and `matrix`.
        // This emulates the OpenGL function `glMultMatrix()`.
        multiply(matrix)
        {
            return Matrix.multiply(this, matrix, new Matrix());
        }

/*
        // ### .transformPoint(point)
        //
        // Transforms the vector as a point with a w coordinate of 1. This
        // means translations will have an effect, for example.
        transformPoint(v)
        {
            var m = this.m;
            return new Vector(
                m[0] * v.x + m[1] * v.y + m[2] * v.z + m[3],
                m[4] * v.x + m[5] * v.y + m[6] * v.z + m[7],
                m[8] * v.x + m[9] * v.y + m[10] * v.z + m[11]
            ).divide(m[12] * v.x + m[13] * v.y + m[14] * v.z + m[15]);
        }

        // ### .transformPoint(vector)
        //
        // Transforms the vector as a vector with a w coordinate of 0. This
        // means translations will have no effect, for example.
        transformVector(v)
        {
            var m = this.m;
            return new Vector(
                m[0] * v.x + m[1] * v.y + m[2] * v.z,
                m[4] * v.x + m[5] * v.y + m[6] * v.z,
                m[8] * v.x + m[9] * v.y + m[10] * v.z
            );
        }
*/


    }




/*
    // ### GL.Matrix.inverse(matrix[, result])
    //
    // Returns the matrix that when multiplied with `matrix` results in the
    // identity matrix. You can optionally pass an existing matrix in `result`
    // to avoid allocating a new matrix. This implementation is from the Mesa
    // OpenGL function `__gluInvertMatrixd()` found in `project.c`.
    Matrix.inverse = function(matrix, result)
    {
        result = result || new Matrix();
        var m = matrix.m, r = result.m;

        r[0] = m[5]*m[10]*m[15] - m[5]*m[14]*m[11] - m[6]*m[9]*m[15] + m[6]*m[13]*m[11] + m[7]*m[9]*m[14] - m[7]*m[13]*m[10];
        r[1] = -m[1]*m[10]*m[15] + m[1]*m[14]*m[11] + m[2]*m[9]*m[15] - m[2]*m[13]*m[11] - m[3]*m[9]*m[14] + m[3]*m[13]*m[10];
        r[2] = m[1]*m[6]*m[15] - m[1]*m[14]*m[7] - m[2]*m[5]*m[15] + m[2]*m[13]*m[7] + m[3]*m[5]*m[14] - m[3]*m[13]*m[6];
        r[3] = -m[1]*m[6]*m[11] + m[1]*m[10]*m[7] + m[2]*m[5]*m[11] - m[2]*m[9]*m[7] - m[3]*m[5]*m[10] + m[3]*m[9]*m[6];

        r[4] = -m[4]*m[10]*m[15] + m[4]*m[14]*m[11] + m[6]*m[8]*m[15] - m[6]*m[12]*m[11] - m[7]*m[8]*m[14] + m[7]*m[12]*m[10];
        r[5] = m[0]*m[10]*m[15] - m[0]*m[14]*m[11] - m[2]*m[8]*m[15] + m[2]*m[12]*m[11] + m[3]*m[8]*m[14] - m[3]*m[12]*m[10];
        r[6] = -m[0]*m[6]*m[15] + m[0]*m[14]*m[7] + m[2]*m[4]*m[15] - m[2]*m[12]*m[7] - m[3]*m[4]*m[14] + m[3]*m[12]*m[6];
        r[7] = m[0]*m[6]*m[11] - m[0]*m[10]*m[7] - m[2]*m[4]*m[11] + m[2]*m[8]*m[7] + m[3]*m[4]*m[10] - m[3]*m[8]*m[6];

        r[8] = m[4]*m[9]*m[15] - m[4]*m[13]*m[11] - m[5]*m[8]*m[15] + m[5]*m[12]*m[11] + m[7]*m[8]*m[13] - m[7]*m[12]*m[9];
        r[9] = -m[0]*m[9]*m[15] + m[0]*m[13]*m[11] + m[1]*m[8]*m[15] - m[1]*m[12]*m[11] - m[3]*m[8]*m[13] + m[3]*m[12]*m[9];
        r[10] = m[0]*m[5]*m[15] - m[0]*m[13]*m[7] - m[1]*m[4]*m[15] + m[1]*m[12]*m[7] + m[3]*m[4]*m[13] - m[3]*m[12]*m[5];
        r[11] = -m[0]*m[5]*m[11] + m[0]*m[9]*m[7] + m[1]*m[4]*m[11] - m[1]*m[8]*m[7] - m[3]*m[4]*m[9] + m[3]*m[8]*m[5];

        r[12] = -m[4]*m[9]*m[14] + m[4]*m[13]*m[10] + m[5]*m[8]*m[14] - m[5]*m[12]*m[10] - m[6]*m[8]*m[13] + m[6]*m[12]*m[9];
        r[13] = m[0]*m[9]*m[14] - m[0]*m[13]*m[10] - m[1]*m[8]*m[14] + m[1]*m[12]*m[10] + m[2]*m[8]*m[13] - m[2]*m[12]*m[9];
        r[14] = -m[0]*m[5]*m[14] + m[0]*m[13]*m[6] + m[1]*m[4]*m[14] - m[1]*m[12]*m[6] - m[2]*m[4]*m[13] + m[2]*m[12]*m[5];
        r[15] = m[0]*m[5]*m[10] - m[0]*m[9]*m[6] - m[1]*m[4]*m[10] + m[1]*m[8]*m[6] + m[2]*m[4]*m[9] - m[2]*m[8]*m[5];

        var det = m[0]*r[0] + m[1]*r[4] + m[2]*r[8] + m[3]*r[12];
        for (var i = 0; i < 16; i++) r[i] /= det;
        return result;
    };



    // ### GL.Matrix.transpose(matrix[, result])
    //
    // Returns `matrix`, exchanging columns for rows. You can optionally pass an
    // existing matrix in `result` to avoid allocating a new matrix.
    Matrix.transpose = function(matrix, result)
    {
        result = result || new Matrix();
        var m = matrix.m, r = result.m;
        r[0] = m[0]; r[1] = m[4]; r[2] = m[8]; r[3] = m[12];
        r[4] = m[1]; r[5] = m[5]; r[6] = m[9]; r[7] = m[13];
        r[8] = m[2]; r[9] = m[6]; r[10] = m[10]; r[11] = m[14];
        r[12] = m[3]; r[13] = m[7]; r[14] = m[11]; r[15] = m[15];
        return result;
    };
*/

    // ### GL.Matrix.multiply(left, right[, result])
    //
    // Returns the concatenation of the transforms for `left` and `right`. You can
    // optionally pass an existing matrix in `result` to avoid allocating a new
    // matrix. This emulates the OpenGL function `glMultMatrix()`.
    Matrix.multiply = function(left, right, result)
    {
        result = result || new Matrix();
        var a = left.m, b = right.m, r = result.m;

        r[0] = a[0] * b[0] + a[1] * b[4] + a[2] * b[8] + a[3] * b[12];
        r[1] = a[0] * b[1] + a[1] * b[5] + a[2] * b[9] + a[3] * b[13];
        r[2] = a[0] * b[2] + a[1] * b[6] + a[2] * b[10] + a[3] * b[14];
        r[3] = a[0] * b[3] + a[1] * b[7] + a[2] * b[11] + a[3] * b[15];

        r[4] = a[4] * b[0] + a[5] * b[4] + a[6] * b[8] + a[7] * b[12];
        r[5] = a[4] * b[1] + a[5] * b[5] + a[6] * b[9] + a[7] * b[13];
        r[6] = a[4] * b[2] + a[5] * b[6] + a[6] * b[10] + a[7] * b[14];
        r[7] = a[4] * b[3] + a[5] * b[7] + a[6] * b[11] + a[7] * b[15];

        r[8] = a[8] * b[0] + a[9] * b[4] + a[10] * b[8] + a[11] * b[12];
        r[9] = a[8] * b[1] + a[9] * b[5] + a[10] * b[9] + a[11] * b[13];
        r[10] = a[8] * b[2] + a[9] * b[6] + a[10] * b[10] + a[11] * b[14];
        r[11] = a[8] * b[3] + a[9] * b[7] + a[10] * b[11] + a[11] * b[15];

        r[12] = a[12] * b[0] + a[13] * b[4] + a[14] * b[8] + a[15] * b[12];
        r[13] = a[12] * b[1] + a[13] * b[5] + a[14] * b[9] + a[15] * b[13];
        r[14] = a[12] * b[2] + a[13] * b[6] + a[14] * b[10] + a[15] * b[14];
        r[15] = a[12] * b[3] + a[13] * b[7] + a[14] * b[11] + a[15] * b[15];

        return result;
    };




    // ### GL.Matrix.identity([result])
    //
    // Returns an identity matrix. You can optionally pass an existing matrix in
    // `result` to avoid allocating a new matrix. This emulates the OpenGL function
    // `glLoadIdentity()`.
    Matrix.identity = function(result)
    {
        result = result || new Matrix();
        var m = result.m;
        m[0] = m[5] = m[10] = m[15] = 1;
        m[1] = m[2] = m[3] = m[4] = m[6] = m[7] = m[8] = m[9] = m[11] = m[12] = m[13] = m[14] = 0;
        return result;
    };




    // ### GL.Matrix.perspective(fov, aspect, near, far[, result])
    //
    // Returns a perspective transform matrix, which makes far away objects appear
    // smaller than nearby objects. The `aspect` argument should be the width
    // divided by the height of your viewport and `fov` is the top-to-bottom angle
    // of the field of view in degrees. You can optionally pass an existing matrix
    // in `result` to avoid allocating a new matrix. This emulates the OpenGL
    // function `gluPerspective()`.
    Matrix.perspective = function(fov, aspect, near, far, result)
    {
        var y = Math.tan(fov * Math.PI / 360) * near;
        var x = y * aspect;
        return Matrix.frustum(-x, x, -y, y, near, far, result);
    };



    // ### GL.Matrix.frustum(left, right, bottom, top, near, far[, result])
    //
    // Sets up a viewing frustum, which is shaped like a truncated pyramid with the
    // camera where the point of the pyramid would be. You can optionally pass an
    // existing matrix in `result` to avoid allocating a new matrix. This emulates
    // the OpenGL function `glFrustum()`.
    Matrix.frustum = function(l, r, b, t, n, f, result)
    {
        result = result || new Matrix();
        var m = result.m;

        m[0] = 2 * n / (r - l);
        m[1] = 0;
        m[2] = (r + l) / (r - l);
        m[3] = 0;

        m[4] = 0;
        m[5] = 2 * n / (t - b);
        m[6] = (t + b) / (t - b);
        m[7] = 0;

        m[8] = 0;
        m[9] = 0;
        m[10] = -(f + n) / (f - n);
        m[11] = -2 * f * n / (f - n);

        m[12] = 0;
        m[13] = 0;
        m[14] = -1;
        m[15] = 0;

        return result;
    };




/*
    // ### GL.Matrix.ortho(left, right, bottom, top, near, far[, result])
    //
    // Returns an orthographic projection, in which objects are the same size no
    // matter how far away or nearby they are. You can optionally pass an existing
    // matrix in `result` to avoid allocating a new matrix. This emulates the OpenGL
    // function `glOrtho()`.
    Matrix.ortho = function(l, r, b, t, n, f, result)
    {
        result = result || new Matrix();
        var m = result.m;

        m[0] = 2 / (r - l);
        m[1] = 0;
        m[2] = 0;
        m[3] = -(r + l) / (r - l);

        m[4] = 0;
        m[5] = 2 / (t - b);
        m[6] = 0;
        m[7] = -(t + b) / (t - b);

        m[8] = 0;
        m[9] = 0;
        m[10] = -2 / (f - n);
        m[11] = -(f + n) / (f - n);

        m[12] = 0;
        m[13] = 0;
        m[14] = 0;
        m[15] = 1;

        return result;
    };
*/



    // ### GL.Matrix.scale(x, y, z[, result])
    //
    // This emulates the OpenGL function `glScale()`. You can optionally pass an
    // existing matrix in `result` to avoid allocating a new matrix.
    Matrix.scale = function(x, y, z, result)
    {
        result = result || new Matrix();
        var m = result.m;

        m[0] = x;   m[1] = 0;   m[2] = 0;   m[3] = 0;
        m[4] = 0;   m[5] = y;   m[6] = 0;   m[7] = 0;
        m[8] = 0;   m[9] = 0;   m[10] = z;  m[11] = 0;
        m[12] = 0;  m[13] = 0;  m[14] = 0;  m[15] = 1;

        return result;
    };



    // ### GL.Matrix.translate(x, y, z[, result])
    //
    // This emulates the OpenGL function `glTranslate()`. You can optionally pass
    // an existing matrix in `result` to avoid allocating a new matrix.
    Matrix.translate = function(x, y, z, result)
    {
        result = result || new Matrix();
        var m = result.m;

        m[0] = 1;   m[1] = 0;   m[2] = 0;   m[3] = x;
        m[4] = 0;   m[5] = 1;   m[6] = 0;   m[7] = y;
        m[8] = 0;   m[9] = 0;   m[10] = 1;  m[11] = z;
        m[12] = 0;  m[13] = 0;  m[14] = 0;  m[15] = 1;

        return result;
    };





    // ### GL.Matrix.rotate(a, x, y, z[, result])
    //
    // Returns a matrix that rotates by `a` degrees around the vector `x, y, z`.
    // You can optionally pass an existing matrix in `result` to avoid allocating
    // a new matrix. This emulates the OpenGL function `glRotate()`.
    Matrix.rotate = function(a, x, y, z, result)
    {
        if (!a || (!x && !y && !z))
        {
            return Matrix.identity(result);
        }

        result = result || new Matrix();
        var m = result.m;
        var d = Math.sqrt(x*x + y*y + z*z);
        a *= Math.PI / 180; x /= d; y /= d; z /= d;
        var c = Math.cos(a), s = Math.sin(a), t = 1 - c;

        m[0] = x * x * t + c;
        m[1] = x * y * t - z * s;
        m[2] = x * z * t + y * s;
        m[3] = 0;

        m[4] = y * x * t + z * s;
        m[5] = y * y * t + c;
        m[6] = y * z * t - x * s;
        m[7] = 0;

        m[8] = z * x * t - y * s;
        m[9] = z * y * t + x * s;
        m[10] = z * z * t + c;
        m[11] = 0;

        m[12] = 0;
        m[13] = 0;
        m[14] = 0;
        m[15] = 1;

        return result;
    };



/*
    // ### GL.Matrix.lookAt(ex, ey, ez, cx, cy, cz, ux, uy, uz[, result])
    //
    // Returns a matrix that puts the camera at the eye point `ex, ey, ez` looking
    // toward the center point `cx, cy, cz` with an up direction of `ux, uy, uz`.
    // You can optionally pass an existing matrix in `result` to avoid allocating
    // a new matrix. This emulates the OpenGL function `gluLookAt()`.
    Matrix.lookAt = function(ex, ey, ez, cx, cy, cz, ux, uy, uz, result)
    {
        result = result || new Matrix();
        var m = result.m;
        var e = new Vector(ex, ey, ez);
        var c = new Vector(cx, cy, cz);
        var u = new Vector(ux, uy, uz);
        var f = e.subtract(c).unit();
        var s = u.cross(f).unit();
        var t = f.cross(s).unit();

        m[0] = s.x;
        m[1] = s.y;
        m[2] = s.z;
        m[3] = -s.dot(e);

        m[4] = t.x;
        m[5] = t.y;
        m[6] = t.z;
        m[7] = -t.dot(e);

        m[8] = f.x;
        m[9] = f.y;
        m[10] = f.z;
        m[11] = -f.dot(e);

        m[12] = 0;
        m[13] = 0;
        m[14] = 0;
        m[15] = 1;

        return result;
    };

*/




/*
    // ### new GL.Indexer()
    //
    // Generates indices into a list of unique objects from a stream of objects
    // that may contain duplicates. This is useful for generating compact indexed
    // meshes from unindexed data.
    class Indexer
    {
        constructor()
        {
            this.unique = [];
            this.indices = [];
            this.map = {};
        }

        // ### .add(v)
        //
        // Adds the object `obj` to `unique` if it hasn't already been added. Returns
        // the index of `obj` in `unique`.
        add(obj)
        {
            var key = JSON.stringify(obj);
            if (!(key in this.map))
            {
                this.map[key] = this.unique.length;
                this.unique.push(obj);
            }
            return this.map[key];
        }
    }
*/


    // ### new GL.Buffer(target, type)
    //
    // Provides a simple method of uploading data to a GPU buffer. Example usage:
    //
    //     var vertices = new GL.Buffer(gl.ARRAY_BUFFER, Float32Array);
    //     var indices = new GL.Buffer(gl.ELEMENT_ARRAY_BUFFER, Uint16Array);
    //     vertices.data = [[0, 0, 0], [1, 0, 0], [0, 1, 0], [1, 1, 0]];
    //     indices.data = [[0, 1, 2], [2, 1, 3]];
    //     vertices.compile();
    //     indices.compile();
    //
    // let see if we can make a class out of this
    class Buffer
    {
        constructor(target, type)
        {
            this.buffer = null;
            this.target = target;
            this.type = type;
            this.data = [];
        }

        // ### .compile(type)
        //
        // Upload the contents of `data` to the GPU in preparation for rendering. The
        // data must be a list of lists where each inner list has the same length. For
        // example, each element of data for vertex normals would be a list of length three.
        // This will remember the data length and element length for later use by shaders.
        // The type can be either `gl.STATIC_DRAW` or `gl.DYNAMIC_DRAW`, and defaults to
        // `gl.STATIC_DRAW`.
        //
        // This could have used `[].concat.apply([], this.data)` to flatten
        // the array but Google Chrome has a maximum number of arguments so the
        // concatenations are chunked to avoid that limit.
        compile(type)
        {
            var data = [];
            for (var i = 0, chunk = 10000; i < this.data.length; i += chunk)
            {
                data = Array.prototype.concat.apply(data, this.data.slice(i, i + chunk));
            }
            var spacing = this.data.length ? data.length / this.data.length : 0;

            if (spacing != Math.round(spacing))
                throw new Error('buffer elements not of consistent size, average size is ' + spacing);

            this.buffer = this.buffer || gl.createBuffer();
            this.buffer.length = data.length;
            this.buffer.spacing = spacing;
            gl.bindBuffer(this.target, this.buffer);
            gl.bufferData(this.target, new this.type(data), type || 35044 /*gl.STATIC_DRAW*/);
        }
    }




    // Represents indexed triangle geometry with arbitrary additional attributes.
    // You need a shader to draw a mesh; meshes can't draw themselves.
    //
    // A mesh is a collection of `GL.Buffer` objects which are either vertex buffers
    // (holding per-vertex attributes) or index buffers (holding the order in which
    // vertices are rendered). By default, a mesh has a position vertex buffer called
    // `vertices` and a triangle index buffer called `triangles`. New buffers can be
    // added using `addVertexBuffer()` and `addIndexBuffer()`. Two strings are
    // required when adding a new vertex buffer, the name of the data array on the
    // mesh instance and the name of the GLSL attribute in the vertex shader.
    //
    // Example usage:
    //
    //     var mesh = new GL.Mesh({ coords: true, lines: true });
    //
    //     // Default attribute "vertices", available as "gl_Vertex" in
    //     // the vertex shader
    //     mesh.vertices = [[0, 0, 0], [1, 0, 0], [0, 1, 0], [1, 1, 0]];
    //
    //     // Optional attribute "coords" enabled in constructor,
    //     // available as "gl_TexCoord" in the vertex shader
    //     mesh.coords = [[0, 0], [1, 0], [0, 1], [1, 1]];
    //
    //     // Custom attribute "weights", available as "weight" in the
    //     // vertex shader
    //     mesh.addVertexBuffer('weights', 'weight');
    //     mesh.weights = [1, 0, 0, 1];
    //
    //     // Default index buffer "triangles"
    //     mesh.triangles = [[0, 1, 2], [2, 1, 3]];
    //
    //     // Optional index buffer "lines" enabled in constructor
    //     mesh.lines = [[0, 1], [0, 2], [1, 3], [2, 3]];
    //
    //     // Upload provided data to GPU memory
    //     mesh.compile();




    // TODO: TEST WHAT HAPPENS FOR EMPTY MESHES AND WORK ON COMPRESSED MESHES (PLUS "LOADING" THE MESH LATER!)



    // ### new GL.Mesh([options])
    //
    // Represents a collection of vertex buffers and index buffers. Each vertex
    // buffer maps to one attribute in GLSL and has a corresponding property set
    // on the Mesh instance. There is one vertex buffer by default: `vertices`,
    // which maps to `gl_Vertex`. The `coords`, `normals`, and `colors` vertex
    // buffers map to `gl_TexCoord`, `gl_Normal`, and `gl_Color` respectively,
    // and can be enabled by setting the corresponding options to true. There are
    // two index buffers, `triangles` and `lines`, which are used for rendering
    // `gl.TRIANGLES` and `gl.LINES`, respectively. Only `triangles` is enabled by
    // default, although `computeWireframe()` will add a normal buffer if it wasn't
    // initially enabled.
    class Mesh
    {
        constructor(options)
        {
            options = options || {};
            this.vertexBuffers = {};
            this.indexBuffers = {};
            this.addVertexBuffer('vertices', 'gl_Vertex');
            if (options.coords) this.addVertexBuffer('coords', 'gl_TexCoord');
            if (options.normals) this.addVertexBuffer('normals', 'gl_Normal');
            if (options.colors) this.addVertexBuffer('colors', 'gl_Color');
            if (!('triangles' in options) || options.triangles) this.addIndexBuffer('triangles');
            if (options.lines) this.addIndexBuffer('lines');
        }


        // ### .addVertexBuffer(name, attribute)
        //
        // Add a new vertex buffer with a list as a property called `name` on this object
        // and map it to the attribute called `attribute` in all shaders that draw this mesh.
        addVertexBuffer(name, attribute)
        {
            var buffer = this.vertexBuffers[attribute] = new Buffer(34962 /*gl.ARRAY_BUFFER*/, Float32Array);
            buffer.name = name;
            this[name] = [];
        }

        // ### .addIndexBuffer(name)
        //
        // Add a new index buffer with a list as a property called `name` on this object.
        addIndexBuffer(name)
        {
            var buffer = this.indexBuffers[name] = new Buffer(34963 /*gl.ELEMENT_ARRAY_BUFFER*/, Uint16Array);
            this[name] = [];
        }

        // ### .compile()
        //
        // Upload all attached buffers to the GPU in preparation for rendering. This
        // doesn't need to be called every frame, only needs to be done when the data
        // changes.
        compile()
        {
            for (var attribute in this.vertexBuffers)
            {
                var buffer = this.vertexBuffers[attribute];
                buffer.data = this[buffer.name];
                buffer.compile();
            }

            for (var name in this.indexBuffers)
            {
                var buffer = this.indexBuffers[name];
                buffer.data = this[name];
                buffer.compile();
            }
        }

/*
        // ### .transform(matrix)
        //
        // Transform all vertices by `matrix` and all normals by the inverse transpose
        // of `matrix`.
        transform(matrix)
        {
            this.vertices = this.vertices.map(function(v)
            {
                return matrix.transformPoint(Vector.fromArray(v)).toArray();
            });

            if (this.normals)
            {
                var invTrans = matrix.inverse().transpose();
                this.normals = this.normals.map(function(n)
                {
                    return invTrans.transformVector(Vector.fromArray(n)).unit().toArray();
                });
            }
            this.compile();
            return this;
        }
*/

        // ### .computeNormals()
        //
        // Computes a new normal for each vertex from the average normal of the
        // neighboring triangles. This means adjacent triangles must share vertices
        // for the resulting normals to be smooth.
        computeNormals()
        {
            if (!this.normals) this.addVertexBuffer('normals', 'gl_Normal');
            for (var i = 0; i < this.vertices.length; i++)
            {
                this.normals[i] = new Vector();
            }
            for (var i = 0; i < this.triangles.length; i++)
            {
                var t = this.triangles[i];
                var a = Vector.fromArray(this.vertices[t[0]]);
                var b = Vector.fromArray(this.vertices[t[1]]);
                var c = Vector.fromArray(this.vertices[t[2]]);
                var normal = b.subtract(a).cross(c.subtract(a)).unit();
                this.normals[t[0]] = this.normals[t[0]].add(normal);
                this.normals[t[1]] = this.normals[t[1]].add(normal);
                this.normals[t[2]] = this.normals[t[2]].add(normal);
            }
            for (var i = 0; i < this.vertices.length; i++)
            {
                this.normals[i] = this.normals[i].unit().toArray();
            }
            this.compile();
            return this;
        }


/*
        // ### .computeWireframe()
        //
        // Populate the `lines` index buffer from the `triangles` index buffer.
        computeWireframe()
        {
            var indexer = new Indexer();
            for (var i = 0; i < this.triangles.length; i++)
            {
                var t = this.triangles[i];
                for (var j = 0; j < t.length; j++)
                {
                    var a = t[j], b = t[(j + 1) % t.length];
                    indexer.add([Math.min(a, b), Math.max(a, b)]);
                }
            }

            if (!this.lines) this.addIndexBuffer('lines');
            this.lines = indexer.unique;
            this.compile();
            return this;
        }

        // ### .getAABB()
        //
        // Computes the axis-aligned bounding box, which is an object whose `min` and
        // `max` properties contain the minimum and maximum coordinates of all vertices.
        getAABB()
        {
            var aabb = { min: new Vector(Number.MAX_VALUE, Number.MAX_VALUE, Number.MAX_VALUE) };
            aabb.max = aabb.min.negative();
            for (var i = 0; i < this.vertices.length; i++)
            {
                var v = Vector.fromArray(this.vertices[i]);
                aabb.min = Vector.min(aabb.min, v);
                aabb.max = Vector.max(aabb.max, v);
            }
            return aabb;
        }


        // ### .getBoundingSphere()
        //
        // Computes a sphere that contains all vertices (not necessarily the smallest
        // sphere). The returned object has two properties, `center` and `radius`.
        getBoundingSphere()
        {
            var aabb = this.getAABB();
            var sphere = { center: aabb.min.add(aabb.max).divide(2), radius: 0 };
            for (var i = 0; i < this.vertices.length; i++)
            {
                sphere.radius = Math.max(sphere.radius,
                Vector.fromArray(this.vertices[i]).subtract(sphere.center).length());
            }
            return sphere;
        }
*/

    }


/*
    // ### GL.Mesh.factory([options])
    //
    // Allows to create a mesh by passing its vertices, triangles and everything else.
    // This method is binded as "MESH", loading will instantiate these ones.
    //
    // Parameters:
    //
    //     vertices     an array of vertices, where each vertex is an array (3) [[1,1,1], [1,1,1], [1,1,1]...]
    //     triangles    an array of triangles (indices), where each triangle is an array (3) referencing vertices [[0, 1, 2], [3, 4, 5]...]
    //     coords       an array of uvs, where each uv is an array (2) [[0.5, 0.5], [1.0, 1.0]...]
    //     normals      an array of normals, where each vertex is an array (3) [[0,0,1], [0,0,-1], [0,1,0]...]
    //     autoNormals  when true, automatically calculate normals for this model
    //     colors       an array of colors, where each color is an array (4) [[0, 0, 0, 1], [1, 0, 0, 1]...]
    //     wireframe    when true, calculates the wireframe for the mesh (it creates the lines buffer)
    //                  USE gl.LINES WHEN DRAWING THE MESH TO SEE ITS WIREFRAME !
    //

    Mesh.factory = function(options)
    {
        options = options || {};
        var mesh = new Mesh(options);

        if(options.vertices) mesh.vertices = options.vertices;
        if(options.triangles) mesh.triangles = options.triangles;
        if(options.coords) mesh.coords = options.coords;
        if(options.normals) mesh.normals = options.normals;
        if(options.autoNormals) mesh.computeNormals();
        if(options.colors) mesh.colors = options.colors;
        if(options.wireframe) mesh.computeWireframe();

        mesh.compile();
        return mesh;
    };
*/




    // ### GL.Mesh.plane([options])
    //
    // Generates a square 2x2 mesh the xy plane centered at the origin. The
    // `options` argument specifies options to pass to the mesh constructor.
    // Additional options include `detailX` and `detailY`, which set the tesselation
    // in x and y, and `detail`, which sets both `detailX` and `detailY` at once.
    // Two triangles are generated by default.
    // Example usage:
    //
    //     var mesh1 = GL.Mesh.plane();
    //     var mesh2 = GL.Mesh.plane({ detail: 5 });
    //     var mesh3 = GL.Mesh.plane({ detailX: 20, detailY: 40 });
    //

/*
    Mesh.plane = function(options)
    {
        options = options || {};
        var mesh = new Mesh(options);
        detailX = options.detailX || options.detail || 1;
        detailY = options.detailY || options.detail || 1;

        for (var y = 0; y <= detailY; y++)
        {
            var t = y / detailY;
            for (var x = 0; x <= detailX; x++)
            {
                var s = x / detailX;
                mesh.vertices.push([2 * s - 1, 2 * t - 1, 0]);
                if (mesh.coords) mesh.coords.push([s, t]);
                if (mesh.normals) mesh.normals.push([0, 0, 1]);
                if (x < detailX && y < detailY)
                {
                    var i = x + y * (detailX + 1);
                    mesh.triangles.push([i, i + 1, i + detailX + 1]);
                    mesh.triangles.push([i + detailX + 1, i + 1, i + detailX + 2]);
                }
            }
        }

        mesh.compile();
        return mesh;
    };



    var cubeData =
    [
        [0, 4, 2, 6, -1, 0, 0], // -x
        [1, 3, 5, 7, +1, 0, 0], // +x
        [0, 1, 4, 5, 0, -1, 0], // -y
        [2, 6, 3, 7, 0, +1, 0], // +y
        [0, 2, 1, 3, 0, 0, -1], // -z
        [4, 5, 6, 7, 0, 0, +1]  // +z
    ];


    function pickOctant(i)
    {
        return new Vector((i & 1) * 2 - 1, (i & 2) - 1, (i & 4) / 2 - 1);
    }


    // ### GL.Mesh.cube([options])
    //
    // Generates a 2x2x2 box centered at the origin. The `options` argument
    // specifies options to pass to the mesh constructor.
    Mesh.cube = function(options)
    {
        var mesh = new Mesh(options);

        for (var i = 0; i < cubeData.length; i++)
        {
            var data = cubeData[i], v = i * 4;
            for (var j = 0; j < 4; j++)
            {
                var d = data[j];
                mesh.vertices.push(pickOctant(d).toArray());
                if (mesh.coords) mesh.coords.push([j & 1, (j & 2) / 2]);
                if (mesh.normals) mesh.normals.push(data.slice(4, 7));
            }
            mesh.triangles.push([v, v + 1, v + 2]);
            mesh.triangles.push([v + 2, v + 1, v + 3]);
        }

        //-------------------------------------------
        // ADDING COLORS TO THE CUBE !
        if(options.colors)
        {
            mesh.colors =[];
            for(let i = 0; i < mesh.vertices.length; i++)
            {
                mesh.colors.push([1,1,1,1]);
                //mesh.colors.push(rndc());
            }
        }
        //-------------------------------------------

        mesh.compile();
        return mesh;
    };
*/

//---------------------------------------------------------------------------------------------


/*

    what we can make with this:

    1. doors
    2. squared crates
    3. long crates


*/


// o is the "override" value - if true, then we texture this crate as "lines" (the "sensor")
Mesh.cube2 = function(o)
{
    let m = new Mesh({ coords: true, normals: true, colors: true }); //, normals: true }); // perhaps we don't need normals?

    m.vertices      = [];
    m.coords        = [];
    m.triangles     = [];
    m.colors        = []; // GRAB THE MAP COLORS AND UPDATE ONCE !
    m.normals       = []; // auto calculate them at the end !


    // THIS IS GOOD FOR CALCULATING OFFSET IN BIG CHUNKS OF 256
    let ind = 0,
        x = 1 - (0.125 * (7 - ind)); //,    // USED FOR EVERYTHING - WORKING FOR PATCHES OF 256 X 256


    /*

        trying to do a simple square for squared crates. the texture looks like this:

        +---+---+
        | 1   2 |
        +---+---+
        | 3 | 4 |
        +---+---+

        it's located right before the end of the diffuse section (the top half of the atlas)
        and it's a 256 x 256 block. It's divided in three sections (although we access them either 1-2 or 3+4)

        1-2: long patch, used for long crates
        3-4: squared face of crates

    */


    // "mini tile" size
    let mt = 0.0625,
        by = 0.5 + mt; // base y - see below how to change from quadrants 1-2 to 3-4 !

    ind = 0;
    x = 1 - (mt * (15 - ind)); // calculates the x offset. IMPORTANT: for small blocks (64x64) this has to be uneven + offset. for big blocks, only uneven


    /*
        t: type. we have:

            CRS: crate square   (all sides for small crates OR left and right - for "long" crates)  - 3's or 4's
            CRL: crate long     (ceiling, ground, front, back for "long" crates)                    - 1&2's only
            DOS: door square    (door ceiling and ground)                                           - TODO
            DOV: door vertical  (doorall sides)                                                     - TODO

        r: "row". CRS accepts all numbers from 0 to 15; CRL, DOS and DOV only accept even numbers from 0 to 8;
    */

    const
        CRS = 0,
        CRL = 1,
        DOS = 2,
        DOV = 3;

    function puv(t, r)
    {
        if(o == 1)
        {
            t = CRS;
            r = 2; //  seems hacky, but it's perfectly reasonable lol
        }

        if(t == CRS)
        {
            x = 1 - (mt * (15 - r));

            // pushes quadrant *3* (or 4, depends on your offset "R")
            m.coords.push(
                [x,      by     ],
                [x - mt, by     ],
                [x,      by - mt],
                [x - mt, by - mt]
            );
        }
        else if(t == CRL)
        {
            x = 1 - (0.125 * (7 - r) + mt); // CAREFUL WITH THIS

            m.coords.push(
                [x + mt, by + mt],
                [x - mt, by + mt],
                [x + mt, by     ],
                [x - mt, by     ]
            );
        }
    }


/*

    // IF WE EVER NEED IT - THIS IS A SMALL BLOCK POINTING TO QUADRANT 1 !!!!
    // NOW THIS ONE IS POINTING TO THE RIGHT QUADRANT, TILE *1* !!!
    m.coords.push(
        [x,      by + mt],
        [x - mt, by + mt],
        [x,      by     ],
        [x - mt, by     ] );

*/


    m.vertices.push(    [-1,-1,-1],  [ 1, -1,-1],  [-1, -1, 1],  [ 1, -1, 1]    ); // ground G
    puv(CRL, 0);

    m.vertices.push(    [-1, 1, -1],  [ 1, 1, -1],  [-1, 1, 1],  [ 1, 1, 1]    ); // ceiling
    puv(CRL, 0);

    m.vertices.push(    [-1,-1,-1],  [ 1, -1,-1],  [-1, 1,-1],  [ 1, 1,-1]    ); // back
    puv(CRL, 0);

    m.vertices.push(    [-1,-1, 1],  [ 1, -1, 1],  [-1, 1, 1],  [ 1, 1, 1]    ); // front
    puv(CRL, 0);


    // LEFT AND RIGHT ARE *ALWAYS* THE SHORT SIDES FOR CRATES !!!
    m.vertices.push(    [-1,-1,-1],  [-1, -1, 1],  [-1, 1,-1],  [-1, 1, 1]    ); // left
    puv(CRS, 0); // put a short "3" (or "4") crate


    m.vertices.push(    [ 1,-1,-1],  [ 1, -1, 1],  [ 1, 1,-1],  [ 1, 1, 1]    ); // right
    puv(CRS, 0); // put a short "3" (or "4") crate



    // stride - calculate faces
    var de = 0;
    for(var i = 0; i < 6 /*cfg.length*/; i++)
    {
        de = i * 4;
        m.triangles.push(   [0 + de, 1 + de, 2 + de], [2 + de, 1 + de, 3 + de]   );

        // insert colors!
        for(let j = 0; j < 4; j++) m.colors.push([0.5, 0.5, 0.5, 1.0]);
    }


    m.computeNormals();
    m.compile();

    return m;
};









//-----------------------------------------------------------------------------------------------
/*


    // ### GL.Mesh.sphere([options])
    //
    // Generates a geodesic sphere of radius 1. The `options` argument specifies
    // options to pass to the mesh constructor in addition to the `detail` option,
    // which controls the tesselation level. The detail is `6` by default.
    // Example usage:
    //
    //     var mesh1 = GL.Mesh.sphere();
    //     var mesh2 = GL.Mesh.sphere({ detail: 2 });
    //
    Mesh.sphere = function(options)
    {
        function tri(a, b, c) { return flip ? [a, c, b] : [a, b, c]; }
        function fix(x) { return x + (x - x * x) / 2; }
        options = options || {};
        var mesh = new Mesh(options);
        var indexer = new Indexer();
        detail = options.detail || 6;

        for (var octant = 0; octant < 8; octant++)
        {
            var scale = pickOctant(octant);
            var flip = scale.x * scale.y * scale.z > 0;
            var data = [];
            for (var i = 0; i <= detail; i++)
            {
                // Generate a row of vertices on the surface of the sphere
                // using barycentric coordinates.
                for (var j = 0; i + j <= detail; j++)
                {
                    var a = i / detail;
                    var b = j / detail;
                    var c = (detail - i - j) / detail;
                    var vertex = { vertex: new Vector(fix(a), fix(b), fix(c)).unit().multiply(scale).toArray() };
                    if (mesh.coords) vertex.coord = scale.y > 0 ? [0.5 - a, c] : [c, 0.5 - a];
                    data.push(indexer.add(vertex));
                }

                // Generate triangles from this row and the previous row.
                if (i > 0)
                {
                    for (var j = 0; i + j <= detail; j++)
                    {
                        var a = (i - 1) * (detail + 1) + ((i - 1) - (i - 1) * (i - 1)) / 2 + j;
                        var b = i * (detail + 1) + (i - i * i) / 2 + j;
                        mesh.triangles.push(tri(data[a], data[a + 1], data[b]));
                        if (i + j < detail)
                        {
                            mesh.triangles.push(tri(data[b], data[a + 1], data[b + 1]));
                        }
                    }
                }
            }
        }

        // Reconstruct the geometry from the indexer.
        mesh.vertices = indexer.unique.map(function(v) { return v.vertex; });
        if (mesh.coords) mesh.coords = indexer.unique.map(function(v) { return v.coord; });
        if (mesh.normals) mesh.normals = mesh.vertices;
        if (mesh.colors)
        {
            mesh.colors = [];
            for(let i = 0; i < mesh.vertices.length; i++) mesh.colors.push([128, 128, 128, 1.0]);
        }
        mesh.compile();
        return mesh;
    };
*/


/*
    // ### GL.Mesh.load(json[, options])
    //
    // Creates a mesh from the JSON generated by the `convert/convert.py` script.
    // Example usage:
    //
    //     var data = {
    //       vertices: [[0, 0, 0], [1, 0, 0], [0, 1, 0]],
    //       triangles: [[0, 1, 2]]
    //     };
    //     var mesh = GL.Mesh.load(data);
    //
    Mesh.load = function(json, options)
    {
        options = options || {};
        if (!('coords' in options)) options.coords = !!json.coords;
        if (!('normals' in options)) options.normals = !!json.normals;
        if (!('colors' in options)) options.colors = !!json.colors;
        if (!('triangles' in options)) options.triangles = !!json.triangles;
        if (!('lines' in options)) options.lines = !!json.lines;
        var mesh = new Mesh(options);
        mesh.vertices = json.vertices;
        if (mesh.coords) mesh.coords = json.coords;
        if (mesh.normals) mesh.normals = json.normals;
        if (mesh.colors) mesh.colors = json.colors;
        if (mesh.triangles) mesh.triangles = json.triangles;
        if (mesh.lines) mesh.lines = json.lines;
        mesh.compile();
        return mesh;
    };




    // src/raytracer.js
    // Provides a convenient raytracing interface.

    // ### new GL.HitTest([t, hit, normal])
    //
    // This is the object used to return hit test results. If there are no
    // arguments, the constructed argument represents a hit infinitely far
    // away.
    class HitTest
    {
        constructor(t, hit, normal)
        {
            this.t = arguments.length ? t : Number.MAX_VALUE;
            this.hit = hit;
            this.normal = normal;
        }

        // ### .mergeWith(other)
        //
        // Changes this object to be the closer of the two hit test results.
        mergeWith(other)
        {
            if (other.t > 0 && other.t < this.t)
            {
                this.t = other.t;
                this.hit = other.hit;
                this.normal = other.normal;
            }
        }
    }


    // ### new GL.Raytracer()
    //
    // This will read the current modelview matrix, projection matrix, and viewport,
    // reconstruct the eye position, and store enough information to later generate
    // per-pixel rays using `getRayForPixel()`.
    //
    // Example usage:
    //
    //     var tracer = new GL.Raytracer();
    //     var ray = tracer.getRayForPixel(
    //       gl.canvas.width / 2,
    //       gl.canvas.height / 2);
    //     var result = GL.Raytracer.hitTestSphere(
    //       tracer.eye, ray, new GL.Vector(0, 0, 0), 1);
    class Raytracer
    {
        constructor()
        {
            var v = gl.getParameter(gl.VIEWPORT);
            var m = gl.modelviewMatrix.m;
            var axisX = new Vector(m[0], m[4], m[8]);
            var axisY = new Vector(m[1], m[5], m[9]);
            var axisZ = new Vector(m[2], m[6], m[10]);
            var offset = new Vector(m[3], m[7], m[11]);
            this.eye = new Vector(-offset.dot(axisX), -offset.dot(axisY), -offset.dot(axisZ));

            var minX = v[0], maxX = minX + v[2];
            var minY = v[1], maxY = minY + v[3];
            this.ray00 = gl.unProject(minX, minY, 1).subtract(this.eye);
            this.ray10 = gl.unProject(maxX, minY, 1).subtract(this.eye);
            this.ray01 = gl.unProject(minX, maxY, 1).subtract(this.eye);
            this.ray11 = gl.unProject(maxX, maxY, 1).subtract(this.eye);
            this.viewport = v;
        }

        // ### .getRayForPixel(x, y)
        //
        // Returns the ray originating from the camera and traveling through the pixel `x, y`.
        getRayForPixel(x, y)
        {
            x = (x - this.viewport[0]) / this.viewport[2];
            y = 1 - (y - this.viewport[1]) / this.viewport[3];
            var ray0 = Vector.lerp(this.ray00, this.ray10, x);
            var ray1 = Vector.lerp(this.ray01, this.ray11, x);
            return Vector.lerp(ray0, ray1, y).unit();
        }
    }



    // ### GL.Raytracer.hitTestBox(origin, ray, min, max)
    //
    // Traces the ray starting from `origin` along `ray` against the axis-aligned box
    // whose coordinates extend from `min` to `max`. Returns a `HitTest` with the
    // information or `null` for no intersection.
    //
    // This implementation uses the [slab intersection method](http://www.siggraph.org/education/materials/HyperGraph/raytrace/rtinter3.htm).
    Raytracer.hitTestBox = function(origin, ray, min, max)
    {
        var tMin = min.subtract(origin).divide(ray);
        var tMax = max.subtract(origin).divide(ray);
        var t1 = Vector.min(tMin, tMax);
        var t2 = Vector.max(tMin, tMax);
        var tNear = t1.max();
        var tFar = t2.min();

        if (tNear > 0 && tNear < tFar)
        {
            var epsilon = 1.0e-6, hit = origin.add(ray.multiply(tNear));
            min = min.add(epsilon);
            max = max.subtract(epsilon);

            return new HitTest(tNear, hit, new Vector(
                (hit.x > max.x) - (hit.x < min.x),
                (hit.y > max.y) - (hit.y < min.y),
                (hit.z > max.z) - (hit.z < min.z)
            ));
        }

        return null;
    };



    // ### GL.Raytracer.hitTestSphere(origin, ray, center, radius)
    //
    // Traces the ray starting from `origin` along `ray` against the sphere defined
    // by `center` and `radius`. Returns a `HitTest` with the information or `null`
    // for no intersection.
    Raytracer.hitTestSphere = function(origin, ray, center, radius)
    {
        var offset = origin.subtract(center);
        var a = ray.dot(ray);
        var b = 2 * ray.dot(offset);
        var c = offset.dot(offset) - radius * radius;
        var discriminant = b * b - 4 * a * c;

        if (discriminant > 0)
        {
            var t = (-b - Math.sqrt(discriminant)) / (2 * a), hit = origin.add(ray.multiply(t));
            return new HitTest(t, hit, hit.subtract(center).divide(radius));
        }

        return null;
    };

    // ### GL.Raytracer.hitTestTriangle(origin, ray, a, b, c)
    //
    // Traces the ray starting from `origin` along `ray` against the triangle defined
    // by the points `a`, `b`, and `c`. Returns a `HitTest` with the information or
    // `null` for no intersection.
    Raytracer.hitTestTriangle = function(origin, ray, a, b, c)
    {
        var ab = b.subtract(a);
        var ac = c.subtract(a);
        var normal = ab.cross(ac).unit();
        var t = normal.dot(a.subtract(origin)) / normal.dot(ray);

        if (t > 0)
        {
            var hit = origin.add(ray.multiply(t));
            var toHit = hit.subtract(a);
            var dot00 = ac.dot(ac);
            var dot01 = ac.dot(ab);
            var dot02 = ac.dot(toHit);
            var dot11 = ab.dot(ab);
            var dot12 = ab.dot(toHit);
            var divide = dot00 * dot11 - dot01 * dot01;
            var u = (dot11 * dot02 - dot01 * dot12) / divide;
            var v = (dot00 * dot12 - dot01 * dot02) / divide;
            if (u >= 0 && v >= 0 && u + v <= 1)
            {
                return new HitTest(t, hit, normal);
            }
        }

        return null;
    };
*/


    function regexMap(regex, text, callback)
    {
        var result;
        while ((result = regex.exec(text)) != null)
        {
            callback(result);
        }
    }


    function isArray(obj)
    {
        var str = Object.prototype.toString.call(obj);
        return str == '[object Array]' || str == '[object Float32Array]';
    }

    function isNumber(obj)
    {
        var str = Object.prototype.toString.call(obj);
        return str == '[object Number]' || str == '[object Boolean]';
    }


    // Non-standard names beginning with `gl_` must be mangled because they will
    // otherwise cause a compiler error.
    var LIGHTGL_PREFIX = 'LIGHTGL'; // TODO: CHANGE TO HEAVY !!!!!!!!!!!!




    // src/shader.js
    // Provides a convenient wrapper for WebGL shaders. A few uniforms and attributes,
    // prefixed with `gl_`, are automatically added to all shader sources to make
    // simple shaders easier to write.
    //
    // Example usage:
    //
    //     var shader = new GL.Shader('\
    //       void main() {\
    //         gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;\
    //       }\
    //     ', '\
    //       uniform vec4 color;\
    //       void main() {\
    //         gl_FragColor = color;\
    //       }\
    //     ');
    //
    //     shader.uniforms({
    //       color: [1, 0, 0, 1]
    //     }).draw(mesh);
    //
    // ### new GL.Shader(vertexSource, fragmentSource)
    //
    // Compiles a shader program using the provided vertex and fragment shaders.
    class Shader
    {
        //constructor(vertexSource, fragmentSource)
        constructor(vertex, fragment) // options)
        {
            //// Allow passing in the id of an HTML script tag with the source
            //function followScriptTagById(id)
            //{
            //    var element = document.getElementById(id);
            //    return element ? element.text : id;
            //}
            //
            //options = options || {};
            //
            //var vertexSource = followScriptTagById(options.vertex);
            //var fragmentSource = followScriptTagById(options.fragment);

            var vertexSource = vertex;
            var fragmentSource = fragment;


/*
            // ORIGINAL
            // Headers are prepended to the sources to provide some automatic functionality.
            var header = '\
            uniform mat3 gl_NormalMatrix;\
            uniform mat4 gl_ModelViewMatrix;\
            uniform mat4 gl_ProjectionMatrix;\
            uniform mat4 gl_ModelViewProjectionMatrix;\
            uniform mat4 gl_ModelViewMatrixInverse;\
            uniform mat4 gl_ProjectionMatrixInverse;\
            uniform mat4 gl_ModelViewProjectionMatrixInverse;\
            ';
*/

/*

    couldn't make this work

    #version 300\
    #extension GL_OES_standard_derivatives : enable;\

    which I needed for

        gl_FragColor.rgb += dFdx(gl_FragColor.rgb)*vec3(3,0,-3);

    I'm a sad potato :(


*/

            // bring back others if needed
            var header = '\
            uniform mat4 gl_ModelViewMatrix;\
            uniform mat4 gl_ModelViewProjectionMatrix;\
            ';


            var vertexHeader = header + '\
            attribute vec4 gl_Vertex;\
            attribute vec4 gl_TexCoord;\
            attribute vec3 gl_Normal;\
            attribute vec4 gl_Color;\
            vec4 ftransform() {\
            return gl_ModelViewProjectionMatrix * gl_Vertex;\
            }\
            ';


            var fragmentHeader = '\
            precision highp float;\
            ' + header;

            // Check for the use of built-in matrices that require expensive matrix
            // multiplications to compute, and record these in `usedMatrices`.
            var source = vertexSource + fragmentSource;
            var usedMatrices = {};
            regexMap(/\b(gl_[^;]*)\b;/g, header, function(groups) {
                var name = groups[1];
                if (source.indexOf(name) != -1)
                {
                    var capitalLetters = name.replace(/[a-z_]/g, '');
                    usedMatrices[capitalLetters] = LIGHTGL_PREFIX + name;
                }
            });


            if (source.indexOf('ftransform') != -1)
            {
                usedMatrices.MVPM = LIGHTGL_PREFIX + 'gl_ModelViewProjectionMatrix';
            }
            this.usedMatrices = usedMatrices;


            // The `gl_` prefix must be substituted for something else to avoid compile
            // errors, since it's a reserved prefix. This prefixes all reserved names with
            // `_`. The header is inserted after any extensions, since those must come
            // first.
            function fix(header, source)
            {
                var replaced = {};
                var match = /^((\s*\/\/.*\n|\s*#extension.*\n)+)[^]*$/.exec(source);
                source = match ? match[1] + header + source.substr(match[1].length) : header + source;
                regexMap(/\bgl_\w+\b/g, header, function(result)
                {
                    if (!(result in replaced))
                    {
                        source = source.replace(new RegExp('\\b' + result + '\\b', 'g'), LIGHTGL_PREFIX + result);
                        replaced[result] = true;
                    }
                });
                return source;
            }

            vertexSource = fix(vertexHeader, vertexSource);
            fragmentSource = fix(fragmentHeader, fragmentSource);

            // Compile and link errors are thrown as strings.
            function compileSource(type, source)
            {
                var shader = gl.createShader(type);
                gl.shaderSource(shader, source);
                gl.compileShader(shader);
                if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
                {
                    console.log("ERROR COMPILING " + ((type == 35633) ? "VERTEX" : "FRAGMENT")  + " SHADER: ", source);

                    throw new Error('compile error: ' + gl.getShaderInfoLog(shader));
                }
                return shader;
            }

            this.program = gl.createProgram();
            gl.attachShader(this.program, compileSource(gl.VERTEX_SHADER, vertexSource));
            gl.attachShader(this.program, compileSource(gl.FRAGMENT_SHADER, fragmentSource));
            gl.linkProgram(this.program);

            if (!gl.getProgramParameter(this.program, gl.LINK_STATUS))
            {
                throw new Error('link error: ' + gl.getProgramInfoLog(this.program));
            }

            this.attributes = {};
            this.uniformLocations = {};

            // Sampler uniforms need to be uploaded using `gl.uniform1i()` instead of `gl.uniform1f()`.
            // To do this automatically, we detect and remember all uniform samplers in the source code.
            var isSampler = {};
            regexMap(/uniform\s+sampler(1D|2D|3D|Cube)\s+(\w+)\s*;/g, vertexSource + fragmentSource, function(groups)
            {
                isSampler[groups[2]] = 1;
            });

            this.isSampler = isSampler;
        }

        // ### .uniforms(uniforms)
        //
        // Set a uniform for each property of `uniforms`. The correct `gl.uniform*()` method is
        // inferred from the value types and from the stored uniform sampler flags.
        uniforms(uniforms)
        {
            gl.useProgram(this.program);

            for (var name in uniforms)
            {
                var location = this.uniformLocations[name] || gl.getUniformLocation(this.program, name);
                if (!location) continue;
                this.uniformLocations[name] = location;
                var value = uniforms[name];
                if (value instanceof Vector)
                {
                    value = [value.x, value.y, value.z];
                }
                else if (value instanceof Matrix)
                {
                    value = value.m;
                }
                if (isArray(value))
                {
                    switch (value.length)
                    {
                        case 1: gl.uniform1fv(location, new Float32Array(value)); break;
                        case 2: gl.uniform2fv(location, new Float32Array(value)); break;
                        case 3: gl.uniform3fv(location, new Float32Array(value)); break;
                        case 4: gl.uniform4fv(location, new Float32Array(value)); break;

                        // Matrices are automatically transposed, since WebGL uses column-major
                        // indices instead of row-major indices.
                        case 9: gl.uniformMatrix3fv(location, false, new Float32Array([
                            value[0], value[3], value[6],
                            value[1], value[4], value[7],
                            value[2], value[5], value[8]
                        ])); break;

                        case 16: gl.uniformMatrix4fv(location, false, new Float32Array([
                            value[0], value[4], value[8], value[12],
                            value[1], value[5], value[9], value[13],
                            value[2], value[6], value[10], value[14],
                            value[3], value[7], value[11], value[15]
                        ])); break;

                        default: throw new Error('don\'t know how to load uniform "' + name + '" of length ' + value.length);
                    }
                }
                else if (isNumber(value))
                {
                    (this.isSampler[name] ? gl.uniform1i : gl.uniform1f).call(gl, location, value);
                }
                else
                {
                    throw new Error('attempted to set uniform "' + name + '" to invalid value ' + value);
                }
            }

            return this;
        }


        // ### .draw(mesh[, mode])
        //
        // Sets all uniform matrix attributes, binds all relevant buffers, and draws the
        // mesh geometry as indexed triangles or indexed lines. Set `mode` to `gl.LINES`
        // (and either add indices to `lines` or call `computeWireframe()`) to draw the
        // mesh in wireframe.
        draw(mesh, mode)
        {
            this.drawBuffers(mesh.vertexBuffers, mesh.indexBuffers['triangles'], 4 /*gl.TRIANGLES*/);
        }


/*
        // original draw method
        draw: function(mesh, mode)
        {
            this.drawBuffers(mesh.vertexBuffers,
            mesh.indexBuffers[mode == gl.LINES ? 'lines' : 'triangles'],
            arguments.length < 2 ? gl.TRIANGLES : mode);  // we probably could simplify this bit of code and remove the lines part...
        }

*/

        // ### .drawBuffers(vertexBuffers, indexBuffer, mode)
        //
        // Sets all uniform matrix attributes, binds all relevant buffers, and draws the
        // indexed mesh geometry. The `vertexBuffers` argument is a map from attribute
        // names to `Buffer` objects of type `gl.ARRAY_BUFFER`, `indexBuffer` is a `Buffer`
        // object of type `gl.ELEMENT_ARRAY_BUFFER`, and `mode` is a WebGL primitive mode
        // like `gl.TRIANGLES` or `gl.LINES`. This method automatically creates and caches
        // vertex attribute pointers for attributes as needed.
        drawBuffers(vertexBuffers, indexBuffer, mode)
        {
            // Only construct up the built-in matrices we need for this shader.
            var used    = this.usedMatrices;
            var MVM     = gl.modelviewMatrix;
            var PM      = gl.projectionMatrix;

/*
            var MVMI    = (used.MVMI || used.NM) ? MVM.inverse() : null;
            var PMI     = (used.PMI) ? PM.inverse() : null;
            var MVPM    = (used.MVPM || used.MVPMI) ? PM.multiply(MVM) : null;
*/

            // if we get back the others remember to set MVPM properly
            var MVPM = used.MVPM ? PM.multiply(MVM) : null;

            var matrices = {};
            // moving it up to make it easier to comment in block
            if (used.MVPM)  matrices[used.MVPM]     = MVPM;
            if (used.MVM)   matrices[used.MVM]      = MVM;

/*
            if (used.MVMI)  matrices[used.MVMI]     = MVMI;
            if (used.PM)    matrices[used.PM]       = PM;
            if (used.PMI)   matrices[used.PMI]      = PMI;
            if (used.MVPMI) matrices[used.MVPMI]    = MVPM.inverse();
            if (used.NM) {
                var m = MVMI.m;
                matrices[used.NM] = [m[0], m[4], m[8], m[1], m[5], m[9], m[2], m[6], m[10]];
            }
*/

            this.uniforms(matrices);

            // Create and enable attribute pointers as necessary.
            var length = 0;
            for (var attribute in vertexBuffers)
            {
                var buffer = vertexBuffers[attribute];
                var location = this.attributes[attribute] || gl.getAttribLocation(this.program, attribute.replace(/^(gl_.*)$/, LIGHTGL_PREFIX + '$1'));
                if (location == -1 || !buffer.buffer) continue;

                this.attributes[attribute] = location;
                gl.bindBuffer(gl.ARRAY_BUFFER, buffer.buffer);
                gl.enableVertexAttribArray(location);
                gl.vertexAttribPointer(location, buffer.buffer.spacing, gl.FLOAT, false, 0, 0);
                length = buffer.buffer.length / buffer.buffer.spacing;
            }

            // Disable unused attribute pointers.
            for (var attribute in this.attributes)
            {
                if (!(attribute in vertexBuffers))
                {
                    gl.disableVertexAttribArray(this.attributes[attribute]);
                }
            }

            // Draw the geometry.
            if (length && (!indexBuffer || indexBuffer.buffer))
            {
                if (indexBuffer)
                {
                    gl.bindBuffer(34963 /*gl.ELEMENT_ARRAY_BUFFER*/, indexBuffer.buffer);
                    gl.drawElements(mode, indexBuffer.buffer.length, 5123 /*gl.UNSIGNED_SHORT*/, 0);
                }
                else
                {
                    gl.drawArrays(mode, 0, length);
                }
            }

            return this;
        }
    }

    // not sure we will need these two here
    //var tempMatrix = new Matrix();
    //var resultMatrix = new Matrix();


    var framebuffer;
    var renderbuffer;
    //var checkerboardCanvas; // used by texture stuff while it was loading an image from the net




    // src/texture.js
    // Provides a simple wrapper around WebGL textures that supports render-to-texture.

    // ### new GL.Texture(width, height[, options])
    //
    // The arguments `width` and `height` give the size of the texture in texels.
    // WebGL texture dimensions must be powers of two unless `filter` is set to
    // either `gl.NEAREST` or `gl.LINEAR` and `wrap` is set to `gl.CLAMP_TO_EDGE`
    // (which they are by default).
    //
    // Texture parameters can be passed in via the `options` argument.
    // Example usage:
    //
    //     var t = new GL.Texture(256, 256, {
    //       // Defaults to gl.LINEAR, set both at once with "filter"
    //       magFilter: gl.NEAREST,
    //       minFilter: gl.LINEAR,
    //
    //       // Defaults to gl.CLAMP_TO_EDGE, set both at once with "wrap"
    //       wrapS: gl.REPEAT,
    //       wrapT: gl.REPEAT,
    //
    //       format: gl.RGB, // Defaults to gl.RGBA
    //       type: gl.FLOAT // Defaults to gl.UNSIGNED_BYTE
    //     });
    class Texture
    {
        constructor(width, height, options)
        {
            options         = options || {};
            this.id         = gl.createTexture();
            this.width      = width;
            this.height     = height;
            this.format     = options.format    || 6408 /*gl.RGBA*/;
            this.type       = options.type      || 5121 /*gl.UNSIGNED_BYTE*/;
            var magFilter   = options.filter    || options.magFilter || 9729 /*gl.LINEAR*/; // 9728  == gl.NEAREST
            var minFilter   = options.filter    || options.minFilter || 9729 /*gl.LINEAR*/; // 9729  == gl.LINEAR

            /*
            if (this.type === gl.FLOAT)
            {
                if (!Texture.canUseFloatingPointTextures())
                {
                    throw new Error('OES_texture_float is required but not supported');
                }

                if ((minFilter !== gl.NEAREST || magFilter !== gl.NEAREST) && !Texture.canUseFloatingPointLinearFiltering())
                {
                    throw new Error('OES_texture_float_linear is required but not supported');
                }
            }
            else if (this.type === gl.HALF_FLOAT_OES)
            {
                if (!Texture.canUseHalfFloatingPointTextures())
                {
                    throw new Error('OES_texture_half_float is required but not supported');
                }

                if ((minFilter !== gl.NEAREST || magFilter !== gl.NEAREST) && !Texture.canUseHalfFloatingPointLinearFiltering())
                {
                    throw new Error('OES_texture_half_float_linear is required but not supported');
                }
            }*/

            gl.bindTexture(3553 /*gl.TEXTURE_2D*/, this.id);
            gl.pixelStorei(37440 /*gl.UNPACK_FLIP_Y_WEBGL*/, 1);

            //gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true); // now we are using enable blend and it works lol
            gl.texParameteri(3553 /*gl.TEXTURE_2D*/, 10240 /*gl.TEXTURE_MAG_FILTER*/, magFilter);
            gl.texParameteri(3553 /*gl.TEXTURE_2D*/, 10241 /*gl.TEXTURE_MIN_FILTER*/, minFilter);
            gl.texParameteri(3553 /*gl.TEXTURE_2D*/, 10242 /*gl.TEXTURE_WRAP_S*/, options.wrap || options.wrapS || 33071 /*gl.CLAMP_TO_EDGE*/);
            gl.texParameteri(3553 /*gl.TEXTURE_2D*/, 10243 /*gl.TEXTURE_WRAP_T*/, options.wrap || options.wrapT || 33071 /*gl.CLAMP_TO_EDGE*/);
            gl.texImage2D(3553 /*gl.TEXTURE_2D*/, 0, this.format, width, height, 0, this.format, this.type, options.data || null);
        }


        // ### .bind([unit])
        //
        // Bind this texture to the given texture unit (0-7, defaults to 0).
        bind(unit)
        {
            gl.activeTexture(33984 /*gl.TEXTURE0*/ + (unit || 0));
            gl.bindTexture(3553 /*gl.TEXTURE_2D*/, this.id);
        }

        // ### .unbind([unit])
        //
        // Clear the given texture unit (0-7, defaults to 0).
        unbind(unit)
        {
            gl.activeTexture(33984 /*gl.TEXTURE0*/ + (unit || 0));
            gl.bindTexture(3553 /*gl.TEXTURE_2D*/, null);
        }

        // ### .canDrawTo()
        //
        // Check if rendering to this texture is supported. It may not be supported
        // for floating-point textures on some configurations.
        canDrawTo()
        {
            framebuffer = framebuffer || gl.createFramebuffer();
            gl.bindFramebuffer(36160 /*gl.FRAMEBUFFER*/, framebuffer);
            gl.framebufferTexture2D(36160 /*gl.FRAMEBUFFER*/, 36064 /*gl.COLOR_ATTACHMENT0*/, 3553 /*gl.TEXTURE_2D*/, this.id, 0);
            var result = gl.checkFramebufferStatus(36160 /*gl.FRAMEBUFFER*/) == 36053 /*gl.FRAMEBUFFER_COMPLETE*/;
            gl.bindFramebuffer(36160 /*gl.FRAMEBUFFER*/, null);
            return result;
        }

        // ### .drawTo(callback)
        //
        // Render all draw calls in `callback` to this texture. This method sets up
        // a framebuffer with this texture as the color attachment and a renderbuffer
        // as the depth attachment. It also temporarily changes the viewport to the
        // size of the texture.
        //
        // Example usage:
        //
        //     texture.drawTo(function() {
        //       gl.clearColor(1, 0, 0, 1);
        //       gl.clear(gl.COLOR_BUFFER_BIT);
        //     });
        drawTo(callback)
        {
            var v = gl.getParameter(2978 /*gl.VIEWPORT*/);
            framebuffer = framebuffer || gl.createFramebuffer();
            renderbuffer = renderbuffer || gl.createRenderbuffer();
            gl.bindFramebuffer(36160 /*gl.FRAMEBUFFER*/, framebuffer);
            gl.bindRenderbuffer(36161 /*gl.RENDERBUFFER*/, renderbuffer);

            if (this.width != renderbuffer.width || this.height != renderbuffer.height)
            {
                renderbuffer.width = this.width;
                renderbuffer.height = this.height;
                gl.renderbufferStorage(36161 /*gl.RENDERBUFFER*/, 33189 /*gl.DEPTH_COMPONENT16*/, this.width, this.height);
            }
            gl.framebufferTexture2D(36160 /*gl.FRAMEBUFFER*/, 36064 /*gl.COLOR_ATTACHMENT0*/, 3553 /*gl.TEXTURE_2D*/, this.id, 0);
            gl.framebufferRenderbuffer(36160 /*gl.FRAMEBUFFER*/, 36096 /*gl.DEPTH_ATTACHMENT*/, 36161 /*gl.RENDERBUFFER*/, renderbuffer);
            if (gl.checkFramebufferStatus(36160 /*gl.FRAMEBUFFER*/) != 36053 /*gl.FRAMEBUFFER_COMPLETE*/)
            {
                throw new Error('Rendering to this texture is not supported (incomplete framebuffer)');
            }

            gl.viewport(0, 0, this.width, this.height);
            callback();
            gl.bindFramebuffer(36160 /*gl.FRAMEBUFFER*/, null);
            gl.bindRenderbuffer(36161 /*gl.RENDERBUFFER*/, null);
            gl.viewport(v[0], v[1], v[2], v[3]);
        }


        // ### .swapWith(other)
        //
        // Switch this texture with `other`, useful for the ping-pong rendering
        // technique used in multi-stage rendering.
        swapWith(other)
        {
            var temp;
            temp = other.id; other.id = this.id; this.id = temp;
            temp = other.width; other.width = this.width; this.width = temp;
            temp = other.height; other.height = this.height; this.height = temp;
        }

    }


    // ### GL.Texture.fromImage(image[, options])
    //
    // Return a new image created from `image`, an `<img>` tag.
    Texture.fromImage = function(image, options)
    {
        options = options || {};
        var texture = new Texture(image.width, image.height, options);
        try
        {
            gl.texImage2D(3553 /*gl.TEXTURE_2D*/, 0, texture.format, texture.format, texture.type, image);
        }
        catch (e)
        {
            console.log("no texture");
        }

        // no mipmaps
        //if (options.minFilter && options.minFilter != gl.NEAREST && options.minFilter != gl.LINEAR) {
        //  gl.generateMipmap(3553 /*gl.TEXTURE_2D*/);
        //}
        return texture;
    };



/*
    // ### GL.Texture.fromImage(image[, options])
    //
    // Return a new image created from `image`, an `<img>` tag.
    Texture.fromImage = function(image, options)
    {
        options = options || {};
        var texture = new Texture(image.width, image.height, options);
        try
        {
            gl.texImage2D(gl.TEXTURE_2D, 0, texture.format, texture.format, texture.type, image);
        }
        catch (e)
        {
            if (location.protocol == 'file:')
            {
                throw new Error('image not loaded for security reasons (serve this page over "http://" instead)');
            }
            else
            {
                throw new Error('image not loaded for security reasons (image must originate from the same domain as this page or use Cross-Origin Resource Sharing)');
            }
        }
        if (options.minFilter && options.minFilter != gl.NEAREST && options.minFilter != gl.LINEAR)
        {
            gl.generateMipmap(gl.TEXTURE_2D);
        }
        return texture;
    };

    // ### GL.Texture.fromURL(url[, options])
    //
    // Returns a checkerboard texture that will switch to the correct texture when
    // it loads.
    Texture.fromURL = function(url, options)
    {
        // super cool, to show while the texture isn't loaded yet!
        checkerboardCanvas = checkerboardCanvas || (function()
        {
            var c = document.createElement('canvas').getContext('2d');
            c.canvas.width = c.canvas.height = 128;
            for (var y = 0; y < c.canvas.height; y += 16)
            {
                for (var x = 0; x < c.canvas.width; x += 16)
                {
                    c.fillStyle = (x ^ y) & 16 ? '#FFF' : '#DDD';
                    c.fillRect(x, y, 16, 16);
                }
            }
            return c.canvas;
        })();


        var texture = Texture.fromImage(checkerboardCanvas, options);
        var image = new Image();
        var context = gl;
        image.onload = function()
        {
            context.makeCurrent();
            Texture.fromImage(image, options).swapWith(texture); // USE THIS TO UPDATE TEXTURE STUFF !!!!!!!!!!!!!!!
        };
        image.src = url;
        return texture;
    };


    // todo: check if we need this

    // ### GL.Texture.canUseFloatingPointTextures()
    //
    // Returns false if `gl.FLOAT` is not supported as a texture type. This is the
    // `OES_texture_float` extension.
    Texture.canUseFloatingPointTextures = function()
    {
        return !!gl.getExtension('OES_texture_float');
    };



    // ### GL.Texture.canUseFloatingPointLinearFiltering()
    //
    // Returns false if `gl.LINEAR` is not supported as a texture filter mode for
    // textures of type `gl.FLOAT`. This is the `OES_texture_float_linear`
    // extension.
    Texture.canUseFloatingPointLinearFiltering = function()
    {
        return !!gl.getExtension('OES_texture_float_linear');
    };

    // ### GL.Texture.canUseFloatingPointTextures()
    //
    // Returns false if `gl.HALF_FLOAT_OES` is not supported as a texture type.
    // This is the `OES_texture_half_float` extension.
    Texture.canUseHalfFloatingPointTextures = function()
    {
        return !!gl.getExtension('OES_texture_half_float');
    };

    // ### GL.Texture.canUseFloatingPointLinearFiltering()
    //
    // Returns false if `gl.LINEAR` is not supported as a texture filter mode for
    // textures of type `gl.HALF_FLOAT_OES`. This is the
    // `OES_texture_half_float_linear` extension.
    Texture.canUseHalfFloatingPointLinearFiltering = function()
    {
        return !!gl.getExtension('OES_texture_half_float_linear');
    };
*/




    // src/vector.js
    // Provides a simple 3D vector class. Vector operations can be done using member
    // functions, which return new vectors, or static functions, which reuse
    // existing vectors to avoid generating garbage.
    class Vector
    {
        constructor(x, y, z)
        {
            this.x = x || 0.0;
            this.y = y || 0.0;
            this.z = z || 0.0;
        }

        // todo: change this to SET !
        // before this was init
        set(x, y, z)
        {
            this.x = x; this.y = y; this.z = z;
            return this;
        }


        // ### Instance Methods
        // The methods `add()`, `subtract()`, `multiply()`, and `divide()` can all
        // take either a vector or a number as an argument.

        // todo: add method "negate" or invert or whatever
        negative()
        {
            return new Vector(-this.x, -this.y, -this.z);
        }

        add(v)
        {
            if (v instanceof Vector) return new Vector(this.x + v.x, this.y + v.y, this.z + v.z);
            else return new Vector(this.x + v, this.y + v, this.z + v);
        }

        subtract(v)
        {
            if (v instanceof Vector) return new Vector(this.x - v.x, this.y - v.y, this.z - v.z);
            else return new Vector(this.x - v, this.y - v, this.z - v);
        }

        multiply(v)
        {
            if (v instanceof Vector) return new Vector(this.x * v.x, this.y * v.y, this.z * v.z);
            else return new Vector(this.x * v, this.y * v, this.z * v);
        }

        divide(v)
        {
            if (v instanceof Vector) return new Vector(this.x / v.x, this.y / v.y, this.z / v.z);
            else return new Vector(this.x / v, this.y / v, this.z / v);
        }

/*
        equals(v)
        {
            return this.x == v.x && this.y == v.y && this.z == v.z;
        }
*/

        dot(v)
        {
            return this.x * v.x + this.y * v.y + this.z * v.z;
        }

        cross(v)
        {
            return new Vector(
                this.y * v.z - this.z * v.y,
                this.z * v.x - this.x * v.z,
                this.x * v.y - this.y * v.x
            );
        }

        length()
        {
            return Math.sqrt(this.dot(this));
        }

        unit()
        {
            return this.divide(this.length());
        }

/*
        min()
        {
            return Math.min(Math.min(this.x, this.y), this.z);
        }

        max()
        {
            return Math.max(Math.max(this.x, this.y), this.z);
        }

        toAngles()
        {
            var ret =
            {
                theta:  Math.atan2(this.z, this.x),
                phi:    Math.asin(this.y / this.length())
            };

            return ret;
        }
*/

        angleTo(a)
        {
            return Math.acos(this.dot(a) / (this.length() * a.length()));
        }

        toArray(n)
        {
            return [this.x, this.y, this.z].slice(0, n || 3);
        }

        clone()
        {
            return new Vector(this.x, this.y, this.z);
        }
    }



/*
    // ### GL.Vector.factory([options])
    //
    // Allows to create a vector by passing its values as options OR array
    // This method is binded as "VECTOR", loading will instantiate this one.
    //
    // Parameters:
    //
    //     x            x component
    //     y            y component
    //     z            z component
    //
    // Example: Vector.factory({ x: 88.0 }) > 88, 0, 0
    //          Vector.factory([1, 2, 3]) > 1, 2, 3
    //
    Vector.factory = function(options)
    {
        options = options || {};
        var vec = new Vector();

        if(Array.isArray(options))
        {
            vec.x = options[0];
            vec.y = options[1];
            vec.z = options[2];
        }
        else
        {
            if(options.x) vec.x = options.x;
            if(options.y) vec.y = options.y;
            if(options.z) vec.z = options.z;
        }

        return vec;
    };
*/


/*
    // ### Static Methods
    // `Vector.randomDirection()` returns a vector with a length of 1 and a
    // statistically uniform direction. `Vector.lerp()` performs linear
    // interpolation between two vectors.
    Vector.negative = function(a, b)
    {
        b.x = -a.x; b.y = -a.y; b.z = -a.z;
        return b;
    };

    Vector.add = function(a, b, c)
    {
        if (b instanceof Vector) { c.x = a.x + b.x; c.y = a.y + b.y; c.z = a.z + b.z; }
        else { c.x = a.x + b; c.y = a.y + b; c.z = a.z + b; }
        return c;
    };

    Vector.subtract = function(a, b, c)
    {
        if (b instanceof Vector) { c.x = a.x - b.x; c.y = a.y - b.y; c.z = a.z - b.z; }
        else { c.x = a.x - b; c.y = a.y - b; c.z = a.z - b; }
        return c;
    };

    Vector.multiply = function(a, b, c)
    {
        if (b instanceof Vector) { c.x = a.x * b.x; c.y = a.y * b.y; c.z = a.z * b.z; }
        else { c.x = a.x * b; c.y = a.y * b; c.z = a.z * b; }
        return c;
    };

    Vector.divide = function(a, b, c)
    {
        if (b instanceof Vector) { c.x = a.x / b.x; c.y = a.y / b.y; c.z = a.z / b.z; }
        else { c.x = a.x / b; c.y = a.y / b; c.z = a.z / b; }
        return c;
    };

    Vector.cross = function(a, b, c)
    {
        c.x = a.y * b.z - a.z * b.y;
        c.y = a.z * b.x - a.x * b.z;
        c.z = a.x * b.y - a.y * b.x;
        return c;
    };

    Vector.unit = function(a, b)
    {
        var length = a.length();
        b.x = a.x / length;
        b.y = a.y / length;
        b.z = a.z / length;
        return b;
    };
*/

    Vector.fromAngles = function(theta, phi)
    {
        return new Vector(Math.cos(theta) * Math.cos(phi), Math.sin(phi), Math.sin(theta) * Math.cos(phi));
    };

    Vector.randomDirection = function()
    {
        return Vector.fromAngles(Math.random() * Math.PI * 2, Math.asin(Math.random() * 2 - 1));
    };


/*
    Vector.min = function(a, b)
    {
        return new Vector(Math.min(a.x, b.x), Math.min(a.y, b.y), Math.min(a.z, b.z));
    };

    Vector.max = function(a, b)
    {
        return new Vector(Math.max(a.x, b.x), Math.max(a.y, b.y), Math.max(a.z, b.z));
    };

    Vector.lerp = function(a, b, fraction)
    {
        return b.subtract(a).multiply(fraction).add(a);
    };
*/

    Vector.fromArray = function(a)
    {
        return new Vector(a[0], a[1], a[2]);
    };

/*
    Vector.angleBetween = function(a, b)
    {
        return a.angleTo(b);
    };
*/


    // TODO: allow to specify custom div object!
    var GL =  // before this was GL
    {


        // `GL.keys` contains a mapping of key codes to booleans indicating whether
        // that key is currently pressed.
        keys: {},


        // Export all external classes.
        Matrix:     Matrix,
        //Indexer:    Indexer,
        Buffer:     Buffer,
        Mesh:       Mesh,
        //HitTest:    HitTest,
        //Raytracer:  Raytracer,
        Shader:     Shader,
        Texture:    Texture,
        Vector:     Vector,





        // ### Initialization
        //
        // `HL.create()` creates a new WebGL context and augments it with more
        // methods. The alpha channel is disabled by default because it usually causes
        // unintended transparencies in the canvas.
        create: function(options)
        {
            options = options || {};
            var canvas = document.createElement('canvas');
            canvas.width = 800;
            canvas.height = 600;
            if (!('alpha' in options)) options.alpha = false;
            try { gl = canvas.getContext('webgl', options); } catch (e) {}
            try { gl = gl || canvas.getContext('experimental-webgl', options); } catch (e) {}
            if (!gl) throw new Error('WebGL not supported');
            //gl.HALF_FLOAT_OES = 0x8D61;

            // attempt at capturing the canvas
            canvas.addEventListener("click", async () => {
                await canvas.requestPointerLock();
            });

            addMatrixStack();
            //addImmediateMode();
            addEventListeners();
            addOtherMethods();
            return gl;
        }

    };



    // ### Matrix stack
    //
    // Implement the OpenGL modelview and projection matrix stacks, along with some
    // other useful GLU matrix functions.
    function addMatrixStack()
    {
        gl.MODELVIEW = ENUM | 1;
        gl.PROJECTION = ENUM | 2;
        var tempMatrix = new Matrix();
        var resultMatrix = new Matrix();
        gl.modelviewMatrix = new Matrix();
        gl.projectionMatrix = new Matrix();
        var modelviewStack = [];
        var projectionStack = [];
        var matrix, stack;

        gl.matrixMode = function(mode)
        {
            switch (mode)
            {
                case gl.MODELVIEW:
                    matrix = 'modelviewMatrix';
                    stack = modelviewStack;
                break;
                case gl.PROJECTION:
                    matrix = 'projectionMatrix';
                    stack = projectionStack;
                break;
                default:
                    throw new Error('invalid matrix mode ' + mode);
            }
        };

        gl.loadIdentity = function()
        {
            Matrix.identity(gl[matrix]);
        };

        gl.loadMatrix = function(m)
        {
            var from = m.m, to = gl[matrix].m;
            for (var i = 0; i < 16; i++)
            {
                to[i] = from[i];
            }
        };

        gl.multMatrix = function(m)
        {
            gl.loadMatrix(Matrix.multiply(gl[matrix], m, resultMatrix));
        };

        gl.perspective = function(fov, aspect, near, far)
        {
            gl.multMatrix(Matrix.perspective(fov, aspect, near, far, tempMatrix));
        };


/*
        gl.frustum = function(l, r, b, t, n, f)
        {
            gl.multMatrix(Matrix.frustum(l, r, b, t, n, f, tempMatrix));
        };

        gl.ortho = function(l, r, b, t, n, f)
        {
            gl.multMatrix(Matrix.ortho(l, r, b, t, n, f, tempMatrix));
        };
*/

        gl.scale = function(x, y, z)
        {
            gl.multMatrix(Matrix.scale(x, y, z, tempMatrix));
        };

        gl.translate = function(x, y, z)
        {
            gl.multMatrix(Matrix.translate(x, y, z, tempMatrix));
        };

        gl.rotate = function(a, x, y, z)
        {
            gl.multMatrix(Matrix.rotate(a, x, y, z, tempMatrix));
        };

/*
        gl.lookAt = function(ex, ey, ez, cx, cy, cz, ux, uy, uz)
        {
            gl.multMatrix(Matrix.lookAt(ex, ey, ez, cx, cy, cz, ux, uy, uz, tempMatrix));
        };
*/

        gl.pushMatrix = function()
        {
            stack.push(Array.prototype.slice.call(gl[matrix].m));
        };

        gl.popMatrix = function()
        {
            var m = stack.pop();
            gl[matrix].m = /*hasFloat32Array ?*/ new Float32Array(m); // : m;
        };

/*
        gl.project = function(objX, objY, objZ, modelview, projection, viewport)
        {
            modelview = modelview || gl.modelviewMatrix;
            projection = projection || gl.projectionMatrix;
            viewport = viewport || gl.getParameter(gl.VIEWPORT);
            var point = projection.transformPoint(modelview.transformPoint(new Vector(objX, objY, objZ)));
            return new Vector(
                viewport[0] + viewport[2] * (point.x * 0.5 + 0.5),
                viewport[1] + viewport[3] * (point.y * 0.5 + 0.5),
                point.z * 0.5 + 0.5
            );
        };

        gl.unProject = function(winX, winY, winZ, modelview, projection, viewport)
        {
            modelview = modelview || gl.modelviewMatrix;
            projection = projection || gl.projectionMatrix;
            viewport = viewport || gl.getParameter(gl.VIEWPORT);
            var point = new Vector(
                (winX - viewport[0]) / viewport[2] * 2 - 1,
                (winY - viewport[1]) / viewport[3] * 2 - 1,
                winZ * 2 - 1
            );
            return Matrix.inverse(Matrix.multiply(projection, modelview, tempMatrix), resultMatrix).transformPoint(point);
        };
*/

        gl.matrixMode(gl.MODELVIEW);
    }




    // ### Immediate mode
    //
    // Provide an implementation of OpenGL's deprecated immediate mode. This is
    // depricated for a reason: constantly re-specifying the geometry is a bad
    // idea for performance. You should use a `GL.Mesh` instead, which specifies
    // the geometry once and caches it on the graphics card. Still, nothing
    // beats a quick `gl.begin(gl.POINTS); gl.vertex(1, 2, 3); gl.end();` for
    // debugging. This intentionally doesn't implement fixed-function lighting
    // because it's only meant for quick debugging tasks.

/*
    function addImmediateMode()
    {
        var immediateMode =
        {
            mesh: new Mesh({ coords: true, colors: true, triangles: false }),
            mode: -1,
            coord: [0, 0, 0, 0],
            color: [1, 1, 1, 1],
            pointSize: 1,
            shader: new Shader(//{ vertex:

                '\
                uniform float pointSize;\
                varying vec4 color;\
                varying vec4 coord;\
                void main() {\
                color = gl_Color;\
                coord = gl_TexCoord;\
                gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;\
                gl_PointSize = pointSize;\
                }\
                ',


                //fragment:
                '\
                uniform sampler2D texture;\
                uniform float pointSize;\
                uniform bool useTexture;\
                varying vec4 color;\
                varying vec4 coord;\
                void main() {\
                gl_FragColor = color;\
                if (useTexture) gl_FragColor *= texture2D(texture, coord.xy);\
                }'
                //}

            )
        };

        gl.pointSize = function(pointSize)
        {
            immediateMode.shader.uniforms({ pointSize: pointSize });
        };


        gl.begin = function(mode)
        {
            if (immediateMode.mode != -1) throw new Error('mismatched gl.begin() and gl.end() calls');
            immediateMode.mode = mode;
            immediateMode.mesh.colors = [];
            immediateMode.mesh.coords = [];
            immediateMode.mesh.vertices = [];
        };


        gl.color = function(r, g, b, a)
        {
            immediateMode.color = (arguments.length == 1) ? r.toArray().concat(1) : [r, g, b, a || 1];
        };


        gl.texCoord = function(s, t)
        {
            immediateMode.coord = (arguments.length == 1) ? s.toArray(2) : [s, t];
        };

        gl.vertex = function(x, y, z)
        {
            immediateMode.mesh.colors.push(immediateMode.color);
            immediateMode.mesh.coords.push(immediateMode.coord);
            immediateMode.mesh.vertices.push(arguments.length == 1 ? x.toArray() : [x, y, z]);
        };

        gl.end = function()
        {
            if (immediateMode.mode == -1) throw new Error('mismatched gl.begin() and gl.end() calls');
            immediateMode.mesh.compile();
            immediateMode.shader.uniforms({
                useTexture: !!gl.getParameter(gl.TEXTURE_BINDING_2D)
            }).draw(immediateMode.mesh, immediateMode.mode);
            immediateMode.mode = -1;
        };

    }
*/

    // TODO: BRING HERE THE MOUSE LOCK POINTER THING!!!
    // TODO: ADD HERE ON BLUR AND STUFF LIKE THAT !

    // ### Improved mouse events
    //
    // This adds event listeners on the `gl.canvas` element that call
    // `gl.onmousedown()`, `gl.onmousemove()`, and `gl.onmouseup()` with an
    // augmented event object. The event object also has the properties `x`, `y`,
    // `deltaX`, `deltaY`, and `dragging`.
    function addEventListeners()
    {
        var context = gl, oldX = 0, oldY = 0, buttons = {}, hasOld = false;
        var has = Object.prototype.hasOwnProperty;
        function isDragging()
        {
            for (var b in buttons)
            {
                if (has.call(buttons, b) && buttons[b]) return true;
            }
            return false;
        }

        function augment(original)
        {
            // Make a copy of original, a native `MouseEvent`, so we can overwrite
            // WebKit's non-standard read-only `x` and `y` properties (which are just
            // duplicates of `pageX` and `pageY`). We can't just use
            // `Object.create(original)` because some `MouseEvent` functions must be
            // called in the context of the original event object.

            // NOTE: DO WE STILL ALL OF THIS STUFF?! this seems like ancient stuff

            // TODO: this is a bit horrible, check if we need this
            var e = {};
            for (var name in original)
            {
                if (typeof original[name] == 'function')
                {
                    e[name] = (function(callback)
                    {
                        return function()
                        {
                            callback.apply(original, arguments);
                    };
                })(original[name]);
                }
                else
                {
                    e[name] = original[name];
                }
            }

            e.original = original;
            e.x = e.pageX;
            e.y = e.pageY;

            // mouse movement
            e.mx = e.movementX;
            e.my = e.movementY;

            for (var obj = gl.canvas; obj; obj = obj.offsetParent)
            {
                e.x -= obj.offsetLeft;
                e.y -= obj.offsetTop;
            }

            if (hasOld)
            {
                e.deltaX = e.x - oldX;
                e.deltaY = e.y - oldY;
            }
            else
            {
                e.deltaX = 0;
                e.deltaY = 0;
                hasOld = true;
            }

            oldX = e.x;
            oldY = e.y;
            e.dragging = isDragging();

            e.preventDefault = function()
            {
                e.original.preventDefault();
            };

            e.stopPropagation = function()
            {
                e.original.stopPropagation();
            };

            return e;
        }

        function mousedown(e)
        {
            gl = context;
            if (!isDragging())
            {
                // Expand the event handlers to the document to handle dragging off canvas.
                on(document, 'mousemove', mousemove);
                on(document, 'mouseup', mouseup);
                off(gl.canvas, 'mousemove', mousemove);
                off(gl.canvas, 'mouseup', mouseup);
            }

            buttons[e.which] = true;
            e = augment(e);
            if (gl.onmousedown) gl.onmousedown(e);
            e.preventDefault();
        }


        function mousemove(e)
        {
            gl = context;
            e = augment(e);
            if (gl.onmousemove) gl.onmousemove(e);
            e.preventDefault();
        }


        function mouseup(e)
        {
            gl = context;
            buttons[e.which] = false;
            if (!isDragging())
            {
                // Shrink the event handlers back to the canvas when dragging ends.
                off(document, 'mousemove',  mousemove);
                off(document, 'mouseup',    mouseup);
                on(gl.canvas, 'mousemove',  mousemove);
                on(gl.canvas, 'mouseup',    mouseup);
            }

            e = augment(e);
            if (gl.onmouseup) gl.onmouseup(e);
            e.preventDefault();
        }

        // 31.08.2024: adding mouse wheel functionality
        function mousewheel(e)
        {
            gl = context;
            e = augment(e);
            if (gl.onmousewheel) gl.onmousewheel(e);
            e.preventDefault();
        }


        function reset()
        {
            hasOld = false;
        }


        function resetAll()
        {
            buttons = {};
            hasOld = false;
        }

        on(gl.canvas, 'mousedown',  mousedown);
        on(gl.canvas, 'mousemove',  mousemove);
        on(gl.canvas, 'mouseup',    mouseup);
        on(gl.canvas, 'mouseover',  reset);
        on(gl.canvas, 'mouseout',   reset);

        // new
        on(gl.canvas, 'wheel', mousewheel);

        on(document, 'contextmenu', resetAll);
    }




    // ### Automatic keyboard state
    //
    // The current keyboard state is stored in `GL.keys`, a map of integer key
    // codes to booleans indicating whether that key is currently pressed. Certain
    // keys also have named identifiers that can be used directly, such as
    // `GL.keys.SPACE`. Values in `GL.keys` are initially undefined until that
    // key is pressed for the first time. If you need a boolean value, you can
    // cast the value to boolean by applying the not operator twice (as in
    // `!!GL.keys.SPACE`).

    function mapKeyCode(code)
    {
        // TODO: trim down unused
        var named =
        {
            8: 'BACKSPACE',
            9: 'TAB',
            13: 'ENTER',
            16: 'SHIFT',
            27: 'ESCAPE',
            32: 'SPACE',
            37: 'LEFT',
            38: 'UP',
            39: 'RIGHT',
            40: 'DOWN'
        };

        return named[code] || (code >= 65 && code <= 90 ? String.fromCharCode(code) : null);
    }


    function on(element, name, callback)
    {
        element.addEventListener(name, callback);
    }

    function off(element, name, callback)
    {
        element.removeEventListener(name, callback);
    }

    on(document, 'keydown', function(e)
    {
        if (!e.altKey && !e.ctrlKey && !e.metaKey)
        {
            var key = mapKeyCode(e.keyCode);
            if (key) GL.keys[key] = true;
            GL.keys[e.keyCode] = true;
        }
    });


    on(document, 'keyup', function(e)
    {
        if (!e.altKey && !e.ctrlKey && !e.metaKey)
        {
            var key = mapKeyCode(e.keyCode);
            if (key) GL.keys[key] = false;
            GL.keys[e.keyCode] = false;
        }
    });


    // no idea why this is here but we will leave it as is
    function addOtherMethods()
    {

/*
        // ### Multiple contexts
        //
        // When using multiple contexts in one web page, `gl.makeCurrent()` must be
        // called before issuing commands to a different context.
        (function(context)
        {
            gl.makeCurrent = function()
            {
                gl = context;
            };
        })(gl);
*/


        // ### Animation
        //
        // Call `gl.animate()` to provide an animation loop that repeatedly calls
        // `gl.onupdate()` and `gl.ondraw()`.

        gl.animate = function()
        {
            var time = new Date().getTime();
            var context = gl;

            function update()
            {
                gl = context;
                var now = new Date().getTime();
                if (gl.onupdate) gl.onupdate((now - time) / 1000);
                if (gl.ondraw) gl.ondraw();
                //post(update);

                window.requestAnimationFrame(update);
                time = now;
            }

            update();

        };


/*
        // original animate
        gl.animate = function()
        {
            // TODO: check if we can send this polyfill to the fucking moon !!!
            var post = window.requestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                function(callback)
                {
                    setTimeout(callback, 1000 / 60);
                };

            var time = new Date().getTime();
            var context = gl;


            function update()
            {
                gl = context;
                var now = new Date().getTime();

                // 31.08.2024: only render and update if we are focused (fixes issues with simulations and game in general)
                if(document.hasFocus())
                {
                    if (gl.onupdate) gl.onupdate((now - time) / 1000);
                    if (gl.ondraw) gl.ondraw();
                }

                post(update);
                time = now;
            }

            update();

        };
*/




        // ### Fullscreen
        //
        // Provide an easy way to get a fullscreen app running, including an
        // automatic 3D perspective projection matrix by default. This should be
        // called once.
        //
        // Just fullscreen, no automatic camera:
        //
        //     gl.fullscreen({ camera: false });
        //
        // Adjusting field of view, near plane distance, and far plane distance:
        //
        //     gl.fullscreen({ fov: 45, near: 0.1, far: 1000 });
        //
        // Adding padding from the edge of the window:
        //
        //     gl.fullscreen({ paddingLeft: 250, paddingBottom: 60 });
        //
        gl.fullscreen = function(options)
        {
            options = options || {};

/*
            var top = options.paddingTop || 0;
            var left = options.paddingLeft || 0;
            var right = options.paddingRight || 0;
            var bottom = options.paddingBottom || 0;

            if (!document.body)
            {
                throw new Error('document.body doesn\'t exist yet (call gl.fullscreen() from window.onload() or from inside the <body> tag)');
            }
*/

            document.body.appendChild(gl.canvas);
            document.body.style.overflow = 'hidden';
            gl.canvas.style.position = 'absolute';
            gl.canvas.style.left = /*left +*/ '0px';
            gl.canvas.style.top = /*top +*/ '0px';

            function resize()
            {
                gl.canvas.width = window.innerWidth; // - left - right;
                gl.canvas.height = window.innerHeight; // - top - bottom;
                gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

                if (options.camera || !('camera' in options))
                {
                    gl.matrixMode(gl.PROJECTION);
                    gl.loadIdentity();
                    gl.perspective
                    (
                        options.fov     || 45,
                        gl.canvas.width / gl.canvas.height,
                        options.near    || 0.1,
                        options.far     || 1000
                    );
                    gl.matrixMode(gl.MODELVIEW);
                }

                if (gl.ondraw) gl.ondraw();
            }

            on(window, 'resize', resize);
            resize();
        };

    }

    return GL;

})();


// QUADTREE


// Based on quadtree-js.
// quadtree-js:
// I turned it into a nice little class.

/**
 * quadtree-js
 * @version 1.2.6
 * @license MIT
 * @author Timo Hausmann
 */

/* https://github.com/timohausmann/quadtree-js.git v1.2.6 */

/*
Copyright © 2012-2023 Timo Hausmann

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/


    /**
     * The Quadtree uses rectangle objects for all areas ("Rect").
     * All rectangles require the properties x, y, width, height
     * @typedef {Object} Rect
     * @property {number} x         X-Position
     * @property {number} y         Y-Position
     * @property {number} width     Width
     * @property {number} height    Height
     */

    /**
     * Quadtree Constructor
     * @class Quadtree
     * @param {Rect} bounds                 bounds of the node ({ x, y, width, height })
     * @param {number} [max_objects=10]     (optional) max objects a node can hold before splitting into 4 subnodes (default: 10)
     * @param {number} [max_levels=4]       (optional) total max levels inside root Quadtree (default: 4)
     * @param {number} [level=0]            (optional) depth level, required for subnodes (default: 0)
     */


// Had to change it to use Body instead of Rect.
// A Body is a pretty big thing, so you only need to know that internally they are "converted"
// to something looking like a rect (that is an object that has x,y,w,h and behaves as a quad looking bottom down)

class Quadtree
{
    // had to minimize this
    // max_objects  mo
    // max_levels   ml
    // bounds       b
    // level        lv
    // objects      o
    // nodes        n
    constructor(b, mo, ml, lv)
    {
        this.mo     = mo || 10;
        this.ml     = ml || 4;
        this.lv     = lv || 0;
        this.b      = b;
        this.o      = [];
        this.n      = [];
    }

    split()
    {
        var nl  = this.lv + 1,      // nextLevel
            sw  = this.b.width/2, // subWidth
            sh  = this.b.height/2, // subHeight
            x   = this.b.x,
            y   = this.b.y;

        //top right node
        this.n[0] = new Quadtree({
            x       : x + sw,
            y       : y,
            width   : sw,
            height  : sh
        }, this.mo, this.ml, nl);

        //top left node
        this.n[1] = new Quadtree({
            x       : x,
            y       : y,
            width   : sw,
            height  : sh
        }, this.mo, this.ml, nl);

        //bottom left node
        this.n[2] = new Quadtree({
            x       : x,
            y       : y + sh,
            width   : sw,
            height  : sh
        }, this.mo, this.ml, nl);

        //bottom right node
        this.n[3] = new Quadtree({
            x       : x + sw,
            y       : y + sh,
            width   : sw,
            height  : sh
        }, this.mo, this.ml, nl);
    }


    /**
     * Determine which node the object belongs to
     * @param {Rect} pRect      bounds of the area to be checked ({ x, y, width, height })
     * @return {number[]}       an array of indexes of the intersecting subnodes (0-3 = top-right, top-left, bottom-left, bottom-right / ne, nw, sw, se)
     * @memberof Quadtree
     */

    // TODO: USE OUR BODIES HERE AND CALCULATE
    getIndex(body) //pRect)
    {

        var ind = [], // indexs
            vmp    = this.b.x + (this.b.width/2), // verticalMidpoint
            hmp  = this.b.y + (this.b.height/2), // horizontalMidpoint

            rx = (body.position.x - body.extents.x),
            ry = (body.position.z - body.extents.z),
            rw = (body.extents.x * 2),
            rh = (body.extents.z * 2),

        /*var*/
            sin = ry < hmp, // startIsNorth
            siw = rx < vmp, // startIsWest
            eie = rx + rw > vmp, // endIsEast
            eis = ry + rh > hmp; // endIsSouth


        /*
        // original code for rect
        var startIsNorth = pRect.y < horizontalMidpoint,
            startIsWest  = pRect.x < verticalMidpoint,
            endIsEast    = pRect.x + pRect.width > verticalMidpoint,
            endIsSouth   = pRect.y + pRect.height > horizontalMidpoint;
        */

        //top-right quad
        if(sin && eie) {
            ind.push(0);
        }

        //top-left quad
        if(siw && sin) {
            ind.push(1);
        }

        //bottom-left quad
        if(siw && eis) {
            ind.push(2);
        }

        //bottom-right quad
        if(eie && eis) {
            ind.push(3);
        }

        return ind;
    }


    /**
     * Insert the object into the node. If the node
     * exceeds the capacity, it will split and add all
     * objects to their corresponding subnodes.
     * @param {Rect} pRect      bounds of the object to be added ({ x, y, width, height })
     * @memberof Quadtree
     */

    // TODO: USE BODY
    insert(body) //pRect)
    {

        var i = 0,
            ind; // indexes

        //if we have subnodes, call insert on matching subnodes
        if(this.n.length) {
            ind = this.getIndex(body); //pRect);

            for(i=0; i<ind.length; i++) {
                this.n[ind[i]].insert(body); //pRect);
            }
            return;
        }

        //otherwise, store object here
        this.o.push(body); //pRect);

        //max_objects reached
        if(this.o.length > this.mo && this.lv < this.ml) {

            //split if we don't already have subnodes
            if(!this.n.length) {
                this.split();
            }

            //add all objects to their corresponding subnode
            for(i=0; i<this.o.length; i++) {
                ind = this.getIndex(this.o[i]);
                for(var k=0; k<ind.length; k++) {
                    this.n[ind[k]].insert(this.o[i]);
                }
            }

            //clean up this node
            this.o = [];
        }
     };


    /**
     * Return all objects that could collide with the given object
     * @param {Rect} pRect      bounds of the object to be checked ({ x, y, width, height })
     * @return {Rect[]}         array with all detected objects
     * @memberof Quadtree
     */


    retrieve(body) //pRect)
    {

        var ind = this.getIndex(body), //pRect), // indexes
            ro = this.o; // returnObjects

        //console.log("RETRIEVE: " + indexes + ", returned: " + returnObjects)
        //console.log(pRect)

        //if we have subnodes, retrieve their objects
        if(this.n.length)
        {
            for(var i = 0; i < ind.length; i++)
            {
                ro = ro.concat(this.n[ind[i]].retrieve(body /*pRect*/));
            }
        }

        //remove duplicates
        if(this.lv === 0)
        {
            return Array.from(new Set(ro));
        }

        return ro;
    }


    /**
     * Clear the quadtree
     * @memberof Quadtree
     */
    clear()
    {

        this.o = [];

        for(var i=0; i < this.n.length; i++)
        {
            if(this.n.length)
            {
                this.n[i].clear();
            }
        }

        this.n = [];
    }

}


// SIM



//const MAX_VELOCITY = 1.0;


class Body
{
    constructor(position, extents, tag)
    {
        this.tag        = tag;          // super important! this is like the ID of the body. used for collisions and type
        this.position   = position;
        this.extents    = extents;      // these are basically the half sizes
        this.velocity   = new GL.Vector(0, 0, 0);
        this.mass       = 1;            // perhaps we should do some automass thing here ?
        this.elasticity = 0.235;        // used to bounce around
        this.friction   = 0.1;          // velocity *= friction
        this.dynamic    = true;         // dynamic bodies move
        this.solid      = true;         // should we use "kinematic" here? (solid bodies interact with others)
        this.skipList   = [];           // used to check if we should skip collisions between certain tags
        this.hits       = [];           // a small list that gets updated each frame with all the objects that collided with it

        // temp variables - we create them here once so we don't have to be creating and destroying objects - tiny optimization
        this._N         = new GL.Vector(0.0, 0.0, 0.0);
        this._xVel      = new GL.Vector(0.0, 0.0, 0.0);
        this._Vn        = new GL.Vector(0.0, 0.0, 0.0);
        this._Vt        = new GL.Vector(0.0, 0.0, 0.0);

        SIM.addBody(this);
    }

/*
    destroy()
    {
        SIM.removeBody(this);
    }
*/

    // will skip collisions with "who" (tag). example skip("player") won't collide with players, won't trigger callback
    // if you want to avoid collision reaction but trigger a callback - use solid = false for the "trigger"
    skip(who)
    {
        this.skipList.push(who); // skippedGroups
    }

/*
    // remove from the skiplist
    // TEST ME
    unskip(other)
    {
        var index = this.skipList.indexOf(other);
        if (index >= 0)
        {
            this.skipList.splice(index, 1);
        }
    }
*/
    // internal method, checks if you can skip another object
    canSkip(other)
    {
        if (this.skipList.indexOf(other) !== -1)
        {
            return true;
        }
        return false;
    }


    intersects(other)
    {
        return SIM.testAABB(this, other);
    }

/*
    // TEST ME
    isPointInside(x, y, z)
    {
        let min = this.position.subtract(this.extents); // min = position - extents
        let max = this.position.add(this.extents);  // max = position + extents

        if (x >= min.x && x <= max.x &&
            y >= min.y && y <= max.y &&
            z >= min.z && z <= max.z)
        {
            return true;
        }

        return false;
    }
*/

    processCollision(other, data)
    {
        // note: all the this._BLAH parameters are used for optimization
        // (reuse instead of recreate - although GL.Vector creates a lot of garbage :'( )

        // IMPORTANT: all these data.other etc are simple objects and I want to keep it that way.
        // doesn't make sense to be creating objects within objects every frame for every collision - it's a lot.
        this._N.set(
            data.otherObj.x - data.thisObj.x,
            data.otherObj.y - data.thisObj.y,
            data.otherObj.z - data.thisObj.z
        );

        let massRatio = this.calculateMassRatio(other, true);

        if (!massRatio.result) return;

        let fRatio1 = massRatio.thisObj,
            fRatio2 = massRatio.otherObj;

        this.position   = this.position.add(this._N.multiply(fRatio1));         // (this)position += N * fRatio1
        other.position  = other.position.subtract(this._N.multiply(fRatio2));   // (other)position -= N * fRatio2
        this._xVel      = this.velocity.subtract(other.velocity);               // xVel = (this)velocity - (other)velocity

        let nv = this._N.dot(this._xVel);                                       // nv = N dot xVel
        if (nv > 0) return;                                                     // original uncommented

        let n2 = this._N.dot(this._N);

        massRatio   = this.calculateMassRatio(other, false);
        fRatio1     = massRatio.thisObj;
        fRatio2     = massRatio.otherObj;

        this._Vn = this._N.multiply(nv / n2);           // Vn = N * (nv / n2)
        this._Vt = this._Vt.clone(this._xVel.negative());

        // has the same issue as the unrolled formula above
        // V = -Vn . (1.0 + CoR) + Vt . CoF
        this.velocity = this.velocity.subtract
        (
            this._Vn.multiply((1.0 + this.elasticity) * fRatio1).
                add
                (
                    this._Vt.multiply(this.friction)
                )
        );

        // nope
        //this.velocity = this._Vn.negative().add(this._Vt.multiply(this.friction)).multiply((1.0 + this.elasticity) * fRatio1);
    }

    calculateMassRatio(other, normalize)
    {
        let ret =
        {
            result: false,
            thisObj: 0,
            otherObj: 0
        };

        let fRatio1 = 0,
            fRatio2 = 0,
            m = this.mass + other.mass;

        if (m < 1e-6)
        {
            return ret;
        }
        else if (other.mass < 1e-7 || other.dynamic === false)
        {
            fRatio1 = 1;
            fRatio2 = 0;
        }
        else if (this.mass < 1e-7 || this.dynamic === false)
        {
            fRatio1 = 0;
            fRatio2 = 1;
        }
        else
        {
            if (normalize)
            {
                fRatio1 = .5;
                fRatio2 = 1 - fRatio1;
            }
            else
            {
                fRatio1 = other.mass / m;
                fRatio2 = 1 - fRatio1;
            }
        }
        ret.result = true;
        ret.thisObj = fRatio1;
        ret.otherObj = fRatio2;
        return ret;
    }

    // adds the vector to velocity basically
    impulse(v)
    {
        if(this.dynamic)
        {
            this.velocity = this.velocity.add(v.divide(this.mass)); // velocity += v / mass
        }
    }

    // the game is already creating a shitload of arrays, I wanted to avoid more stuff like blach.isMulti([ "a", "b", "c"...])
    // and I also wanted to avoid playing with arguments stuff AND I don't think I will need more than this, so...
    // ALSO, SUPER IMPORTANT: CALL THIS THING AFTER SIM.update, OTHERWISE HITS COULD BE EMPTY !
    // and one more thing: I'm sure there's a better way to implement this but it's late and my brain is off. sorry.
    isCol2(a, b)
    {
        let ia = false,
            ib = false; // isA, isB ?
        for(let i = 0; i < this.hits.length; i++)
        {
            if(this.hits[i].tag == a) ia = true;
            if(this.hits[i].tag == b) ib = true;
        }
        return ia && ib;
    }

    isCol3(a, b, c)
    {
        var ia = false,
            ib = false,
            ic = false; // isA, isB ?
        for(let i = 0; i < this.hits.length; i++)
        {
            if(this.hits[i].tag == a) ia = true;
            if(this.hits[i].tag == b) ib = true;
            if(this.hits[i].tag == c) ic = true;
        }
        return ia && ib && ic;
    }


/*
    // clamp the velocity of the body. added here to avoid certain issues
    clampv()
    {
        // max absolute velocity
        this.velocity.x = clamp(this.velocity.x, -MAX_VELOCITY, MAX_VELOCITY);
        this.velocity.y = clamp(this.velocity.y, -MAX_VELOCITY, MAX_VELOCITY);
        this.velocity.z = clamp(this.velocity.z, -MAX_VELOCITY, MAX_VELOCITY);
    }
*/


    update(delta)
    {
        if (this.dynamic)
        {
            this.position = this.position.add(this.velocity.multiply(delta));   // position += velocity * delta
            this.velocity = this.velocity.multiply(this.friction);              // velocity *= friction
        }
    }
}



/*
 * SIM holds all physical objects (bodies). Makes sure they all collide, etc.
 */
class SimImpl //extends Entity
{
    constructor(bounds)
    {
        this.bodies     = [];
        this.callbacks  = {}; // call SIM.onCollision("somethig", "other", function(a, b){ XYZ } ) when something happens !

        // helpers for optimization - reuse the same vectors
        this._xMin0 = new GL.Vector(0.0, 0.0, 0.0);
        this._xMax0 = new GL.Vector(0.0, 0.0, 0.0);
        this._xMin1 = new GL.Vector(0.0, 0.0, 0.0);
        this._xMax1 = new GL.Vector(0.0, 0.0, 0.0);
        this._N     = new GL.Vector(0.0, 0.0, 0.0);
        this._pDist = new GL.Vector(0.0, 0.0, 0.0);


        //constructor(bounds, max_objects, max_levels, level)

        // our map isn't that big
        this.quadtree = new Quadtree
        (
            // bounds
            bounds,
            /*
            {
                x: -10,
                y: -10,
                width: 20,
                height: 20
            },*/

            // max objects per quadrant before splitting
            4,

            // max levels down from main tree
            4,

            // level depth, no idea wtf is this
            0
        );
    }

    // defines a callback when an object with tag1 collides with object tag2
    // the callback has the form function(a, b) where a is the first object and b the second
    onCollision(tag1, tag2, cb)
    {
        this.callbacks[tag1+tag2] =
        {
            a: tag1,
            b: tag2,
            c: cb
        };
    }

    // internal method to check against all callbacks and trigger them
    doCallbacks(a, b)
    {
        for(let i in this.callbacks)
        {
            let id = a.tag + b.tag;
            if(this.callbacks[id])
            {
                this.callbacks[id].c(a, b);
                return true;
            }
        }

        return false;
    }

    addBody(body)
    {
        this.bodies.push(body);  // I THINK THIS IS THE BODIES IT WAS REFERENCES ON "BODY.REMOVE" OR SKIP OR WHATEVER
    }


    // this adds a bunch of static bodies to the game. I hope the tilemap won't break this lol
    // tilemap should be one of our maps / dungeons / level thing. tag means all of these objects will get
    // a tag like that (useful for colliding with player / etc).
    // we chould also here define other things like which values are solid, which can be exploded, etc etc
    // (perhaps a map of tiles or something like that with a configuration / callbacks !?!?!?)
    // (like if the tilemap contains a value X we can put a special tag on that X so we can call a callback) >> TODO !!! (first make it work lol)
    addStatic(boxes, tag)
    {
        for(let i = 0; i < boxes.length; i++)
        {
            // need to move from a rect (x, y, w, h) to one of our 3d aabb (x,y,z position at the center +- extents)
            let ex = boxes[i].w / 2.0,  // extents
                ez = boxes[i].h / 2.0,
                px = boxes[i].x + ex,   // position (at the center)
                pz = boxes[i].y + ez,
                b  = new Body
                (
                    new GL.Vector(px, 0, pz),
                    new GL.Vector(ex, 4, ez),
                    tag
                );

            b.dynamic = false;
            b.solid = true;
            b.mass = 0;

            this.addBody(b);
        }
    }

/*
    // TEST ME
    removeBody(body)
    {
        var index = this.bodies.indexOf(body);
        if (index >= 0)
        {
            this.bodies.splice(index, 1);
            this.remove(body);
        }
    }
*/

    // this could be outside of the class
    axisIntersect(min0, max0, min1, max1, d)
    {
        var d0 = max1 - min0,
            d1 = max0 - min1;

        if (d0 < 0 || d1 < 0)
        {
            //return [ false ];
            return null;
        }

        if (d0 < d1)
        {
            d = d0;
        }
        else
        {
            d = -d1;
        }
        return d; //[ true, d ];
    }

    // apply an impulse to all bodies
    impulse(v)
    {
        for(let i = 0; i < this.bodies.length; i++)
        {
            if(this.bodies[i].dynamic)
            {
                this.bodies[i].velocity = this.bodies[i].velocity.add(v.divide(this.bodies[i].mass)); // velocity += v / mass
            }
        }
    }

    // aabb vs aabb
    testAABB(first, second)
    {
        var ret =
        {
            result: false,
            thisObj: {},
            otherObj: {}
        };

        this._xMin0 = first.position.subtract(first.extents);
        this._xMax0 = first.position.add(first.extents);
        this._xMin1 = second.position.subtract(second.extents);
        this._xMax1 = second.position.add(second.extents);

        this._N.set(0.0, 0.0, 0.0);

        let xAxis = this.axisIntersect(this._xMin0.x, this._xMax0.x, this._xMin1.x, this._xMax1.x, this._N.x),
            yAxis = this.axisIntersect(this._xMin0.y, this._xMax0.y, this._xMin1.y, this._xMax1.y, this._N.y),
            zAxis = this.axisIntersect(this._xMin0.z, this._xMax0.z, this._xMin1.z, this._xMax1.z, this._N.z);

        if(!xAxis || !yAxis || !zAxis)
        {
            return ret;
        }

        this._N.set(xAxis, yAxis, zAxis);

        let mindist = Math.abs(this._N.x);

        // KINDA WORKING CODE
        if (Math.abs(this._N.y) < mindist)
        {
            mindist = Math.abs(this._N.y);
            this._N.x = 0.0;
        }
        else
        {
            this._N.y = 0.0;
        }

        if (Math.abs(this._N.z) < mindist)
        {
            mindist = Math.abs(this._N.z);
            this._N.x = this._N.y = 0.0;
        }
        else
        {
            this._N.z = 0.0;
        }

        ret.result   = true;
        ret.thisObj  = { x: 0, y: 0, z: 0 };
        ret.otherObj = this._N;

        return ret;
    }


    // new udpate, using quadtree
    updateQuadtree(delta)
    {
        let data = null;
        let totalTests = 0;


        //[0] UPDATE THE BODIES FFS !!!
        for (let i = 0; i < this.bodies.length; i++)
        {
            this.bodies[i].update(delta);
            this.bodies[i].hits = [];
        }

        //[1] clear the tree
        this.quadtree.clear();

        //[2] update myObjects and insert them into the tree again
        for(var i = 0; i < this.bodies.length; i++)
        {
            this.quadtree.insert(this.bodies[i]); //.rect); // WE NEED TO CHANGE THIS AND ACCEPT OUR BODIES !!!
        }

        //[3] now that the tree is filled, we have to check each object for collisions
        for(var i = 0; i < this.bodies.length; i++)
        {
            var b = this.bodies[i];

            // we don't care about static objects here; dynamic objects will hit them later
            if(!b.dynamic) continue;

            //[4] first, get all collision candidates
            var candidates = this.quadtree.retrieve(b);

            //[5] let's check them for actual collision
            for(var k = 0; k < candidates.length; k++)
            {
                totalTests++;

                var c = candidates[k];

                //[6] don't check objects against themselves
                if(b === c) continue;

                //[7] get intersection data
                //var intersect = getIntersection(myObject, myCandidate);

                //no intersection - continue
                //if(intersect === false) continue;

                // todo: remove first and second, just use b and c
                let first = b,
                    second = c;

                // working: they can skip each other
                if(first.canSkip(second.tag) || second.canSkip(first.tag))
                {
                    continue;
                }

                data = first.intersects(second);
                if (data.result === true)
                {
                    if (first.solid && second.solid)
                    {
                        first.processCollision(second, data);
                    }

                    // trigger collision callbacks - if any
                    let ret = this.doCallbacks(first, second);
                    if(!ret) this.doCallbacks(second, first); // if we didn't get a collision the first time, we try another way around

                    // update the "hits" list
                    first.hits.push(second);
                    second.hits.push(first);
                }

            }
        }
    }


/*
    // this was the original update function. it worked kinda fine
    updateDirect(delta)
    //update(delta)
    {
        let data = null;
        let totalTests = 0;

        for (let i = 0; i < this.bodies.length; i++)
        {
            this.bodies[i].update(delta);
        }

        // this is a pretty bad way of doing this - we should do a grid optimization...
        // also I think we could do only one half of the collisions, or do first and second in a single run
        // TODO2: USE A QUADTREE AT LEAST !!!
        for (let i = 0; i < this.bodies.length; i++)
        {
            for (let j = i + 1; j < this.bodies.length; j++)
            {
                let first = this.bodies[i],
                    second = this.bodies[j];

                // working: they can skip each other
                if(first.canSkip(second.tag) || second.canSkip(first.tag))
                {
                    continue;
                }

                totalTests++;

                data = first.intersects(second);
                if (data.result === true)
                {
                    if (first.solid && second.solid)
                    {
                        first.processCollision(second, data);
                    }

                    // trigger collision callbacks - if any
                    let ret = this.doCallbacks(first, second);
                    if(!ret) this.doCallbacks(second, first); // if we didn't get a collision the first time, we try another way around

                    // update the "hits" list
                    first.hits.push(second);
                    second.hits.push(first);
                }
            }
        }

        data = null;

        //console.log(totalTests);
    }
*/

}


//----------------------------------------------------------------------------------
// Our physics implementation
// bounds are needed for the quadtree
const SIM = new SimImpl(
{
    x: -10,
    y: -10,
    width: 20,
    height: 20
});
//----------------------------------------------------------------------------------




// MAP



//--------------------------------------------------------------
// The original dungeon generation code is based on:
// https://craiky.github.io/tutorial/
// I (Almar) made it prettier (turned it into a bunch of classes), added some methods
// and a whole lot of mesh generation functionality.
//--------------------------------------------------------------


//var canvas          = document.getElementById('game');//create canvas var
//var ctx             = canvas.getContext('2d'); //make it 2d

/*
const
    TILE_SIZE       = 20,       // size of tile in pixels (assume squared tiles)
    CORRIDOR_SIZE   = 1,        // how wide should corridors be
    MAP_PRINT_TILES = 0,        // prints the "tiles"
    MAP_PRINT_HEX   = 1;        // prints the "hex" values
*/
var MAP             = null,     // "THE" map, the one and only
    NO_LIGHT        = [0.01, 0.01, 0.02, 1.0]; // THE SMALLEST VLAUE A LIGHT CAN HAVE


// The world is made of rooms and everything underlying is made of cells.
class Cell
{
    constructor(c, r, x, y)
    {
        this.c = c      // column it is in
        this.r = r      // row it is in
        this.x = x      // x coord
        this.y = y      // y coord
        this.e = false  //empty or full?
        this.t = " ";   // the "tile". we can use this to define different tile types and do something when colliding against them
        this.w = 0x0;   // the "weight" - a small hex flag that references how many other tiles are around it. useful for stuff
        this.l = NO_LIGHT; // used for the lightmapping process - the amount of light this "cell" receives
    }


/*
    // DEBUG
    draw()
    {
        if(this.e == false)
        {
            ctx.fillStyle = "#323232"
            ctx.fillRect(this.x, this.y, TILE_SIZE, TILE_SIZE);
        }
        else
        {
            ctx.fillStyle = "#696966"
            ctx.fillRect(this.x, this.y, TILE_SIZE, TILE_SIZE);
        }
    }
*/

    //carve out the rooms
    carve(dis, x, y)
    {
        // before it was world
        for (let i = 0; i < MAP.rooms.length; i++)
        {
            if( this.c >= MAP.rooms[i].y / /*TILE_SIZE*/ 20 &&
                this.c <  MAP.rooms[i].y / /*TILE_SIZE*/ 20 + MAP.rooms[i].h / /*TILE_SIZE*/ 20 &&
                this.r >= MAP.rooms[i].x / /*TILE_SIZE*/ 20 &&
                this.r <  MAP.rooms[i].x / /*TILE_SIZE*/ 20 + MAP.rooms[i].w / /*TILE_SIZE*/ 20)
            {
                this.e = true;
                this.t = "R"; // use this to override whatever was in the map before
            }
        }
    }

    //carve corridors
    // TODO: see if we can merge these
    //carveH(dis, x, y)
    ccH(dis, x, y)
    {
        if(this.r >= x && this.r < x+dis && this.c < y + /*CORRIDOR_SIZE*/ 1 && this.c > y - /*CORRIDOR_SIZE*/ 1)
        {
            this.e = true
            this.t = "C";
        }
    }

    //carveV(dis, x, y)
    ccV(dis, x, y)
    {
        if(this.c >= y && this.c < y+dis && this.r < x + /*CORRIDOR_SIZE*/ 1 && this.r > x - /*CORRIDOR_SIZE*/ 1)
        {
            this.e = true
            this.t = "C";
        }
    }
}



class Room
{
    constructor(x, y, width, height, i)
    {
        this.x = (x-1) * /*TILE_SIZE*/ 20;     // column
        this.y = (y-1) * /*TILE_SIZE*/ 20;     // row
        this.w = (width * /*TILE_SIZE*/ 20);   // width
        this.h = (height * /*TILE_SIZE*/ 20);  // height
        this.i = i;                     // the id or room number (the i-eth room)

        if(this.x % 2 != 0) this.x++;   // make them all start in even numbers.
        if(this.y % 2 != 0) this.y++;   // this helps quite a lot to reduce overlapping corridors later on

        // room's center
        this.center = [Math.floor(this.x / /*TILE_SIZE*/ 20 + width / 2), Math.floor(this.y / /*TILE_SIZE*/ 20 + height / 2)];
    }


/*
    // draw the number of the room, basically
    // OPTIONAL METHOD FOR DEBUGGING !!!
    draw()
    {
        ctx.fillStyle = "white";
        ctx.fillText(this.i, this.x + this.w / 2, this.y + this.h / 2 - 20)
    }
*/
}




/*
    TODO:

        getRoomNumber   to customize tiles and so on    >> IMPORTANT

*/


// note: in different places the tiles are transposed, so don't surprise yourself if something doesn't match.
// in theory it should, for example tiles 0x7 are "front wall", but if you check against left or right - that's transposed.
// gamedev is hard lol
const
    C   = 1.25,     // ceiling height (x2 = 2.25 "meters")
    FW  = 0,        // front wall
    BW  = 1,        // back wall
    LW  = 2,        // left wall
    RW  = 3,        // right wall
    GT  = 4,        // ground tile lol
    CT  = 5,        // ceiling tile

    TG  = 0,        // ground texture
    TW  = 1,        // wall texture
    TC  = 2,        // ceiling texture
    TCL = 3;        // ceiling light texture


class MapImpl
{
    constructor()
    {
        this.rows    = this.cols = 50;  // rows and columns of the map
        this.collide = false;           // flag used for colliding with other rooms
        this.amount  = 13;              // how many rooms
        this.size    = [ 6, 9];         // min/max size of each room (applies for both x and y)
        this.disX    = this.disY = 0;   // distance stuff between corridors. these are accessed between methods lol

        // grid contains everything linearly; rooms are rooms; matrix is a 2d representation; doors are doors but had to go
        this.grid = this.rooms = this.matrix = null;
    }


/*
    // TODO: COMMENT OUT THE THINGS WE DON'T USE
    getAt(i, j)
    {
        i = parseInt(i);
        j = parseInt(j);

        if(i < 1 || i > this.rows -1 || j < 1 || j > this.cols - 1)
        {
            return 0x0;
        }

        return this.matrix[i][j].w;
    }


    isColliding (i, j)
    {
        let r = this.getAt(i, j);

        return (r == 0x0); // if we return 0 that means solid.
    }
*/


    // An iterator - iterates through this.matrix.
    // cb is a callback of the form: function(i, j, m) where m is matrix[i][j]
    //
    // Example:
    //
    // this.it(this.matrix, function(m, i, j, e)
    // {
    //     console.log(e.t); // print this.matrix[i][j].t
    // })
    //
    // We purposefully skip the first and last elements around the map to not have to worry about hitting null
    it(m, cb)
    {
        for(let i = 1; i < this.rows - 1; i++)
        {
            for(let j = 1; j < this.cols - 1; j++)
            {
                cb(m, i, j, m[i][j]);
            }
        }
    }



    // initializes everything basically
    // simply call again to regenerate a new level - it won't explode. I think (I TESTED IT OK!?)
    generate()
    {
        const MAX_SIZE = 960; //48 tiles * 20 tile width

        var i = 0,
            j = 0;

        //---------------------------------------------------------------------
        // STEP 1: CREATE THE GRID (basically an array holding everything)
        //---------------------------------------------------------------------

        //this.grid = [];

        // wtf. for whatever reasons, the cells remain somehow wtf
        this.grid = [];

        for (let r = 0; r < this.rows; r++)
        {
            for (let c = 0; c < this.cols; c++)
            {
                let y = c * /*TILE_SIZE*/ 20,
                    x = r * /*TILE_SIZE*/ 20,
                    cell = new Cell(c, r, x, y);
                this.grid.push(cell);
            }
        }


        //---------------------------------------------------------------------
        // STEP 2: CRETE THE ROOMS
        //---------------------------------------------------------------------

        this.rooms = [];

        // amount: number of rooms
        for (/*let*/ i = 0; i < this.amount; i++)
        {
            let room = new
                Room(
                    rndf(3, this.rows - 3), // with -1 the edge room was all fucked up
                    rndf(3, this.cols - 3),
                    rndf(this.size[0], this.size[1]),
                    rndf(this.size[0], this.size[1]),
                    i
                );

            // if not the first room
            if(i > 0)
            {
                // if first room is outside the canvas
                // SUPER IMPORTANT: this shit is checking against size *in tiles*
                // 1000 = 50 * 20. but since we don't want to be that big, we use 48 * 20 = 960.
                // this way we avoid the bug of having some rooms wide open
                if( this.rooms[0].x + this.rooms[0].w   >= MAX_SIZE ||
                    this.rooms[0].x                     <= 0        ||
                    this.rooms[0].y + this.rooms[0].h   >= MAX_SIZE ||
                    this.rooms[0].y                     <= 0)
                {
                    this.generate();
                    // TODO: DO NOT RESTART AFTER X ITERATIONS WTF !!!!!!!!!
                    break;
                }

                for (let e = 0; e < this.rooms.length; e++) // for all the previous rooms
                {
                    this.collide = false; // they are not colliding

                    //if colliding with previous room
                    if( room.x          <= this.rooms[e].x + this.rooms[e].w    &&
                        room.x + room.w >= this.rooms[e].x                      &&
                        room.y          <= this.rooms[e].y + this.rooms[e].h    &&
                        room.y + room.h >= this.rooms[e].y)
                    {
                        this.collide = true; // kill room
                        i--
                        break;
                    }

                    // if outside of canvas
                    else if (
                        room.x + room.w     >= MAX_SIZE ||
                        room.x              <= 0        ||
                        room.y+room.h - 1   >= MAX_SIZE ||
                        room.y              <= 0)
                    {
                        this.collide = true; // kill room
                        i--;
                        break;
                    }
                }
            }

            // if they have not collided
            if(!this.collide)
            {
                this.rooms.push(room); // add room to the array

                if(i > 0) // make corridors
                {
                    this.hC(this.rooms[i-1].center[0], room.center[0], this.rooms[i-1].center[1], room.center[1]);
                    this.vC(this.rooms[i-1].center[0], room.center[0], this.rooms[i-1].center[1], room.center[1]);
                }
            }
        }


        //---------------------------------------------------------------------
        // STEP 3: "CARVE" THE ROOMS (set the cells acoordingly)
        //---------------------------------------------------------------------

        // once calculated - carve the rooms
        for (/*let*/ i = 0; i < this.grid.length; i++)
        {
            this.grid[i].carve();
        }


        //---------------------------------------------------------------------
        // STEP 4: fill in our matrix (easier to collide against that - among other thigns)
        //---------------------------------------------------------------------

        // initialize now our matrix - same as grid but in matrix form. easier for collision and stuff
        this.matrix = [];
        for(/*let*/ i = 0; i < this.cols; i++) this.matrix[i] = [];

        // won't use this.it() here because we shouldn't initialize matrix without all the elements
        for (/*let*/ i = 0; i < this.rows; i++)
        {
            for (/*let*/ j = 0; j < this.cols; j++)
            {
                this.matrix[i][j] = this.grid[ (i * this.rows) + j ];
            }
        }


        //---------------------------------------------------------------------
        // STEP 5: CALCULATE THE HEX VALUES (basically see which tiles are adjacent to what)
        //
        //     For each tile (x) see what's around. If there's only something up - that's a 0x1.
        //     If there's something up and down, that's 0x5 (0x1 + 0x4).
        //     If it's a corner tile, for example 0x8 + 0x4 = 0xC (12) etc.
        //
        //       -----
        //       | 1 |
        //   -------------
        //   | 8 | x | 2 |
        //   -------------
        //       | 4 |
        //       -----
        //
        // AUTOTILE
        //---------------------------------------------------------------------

        this.it(this.matrix,

            // m = matrix
            // i, j
            // e = matrix[i][j]
            function(m, i, j, e)
            {
                let aux = 0x0;

                // up, down, left, right
                let u = m[i][j - 1],
                    d = m[i][j + 1],
                    l = m[i - 1][j],
                    r = m[i + 1][j];

                if(m[i][j].t != " ")
                {
                    if(u && u.t != " ") aux += 0x1;
                    if(d && d.t != " ") aux += 0x4;
                    if(l && l.t != " ") aux += 0x8;
                    if(r && r.t != " ") aux += 0x2;
                }

                m[i][j].w = aux;
            }
        );


        //---------------------------------------------------------------------
        // STEP 6: create windows, lights ---and doors NOPE---.
        //
        //         Windows: they appear on the borders of a room, surrounded by walls.
        //
        // Example (those are hex values from the autotiles):
        //
        // 67%73   The tiles that could become a window in this case are marked
        // efffb   with %, and they have ~35% chance of spawning.
        // %fff%   Bigger rooms have bigger chance of spawning windows.
        // efffb
        // cd%d9
        //
        //         Light sources: they appear where machines / screens are.
        //
        //         Doors: they appear at the end of a corridor.
        //
        // RRRRR   Some corridors get transformed into room tiles during the hex process,
        // RRRRR   so we need to check hex values + tile values (R, C, etc).
        // RRRRR-C If we are on a corridor and the adjacent tiles are room and corridor,
        // RRRRR   then we place a door (symbol "-" in this example).
        // RRRRR
        //
        //         Doors are pretty messed up - since I don't have enough time,
        //         I just implement them as big boxes. Also they do not appear on all
        //         the places they should - but it's "close enough" lol
        //
        //---------------------------------------------------------------------


        // before we start setting the light - reset it to our base value (there was a weird bug of "overlighting")
        this.it(this.matrix, function(m, i, j, e)
        {
            m[i][j].l = NO_LIGHT;
        });

        // place a yellow light on the "sensor" location
        let cc = this.rooms[0].center;
        this.matrix[cc[0]-2][cc[1]].t = "W";
        this.matrix[cc[0]-2][cc[1]].l = [ 1.0, 0.98, 0.32, 1];

        // NOOOOOO I had to take the doors out, I'm a really sad potato :'(
        //var doors = [];

        // iterate through all tiles and spawn windows around certain edges; doors are spawned at the end of a corridor.
        this.it(this.matrix, function(m, i, j, e)
        {
            // current tile, up, down, left, right
            let v = m[i][j],
                u = m[i][j - 1],
                d = m[i][j + 1],
                l = m[i - 1][j],
                r = m[i + 1][j],
                p = rnd(0, 9) > 6.5, // probability of spawning a window, around 35% or so
                p2 = rnd(0, 9) > 7;


            // SPAWN LIGHTS NOW IN THE MIDDLE OF THE ROOMS!
            if
            (p && (v.w == 0xf && l.w == 0xf && r.w == 0xf && u.w == 0xf && d.w == 0xf) )
            {
                m[i][j].t = "W"; // window yay
                m[i][j].l = [0.05, 0.7, 0.9, 1.0]; // rndc();
            }


            // LIGHT ON CORRIDORS
            if
            ( p2 &&
               ((v.w == 0xa && l.w == 0xa && r.w == 0xa) ||
                (v.w == 0x5 && u.w == 0x5 && d.w == 0x5))
            )
            {
                m[i][j].t = "W";
                m[i][j].l = [0.9,0.5,0.05,1]; // super nice color
            }
        });


        //---------------------------------------------------------------------
        // STEP 7: create computers and stuff
        //---------------------------------------------------------------------
        // WELL, NOPE :(

        //---------------------------------------------------------------------
        // STEP 8: LIGHTMAP
        //
        // The original plan was to have kinda radiosity / fake GI as described
        // by IQ and others (check this: https://iquilezles.org/articles/simplegi/ )
        //
        // However... this approach failed (for reasons). So instead of complicating
        // my life (even more), I decided to do a simpler approach: only light
        // sources start with a light value. Afterwards we
        //
        //---------------------------------------------------------------------


        // new approach: we iterate top down or whatever, if we find a value that is not NO_LIGHT - we do the following:
        //
        // o x
        // x L x
        //   x o
        //
        // where x = L * 0.5 and o = L * 0.25


        for(i = 1; i < this.rows - 1; i++)
        {
            for(j = 1; j < this.cols - 1; j++)
            {
                // current tile, up, down, left, right
                let v = this.matrix[i][j],
                    u = this.matrix[i][j - 1],
                    d = this.matrix[i][j + 1],
                    l = this.matrix[i - 1][j],
                    r = this.matrix[i + 1][j],
                    ar = 0,
                    ag = 0,
                    ab = 0,
                    w = v.l,
                    a = [0, 0, 0]; // R G B accumulated "light"

                // WE NEED TO FIND ANOTHER WAY TO COLOR THESE !!!!!!!!!!!!!! (sad)
                if(v.w != 0x0 && l.w != 0x0)
                {
                    // grab the values at the adjacent tiles and calculate the mean
                    ar = (u.l[0] + d.l[0] + l.l[0] + r.l[0]) / 4.0;
                    ag = (u.l[1] + d.l[1] + l.l[1] + r.l[1]) / 4.0;
                    ab = (u.l[2] + d.l[2] + l.l[2] + r.l[2]) / 4.0;

                    this.matrix[i][j].l = [w[0] + ar, w[1] + ag, w[2] + ab, 1.0];
                }
            }
        }
    }



    // This is used by toMesh(), basically returns the vertices for the geometry
    // Sadly these are just squared walls. Since the collision is only aabbs, it
    // doesn't make much sense to add things that aren't box shaped. I'm sad :(

    // before this was called getVertices
    // getVertices(w, i, j)
    gV(w, i, j)
    {
        let r = null;

        if(w == FW)
        {
            r =
            [
                [i,     0, j    ],
                [i + 1, 0, j    ],
                [i,     C, j    ],
                [i + 1, C, j    ]
            ];
        }
        else if(w == BW)
        {
            r =
            [
                [i + 1, 0, j + 1],
                [i    , 0, j + 1],
                [i + 1, C, j + 1],
                [i    , C, j + 1]
            ];
        }
        else if(w == LW)
        {
            r =
            [
                [i,     0, j + 1],
                [i,     0, j    ],
                [i,     C, j + 1],
                [i,     C, j    ]
            ];
        }
        else if(w == RW)
        {
            r =
            [
                [i + 1, 0, j    ],
                [i + 1, 0, j + 1],
                [i + 1, C, j    ],
                [i + 1, C, j + 1]
            ];
        }
        else if(w == GT)
        {
            r =
            [
                [i,     0, j + 1],
                [i + 1, 0, j + 1],
                [i,     0, j    ],
                [i + 1, 0, j    ]
            ];
        }
        else if(w == CT)
        {
            r =
            [
                [i,     C, j + 1],
                [i + 1, C, j + 1],
                [i,     C, j    ],
                [i + 1, C, j    ]
            ];
        }

        // if r == null => oopsy
        return r;
    }

    toMesh()
    {
        // the mesh
        let m = new GL.Mesh({ coords: true, normals: true, colors: true });

        m.vertices      = []; // vertices
        m.coords        = []; // uv's
        //m.normals       = []; // I hope they are auto calculated lol
        m.triangles     = []; // tris
        m.colors        = []; // we use colors for the lightmap

        //--------------------------------------------------------------------
        // helper functions

        // push a triangle, usage: pushv(this.gV(FW, i, j)) > this will insert the vertices for a front wall at location (i,j)
        function pvt(v)
        {
            m.vertices.push.apply(m.vertices, v); //this.gV(GT, i, j));
        };


        // two variants: pushc(color) pushes the same color to all vertices or pushc(1,2,3,4) pushes different ones for each vertex
        // push color - pushc - puc
        function puc(c1, c2, c3, c4)
        {
            if(!c2) m.colors.push(c1, c1, c1, c1);
            else m.colors.push(c1, c2, c3, c4);
        }


        // push uv's
        // w: which tile (see the constants above)
        // t: tile type at this position, used for lights and stuff like that
        function puv(w, t)
        {
            let ind = 0,
                x = 0,
                y = 1 - 0.125;                  // USED FOR WALLS ONLY


            // if it's the ceiling - set the right column and convert to ground
            if(w == TC)
            {
                ind = 1;
                if(t && t == "W") ind = 2;
                w = TG;
            }
            x = 1 - (0.125 * (7 - ind));    // USED FOR EVERYTHING

            // TODO: ADD VARIATION BASED ON WHERE YOU ARE
            if(w == TG)
            {
                m.coords.push( [x, 1], [x - 0.125, 1], [x, 1 - 0.125], [x - 0.125, 1 - 0.125] );
            }
            else if(w == TW)
            {
                m.coords.push( [x, y], [x - 0.125, y], [x, y - 0.1875], [x - 0.125, y - 0.1875] );
            }
        }

        //--------------------------------------------------------------------

        for(let i = 1; i < this.rows - 1; i++)
        {
            for(let j = 1; j < this.cols - 1; j++)
            {
                let v   = this.matrix[j][i].w,          // a hex number from 0x0 to 0xf
                    cl  = this.matrix[j][i].l,          // light at tile [j][i]
                    cl0 = this.matrix[j    ][i + 1].l,  // cls' are light values at adjacent tiles
                    cl1 = this.matrix[j + 1][i + 1].l,
                    cl2 = this.matrix[j    ][i    ].l,
                    cl3 = this.matrix[j + 1][i    ].l;

                // normals are calculated later on with autoNormals
                if(v != 0)
                {
                    pvt(this.gV(GT, i, j)); // GROUND
                    puv(TG);
                    puc(cl3, cl1, cl2, cl0);

                    //---------------------------------------------------------------------

                    pvt(this.gV(CT, i, j)); // CEILING
                    puv(TC, this.matrix[j][i].t);

                    // TODO: INTERPOLATE THE COLORS SOMHOW !!!!! this is eating all my bytes lol
                    let h = 0.95; // 0.25
                    m.colors.push
                    (
                        [cl3[0]*h,cl3[1]*h,cl3[2]*h,1],
                        [cl1[0]*h,cl1[1]*h,cl1[2]*h,1],
                        [cl2[0]*h,cl2[1]*h,cl2[2]*h,1],
                        [cl0[0]*h,cl0[1]*h,cl0[2]*h,1]
                    );



                    // TOP RIGHT CORNER. made of  FRONT + RIGHT
                    if(v == 0x3)
                    {
                        pvt(this.gV(FW, i, j)); // FRONT
                        puv(TW);
                        puc(cl);

                        //----------------------------------------------------------
                        pvt(this.gV(RW, i, j)); // RIGHT
                        puv(TW);
                        puc(cl);
                    }


                    // TOP LEFT CORNER
                    if(v == 0x6)
                    {
                        pvt(this.gV(LW, i, j)); // LEFT
                        puv(TW);
                        puc(cl);

                        //----------------------------------------------------------
                        pvt(this.gV(FW, i, j)); // FRONT
                        puv(TW);
                        puc(cl);
                    }


                    // BOTTOM LEFT CORNER
                    if(v == 0xC)
                    {
                        pvt(this.gV(LW, i, j)); // LEFT
                        puv(TW);
                        puc(cl);

                        //----------------------------------------------------------
                        pvt(this.gV(BW, i, j)); // BACK
                        puv(TW);
                        puc(cl);
                    }


                    // BOTTOM RGHT CORNER
                    if(v == 0x9)
                    {
                        pvt(this.gV(RW, i, j)); // RIGHT
                        puv(TW);
                        puc(cl);

                        //----------------------------------------------------------
                        pvt(this.gV(BW, i, j)); // BACK
                        puv(TW);
                        puc(cl);
                    }


                    // TOP WALL (FRONT)
                    // NOTE: WE NEED TO DRAW BACK THE WINDOWS ONCE WE GOT THE TEXTURE IN PLACE !!!
                    // nope, I had to remove windows too
                    if(v == 0x7)
                    {
                        pvt(this.gV(FW, i, j)); // FRONT
                        puv(TW);
                        puc(cl);
                    }


                    // BACK WALL (bottom)
                    if(v == 0xD)
                    {
                        pvt(this.gV(BW, i, j)); // BACK
                        puv(TW);
                        puc(cl);
                    }


                    // RIGHT WALL
                    if(v == 0xB)
                    {
                        pvt(this.gV(RW, i, j)); // RIGHT
                        puv(TW);
                        puc(cl);
                    }

                    // LEFT WALL
                    if(v == 0xE)
                    {
                        pvt(this.gV(LW, i, j)); // LEFT
                        puv(TW);
                        puc(cl);
                    }

                    // HORIZONTAL CORRIDOR - FRONT and BACK walls
                    if(v == 0x5)
                    {
                        pvt(this.gV(FW, i, j)); // FRONT
                        puv(TW);
                        puc(cl);

                        //----------------------------------------------------------
                        pvt(this.gV(BW, i, j)); // BACK
                        puv(TW);
                        puc(cl);
                    }


                    // VERTICAL CORRIDOR - LEFT and RIGHT walls
                    if(v == 0xa)
                    {
                        pvt(this.gV(LW, i, j)); // LEFT
                        puv(TW);
                        puc(cl);

                        //----------------------------------------------------------
                        pvt(this.gV(RW, i, j)); // RIGHT
                        puv(TW);
                        puc(cl);
                    }
                }
            }
        }



        // this one generates all the indices for our triangles. we repeat a lot of them (could see the indexer but whatever)
        // we also assume that we ALWAYS have quads (2 triangles, aka 4 vertices)
        let de = 0;
        for(let i = 0; i < m.vertices.length / 4; i++)
        {
            de = i * 4;
            m.triangles.push
            (
                [0 + de, 1 + de, 2 + de],   // always (0, 1, 2), (2, 1, 3) but "interleaved" by our stride
                [2 + de, 1 + de, 3 + de]
            );
        }


        m.compile();
        m.computeNormals();


        return m;
    }






    // make horizontal corridor
    hC(x1, x2, y1, y2)
    {
        // if the first room is further towards the right then the second one
        if(x1 > x2)
        {
            //find the distance between rooms
            this.disX = (x1 - x2) + 1;

            for (let i = 0; i < this.grid.length; i++)
            {
                this.grid[i]./*carveH*/ ccH(this.disX, x2, y2); //carve out the corridor
            }
        }
        //if the second room is further towards the right then the first one
        else
        {
            this.disX = (x2 - x1) + 1;

            for (let i = 0; i < this.grid.length; i++)
            {
                this.grid[i]./*carveH*/ ccH(this.disX, x1, y1); //carve out corridor
            }
        }
    }

    //vertical corridor creator
    vC(x1, x2, y1, y2)
    {
        let x = 0;

        //if the first room is further towards the bottom then the second one
        if(y1 > y2)
        {
            this.disY = (y1 - y2) + 1;

            //find the correct x coord
            if(x2 + (this.disX - 1) > x1 + (this.disX-1))
            {
                x = x2;
            }
            else
            {
                x = x2 + (this.disX - 1);
            }

            for(let i = 0; i < this.grid.length; i++)
            {
                this.grid[i]./*carveV*/ ccV(this.disY, x, y2); // carve out corridor
            }
        }

        //if the second room is further towards the bottom then the first one
        else
        {
            this.disY = (y2 - y1) + 1;

            //find the correct x coord
            if(x1 + (this.disX - 1) > x2 + (this.disX - 1))
            {
                x = x1;
            }
            else
            {
                x = x1 + (this.disX - 1);
            }

            for (let i = 0; i < this.grid.length; i++)
            {
                this.grid[i]./*carveV*/ ccV(this.disY, x, y1);
            }
        }
    }

/*
    //  DEBUG METHOD, ALLOWS YOU TO DRAW TO CANVAS TO SEE THE MAP / MAZE
    draw()
    {
        for(let i = 0; i < this.rows; i++)
        {
            for(let j = 0; j < this.cols; j++)
            {
                this.matrix[i][j].draw(); // it gets transposed, sorry
            }
        }

        //draw the rooms numbers
        for (let i = 0; i < this.rooms.length; i++)
        {
            this.rooms[i].draw();
        }
    }

    // debug
    print(flag)
    {
        let str = "", v;

        // iterate through the matrix
        this.it(this.matrix, function(m, i, j, e)
        {
            if(flag == MAP_PRINT_TILES)
            {
                str += e.t; // tile type
            }
            else if(flag == MAP_PRINT_HEX)
            {
                v = e.w;
                if(v == 0x0) str += " "; // for debugging
                else str += v.toString(16);
            }

            // 48 == this.cols - 2 (mini hack, sorry)
            if(j == 48) str += "\n";
        });

        console.log(str);
    }
*/


    // should be called differently perhaps. whatever.
    // basically this method calculates the biggest (ehem) possible bounding boxes
    // that surround the actual map. this way we create a lot less bodies to collide with.
    // in other words: everywhere there's a 0 on the map (the outside of the station)
    // gets converted into a bunch of boxes which we add to the simulation as static geometry (colldiers)
    // we could also use a "greedy" approach but this is working nicely, so that's that lol
    calculateBoxes()
    {
        // STEP 1: calculate rectangle strips (for each line, find all the rectangle strips of 0's on the map)
        let boxes = [],
            count = 0,
            y = 0;

        // inserts a box
        function box(xb, yb, wb, hb)
        {
            boxes.push(
            {
                x: yb, //i,
                y: xb, //y,
                w: hb, //1,
                h: wb  //count
            });

            count = 0;
            y = xb; // j
        }

        for(let i = 0; i < this.cols; i++)
        {
            y = 0;
            for(let j = 0; j < this.rows; j++)
            {
                let v = this.matrix[i][j].w; // t == tile, w == hex
                if(v == 0x0)
                {
                    count++;
                }
                else
                {
                    // so, we basically need to find an edge. we check edges from left to right, going down line by line.
                    // from the left side, all rooms walls are 6-E-C. cooridor corners are C's too. vertical corridors are A's.
                    // by checking those values we find the place where we have to stop counting to create a rectangle strip.
                    if(v == 0x6 || v == 0xe || v == 0xc || v == 0xa)
                    {
                        box(i, y, 1, count);
                    }

                    y = j + 1;
                }
            }

            box(i, y, 1, count);
        }

        // STEP 2: MERGE BOXES
        // IMPORTANT: boxes are unordered, we need to sort them by .x coordinate, otherwise we will fail merging
        boxes.sort(function(a, b)
        {
            return parseFloat(a.x) - parseFloat(b.x);
        });

        // iterate through all strips. if the strips share the same x position and width, we
        // pack them in a bigger box. note: the difference between each step must be 1, otherwise
        // it means that *ANOTHER* rectangle started (shares the same x and w but is a bit lower on the level)
        let b1          = boxes[0],
            merged      = [],
            height      = 0,
            lastY       = b1.y;

        for(let i = 0; i < boxes.length; i++)
        {
            if(boxes[i].x == b1.x && boxes[i].w == b1.w && Math.abs(boxes[i].y - lastY) == 1)
            {
                height++;
                lastY = boxes[i].y;
            }
            else
            {
                merged.push({
                    x: b1.x,
                    y: b1.y, // grab the "original" y
                    w: b1.w,
                    h: height
                });

                lastY   = boxes[i].y; // there was a very stupid bug in which two boxes would have the same X and W but skip one line and that would get merged wrongly
                b1      = boxes[i];
                height  = 1;
            }
        }

        // the last one never gets added, so we add it here
        merged.push({
            x: b1.x,
            y: b1.y,
            w: b1.w,
            h: height
        });

        // the first box is duplicated since the merge is botched - don't ask. it's working this way :D
        merged.splice(0, 1);
        this.boxes = merged;
    }
}


// TEXTURES


/*
// used for gradient stuff, clearly
const VERT_GRADIENT = 0,
    HORIZ_GRADIENT = 1;
*/

// couldn't decide how to call this, so it's ATexture as in artistical texture but also just A texture lol
class ATexture
{
    constructor(name, w, h)
    {
        let c = document.createElement('canvas');
        c.id = name;
        c.style.display="none"; // hide the canvas !
        h = (h || w); // if you don't provide height, we assume the texture is squared
        this.w = c.width = w;
        this.h = c.height = h;
        document.body.appendChild(c);

        this.c = c;
        this.ctx = c.getContext('2d');
        return this;
    }

    // width of blur, color
    // color is an array of the form [r, g, b, a]
    blur(w, c)
    {
        this.ctx.shadowBlur = (w * this.w);
        this.ctx.shadowColor = argba(c); //c;
        return this;
    }

    // canvas draw box
    // x, y:    position
    // w, h:    width / height
    // c:       color [r, g, b, a]
    // t:       draw as a line / outline instead of a box

    // TODO: AT THE END OF THE THING ADD A ROUNDING VALUE TO ADD ROUNDED THINGS !!!!
    box(x, y, w, h, c, t)
    {
        this.ctx.fillStyle = argba(c);
        this.ctx.strokeStyle = argba(c);
        this.ctx.globalAlpha = c[3] || 1.0;
        this.ctx.beginPath();

        if(t)
        {
            this.ctx.rect(x * this.w, y * this.h, w * this.w, h * this.h);
            this.ctx.lineWidth = "" + (t * this.w);
            this.ctx.stroke();
        }
        else
        {
            this.ctx.fillRect(x * this.w, y * this.h, w * this.w, h * this.h);
        }
        this.ctx.globalAlpha = 1.0;
        return this;
    }
/*

    // x,y:     position (between 0 and 1)
    // d:       dimensions (how many sides)
    // s:       scale / size
    // c:       color [r, g, b, a]
    // r:       randomization value (from 0 to 1, moves the vertices randomly by this amount)
    // t:       if enabled, it's used to draw as a line and also control the line width
    polygon(x, y, d, s, c, r, t) //, r, g, b, a, mode)
    {
        this.ctx.fillStyle = argba(c);
        this.ctx.strokeStyle = argba(c); // in case we need lines
        this.ctx.beginPath();
        x = x * this.w;
        y = y * this.h;
        s = s * this.w;
        r = r || 0.1;

        let vx = r * this.w,
            vy = r * this.h;

        this.ctx.moveTo (x +  s * Math.cos(0), y +  s *  Math.sin(0));
        for(var i = 1; i <= d; i += 1)
        {
            this.ctx.lineTo (
                x + s * Math.cos(i * 2 * Math.PI / d) + rnd(-vx, vx),
                y + s * Math.sin(i * 2 * Math.PI / d) + rnd(-vy, vy)
            );
        }
        this.ctx.closePath();

        if(t)
        {
            this.ctx.lineWidth = "" + (t * this.w);
            this.ctx.stroke();
        }
        else
        {
            this.ctx.fill(); // if we need lines we should do stroke and not fill
        }
    }


    // THIS ONE IS WORKING BUT ELLIPSE DOES THE SAME

    // canvas draw circle
    // x, y:    pos
    // r:       radius
    // c:       color [r, g, b, a]
    circle(x, y, r, c)
    {
        this.ctx.fillStyle = argba(c);
        this.ctx.beginPath();
        this.ctx.arc(x * this.w, y * this.h, r * this.w, 0, 6.28, false);
        this.ctx.fill();
        return this;
    }


    // ellipse
    // x, y:    pos
    // r1, r2:  radiuses
    // c:       color [r, g, b, a]
    ellipse(x, y, r1, r2, c)
    {
        this.ctx.fillStyle = argba(c);
        this.ctx.beginPath();
        this.ctx.ellipse(x * this.w, y * this.h, r1 * this.w, r2 * this.h, 0, 0, 6.28);
        this.ctx.fill();
        return this;
    }
*/

    // text
    // x, y:    pos
    // text:    string (text to draw)
    // c:       color [r, g, b, a]
    // s:       size (font size)
    // TODO: MAKE SIZE RELATIVE TO CANVAS OR SOMETHING LIKE THAT
    text(x, y, text, c, s)
    {
        s = (s || 0.1) * this.w;
        //this.ctx.globalAlpha = c[3]; // this fixes the bug but breaks the floor, so... it stays lol
        this.ctx.fillStyle = argba(c);
        this.ctx.font = "" + s + "px Arial";
        this.ctx.textAlign = "center";
        this.ctx.fillText(text, x * this.w, y * this.h);
        return this;
    }

    t2(x, y, ox, oy, text, c1, c2, s1, s2)
    {
        this.text(x, y, text, c1, s1);
        this.text(x + ox, y + oy, text, c2, s2);
        return this;
    }



    // some linear gradient
    // c = colors, an array of arrays [r, g, b, a]
    // t TYPE
    gradient(x, y, w, h, c, t)
    {
        let g;

        //t = t || VERT_GRADIENT;

        //if(t == VERT_GRADIENT)
        //{
            // VERTICAL GRADIENT
            g = this.ctx.createLinearGradient
            (
                (x + w) / 2 * this.w,
                y * this.h,
                (x + w) / 2 * this.w,
                (y + h) * this.h
            );
        //}
        /*
        else if(t == HORIZ_GRADIENT)
        {
            // HORIZONTAL GRADIENT - doesn't look too good
            g = this.ctx.createLinearGradient
            (
                x * this.w,
                (y + h) / 2 * this.h,
                (x + w) * this.w,
                (y + h) / 2 * this.h,

            );
        }*/

        let l = 1; // last index color
        g.addColorStop(0, argba(c[0]));

        if(c.length == 3)
        {
            l = 2;
            g.addColorStop(0.5, argba(c[1]));
        }

        //g.addColorStop(0.9, c2);
        g.addColorStop(1.0, argba(c[l]));

        //gradient.addColorStop(1, "green");

        // Set the fill style and draw a rectangle
        this.ctx.fillStyle = g;
        this.ctx.fillRect(x * this.w, y * this.h, w * this.w, h * this.h);

        return this;
    }


    // draws noise. you need to provide a callback. default callback: just rand

    /*
        // some interesting functions
        (Math.sin(i) * Math.cos(i) * 256) | 0; // sin * cos cool
        (1000/Math.sin(i) * 256) | 0; // sin * cos cool
        (rng(0, i % width, i / height) * 256) | 0; // random
        (Math.sin(i % width * 0.05) * Math.cos(i / height * 0.05) * 256) | 0; // yeaaah
        (Math.tan(i % width * 0.05) / Math.tan(i / height * 0.05) * 256) | 0; // yeaaah
    */

    // cb:      a callback to return values (randomly or whatever) of the form cb(i) where i is the current i-eth pixel
    // color:   an rgb color form 0.0 to 1.0 in array form. ie [ 1.0, 0.0, 1.0 ] = violet-ish
    // THE COLOR HERE IS FROM 0-1, REMEMBER THIS !!!!!!!!!!!!!!
    noise(color, cut, cb)
    {
        var imageData = this.ctx.getImageData(0, 0, this.c.width, this.c.height),
            p = imageData.data,
            i = 0;

        // default noise is just random noise
        cb      = cb || function(i){ return rnd(0, 255); } //return Math.random() * 256; };
        color   = color || [ 1.0, 1.0, 1.0];
        cut     = cut || 1.0;

        while (i < p.length)
        {
            if(rnd(0.0, 1.0) <= cut)
            {
                let c = cb(i);
                p[i++] += color[0] * c;
                p[i++] += color[1] * c;
                p[i++] += color[2] * c;
                p[i++] += 255; //  alpha; ALPHA CHANNEL!
            }
            else
            {
                p[i++] += 1;
                p[i++] += 1;
                p[i++] += 1;
                p[i++] += 255;
            }
        }
        this.ctx.putImageData(imageData, 0, 0); //x, y); // g
        return this;
    }


    // atex:    an ATexture texture with noise (or whatever)
    // octaves: a number. the bigger the number, more "noise-y". cannot go beyond the original texture size
    // TODO: DO SOME ERROR CHECKING !!!
    perlin(atex, octaves, sx, sy)
    {
        this.ctx.save();

        octaves = octaves || 4;
        sx = sx || 1.0;
        sy = sy || 1.0;

        // Scale random iterations onto the canvas to generate Perlin noise - original "octave" value = 4
        for (var size = octaves; size <= atex.c.width; size *= 2)
        {
            var x = (Math.random() * (atex.c.width - size)) | 0,
                y = (Math.random() * (atex.c.width - size)) | 0;

            this.ctx.globalAlpha = octaves / size;
            this.ctx.drawImage(atex.c, x, y, size, size, 0, 0, this.c.width * sx, this.c.height * sy); // * rnd(1, 128)); // cool distorsion effects
        }

        this.ctx.restore();
        return this;
    }


    image(atex, x, y, w, h, a)
    {
        x = x || 0;
        y = y || 0;
        w = w || 1;
        h = h || 1;

        this.ctx.globalAlpha = a || 1.0;
        this.ctx.drawImage(atex.c, x * this.w, y * this.h, w * this.w, h * this.h);
        //this.ctx.globalAlpha = 1.0; // SHOULD BE HANDLED BY _PRE() OR _POST() OR SOMETHING

        return this;
    }
}



///////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////


const

    GREY_L = 0,
    GREY_M = 1,
    GREY_D = 2,

    RUST_L = 3,
    RUST_M = 4,
    RUST_D = 5, // SHADOW

    GREEN_L = 6,
    GREEN_M = 7,
    GREEN_D = 8,

    RED_L = 9,
    RED_M = 10,
    RED_D = 11;


// our big color palette
var P =
[

    [132, 134, 131], // grey
    [108, 104, 104],
    [ 64,  63,  56],

    [ 76,  56,   8], // rust
    [ 62,  58,  44],
    [ 26,  25,  16],

    [138, 138, 108], // green
    [ 66,  74,  53],
    [ 29,  51,  22],

    [175,  71,  33], // red
    [101,  55,  19],
    [ 67,  30,  10]

];


// returns a color from the palette with custom alpha
// w = which (index)
// a = alpha
function Pa(w, a)
{
    a = a || 1.0;
    return [ P[w][0], P[w][1], P[w][2], a]; // we need to create a new array and return it; otherwise it won't change the alpha. wtf.
}


//--------------------------------------------------------------------------------------------

// rust noise
let rn = new ATexture("rn", 512);
rn.noise([1, 2, 1], 0.81);
rn.box(0, 0, 1, 1, Pa(GREY_L, 0.9));

//--------------------------------------------------------------------------------------------


// texture perlin - a generic and boring perlin noise thing lol
// USED BY THE GROUND TEXTURE !!!
let tp = new ATexture("tp", 512);
tp.noise();
tp.perlin(tp, 8);

//--------------------------------------------------------------------------------------------

// perlin rust - USED BY WALLS
let pr = new ATexture("pr", 256);
pr.noise(Pa(GREEN_D), 0.9);
pr.perlin(pr, 64, 1.0, 16.0);


//--------------------------------------------------------------------------------------------

// texture ground - GOOD !!!!!!!!!!
let tg = new ATexture("gbase", 256);

// background
tg. box(0, 0, 1, 1, Pa(RUST_D)).
    box(0.025, 0.025, 0.95, 0.95, Pa(RUST_D, 0.9)). // "emboss" attempt
    box(0.025, 0.025, 0.95, 0.95, Pa(RUST_M, 0.9), 0.05).  // GROUND_BASE_HIGHLIGHT
    text(0.5, 1, "\u{25A2}", Pa(GREEN_M, 0.6), 1.5). // rounded box thing
    gradient(0, 0, 1, 1, // main gradient
    [
        Pa(RUST_D, 0.5),
        Pa(GREY_M, 0.18),
        Pa(RUST_D, 0.7)
    ]); // add HORIZ_GRADIENT here to make it horizontal


//--------------------------------------------------------------------------------------------


// "texture ceiling" - SUPER IMPORTANT! we need to copy now this one NOW before we add the decoration!
let tc = new ATexture("tc", 256);
tc.image(tg, 0, 0, 1, 1).
   image(tp, 0, 0, 1, 1, 0.1);

//--------------------------------------------------------------------------------------------


// "texture ceiling light" - same as the other one but with extra lights lol
let tcl = new ATexture("tcl", 256);
tcl.image(tg, 0, 0, 1, 1).
    image(tp, 0, 0, 1, 1, 0.1).         // draw the ground image
    blur(0.05, Pa(RUST_D)).
    box(0.15, 0.15, 0.3, 0.3, [255, 255, 255, 0.7]). // draw 4 ultra light squares - our lamps
    box(0.55, 0.15, 0.3, 0.3, [255, 255, 255, 0.5]).
    box(0.15, 0.55, 0.3, 0.3, [255, 255, 255, 0.8]).
    box(0.55, 0.55, 0.3, 0.3, [255, 255, 255, 0.9]);



//--------------------------------------------------------------------------------------------

// NOW WE ARE BACK TO GROUND !
// draw 8x8 "things"
for(let i = 0; i < 12; i++)
{
    for(let j = 0; j < 12; j++)
    {
        // 25CE = round; 25A3 = squared; 25C8 = triangle;
        // 25EA = square with line; 26DA = small dots, good; 26EC = 3 dots, good!
        // 256C = geometric thing ╬ looks awesome
        let ox = 0.0;
        if(j % 2 == 0) ox = 0.05; // shift

        // OPTIMIZED FOR THE 3 DOTS! (get the backup for other symbols / stuff)
        tg.t2
        (
            ox + (i * 0.1), 0 + (j * 0.1), 0.005, 0.015, "\u{26EC}",
            Pa(GREY_L, rnd(0.3, 0.7)), Pa(RUST_D, rnd(0.5, 0.7)), 0.1, 0.12
        );
    }
}

// add perlin on top
tg.image(tp, 0, 0, 1, 1, 0.1);



//--------------------------------------------------------------------------------------------
// texture wall ! uses a modified version of my steel texture from my js13k 2019 entry :)

// yellow color
let yy = [255, 255, 0, 1];


let tw = new ATexture("wbase", 256, 384);

tw.box(0, 0, 1, 1, Pa(GREY_M, 0.3));

let ss = 256,
    l = 56,             // number of lines
    s = ss / l,         // size of each line
    b = rnd(15,35);     // background / color


tw.box(0, 0, 1, 1, Pa(GREEN_M)). // bgr
   blur(0.015, [5, 5, 5]); // important! without this it loses its punch, the blur really works here

let i = l;
while(i > 0)
{
    i--;
    if(rnd(0, 9) > 5) continue; // skip some lines
    b = rnd(88, 126);
    tw.box(0, i / l, 1.0, i / l, [b, b, b, 1]); // draw a "line"
}

b = rnd(22, 44);

let lpt = [255, 255, 0, 1.0];

// 26EC = 3 dots
// 25C9 = circle thign
// 25C8 = romboid

tw. image(pr, 0, 0, 1, 0.922, 0.1). // perlin
    box(0.05, 0.025, 0.9, 0.95, Pa(GREY_L, 0.88), 0.1). // frame
    box(0.05, 0.025, 0.9, 0.95, [b, b, b, 1], 0.035). // frame
    gradient(0.1, 0.25, 0.8, 0.17,
    [
        Pa(GREY_D, 0.7),
        Pa(GREY_L, 0.6),
        Pa(GREY_M, 0.7)
    ]);

tw.ctx.globalAlpha = 1.0;
tw. text(0.15, 0.35, "\u{25C8}", yy, 0.05).
    text(0.85, 0.35, "\u{25C8}", yy, 0.05).
    gradient(0, 0, 1, 1,
    [
        [12,12,12, 0.75], // extra dark lol
        Pa(GREY_L, 0.05),
        Pa(RUST_D, 0.75)
    ]);


//--------------------------------------------------------------------------------------------


// "texture crate base red" lol - long side
let tcbr = new ATexture("tcbr", 256, 128);

ss = 256;
l = 18;             // number of lines
s = ss / l;         // size of each line
b = rnd(115,185);     // background / color


tcbr.box(0, 0, 1, 1, Pa(GREY_D)). // bgr
     blur(0.015, [5, 5, 5]); // important! without this it loses its punch, the blur really works here

i = l;
while(i > 0)
{
    i--;
    b = rnd(188, 216);
    tcbr.box(0, 0.1 + i / l, 1.0, i / l, Pa(RUST_D, rnd(0.2, 0.7)));
}

tcbr. image(pr, 0, 0, 1, 0.922, 0.1); // perlin
tcbr.ctx.globalAlpha = 1.0; // there's a bug but the bug is needed for the floor, so....


//-------------------------------------------------------------------------------------

// THE SHORT AXIS NOW
let tcbs = new ATexture("tcbs", 256, 128);
tcbs.image(tcbr, 0, 0, 1, 1);


tcbr.text(0.05, 0.20, "\u{25DC}", yy); // top left
tcbr.text(0.95, 0.85, "\u{25DE}", yy); // bottom right
tcbr.text(0.95, 0.20, "\u{25DD}", yy); // top right
tcbr.text(0.05, 0.85, "\u{25DF}", yy); // bottom left





// just yellow lines, used for the "Extractor" or whatever we should call it
let tln = new ATexture("tln", 256);

//tln.box(0, 0, 1, 1, [0, 0, 0]); // background, used for debugging
for(i = 0; i < 20; i++)
{
    tln.box(0, i * 0.05, 1, 0.0125, yy);
}





let perlin = new ATexture("perlin", 128);
perlin.noise([1, 1, 1]);
perlin.perlin(perlin, 32);

//----------------------------------------------------------------

let atlas = new ATexture("tileset", 2048);

for(let i = 0; i < 8; i++)
{
    // override the first quadrant
    atlas.image(tg,  0 + (0.125 * i), 0,      0.1255, 0.1255);  // ground / ceiling
    atlas.image(tw,  0 + (0.125 * i), 0.125,  0.125, 0.1875);   // wall
}


atlas.image(tg,  (0.125 * 0), 0, 0.125, 0.125); // ground
atlas.image(tc,  (0.125 * 1), 0, 0.125, 0.125); // ceiling
atlas.image(tcl, (0.125 * 2), 0, 0.125, 0.125); // lit ceiling
atlas.image(tcbr, (0.125 * 0), 0.375,  0.125, 0.0625); // crate 1-2
atlas.image(tcbs, (0.125 * 0), 0.375 + 0.0625,  0.125, 0.0625); // crate 3-4
atlas.image(tln,  (0.125 * 1), 0.375,  0.125, 0.125); // the  yellow lines




//=====================================================================
// GLOBALS
//=====================================================================



/* const */
var PLAYER_SPEED        = 10.0; // make this back a constant once we finish debugging !!!!!!!!!!!!!!!!


var gl                  = GL.create(),
    camera              =
    {
        position:       new GL.Vector(0.0, 0.5, 3.0), // shouldn't we use negative ?
        angle:          new GL.Vector(0.0, 0.0, 0.0)
    },
    mouseSensitivity    = 3.7,          // TODO: save the last sensitivity and draw on the HUD some value or something
    lastDelta           = 0.016,        // used for retrieving delta time between frames
    totalTime           = 0.0,          // total time since the game is running
    timeSinceLastP      = 10.0,         // DEBUG

    level               = null,         // the GL.Mesh with the level
    center              = null,         // a 2 component array used to get the [z, x] position on the world of certain rooms
    boxes               = null,         // our crates. these are Body(ies). mesh is injected here on init
    player              = null,         // the player. a Body. has no mesh. Camera copies the position from this object

    sensor              = null,         // a test sensor. will be more of them. a Body.

    clicked             = false,        // did the user click?

    ground              = null,         // a body. the ground collider. the mesh for the ground comes from level (Map?)
    ceiling             = null,         // same as above but for the ceiling lol

    des                 = 0,            // destroyed boxes counter

    lit                 = 0.0,          // controls the overall light of the game / scene. useful for nice screen FX

    // IMPORTANT: "tileset" is the canvas object where we will fetch from the document.
    // when you create an ATexture("name"), that "name" will end up being attached to the
    // document and that's what we get here - the canvas itself.
    texture             = GL.Texture.fromImage(tileset), // defined on textures.js.


    // this should be last
    shader              = new GL.Shader(
    '\
    varying vec2 coord;\
    varying vec4 pos;\
    varying vec4 color;\
    varying vec3 normal;\
    void main() {\
        coord = gl_TexCoord.xy;\
        gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;\
        pos = gl_Position;\
        color = gl_Color;\
        normal = gl_Normal;\
    }\
    ',

    //-----------------------------------------------------
    // WORKING USING VLACHOS DITHERING. DOESN'T LOOK GOOD FOR OUR GAME, AT LEAST NOT FOR NOW - CHECK LATER
    '\
    varying vec2 coord;\
    varying vec4 pos;\
    varying vec4 color;\
    varying vec3 normal;\
    uniform sampler2D texture;\
    uniform float lit;\
    \
    void main() {\
        vec4 td  = texture2D(texture, coord);\
        if(td.a < 0.9) discard;\
        gl_FragColor = td * color * 4.0 * lit;\
        if(td.r >= 0.5 && td.g >= 0.5 && td.b < 0.5) gl_FragColor = td * lit;\
    }\
    ');


function text(w)
{
    document.getElementById("upper").innerHTML = w;
}


// TODO: DON'T REMAKE OBJECTS WE DON'T HAVE TO (use a flag or something)
function init()
{
    text("[click to play]")

    MAP = new MapImpl();        // MAP is defined in map.js and is needed for the map generation, we initialize it here
    MAP.generate();             // generates the room and the lighting information
    //MAP.draw();               // DEBUG stuff
    //MAP.print(MAP_PRINT_TILES); // DEBUG TO PRINT THE VALUES (instead of hex)
    //MAP.print(MAP_PRINT_HEX);   // DEBUG
    MAP.calculateBoxes();       // calculates the aabb used for static collisions

    level = MAP.toMesh();       // map.generate needs to be called first. this is a GL.Mesh
    center = MAP.rooms[0].center; // important: transpose them (x: c[1], z: c[0])




    // IMPORTANT: the order in which bodies are added MATTERS A LOT. the bodies added at the end are almost static
    // this is due to two things
    // 1) we removed the reaction on the "second" body in the SIM loop (to avoid it getting sent to the moon lol)
    // 2) we cut the loops in half, only doing one set of tests.

    // IMPORTANT: REMEMBER TO ADD VERTEX COLORS FOR EACH MESH


    boxes = [];
    for(let i = 0; i < 100; i++)
    {
        let index = parseInt(i % 10) + 1; // get boxes on the rooms, around 10 boxes on each

        center = MAP.rooms[index].center;

        let b = new Body
        (
            new GL.Vector(rnd(center[1] - 2, center[1] + 2), 0.5, rnd(center[0] - 2, center[0] + 2)),
            new GL.Vector(rnd(0.125, 0.3), 0.125, 0.125), // and this is why there are only elongated in one axis lol
            "box"
        );
        b.friction = 0.999;
        b.elasticity = 0.999;
        b.impulse(GL.Vector.randomDirection().multiply(rnd(1, 2)));
        b.mass = rnd(1, 30);

        // I don't like doing this kind of injection to objects but I also don't want to make a hierarchy, so here it goes
        b.mesh = new GL.Mesh.cube2();

        /*this.*/boxes.push(b);
    }

    // bring back the center
    center = MAP.rooms[0].center;

    // player needs to be called *after* boxes but before other more... erh... solid colliders (like press / doors and such)
    player = new Body
    (
        new GL.Vector(center[1]+0.5, 0.75, center[0]),
        new GL.Vector(0.25, 0.2, 0.25),
        "player"
    );
    player.friction = 0.93;
    player.elasticity = 0.1;



    // sensor used to be a thing to destroy boxes; now it's .... back to be a sensor, the destroyer of boxes lol
    sensor = new Body
    (
        new GL.Vector(center[1] + 0.5, 0.55, center[0] - 2.5),
        new GL.Vector(0.4, 0.75, 0.4),
        "sensor"
    );

    sensor.solid = false;
    sensor.dynamic = false; // loool without this the box was just pushing it lool
    sensor.mesh = new GL.Mesh.cube2(1);

    // this has to go here !
    SIM.addStatic(MAP.boxes, "map");


    // THIS IS JUST A COLLIDER, MOVE SOMEWHERE ELSE (perhaps before map???)
    ground = new Body
    (
        new GL.Vector(25.0, -0.15, 25.0),
        new GL.Vector(25.0, 0.15, 25.0),
        "ground"
    );
    ground.mass = 0.0;
    ground.dynamic = false;


    ceiling = new Body
    (
        new GL.Vector(25.0,   1.25 + 0.15, 25.0),
        new GL.Vector(25.0, 0.15, 25.0),
        "ceiling"
    );
    ceiling.mass = 0.0;
    ceiling.dynamic = false;

}


//=====================================================================
// SIM COLLISION CALLBACKS
//=====================================================================


SIM.onCollision("player", "box", function(a, b)
{
    // don't allow pushing boxes that got "frozen"
    if(b.tag == "box" && b.dynamic)
    {
        b.impulse(a.velocity.multiply(0.5)); // make the push smaller
    }
});


SIM.onCollision("player", "sensor", function(a, b)
{
    player.ouch = true;
});


SIM.onCollision("box", "sensor", function(a, b)
{
    if(a.tag == "box")
    {
        a.impulse(new GL.Vector(0, 10.0, 0)); // it will add 1 every frame that it touches, it should swoop HARD
    }
});



//=====================================================================
// FUNCTIONS
//=====================================================================


gl.onmousewheel = function(e)
{
    // TODO: DRAW THIS VALUE SOMEWHERE
    // TODO: ADJUST THE CONSTANT SO IT FEELS GOOD
    mouseSensitivity += Math.sign(e.wheelDelta) * lastDelta * 20.0;
    console.log(mouseSensitivity)
};


gl.onmousedown = function(e)
{
    // click click click
    // remember to do first time click and init sound !!!
    clicked = true;
    text(""); // remove text
};


gl.onmousemove = function(e)
{
    // camera look at, FPS style - but in zero-g. If you want to move like a regular doom-like game,
    // either clamp the y position or apply gravity on the body (ex. impulse(new GL.Vector(0, -10, 0)))
    camera.angle.y -= e.mx * lastDelta * mouseSensitivity;
    camera.angle.x = Math.max(-90, Math.min(90, camera.angle.x - e.my * lastDelta * mouseSensitivity));
};



gl.onupdate = function(dt)
{
    if(!clicked) return;

    lastDelta = dt;
    totalTime += dt;

    // the greatest code ever lol (I'm tired, ok? :D)
    if(lit < 1.0) lit += dt;
    if(lit > 1.0) lit -= dt * 8.0;
    if(Math.abs(1 - lit) < 0.01) lit = 1.0;


    let speed   = dt * PLAYER_SPEED,
        up      = (GL.keys.W | GL.keys.UP),
        down    = (GL.keys.S | GL.keys.DOWN),
        forward = GL.Vector.fromAngles((90 - camera.angle.y) * Math.PI / 180, (180 - camera.angle.x) * Math.PI / 180);

    camera.position = camera.position.add(forward.multiply(speed * (up - down)));




    /*
    ////////////////////////////////////
    ////////////////////////////////////
    // DEBUG
    // TODO: REMOVE THIS !!!!!
    timeSinceLastP += dt;
    if(GL.keys.Q && timeSinceLastP > 0.3)
    {
        timeSinceLastP = 0.0;
        player.solid = !player.solid;
        if(player.solid) PLAYER_SPEED = 10;
        else PLAYER_SPEED = 50;
        console.log("debug mode ", (PLAYER_SPEED == 10) ? "off" : "on");
    }
    ////////////////////////////////////
    ////////////////////////////////////
    */


    let left    = (GL.keys.A | GL.keys.LEFT),
        right   = (GL.keys.D | GL.keys.RIGHT),
        side    = GL.Vector.fromAngles(-camera.angle.y * Math.PI / 180, 0);

    camera.position = camera.position.add(side.multiply(speed * (right - left)));

    if(player.ouch)
    {
        speed *= -100.0;
        player.ouch = false;
    }

    // adds a force based on the camera direction looking at
    // for a regular FPS game just reset the .y value to the player height !!! (and / or add gravity)
    player.velocity = player.velocity.add(forward.multiply(speed * (up - down)));
    player.velocity = player.velocity.add(side.multiply(speed * (right - left)));


    // this one makes sure the camera is at the player's center (body)
    // TODO: CREATE A VECTOR.SET(VALUE) OR SOMETHING SO WE CAN DO A ONE-LINER !!!!
    camera.position.x = player.position.x;
    camera.position.y = player.position.y;
    camera.position.z = player.position.z;


    // note: you can call  *** SIM.updateDirect(dt); *** if you want to avoid the quadtree
    // checks for collisions and processes them based on a quadtree to speed things up
    SIM.updateQuadtree(dt);


    /*
    if(player.isCol2("ceiling", "sensor"))
    {
        console.log("BINGO is col 2 is working lol");
        //player.solid = false; // game over
    }
    */


    // update box "lighting"
    // the idea is simple: grab the object, iterate through all of its vertices (24).
    // check where the normal is pointing and grab the cell adjacent to where it's pointing.
    // use that cell lighting / color and lerp to the current vertex colors for that face.
    // the result looks like some sort of ambient lighting thing. fake as hell. but pretty.
    // also, this is probably the dumbest most code hungry way of doing it, but performance is ok...

    // TODO: ONLY DO THIS IF CLOSE ENOUGH TO THE PLAYER / CAMERA !!!
    for(let i = 0; i < boxes.length; i++)
    {
        // the worst out of bonds check ever, but whatever
        // if the box gets out of bonds - "kill" it
        let bp = boxes[i].position;
        if(bp.x < 1 || bp.x > 48 || bp.z < 1 || bp.z > 48) boxes[i].solid = false;


        ///////////////////////////////////////////////////////
        // TEST TO "DESTROY" A BOX !
        if(boxes[i].isCol2("ceiling", "sensor"))
        {
            //console.log("box destroyed");
            boxes[i].position.set(200, 200, 200);
            boxes[i].dynamic = false;
            boxes[i].solid = false;
            lit = 16.0;

            des++;
        }
        ///////////////////////////////////////////////////////


        // we don't care about non solid boxes. we could add another flag - "active" or something like that
        if(!boxes[i].solid) continue;

        let m = boxes[i].mesh;
        let p = boxes[i].position;
        let e = boxes[i].extents;

        // we do +0.5 on X and Z (transposed) to get the actual tiles from the center
        for(let j = 0; j < m.colors.length; j++)
        {
            let z = Math.floor(p.z + 0.5),            // the current position of the box on the map
                x = Math.floor(p.x + 0.5);

            let yy = MAP.matrix[z    ][x    ].l; // color at current tile, known as "up and down"
            let px = MAP.matrix[z + 1][x    ]; // positive X
            let nx = MAP.matrix[z - 1][x    ]; // negative x
            let pz = MAP.matrix[z    ][x + 1]; // positive z
            let nz = MAP.matrix[z    ][x + 1]; // negative z

            // yy *is* a light / color already
            px = (px.w != 0x0) ? px.l : yy;
            nx = (nx.w != 0x0) ? nx.l : yy;
            pz = (pz.w != 0x0) ? pz.l : yy;
            nz = (nz.w != 0x0) ? nz.l : yy;

            if     (m.normals[j][0] > 0)    m.colors[j] = lerpc(m.colors[j], pz, dt * 2.0);
            else if(m.normals[j][0] < 0)    m.colors[j] = lerpc(m.colors[j], nz, dt * 2.0);

            // up and down are the same
            if     (m.normals[j][1] != 0)   m.colors[j] = lerpc(m.colors[j], yy, dt * 2.0);

            if     (m.normals[j][2] > 0)    m.colors[j] = lerpc(m.colors[j], px, dt * 2.0);
            else if(m.normals[j][2] < 0)    m.colors[j] = lerpc(m.colors[j], nx, dt * 2.0);
        }

        boxes[i].mesh.compile();
    }

};






gl.ondraw = function()
{
    gl.clear(16384 | 256); // gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT

    if(!clicked) return;
    if(des > 0) text("" + des)

    gl.loadIdentity();
    texture.bind(0);

    gl.rotate(-camera.angle.x, 1, 0, 0);
    gl.rotate(-camera.angle.y, 0, 1, 0);
    gl.translate(-camera.position.x, -camera.position.y, -camera.position.z);
    gl.pushMatrix();
        shader.uniforms({ texture: 0, lit: lit });
        shader.draw(level);

        for(var i = 0; i < boxes.length; i++)
        {
            gl.pushMatrix();
                gl.translate(boxes[i].position.x, boxes[i].position.y, boxes[i].position.z);
                gl.scale(boxes[i].extents.x, boxes[i].extents.y, boxes[i].extents.z);
                shader.draw(boxes[i].mesh);
            gl.popMatrix();
        }

        gl.translate(sensor.position.x, sensor.position.y, sensor.position.z);
        gl.scale(sensor.extents.x + (Math.sin(totalTime*10.0)*0.1), sensor.extents.y, sensor.extents.z+(Math.cos(totalTime*10.0)*0.1));
        shader.draw(sensor.mesh);
    gl.popMatrix();

};


init(); // call before animate

gl.clearColor(0.01, 0.01, 0.01, 1.0);
gl.enable(2929); // gl.DEPTH_TEST
gl.fullscreen({ far: 50.0 });
gl.animate();


</script>
</body></html>