wmc/game.js

import { makeBufferFromFaces } from "./geometry";
import { memoize } from "./memoize";
import * as se3 from './se3';
import {
    blockLookup,
    BlockType,
    castRay,
    checkCollision,
    destroyBlock,
    generateMissingChunks,
    makeBlock,
    markBlock,
    updateWorldGeometry,
} from './world';

/** Draw.
 *
 * @param {WebGLRenderingContext} gl
 */
function draw(gl, params, objects) {
    gl.clearColor(...params.skyColor, 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.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

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

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

    let lastGlContext;

    for (const {glContext, position, orientation, geometry} of objects) {
        if (glContext !== lastGlContext) {
            glContext.setupScene({
                projectionMatrix: params.projMatrix,
                viewMatrix,
                fogColor: params.skyColor,
                lightDirection: params.lightDirection,
                ambiantLightAmount: params.ambiantLight,
            });
        }

        lastGlContext = glContext;

        glContext.drawObject({
            position,
            orientation,
            glBuffer: geometry.glBuffer,
            numVertices: geometry.numVertices,
        });
    }
}

const stuff = {
    lastFrameTime: 0,
};

function handleKeys(params) {
    const move = (forward, right) => {
        const dir = [right, 0, -forward, 1.0];
        const ori = se3.roty(params.camera.orientation[1]);
        const tf = se3.apply(ori, dir);
        const maxSpeed = 8;
        const airMovement = 0.08;

        if (params.flying) {
            params.camera.position[0] += tf[0] / 60;
            params.camera.position[2] += tf[2] / 60;
        }
        if (params.isOnGround) {
            params.camera.velocity[0] = tf[0];
            params.camera.velocity[2] = tf[2];
        } else {
            const vel = params.camera.velocity;

            vel[0] += tf[0] * airMovement;
            vel[2] += tf[2] * airMovement;

            const curVel = Math.sqrt(vel[0] * vel[0] + vel[2] * vel[2]);

            if (curVel > maxSpeed) {
                vel[0] *= maxSpeed / curVel;
                vel[2] *= maxSpeed / curVel;
            }
        }
    };

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

            case 'Space':
                if (params.flying) {
                    params.camera.position[1] += 8 / 60;
                }
                return;

            case 'ShiftLeft':
                params.camera.position[1] -= 8 / 60;
                return;
        }
    });
}

/** From far to near. */
function _getChunkOrder(chunki, chunkj) {
    return [...function* () {
        for (let i = chunki - 8; i < chunki + 8; i++) {
            for (let j = chunkj - 8; j < chunkj + 8; j++) {
                yield [i, j];
            }
        }
    }()]
        .sort((a, b) => {
            const d = (i, j) => {
                const di = i - chunki;
                const dj = j - chunkj;
                return Math.sqrt(di * di + dj * dj);
            };
            return d(...b) - d(...a);
        });
}
const getChunkOrder = memoize(_getChunkOrder);

function getObjects(world, z, x, glContext) {
    const chunki = Math.floor(z / 16);
    const chunkj = Math.floor(x / 16);
    const chunks = getChunkOrder(chunki, chunkj)
        .map(([i, j]) => world.chunkMap.get(i, j))
        .filter(chunk => chunk.buffer !== undefined);
    const buffers = chunks.map(chunk => chunk.buffer)
        .concat(chunks.map(chunk => chunk.transparentBuffer));
    return buffers.map(buffer => ({
        position: [0.0, 0.0, 0.0],
        orientation: [0.0, 0.0, 0.0],
        geometry: buffer,
        glContext,
    }));
}

