wmc/index.js

import { makeBufferFromFaces, makeFace, makeGrassCube } from "./geometry";
import { loadTexture, makeProgram } from "./gl";
import * as se3 from './se3';

const TEST_VSHADER = `
attribute vec3 aPosition;
attribute vec3 aNormal;
attribute vec2 aTextureCoord;

uniform mat4 uProjection;
uniform mat4 uModel;
uniform mat4 uView;

varying highp vec2 vTextureCoord;
varying lowp vec3 vLighting;
varying lowp float vDistance;

void main() {
    highp mat4 modelview = uView * uModel;

    gl_Position = uProjection * modelview * vec4(aPosition, 1.0);

    lowp vec3 normal = mat3(modelview) * aNormal;
    lowp vec3 lightDirection = - normalize(mat3(uView) * vec3(1.0, -0.3, -0.8));
    lowp float diffuseAmount = max(dot(lightDirection, normal), 0.0);
    lowp vec3 ambiant = 0.4 * vec3(1.0, 1.0, 0.9);
    vLighting = ambiant + vec3(1.0, 1.0, 1.0) * diffuseAmount;

    vTextureCoord = aTextureCoord;

    vDistance = length(modelview * vec4(aPosition, 1.0));
}
`;

const TEST_FSHADER = `
uniform sampler2D uSampler;
uniform lowp vec3 uFogColor;

varying highp vec2 vTextureCoord;
varying lowp vec3 vLighting;
varying lowp float vDistance;

void main() {
    highp vec4 color = texture2D(uSampler, vTextureCoord);
    lowp float fogamount = smoothstep(30.0, 90.0, vDistance);
    gl_FragColor = vec4(mix(vLighting * color.rgb, uFogColor, fogamount), color.a);
}
`;

/** Draw.
 *
 * @param {WebGLRenderingContext} gl
 */
function draw(gl, params, objects) {
    gl.clearColor(0.6, 0.8, 1.0, 1.0);
    gl.clearDepth(1.0);
    gl.enable(gl.DEPTH_TEST);
    gl.depthFunc(gl.LEQUAL);

    gl.enable(gl.CULL_FACE);
    gl.cullFace(gl.BACK);

    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    const camrot = params.camera.orientation;
    const campos = params.camera.position;
    const viewMat = se3.product(
        se3.rotxyz(-camrot[0], -camrot[1], -camrot[2]),
        se3.translation(-campos[0], -campos[1], -campos[2])
    );

    for (const {program, texture, position, orientation, geometry} of objects) {
        // load those ahead of time
        const viewLoc = gl.getUniformLocation(program, 'uView');
        const modelLoc = gl.getUniformLocation(program, 'uModel');
        const projLoc = gl.getUniformLocation(program, 'uProjection');
        const samplerLoc = gl.getUniformLocation(program, 'uSampler');
        const fogColorLoc = gl.getUniformLocation(program, 'uFogColor');

        const positionLoc = gl.getAttribLocation(program, 'aPosition');
        const normalLoc = gl.getAttribLocation(program, 'aNormal');
        const textureLoc = gl.getAttribLocation(program, 'aTextureCoord');

        //const mvMatrix = se3.product(se3.translation(...position), se3.rotxyz(...orientation));
        const mvMatrix = se3.identity();

        gl.useProgram(program);

        gl.uniformMatrix4fv(viewLoc, false, new Float32Array(viewMat));
        gl.uniformMatrix4fv(modelLoc, false, new Float32Array(mvMatrix));
        gl.uniformMatrix4fv(projLoc, false, new Float32Array(params.projMatrix));
        gl.uniform3f(fogColorLoc, 0.6, 0.8, 1.0);

        gl.bindBuffer(gl.ARRAY_BUFFER, geometry.glBuffer);

        gl.vertexAttribPointer(positionLoc, 3, gl.FLOAT, false, 20, 0);
        gl.enableVertexAttribArray(positionLoc);

        gl.vertexAttribPointer(normalLoc, 3, gl.BYTE, true, 20, 12);
        gl.enableVertexAttribArray(normalLoc);

        gl.vertexAttribPointer(textureLoc, 2, gl.UNSIGNED_SHORT, true, 20, 16);
        gl.enableVertexAttribArray(textureLoc);

        gl.activeTexture(gl.TEXTURE0);
        gl.bindTexture(gl.TEXTURE_2D, texture);
        gl.uniform1i(samplerLoc, 0);

        gl.drawArrays(gl.TRIANGLES, 0, geometry.numVertices);
    }
}

const stuff = {
    lastFrameTime: 0,
};

