wmc/world.js

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

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

uniform mat4 uProjection;
uniform mat4 uModel;
uniform mat4 uView;
uniform vec3 uLightDirection;
uniform float uAmbiantLight;

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(uModel) * aNormal;
    lowp float diffuseAmount = max(dot(-uLightDirection, normal), 0.0);
    lowp vec3 ambiant = uAmbiantLight * 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 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);
}
`;

export const BlockType = {
    UNDEFINED: 0,
    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,
    };
}

export function blockLookup(world, x, y, z) {
    if (y < 0.5 || y > 255.5) {
        return {
            type: BlockType.UNDEFINED,
        }
    }
    const midx = x + 0.5;
    const midy = y + 0.5;
    const midz = z + 0.5;

    const chunki = Math.floor(midz / 16);
    const chunkj = Math.floor(midx / 16);

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

    const i = Math.floor(midz - chunki * 16);
    const j = Math.floor(midx - chunkj * 16);
    const k = Math.floor(midy);

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

    return {
        type: chunk.data[blockIndex],
        centerPosition: [
            Math.floor(midx),
            k,
            Math.floor(midz),
        ],
        chunk,
        blockIndex,
    };
}

function faceTexture(type, dir) {
    switch (type) {
        case BlockType.GRASS:
            switch (dir) {
                case '+y': return [0, 15];
                case '-y': return [2, 15];
                default: return [1, 15];
            }
        case BlockType.DIRT: return [2, 15];
        case BlockType.STONE: return [3, 15];
        default: return [0, 0];
    }
}

function faceCenter(blockCenter, dir) {
    const [x, y, z] = blockCenter;
    switch (dir) {
        case '+x': return [x + 0.5, y, z];
        case '-x': return [x - 0.5, y, z];
        case '+y': return [x, y + 0.5, z];
        case '-y': return [x, y - 0.5, z];
        case '+z': return [x, y, z + 0.5];
        case '-z': return [x, y, z - 0.5];
    }
}

function makeFaceList(data, chunkz, chunkx, blockLookup) {
    const lookup = (i, j, k) => {
        if (i < 0 || j < 0 || i > 15 || j > 15) {
            return blockLookup(i, j, k);
        }
        if (k < 0 || k > 255) {
            return BlockType.UNDEFINED;
        }
        return data[256*(16*i + j) + k];
    };
    const neighbors = (i, j, k) => [
        { block: lookup(i - 1, j, k), dir: '-z', faceCenter: [chunkx + j, k, chunkz + i - 0.5] },
        { block: lookup(i + 1, j, k), dir: '+z', faceCenter: [chunkx + j, k, chunkz + i + 0.5] },
        { block: lookup(i, j - 1, k), dir: '-x', faceCenter: [chunkx + j - 0.5, k, chunkz + i] },
        { block: lookup(i, j + 1, k), dir: '+x', faceCenter: [chunkx + j + 0.5, k, chunkz + i] },
        { block: lookup(i, j, k - 1), dir: '-y', faceCenter: [chunkx + j, k - 0.5, chunkz + i] },
        { block: lookup(i, j, k + 1), dir: '+y', faceCenter: [chunkx + j, k + 0.5, chunkz + 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++) {
                if (data[bi] === BlockType.AIR) {
                    continue;
                }
                for (const {block, dir, faceCenter} of neighbors(i, j, k).filter(({block}) => block === BlockType.AIR)) {
                    faces.push({
                        blockIndex: bi,
                        face: makeFace(dir, faceTexture(data[bi], dir), faceCenter),
                    });
                }
            }
        }
    }

    return 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 (empty) world */
export function makeWorld() {
    return {chunks: [], chunkMap: new ChunkMap()};
}

/** Update the world, generating missing chunks if necessary. */
export 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;
}

export function createChunkFace(block, dir) {
    return {
        blockIndex: block.blockIndex,
        face: makeFace(dir, faceTexture(block.type, dir), faceCenter(block.centerPosition, dir)),
    };
}

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

    const start = performance.now();

    // k. Now, generate buffers for all chunks
    for (let radius = 1; 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;
                }

                if(chunk.faces === undefined) {
                    const chunkz = 16 * i;
                    const chunkx = 16 * j;
                    const lookup = (i, j, k) => blockLookup(world, j + chunkx, k, i + chunkz).type;

                    chunk.faces = makeFaceList(chunk.data, chunk.position.z, chunk.position.x, lookup);
                }

                chunk.buffer = makeBufferFromFaces(gl, chunk.faces.map(f => f.face));

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

    }
}

export function checkCollision(curPos, newPos, world) {
    // I guess Steve is about 1.7 m tall?
    // he also has a 60x60 cm axis-aligned square section '^_^
    // box is centered around the camera
    const steveBB = [
        [-0.3, 0.2, -0.3],
        [-0.3, 0.2, 0.3],
        [0.3, 0.2, -0.3],
        [0.3, 0.2, 0.3],

        [-0.3, -1.5, -0.3],
        [-0.3, -1.5, 0.3],
        [0.3, -1.5, -0.3],
        [0.3, -1.5, 0.3],
    ];

    const translate = (v, pos) => v.map((el, i) => el + pos[i]);

    let dp = newPos.map((x, i) => x - curPos[i]);
    let isOnGround = false;

    for (let i = 0; i < 3; i++) {
        const newSteve = v => v.map((x, j) => i === j ? x + newPos[j] : x + curPos[j]);
        for (const point of steveBB.map(newSteve)) {
            const block = blockLookup(world, ...point);
            if (block.type !== BlockType.AIR) {
                if (i === 1 && dp[i] < 0) {
                    isOnGround = true;
                }
                dp[i] = 0;
            }
        }
    }
    for (let i = 0; i < 3; i++) {
        const newSteve = v => v.map((x, j) => curPos[j] + x + dp[j]);
        for (const point of steveBB.map(newSteve)) {
            const block = blockLookup(world, ...point);
            if (block.type !== BlockType.AIR) {
                dp[i] = 0;
            }
        }
    }

    return {
        newPos: translate(curPos, dp),
        isOnGround,
    };
}

function minIndex(arr) {
    return arr.reduce((min, val, i) => val >= arr[min] ? min : i, -1);
}

function movePoint(p, s, u) {
    return [p[0] + s * u[0], p[1] + s * u[1], p[2] + s * u[2]];
}

function rayThroughGrid(origin, direction, maxDistance) {
    const range = i => [...Array(i).keys()];

    const nextGrid = range(3).map(i => direction[i] > 0 ?
        Math.floor(origin[i] + 0.5) + 0.5 :
        Math.floor(origin[i] + 0.499) - 0.5);
    const distanceToGrid = range(3).map(i => (nextGrid[i] - origin[i]) / direction[i])
        .map(v => v === 0.0 ? Number.POSITIVE_INFINITY : v);
    const axis = minIndex(distanceToGrid);
    const rayLength = distanceToGrid[axis];

    if (rayLength > maxDistance) {
        return {};
    }

    const position = movePoint(origin, distanceToGrid[axis], direction);
    const normal = range(3).map(i => i === axis ? -Math.sign(direction[i]) : 0);

    return {position, normal, distance: rayLength};
}

function castRay(world, origin, direction, maxDistance) {
    let currentPoint = origin;

    while (maxDistance > 0) {
        const {position, normal, distance} = rayThroughGrid(currentPoint, direction, maxDistance);

        if (position === undefined) {
            return;
        }

        maxDistance -= distance;
        currentPoint = position;
        const blockCenter = movePoint(position, -0.5, normal);
        const block = blockLookup(world, ...blockCenter);

        if (block.type === BlockType.AIR) {
            continue;
        }

        return {
            block,
            normal,
        };
    }
}

export function markBlock(world, cameraPosition, direction, maxDistance) {
    const hit = castRay(world, cameraPosition, direction, maxDistance);

    if (hit === undefined || hit.block.type === BlockType.UNDEFINED) {
        return;
    }

    const texture = [0, 14];
    const {normal, block} = hit;
    const faceCenter = movePoint(block.centerPosition, 0.51, normal);

    if (normal[0] > 0) {
        return makeFace('+x', texture, faceCenter);
    } else if (normal[0] < 0) {
        return makeFace('-x', texture, faceCenter);
    } else if (normal[1] > 0) {
        return makeFace('+y', texture, faceCenter);
    } else if (normal[1] < 0) {
        return makeFace('-y', texture, faceCenter);
    } else if (normal[2] > 0) {
        return makeFace('+z', texture, faceCenter);
    } else if (normal[2] < 0) {
        return makeFace('-z', texture, faceCenter);
    }
}


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

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

    const trimFaces = chunk => {
        chunk.faces = chunk.faces.filter(({blockIndex}) => chunk.data[blockIndex] !== BlockType.AIR);
    }

    hit.block.chunk.data[hit.block.blockIndex] = BlockType.AIR;
    if (hit.block.chunk.buffer !== undefined) {
        hit.block.chunk.buffer.delete();
        delete hit.block.chunk.buffer;
    }
    trimFaces(hit.block.chunk);

    const [bx, by, bz] = hit.block.centerPosition;

    const neighbors = [
        { block: blockLookup(params.world, bx - 1, by, bz), dir: '+x' },
        { block: blockLookup(params.world, bx + 1, by, bz), dir: '-x' },
        { block: blockLookup(params.world, bx, by - 1, bz), dir: '+y' },
        { block: blockLookup(params.world, bx, by + 1, bz), dir: '-y' },
        { block: blockLookup(params.world, bx, by, bz - 1), dir: '+z' },
        { block: blockLookup(params.world, bx, by, bz + 1), dir: '-z' },
    ];

    neighbors
        .filter(({ block }) => block.type !== BlockType.AIR &&
            block.type !== BlockType.UNDEFINED)
        .forEach(({ block, dir }) => {
            const blocki = Math.floor(block.blockIndex / (16 * 256));
            const blockj = Math.floor(block.blockIndex / 256) - 16 * blocki;
            const blockk = block.blockIndex % 256;

            block.chunk.faces.push(createChunkFace(block, dir));
            trimFaces(block.chunk);

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

export async function initWorldGl(gl) {
    const program = makeProgram(gl, VSHADER, FSHADER);
    const texture = await loadTexture(gl, 'texture.png');

    // 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 lightDirectionLoc = gl.getUniformLocation(program, 'uLightDirection');
    const ambiantLoc = gl.getUniformLocation(program, 'uAmbiantLight');

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

    const setupScene = (sceneParams) => {
        const {
            projectionMatrix,
            viewMatrix,
            fogColor,
            lightDirection,
            ambiantLightAmount,
        } = sceneParams;

        gl.useProgram(program);

        gl.uniformMatrix4fv(projLoc, false, new Float32Array(projectionMatrix));
        gl.uniformMatrix4fv(viewLoc, false, new Float32Array(viewMatrix));
        gl.uniform3fv(fogColorLoc, fogColor);
        gl.uniform3fv(lightDirectionLoc, lightDirection);
        gl.uniform1f(ambiantLoc, ambiantLightAmount);

        // doing this here because it's the same for all world stuff
        gl.uniformMatrix4fv(modelLoc, false, new Float32Array(se3.identity()));
        gl.uniform1i(samplerLoc, 0);

        gl.enableVertexAttribArray(positionLoc);
        gl.enableVertexAttribArray(normalLoc);
        gl.enableVertexAttribArray(textureLoc);
        gl.activeTexture(gl.TEXTURE0);
        gl.bindTexture(gl.TEXTURE_2D, texture);
    };

    const drawObject = (objectParams) => {
        const {
            glBuffer,
            numVertices,
        } = objectParams;

        gl.bindBuffer(gl.ARRAY_BUFFER, glBuffer);

        gl.vertexAttribPointer(positionLoc, 3, gl.FLOAT, false, 20, 0);
        gl.vertexAttribPointer(normalLoc, 3, gl.BYTE, true, 20, 12);
        gl.vertexAttribPointer(textureLoc, 2, gl.UNSIGNED_SHORT, true, 20, 16);

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

    return {
        setupScene,
        drawObject,
    };
}