function updatePhysics(params, time) {
    const dt = (time - params.lastFrameTime) / 1000;

    params.camera.velocity[1] += params.gravity * dt;

    const oldPos = params.camera.position;
    const targetPos = params.flying ? oldPos : params.camera.position.map((v, i) => v + params.camera.velocity[i] * dt);
    const {isOnGround, newPos} = checkCollision(oldPos, targetPos, params.world);
    params.camera.position = newPos;
    params.camera.velocity = newPos.map((v, i) => (v - oldPos[i]) / dt);
    if (isOnGround) {
        params.jumpAmount = 2;
        params.camera.velocity = params.camera.velocity.map(v => v * 0.7);
    }
    params.isOnGround = isOnGround;
}

function tagABlock(gl, params, objects) {
    const dir = [0, 0, -1, 1.0];
    const camori = params.camera.orientation;
    const ori = se3.inverse(se3.rotxyz(-camori[0], -camori[1], -camori[2]));
    const viewDirection = se3.apply(ori, dir).slice(0, 3);

    if (blockLookup(params.world, ...params.camera.position).type !== BlockType.AIR) {
        return;
    }

    const face = markBlock(params.world, params.camera.position, viewDirection, params.blockSelectDistance);
    if (face === undefined) {
        return;
    }

    if (params.tagBuffer !== undefined) {
        gl.deleteBuffer(params.tagBuffer.glBuffer);
        delete params.tagBuffer;
    }
    const buffer = makeBufferFromFaces(gl, [face]);
    params.tagBuffer = buffer;

    const obj =  {
            position: [0.0, 0.0, 0.0],
            orientation: [0.0, 0.0, 0.0],
            geometry: buffer,
            glContext: params.worldGl,
    };

    objects.push(obj);
}

// Stuff I need to do:
// [x] a skybox
// [x] a movable camera
// [x] some kind of gravity
// [x] collision detection
// [x] more blocks
// [x] ability to mine & place
// [x] generating & loading of more chunks
// [x] distance fog
// [x] better controls
// [x] non-flowy water
// [x] slightly cooler terrain
// [x] double jump!!
// [x] fullscreen
// [x] trees and stuff
// [x] caves
// [ ] inventory
// [ ] crafting
// [ ] tools
// [ ] a soundrack
// [ ] different biomes (with different noise stats)
// [ ] water you can swim in (and not walk on)
// [ ] flowy water
// [ ] save the world (yay) to local storage (bah)
// [ ] fix bugs
// [ ] better light (esp. cave lighting)
// [ ] monsters
// [ ] multi player
// [ ] chat

export function setupParamPanel(params) {
    document.querySelector('#lightx').oninput = e => {
        params.lightDirection[0] = e.target.value / 100;
    };
    document.querySelector('#lighty').oninput = e => {
        params.lightDirection[1] = e.target.value / 100;
    };
    document.querySelector('#lightz').oninput = e => {
        params.lightDirection[2] = e.target.value / 100;
    };
    document.querySelector('#ambiant').oninput = e => {
        params.ambiantLight = e.target.value / 100;
    };
    document.querySelector('#gravity').oninput = e => {
        params.gravity = e.target.value;
        document.querySelector('#gravityValue').textContent = e.target.value;
    };
    document.querySelector('#jumpForce').oninput = e => {
        params.jumpForce = e.target.value / 100;
        document.querySelector('#jumpForceValue').textContent = e.target.value / 100;
    };
    document.querySelector('#skyr').oninput = e => {
        params.skyColor[0] = e.target.value / 255;
        document.querySelector('#skyColor').textContent = JSON.stringify(params.skyColor);
    };
    document.querySelector('#skyg').oninput = e => {
        params.skyColor[1] = e.target.value / 255;
        document.querySelector('#skyColor').textContent = JSON.stringify(params.skyColor);
    };
    document.querySelector('#skyb').oninput = e => {
        params.skyColor[2] = e.target.value / 255;
        document.querySelector('#skyColor').textContent = JSON.stringify(params.skyColor);
    };

    const collapsibles = document.getElementsByClassName("collapsible");
    for (const collapsible of collapsibles) {
        collapsible.onclick = () => {
            const content = collapsible.nextElementSibling;
            if (content.style.height === 'fit-content') {
                content.style.height = '0px';
            } else {
                content.style.height = 'fit-content';
            }
        };
    }
}