function handleKeys(params) {
    const move = (forward, right) => {
        const dir = [right, 0, -forward, 1.0];
        const camori = params.camera.orientation;
        const ori = se3.rotxyz(...camori);
        const tf = se3.apply(ori, dir);

        params.camera.position[0] += tf[0];
        params.camera.position[2] += tf[2];
    };

    params.keys.forEach(key => {
        switch (key) {
            case 'KeyW':
                move(0.1, 0.0);
                return;
            case 'KeyA':
                move(0.0, -0.1);
                return;
            case 'KeyS':
                move(-0.1, 0.0);
                return;
            case 'KeyD':
                move(0.0, 0.1);
                return;

            case 'Space':
                params.camera.position[1] += 0.1;
                return;
            case 'ControlLeft':
                params.camera.position[1] -= 0.1;
                return;
        }
    });
}

function getObjects(world, z, x, program, texture) {
    return world.chunks
        .filter(chunk => {
            if (chunk.position.z < z - 8 * 16) return false;
            if (chunk.position.z > z + 7 * 16) return false;
            if (chunk.position.x < x - 8 * 16) return false;
            if (chunk.position.x > x + 7 * 16) return false;

            if (chunk.buffer === undefined) {
                return false;
            }

            return true;
        })
        .map(chunk => ({
            position: [0.0, 0.0, 0.0],
            orientation: [0.0, 0.0, 0.0],
            program,
            geometry: chunk.buffer,
            texture,
        }));
}

function tick(time, gl, params) {
    const campos = params.camera.position;
    // expensive stuff, can take several cycles
    try {
        let timeLeft = 10;
        const start = performance.now();
        generateMissingChunks(params.world, campos[2], campos[0], timeLeft);

        timeLeft -= performance.now() - start;
        updateWorldGeometry(gl, params.world, campos[2], campos[0], timeLeft);
    }
    catch (ex) {
        if (ex !== 'timesup') {
            throw ex;
        }
    }

    const objects = getObjects(params.world, campos[2], campos[0], params.program, params.texture);
    draw(gl, params, objects);

    handleKeys(params);

    const dt = (time - stuff.lastFrameTime) * 0.001;
    stuff.lastFrameTime = time;

    document.querySelector('#fps').textContent = `${1.0 / dt} fps`;

    requestAnimationFrame(time => tick(time, gl, params));
}

const BlockType = {
    AIR: 1,
    DIRT: 2,
    GRASS: 3,
    STONE: 4,
};

function ghettoPerlinNoise(seed, x, y, gridSize = 16) {
    const dot = (vx, vy) => vx[0] * vy[0] + vx[1] * vy[1];
    // super ghetto random
    const xorshift = (x) => {
        x ^= x << 13;
        x ^= x >> 7;
        x ^= x << 17;
        return x;
    };

    const randGrad = (x0, y0) => {
        const rand = xorshift(1337 * x0 + seed + 80085 * y0);
        return [Math.sin(rand), Math.cos(rand)];
    };

    const interpol = (a, b, x) => a + (x*x*(3 - 2*x)) * (b - a);

    const x0 = Math.floor(x / gridSize);
    const y0 = Math.floor(y / gridSize);
    const sx = x / gridSize - x0;
    const sy = y / gridSize - y0;

    const n0 = dot(randGrad(x0, y0), [sx, sy]);
    const n1 = dot(randGrad(x0 + 1, y0), [sx - 1, sy]);
    const n2 = dot(randGrad(x0, y0 + 1), [sx, sy - 1]);
    const n3 = dot(randGrad(x0 + 1, y0 + 1), [sx - 1, sy - 1]);

    return interpol(interpol(n0, n1, sx), interpol(n2, n3, sx), sy);
}

function makeTerrain(x, y) {
    const seed = 1337;

    const fractalNoise = (x, y) => (
        ghettoPerlinNoise(seed, x, y, 8) * 0.06
        + ghettoPerlinNoise(seed, x, y, 16) * 0.125
        + ghettoPerlinNoise(seed, x, y, 32) * 0.25
        + ghettoPerlinNoise(seed, x, y, 64) * 0.5
    );

    const terrain = Array(16 * 16);

    for (let i = 0; i < 16; i++) {
        for (let j = 0; j < 16; j++) {
            terrain[i * 16 + j] = fractalNoise(x + i, y + j);
        }
    }

    return terrain;
}

