611 lines
19 KiB
JavaScript
611 lines
19 KiB
JavaScript
import { makeBufferFromFaces, makeFace} from "./geometry";
|
|
import { loadTexture, makeProgram } from "./gl";
|
|
import * as se3 from './se3';
|
|
import { makeTerrain } 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);
|
|
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,
|
|
WATER: 5,
|
|
};
|
|
|
|
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 = 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.max(48, height);
|
|
const grassHeight = stoneHeight + 8;
|
|
const waterHeight = 67;
|
|
data.set(Array(stoneHeight).fill(BlockType.STONE), offset);
|
|
data.set(Array(grassHeight - 1 - stoneHeight).fill(BlockType.DIRT), offset + stoneHeight);
|
|
if (grassHeight < waterHeight) {
|
|
data.set(Array(waterHeight - grassHeight + 1).fill(BlockType.WATER), offset + grassHeight - 1);
|
|
} else {
|
|
data[offset + grassHeight - 1] = BlockType.GRASS;
|
|
}
|
|
const surfaceHeight = Math.max(waterHeight, grassHeight);
|
|
data.set(Array(256 - surfaceHeight).fill(BlockType.AIR), offset + surfaceHeight);
|
|
}
|
|
}
|
|
|
|
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];
|
|
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 solidFaces = [];
|
|
const waterFaces = [];
|
|
|
|
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 {dir, faceCenter} of neighbors(i, j, k)
|
|
.filter(({ block }) => block === BlockType.AIR || (block === BlockType.WATER && data[bi] !== BlockType.WATER))) {
|
|
if (data[bi] !== BlockType.WATER) {
|
|
solidFaces.push({
|
|
blockIndex: bi,
|
|
dir,
|
|
face: makeFace(dir, faceTexture(data[bi], dir), faceCenter),
|
|
});
|
|
} else {
|
|
faceCenter[1] -= 0.15;
|
|
waterFaces.push({
|
|
blockIndex: bi,
|
|
dir,
|
|
face: makeFace(dir, faceTexture(data[bi], dir), faceCenter),
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
return {
|
|
solidFaces,
|
|
waterFaces,
|
|
};
|
|
}
|
|
|
|
// - 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 {
|
|
dir,
|
|
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;
|
|
|
|
const faces = makeFaceList(chunk.data, chunk.position.z, chunk.position.x, lookup);
|
|
chunk.faces = faces.solidFaces;
|
|
chunk.transparentFaces = faces.waterFaces;
|
|
}
|
|
|
|
chunk.buffer = makeBufferFromFaces(gl, chunk.faces.map(f => f.face));
|
|
chunk.transparentBuffer = makeBufferFromFaces(gl, chunk.transparentFaces.map(f => f.face));
|
|
|
|
// throttle this for fluidity
|
|
if (performance.now() - start > timeLimit) {
|
|
throw 'timesup';
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
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 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};
|
|
}
|
|
|
|
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);
|
|
}
|
|
}
|
|
|
|
|
|
export function destroyBlock(world, block) {
|
|
const trimFaces = chunk => {
|
|
chunk.faces = chunk.faces.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 }) => {
|
|
block.chunk.faces.push(createChunkFace(block, 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' },
|
|
];
|
|
|
|
const refresh = chunk => {
|
|
if (chunk.buffer !== undefined) {
|
|
chunk.buffer.delete();
|
|
delete chunk.buffer;
|
|
}
|
|
}
|
|
|
|
neighbors
|
|
.filter(({ block }) => block.type !== BlockType.UNDEFINED)
|
|
.forEach(({ block: nblock, dir, ndir }) => {
|
|
if (nblock.type === BlockType.AIR) {
|
|
block.chunk.faces.push(createChunkFace(block, dir));
|
|
} else {
|
|
nblock.chunk.faces = nblock.chunk.faces.filter(f => (
|
|
f.blockIndex !== nblock.blockIndex ||
|
|
f.dir !== ndir
|
|
));
|
|
refresh(nblock.chunk);
|
|
}
|
|
});
|
|
|
|
refresh(block.chunk);
|
|
}
|
|
|
|
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,
|
|
};
|
|
}
|