wmc/world.js
2021-12-30 03:47:57 -08:00

801 lines
25 KiB
JavaScript

import { makeBufferFromFaces, makeFace } from "./geometry";
import { loadTexture, makeProgram } from "./gl";
import * as se3 from './se3';
import { checkCave, makeTerrain, random } from "./terrain";
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);
if (color.a < 0.1) {
discard;
}
lowp float fogamount = smoothstep(80.0, 100.0, vDistance);
gl_FragColor = mix(vec4(vLighting * color.rgb, color.a), vec4(uFogColor, 1.0), fogamount);
}
`;
export const BlockType = {
UNDEFINED: 0,
AIR: 1,
DIRT: 2,
GRASS: 3,
STONE: 4,
WATER: 5,
TREE: 6,
LEAVES: 7,
};
function hasATree(seed, z, x) {
const rand = random(seed, z, x);
return (rand % 333 === 123);
}
function makeATree(data, pos, seed, chunkz, chunkx) {
const height = 3 + random(seed, chunkz + pos[0], chunkx + pos[1]) % 6;
const offset = 256 * (16 * pos[0] + pos[1]);
const firstBlock = pos[2];
for (let i = 0; i < height; i++) {
data[offset + firstBlock + i] = BlockType.TREE;
}
function setBlock(i, j, k, type) {
if (i < 0 || j < 0 || k < 0 || i > 15 || j > 15 || k > 255) return;
const offset = 256 * (16 * i + j) + k;
if (data[offset] !== BlockType.AIR) return;
data[offset] = type;
}
for (let i = pos[0] - 2; i < pos[0] + 3; i++) {
for (let j = pos[1] - 2; j < pos[1] + 3; j++) {
for (let k = firstBlock + height - 2; k < firstBlock + height + 2; k++) {
setBlock(i, j, k, BlockType.LEAVES);
}
}
}
return firstBlock + height;
}
function makeChunk(z, x) {
const seed = 1337;
const terrain = makeTerrain(seed, z, x);
const data = new Uint8Array(16 * 16 * 256);
const trees = [];
for (let i = 0; i < 16; i++) {
for (let j = 0; j < 16; j++) {
const height = terrain[i * 16 + j];
const offset = i * (16 * 256) + j * 256;
const stoneHeight = Math.max(48, height);
const grassHeight = stoneHeight + 8;
const waterHeight = 67;
let currentHeight = 0;
data.set(Array(stoneHeight).fill(BlockType.STONE), offset);
currentHeight = stoneHeight;
data.set(Array(grassHeight - currentHeight).fill(BlockType.DIRT), offset + currentHeight);
currentHeight = grassHeight;
if (grassHeight < waterHeight) {
data.set(Array(waterHeight - currentHeight).fill(BlockType.WATER), offset + currentHeight);
currentHeight = waterHeight;
} else {
if (hasATree(seed, z + i, x + j)) {
trees.push([i, j, currentHeight]);
} else {
data[offset + grassHeight - 1] = BlockType.GRASS;
}
}
data.set(Array(256 - currentHeight).fill(BlockType.AIR), offset + currentHeight);
}
}
for (const tree of trees) {
makeATree(data, tree, seed, z, x);
}
// caves
// [ ] 3d perlin noise up to 64
// [ ] sample 4x4x4 to check for caves
// [ ] fill with air where appropriate
function propagateCave(i, j, k) {
const neighbors = (i, j, k) => [
[i - 1, j, k],
[i + 1, j, k],
[i, j - 1, k],
[i, j + 1, k],
[i, j, k - 1],
[i, j, k + 1],
];
const queue = neighbors(i, j, k);
while (queue.length > 0) {
const [ni, nj, nk] = queue.pop();
if (ni < 0 || ni > 15 || nj < 0 || nj > 15 || nk < 0 || nk > 255) {
continue;
}
const bi = 256 * (16 * ni + nj) + nk;
if (data[bi] === BlockType.AIR || data[bi] === BlockType.WATER) {
continue;
}
if (checkCave(seed, x + nj, nk, z + ni)) {
data[bi] = BlockType.AIR;
queue.push(...neighbors(ni, nj, nk));
}
}
}
for (let i = 0; i < 16; i += 4) {
for (let j = 0; j < 16; j += 4) {
let bi = 256 * (16 * i + j);
for (let k = 0; k < 58; k += 4, bi += 4) {
if (data[bi] === BlockType.AIR) {
continue;
}
if (checkCave(seed, x + j, k, z + i)) {
data[bi] = BlockType.AIR;
propagateCave(i, j, k);
}
}
}
}
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];
case BlockType.WATER: return [4, 15];
case BlockType.TREE:
switch (dir) {
case '+y':
case '-y':
return [5, 15];
default: return [6, 15];
}
case BlockType.LEAVES: return [7, 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 isTransparent(type) {
switch (type) {
case BlockType.WATER:
case BlockType.LEAVES:
case BlockType.AIR:
return true;
default: return false;
}
}
function makeFaceList(chunk, lookup) {
const chunkz = chunk.position.z;
const chunkx = chunk.position.x;
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] },
];
function* blocks() {
for (let i = 0; i < 16; i++) {
for (let j = 0; j < 16; j++) {
for (let k = 0; k < 256; k++) {
yield [i, j, k];
}
}
}
}
chunk.faces = [];
chunk.transparentFaces = [];
return makeFaces(chunk, blocks, neighbors);
}
// - 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
const undefinedChunk = {data: new Proxy({}, {
get: () => BlockType.UNDEFINED,
})};
class ChunkMap {
map = {};
key(i, j) {
// meh, this limits us to 65536 chunks in the x direction :/
return (i << 16) + j;
}
get(i, j) {
const out = this.map[this.key(i, j)];
return out ?? undefinedChunk;
}
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 {chunkMap: new ChunkMap()};
}
function makeFaces(chunk, blocks, neighbors) {
if (chunk === undefined || chunk.faces === undefined) {
return;
}
let geometryChanged = false;
for (const [i, j, k] of blocks()) {
const bi = 256 * (16 * i + j) + k;
if (chunk.data[bi] === BlockType.AIR) {
continue;
}
if (isTransparent(chunk.data[bi])) {
for (const { dir, faceCenter } of neighbors(i, j, k)
.filter(({ block }) => isTransparent(block) && block !== BlockType.WATER)
) {
if (chunk.data[bi] === BlockType.WATER) {
faceCenter[1] -= 0.15; // TODO: lower face should be normal
}
chunk.transparentFaces.push({
dir,
face: makeFace(dir, faceTexture(chunk.data[bi], dir), faceCenter),
blockIndex: bi,
});
geometryChanged = true;
}
} else {
for (const { dir, faceCenter } of neighbors(i, j, k)
.filter(({ block }) => isTransparent(block))
) {
chunk.faces.push({
dir,
face: makeFace(dir, faceTexture(chunk.data[bi], dir), faceCenter),
blockIndex: bi,
});
geometryChanged = true;
}
}
}
if (geometryChanged && chunk.buffer !== undefined) {
chunk.buffer.delete();
delete chunk.buffer;
chunk.transparentBuffer.delete();
delete chunk.transparentBuffer;
}
}
function updateMissingFaces(world, chunk) {
const chunkz = chunk.position.z;
const chunkx = chunk.position.x;
const chunki = Math.floor(chunkz / 16);
const chunkj = Math.floor(chunkx / 16);
makeFaces(world.chunkMap.get(chunki - 1, chunkj),
function* () {
for (let j = 0; j < 16; j++) {
for (let k = 0; k < 256; k++) {
yield [15, j, k];
}
}
}, (i, j, k) => [{
block: chunk.data[256 * (16 * 0 + j) + k],
dir: '+z',
faceCenter: [chunkx + j, k, chunkz - 0.5],
}]);
makeFaces(world.chunkMap.get(chunki + 1, chunkj),
function* () {
for (let j = 0; j < 16; j++) {
for (let k = 0; k < 256; k++) {
yield [0, j, k];
}
}
}, (i, j, k) => [{
block: chunk.data[256 * (15 * 16 + j) + k],
dir: '-z',
faceCenter: [chunkx + j, k, chunkz + 16 - 0.5],
}]);
makeFaces(world.chunkMap.get(chunki, chunkj - 1),
function* () {
for (let i = 0; i < 16; i++) {
for (let k = 0; k < 256; k++) {
yield [i, 15, k];
}
}
}, (i, j, k) => [{
block: chunk.data[256 * (16 * i + 0) + k],
dir: '+x',
faceCenter: [chunkx - 0.5, k, chunkz + i],
}]);
makeFaces(world.chunkMap.get(chunki, chunkj + 1),
function* () {
for (let i = 0; i < 16; i++) {
for (let k = 0; k < 256; k++) {
yield [i, 0, k];
}
}
}, (i, j, k) => [{
block: chunk.data[256 * (16 * i + 15) + k],
dir: '-x',
faceCenter: [chunkx + 16 - 0.5, k, chunkz + i],
}]);
}
/** 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 radius = 1; radius < 8; radius++) {
for (let i = ic - radius; i < ic + radius; i++) {
for (let j = jc - radius; j < jc + radius; j++) {
if (world.chunkMap.has(i, j)) {
continue;
}
if (radius > 2 && performance.now() - start > timeLimit) {
return;
}
const chunk = makeChunk(i * 16, j * 16);
world.chunkMap.set(i, j, chunk);
updateMissingFaces(world, chunk);
}
}
}
return world;
}
/** 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 === undefined || chunk.buffer !== undefined) {
continue;
}
if (radius > 2 && performance.now() - start > timeLimit) {
return;
}
if(chunk.faces === undefined) {
const neighborChunks = [
world.chunkMap.get(i - 1, j),
world.chunkMap.get(i + 1, j),
world.chunkMap.get(i, j - 1),
world.chunkMap.get(i, j + 1),
];
const lookup = (i, j, k) => {
if (i < 0) { return neighborChunks[0].data[256 * (16 * (i + 16) + j) + k]; }
if (i > 15) { return neighborChunks[1].data[256 * (16 * (i - 16) + j) + k]; }
if (j < 0) { return neighborChunks[2].data[256 * (16 * i + j + 16) + k]; }
if (j > 15) { return neighborChunks[3].data[256 * (16 * i + j - 16) + k]; }
if (k < 0 || k > 255) { return BlockType.UNDEFINED; }
return chunk.data[256*(16*i + j) + k];
};
makeFaceList(chunk, lookup);
}
chunk.buffer = makeBufferFromFaces(gl, chunk.faces.map(f => f.face));
chunk.transparentBuffer = makeBufferFromFaces(gl, chunk.transparentFaces.map(f => f.face));
}
}
}
}
export function checkCollision(curPos, newPos, world) {
// I guess Gontrand is about 1.7 m tall?
// he also has a 60x60 cm axis-aligned square section '^_^
// box is centered around the camera
const gontrandBB = [
[-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 gontrandBB.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 gontrandBB.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};
}
export 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 blockIndex2Ijk(bi) {
const blocki = Math.floor(bi / (256 * 16));
const blockj = Math.floor((bi % (256 * 16)) / 256);
const blockk = bi % 256;
return [blocki, blockj, blockk];
}
export function destroyBlock(world, block) {
const trimFaces = chunk => {
chunk.faces = chunk.faces.filter(({blockIndex}) => chunk.data[blockIndex] !== BlockType.AIR);
chunk.transparentFaces = chunk.transparentFaces.filter(({blockIndex}) => chunk.data[blockIndex] !== BlockType.AIR);
}
block.chunk.data[block.blockIndex] = BlockType.AIR;
if (block.chunk.buffer !== undefined) {
block.chunk.buffer.delete();
delete block.chunk.buffer;
}
trimFaces(block.chunk);
const [bx, by, bz] = block.centerPosition;
const neighbors = [
{ block: blockLookup(world, bx - 1, by, bz), dir: '+x' },
{ block: blockLookup(world, bx + 1, by, bz), dir: '-x' },
{ block: blockLookup(world, bx, by - 1, bz), dir: '+y' },
{ block: blockLookup(world, bx, by + 1, bz), dir: '-y' },
{ block: blockLookup(world, bx, by, bz - 1), dir: '+z' },
{ block: blockLookup(world, bx, by, bz + 1), dir: '-z' },
];
neighbors
.filter(({ block }) => block.type !== BlockType.AIR &&
block.type !== BlockType.UNDEFINED)
.forEach(({ block, dir }) => {
makeFaces(block.chunk,
() => [blockIndex2Ijk(block.blockIndex)],
() => [{
block: BlockType.AIR,
dir,
faceCenter: faceCenter(block.centerPosition, dir),
}]);
trimFaces(block.chunk);
if (block.chunk.buffer !== undefined) {
block.chunk.buffer.delete();
delete block.chunk.buffer;
}
});
}
export function makeBlock(world, position, type) {
const block = blockLookup(world, ...position);
console.assert(block.type === BlockType.AIR);
block.chunk.data[block.blockIndex] = type;
block.type = type;
const [bx, by, bz] = block.centerPosition;
const neighbors = [
{ block: blockLookup(world, bx - 1, by, bz), dir: '-x', ndir: '+x' },
{ block: blockLookup(world, bx + 1, by, bz), dir: '+x', ndir: '-x' },
{ block: blockLookup(world, bx, by - 1, bz), dir: '-y', ndir: '+y' },
{ block: blockLookup(world, bx, by + 1, bz), dir: '+y', ndir: '-y' },
{ block: blockLookup(world, bx, by, bz - 1), dir: '-z', ndir: '+z' },
{ block: blockLookup(world, bx, by, bz + 1), dir: '+z', ndir: '-z' },
];
neighbors
.filter(({ block }) => block.type !== BlockType.UNDEFINED)
.forEach(({ block: nblock, dir, ndir }) => {
makeFaces(block.chunk,
() => [blockIndex2Ijk(block.blockIndex)],
() => [{
block: BlockType.AIR,
dir,
faceCenter: faceCenter(block.centerPosition, dir),
}]);
nblock.chunk.faces = nblock.chunk.faces.filter(f => (
f.blockIndex !== nblock.blockIndex ||
f.dir !== ndir
));
nblock.chunk.transparentFaces = nblock.chunk.transparentFaces.filter(f => (
f.blockIndex !== nblock.blockIndex ||
f.dir !== ndir
));
});
}
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,
};
}