function makeChunk(z, x) {
    const terrain = makeTerrain(z, x);

    const data = new Uint8Array(16 * 16 * 256);

    for (let i = 0; i < 16; i++) {
        for (let j = 0; j < 16; j++) {
            const height = Math.floor(64 + 64 * terrain[i * 16 + j]);
            // everything above is air
            // that block is grass
            // everything below is dirt
            const offset = i * (16 * 256) + j * 256;
            const stoneHeight = Math.min(52, height);
            data.set(Array(stoneHeight).fill(BlockType.STONE), offset);
            if (stoneHeight < height) {
                data.set(Array(height - 1 - stoneHeight).fill(BlockType.DIRT), offset + stoneHeight);
                data[offset + height - 1] = BlockType.GRASS;
            }
            data.set(Array(256 - height).fill(BlockType.AIR), offset + height);
        }
    }

    return {
        position: {z, x},
        data,
    };
}

function blockLookup(world, x, y, z) {
    const chunki = Math.floor(z / 16);
    const chunkj = Math.floor(x / 16);

    const chunk = world.chunkMap.get(chunki, chunkj);
    if (chunk === undefined) {
        return BlockType.STONE;
    }

    const i = Math.floor(z - chunki * 16);
    const j = Math.floor(x - chunkj * 16);
    const k = Math.floor(y);

    return chunk.data[256 * (16*i + j) + k];
}

function makeChunkBuffer(gl, data, z0, x0, lookup) {
    const sideNeighbors = (bi, i, j, k) => {
        if (i === 0 || j === 0 || i === 15 || j === 15) {
            return [
                { block: lookup(i - 1, j, k), dir: '-z', faceCenter: [x0 + j, k, z0 + i - 0.5] },
                { block: lookup(i + 1, j, k), dir: '+z', faceCenter: [x0 + j, k, z0 + i + 0.5] },
                { block: lookup(i, j - 1, k), dir: '-x', faceCenter: [x0 + j - 0.5, k, z0 + i] },
                { block: lookup(i, j + 1, k), dir: '+x', faceCenter: [x0 + j + 0.5, k, z0 + i] },
            ];
        }
        return [
            { block: data[bi - 256 * 16], dir: '-z', faceCenter: [x0 + j, k, z0 + i - 0.5] },
            { block: data[bi + 256 * 16], dir: '+z', faceCenter: [x0 + j, k, z0 + i + 0.5] },
            { block: data[bi - 256], dir: '-x', faceCenter: [x0 + j - 0.5, k, z0 + i] },
            { block: data[bi + 256], dir: '+x', faceCenter: [x0 + j + 0.5, k, z0 + i] },
        ];
    };

    const faces = [];

    for (let i = 0; i < 16; i++) {
        for (let j = 0; j < 16; j++) {
            let bi = i * 16 * 256 + j * 256;
            for (let k = 0; k < 256; k++, bi++) {
                const upTexture = (() => {
                    switch (data[bi - 1]) {
                        case BlockType.GRASS: return [0, 15];
                        case BlockType.DIRT: return [2, 15];
                        case BlockType.STONE: return [3, 15];
                    }
                })();

                if (data[bi] == BlockType.AIR) {
                    faces.push(makeFace('+y', upTexture, [x0 + j, k - 0.5, z0 + i]));
                    break;
                }

                const sideTexture = (() => {
                    switch (data[bi]) {
                        case BlockType.GRASS: return [1, 15];
                        case BlockType.DIRT: return [2, 15];
                        case BlockType.STONE: return [3, 15];
                    }
                })();

                for (let {block, dir, faceCenter} of sideNeighbors(bi, i, j, k)) {
                    if (block === BlockType.AIR) {
                        faces.push(makeFace(dir, sideTexture, faceCenter));
                    }
                }
            }
        }
    }

    return makeBufferFromFaces(gl, faces);
}

// - data <-- need to generate the first time, update when m&p
// - faces <-- need to generate once when chunk enters view
// - buffers <-- need to generate every time geometry changes?
// --> could also render chunks 1 by 1

class ChunkMap {
    map = {};

    key(i, j) {
        // meh, this limits us to 65536 chunks in the x direction :/
        return (i << 16) + j;
    }

    get(i, j) {
        return this.map[this.key(i, j)];
    }

    set(i, j, x) {
        this.map[this.key(i, j)] = x;
    }

    has(i, j) {
        return this.key(i, j) in this.map;
    }
}

/** Makes a brave new world, centered at (0, 0). */
function makeWorld() {
    return generateMissingChunks({chunks: [], chunkMap: new ChunkMap()}, 0, 0);
}

