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