function viewDirection(params) {
    const dir = [0, 0, -1, 1.0];
    const camori = params.camera.orientation;
    const ori = se3.inverse(se3.rotxyz(-camori[0], -camori[1], -camori[2]));
    return se3.apply(ori, dir).slice(0, 3);
}

function destroySelectedBlock(params) {
    const hit = castRay(params.world, params.camera.position, viewDirection(params), params.blockSelectDistance);
    if (hit === undefined || hit.block.type === BlockType.UNDEFINED) {
        return;
    }
    if (hit.block.type === BlockType.WATER) {
        return;
    }
    destroyBlock(params.world, hit.block);
}

function makeDirBlock(params) {
    const hit = castRay(params.world, params.camera.position, viewDirection(params), params.blockSelectDistance);
    if (hit === undefined || hit.block.type === BlockType.UNDEFINED) {
        return;
    }
    const newBlockPosition = hit.block.centerPosition.map((v, i) => v + hit.normal[i]);
    makeBlock(params.world, newBlockPosition, BlockType.DIRT);
}

export function initUiListeners(params, canvas) {
    const canvasClickHandler = () => {
        canvas.requestPointerLock();
        canvas.onclick = null;
        const clickListener = e => {
            switch(e.button) {
                case 0:  // left click
                    destroySelectedBlock(params);
                    break;
                case 2:  // right click
                    makeDirBlock(params);
                    break;
            }
        };
        const keyListener = e => {
            if (e.type === 'keydown') {
                if (e.repeat) return;
                params.keys.add(e.code);

                switch (e.code) {
                    case 'KeyF':
                        params.flying = !params.flying;
                        return false;
                    case 'Space':
                        if (!params.flying) {
                            if (params.jumpAmount > 0) {
                                const amount = params.jumpForce;
                                params.camera.velocity[1] = amount;
                                params.jumpAmount -= 1;
                            }
                        }
                        return false;
                }
            } else {
                params.keys.delete(e.code);
            }
        };
        const moveListener = e => {
            params.camera.orientation[1] -= e.movementX / 500;
            params.camera.orientation[0] -= e.movementY / 500;

            params.camera.orientation[0] = Math.min(Math.max(
                params.camera.orientation[0], -Math.PI / 2
            ), Math.PI / 2);
        };
        const changeListener = () => {
            if (document.pointerLockElement === canvas) {
                return;
            }
            document.removeEventListener('pointerdown', clickListener);
            document.removeEventListener('pointerlockchange', changeListener);
            document.removeEventListener('pointermove', moveListener);
            document.removeEventListener('keydown', keyListener);
            document.removeEventListener('keyup', keyListener);
            canvas.onclick = canvasClickHandler;
        };
        document.addEventListener('pointerdown', clickListener);
        document.addEventListener('pointerlockchange', changeListener);
        document.addEventListener('pointermove', moveListener);
        document.addEventListener('keydown', keyListener);
        document.addEventListener('keyup', keyListener);
    };
    canvas.onclick = canvasClickHandler;
    document.addEventListener('keydown', e => {
        if (e.repeat) return;
        switch (e.code) {
            case 'F11':
                canvas.requestFullscreen();
                break;
        }
    });
}

export function tick(time, gl, params) {
    handleKeys(params);
    updatePhysics(params, time);

    const campos = params.camera.position;

    // world generation / geometry update
    {
        // frame time is typically 16.7ms, so this may lag a bit
        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);
    }

    const objects = getObjects(params.world, campos[2], campos[0], params.worldGl);

    tagABlock(gl, params, objects);

    draw(gl, params, objects);

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

    document.querySelector('#fps').textContent = `${1.0 / dt} fps`;
    document.querySelector('#lightDirVec').textContent = JSON.stringify(params.lightDirection);

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