/** Update the world, generating missing chunks if necessary. */
function generateMissingChunks(world, z, x, timeLimit = 10000) {
    const ic = Math.floor(z / 16);
    const jc = Math.floor(x / 16);

    const start = performance.now();

    for (let i = ic - 8; i < ic + 8; i++) {
        for (let j = jc - 8; j < jc + 8; j++) {
            if (world.chunkMap.has(i, j)) {
                continue;
            }
            const chunk = makeChunk(i * 16, j * 16);
            world.chunks.push(chunk);
            world.chunkMap.set(i, j, chunk);

            invalidateChunkGeometry(world, i - 1, j);
            invalidateChunkGeometry(world, i + 1, j);
            invalidateChunkGeometry(world, i, j - 1);
            invalidateChunkGeometry(world, i, j + 1);
            
            if (performance.now() - start > timeLimit) {
                throw 'timesup';
            }
        }
    }

    return world;
}

function invalidateChunkGeometry(world, i, j) {
    const chunk = world.chunkMap.get(i, j);
    if (chunk === undefined) {
        return;
    }
    if (chunk.buffer === undefined) {
        return;
    }
    chunk.buffer.delete();
    delete chunk.buffer;
}

/** Generates geometry for all visible chunks. */
function updateWorldGeometry(gl, world, z, x, timeLimit = 10000) {
    const ic = Math.floor(z / 16);
    const jc = Math.floor(x / 16);

    const blockIndex = (i, j, k) => 256 * (i*16 +j) + k;

    const start = performance.now();

    // k. Now, generate buffers for all chunks
    for (let radius = 0; radius < 8; radius++) {
        for (let i = ic - radius; i < ic + radius; i++) {
            for (let j = jc - radius; j < jc + radius; j++) {
                const chunk = world.chunkMap.get(i, j);

                if (chunk.buffer !== undefined) {
                    continue;
                }

                const chunkz = 16 * i;
                const chunkx = 16 * j;
                const lookup = (i, j, k) => blockLookup(world, j + chunkx, k, i + chunkz);

                chunk.buffer = makeChunkBuffer(gl, chunk.data, chunk.position.z, chunk.position.x, lookup);

                // throttle this for fluidity
                if (performance.now() - start > timeLimit) {
                    throw 'timesup';
                }
            }
        }

    }
}

function checkCollision(curPos, newPos, world) {
    // [ ] get a BB for the player at newPos
    // [ ] check it against world
    //     [ ] need a struct to access world @ x, y, z
    //     [ ] need to check all 8 corners of the BB
    // [ ] if it collides, figure out by how much and return a safe newPos

    return safeNewPos;
}

// Stuff I need to do:
// [x] a skybox
// [x] a movable camera
// [ ] some kind of gravity
// [ ] collision detection
// [x] more blocks
// [ ] ability to mine & place
// [ ] generating & loading of more chunks
// [x] distance fog
// [ ] different biomes (with different noise stats)
// [ ] non-flowy water
// [ ] flowy water
// [ ] ALIGN CHUNK WITH WORLD COORDS
// [x] better controls
// [ ] save the world (yay) to local storage (bah)

async function main() {
    const canvas = document.querySelector('#game');
    const gl = canvas.getContext('webgl');

    if (gl === null) {
        console.error('webgl not available')
        return;
    }

    const program = makeProgram(gl, TEST_VSHADER, TEST_FSHADER);
    const texture = await loadTexture(gl, 'texture.png');

    const params = {
        projMatrix: se3.perspective(Math.PI / 3, canvas.clientWidth / canvas.clientHeight, 0.1, 100.0),
        camera: {
            position: [0.0, 70.5, 0.0],
            orientation: [0.0, Math.PI, 0.0],
        },
        keys: new Set(),
        world: makeWorld(),
        texture,
        program,
    }

    canvas.onclick = e => {
        canvas.requestPointerLock();
        const keyListener = e => {
            if (e.type === 'keydown') {
                params.keys.add(e.code);
            } else {
                params.keys.delete(e.code);
            }
        };
        const moveListener = e => {
            params.camera.orientation[1] -= e.movementX / 500;
            params.camera.orientation[0] -= e.movementY / 500;
        };
        const changeListener = () => {
            if (document.pointerLockElement === canvas) {
                return;
            }
            document.removeEventListener('pointerlockchange', changeListener);
            document.removeEventListener('pointermove', moveListener);
            document.removeEventListener('keydown', keyListener);
            document.removeEventListener('keyup', keyListener);
        };
        document.addEventListener('pointerlockchange', changeListener);
        document.addEventListener('pointermove', moveListener);
        document.addEventListener('keydown', keyListener);
        document.addEventListener('keyup', keyListener);
    };
    requestAnimationFrame(time => tick(time, gl, params));
}

window.onload = main;