Split code out of index.js into game.js and world.js

world.js

@@ -1,4 +1,52 @@
 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,
@@ -307,4 +355,254 @@ export function updateWorldGeometry(gl, world, z, x, timeLimit = 10000) {
         }
 
     }
-}
+}
+
+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,
+    };
+}