370 lines
11 KiB
JavaScript
370 lines
11 KiB
JavaScript
import { makeBufferFromFaces } from "./geometry";
|
|
import * as se3 from './se3';
|
|
import {
|
|
BlockType,
|
|
castRay,
|
|
checkCollision,
|
|
destroyBlock,
|
|
generateMissingChunks,
|
|
makeBlock,
|
|
markBlock,
|
|
updateWorldGeometry,
|
|
} from './world';
|
|
|
|
/** Draw.
|
|
*
|
|
* @param {WebGLRenderingContext} gl
|
|
*/
|
|
function draw(gl, params, objects) {
|
|
const skyColor = [0.6, 0.8, 1.0];
|
|
|
|
gl.clearColor(...skyColor, 1.0);
|
|
gl.clearDepth(1.0);
|
|
gl.enable(gl.DEPTH_TEST);
|
|
gl.depthFunc(gl.LEQUAL);
|
|
|
|
gl.enable(gl.CULL_FACE);
|
|
gl.cullFace(gl.BACK);
|
|
gl.enable(gl.BLEND);
|
|
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
|
|
|
|
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
|
|
|
const camrot = params.camera.orientation;
|
|
const campos = params.camera.position;
|
|
const viewMatrix = se3.product(
|
|
se3.rotxyz(-camrot[0], -camrot[1], -camrot[2]),
|
|
se3.translation(-campos[0], -campos[1], -campos[2])
|
|
);
|
|
|
|
let lastGlContext;
|
|
|
|
for (const {glContext, position, orientation, geometry} of objects) {
|
|
if (glContext !== lastGlContext) {
|
|
glContext.setupScene({
|
|
projectionMatrix: params.projMatrix,
|
|
viewMatrix,
|
|
fogColor: skyColor,
|
|
lightDirection: params.lightDirection,
|
|
ambiantLightAmount: params.ambiantLight,
|
|
});
|
|
}
|
|
|
|
lastGlContext = glContext;
|
|
|
|
glContext.drawObject({
|
|
position,
|
|
orientation,
|
|
glBuffer: geometry.glBuffer,
|
|
numVertices: geometry.numVertices,
|
|
});
|
|
}
|
|
}
|
|
|
|
const stuff = {
|
|
lastFrameTime: 0,
|
|
};
|
|
|
|
function handleKeys(params) {
|
|
const move = (forward, right) => {
|
|
const dir = [right, 0, -forward, 1.0];
|
|
const ori = se3.roty(params.camera.orientation[1]);
|
|
const tf = se3.apply(ori, dir);
|
|
const maxSpeed = 0.1;
|
|
|
|
if (params.flying) {
|
|
params.camera.position[0] += tf[0];
|
|
params.camera.position[2] += tf[2];
|
|
}
|
|
if (params.isOnGround) {
|
|
params.camera.velocity[0] = tf[0];
|
|
params.camera.velocity[2] = tf[2];
|
|
} else {
|
|
params.camera.velocity[0] += tf[0] / 60;
|
|
params.camera.velocity[2] += tf[2] / 60;
|
|
|
|
if (Math.abs(params.camera.velocity[0]) > maxSpeed) {
|
|
params.camera.velocity[0] = Math.sign(params.camera.velocity[0]) * maxSpeed;
|
|
}
|
|
if (Math.abs(params.camera.velocity[2]) > maxSpeed) {
|
|
params.camera.velocity[2] = Math.sign(params.camera.velocity[2]) * maxSpeed;
|
|
}
|
|
}
|
|
};
|
|
|
|
params.keys.forEach(key => {
|
|
switch (key) {
|
|
case 'KeyW':
|
|
move(0.1, 0.0);
|
|
return;
|
|
case 'KeyA':
|
|
move(0.0, -0.1);
|
|
return;
|
|
case 'KeyS':
|
|
move(-0.1, 0.0);
|
|
return;
|
|
case 'KeyD':
|
|
move(0.0, 0.1);
|
|
return;
|
|
|
|
case 'Space':
|
|
if (params.flying) {
|
|
params.camera.position[1] += 0.1;
|
|
}
|
|
return;
|
|
|
|
case 'ShiftLeft':
|
|
params.camera.position[1] -= 0.1;
|
|
return;
|
|
}
|
|
});
|
|
}
|
|
|
|
function getObjects(world, z, x, glContext) {
|
|
const drawedChunks = world.chunks
|
|
.filter(chunk => {
|
|
if (chunk.position.z < z - 8 * 16) return false;
|
|
if (chunk.position.z > z + 7 * 16) return false;
|
|
if (chunk.position.x < x - 8 * 16) return false;
|
|
if (chunk.position.x > x + 7 * 16) return false;
|
|
|
|
if (chunk.buffer === undefined) {
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
});
|
|
const buffers = drawedChunks
|
|
.map(chunk => chunk.buffer)
|
|
.concat(drawedChunks.map(chunk => chunk.transparentBuffer));
|
|
return buffers.map(buffer => ({
|
|
position: [0.0, 0.0, 0.0],
|
|
orientation: [0.0, 0.0, 0.0],
|
|
geometry: buffer,
|
|
glContext,
|
|
}));
|
|
}
|
|
|
|
function updatePhysics(params) {
|
|
params.camera.velocity[1] -= 9.8 / 60 / 60;
|
|
|
|
const oldPos = params.camera.position;
|
|
const targetPos = params.flying ? oldPos : params.camera.position.map((v, i) => v + params.camera.velocity[i]);
|
|
const {isOnGround, newPos} = checkCollision(oldPos, targetPos, params.world);
|
|
params.camera.position = newPos;
|
|
params.camera.velocity = newPos.map((v, i) => v - oldPos[i]);
|
|
if (isOnGround) {
|
|
params.jumpAmount = 2;
|
|
params.camera.velocity = params.camera.velocity.map(v => v * 0.7);
|
|
}
|
|
params.isOnGround = isOnGround;
|
|
}
|
|
|
|
function tagABlock(gl, params, objects) {
|
|
const dir = [0, 0, -1, 1.0];
|
|
const camori = params.camera.orientation;
|
|
const ori = se3.inverse(se3.rotxyz(-camori[0], -camori[1], -camori[2]));
|
|
const viewDirection = se3.apply(ori, dir).slice(0, 3);
|
|
|
|
const face = markBlock(params.world, params.camera.position, viewDirection, params.blockSelectDistance);
|
|
if (face === undefined) {
|
|
return;
|
|
}
|
|
|
|
if (params.tagBuffer !== undefined) {
|
|
gl.deleteBuffer(params.tagBuffer.glBuffer);
|
|
delete params.tagBuffer;
|
|
}
|
|
const buffer = makeBufferFromFaces(gl, [face]);
|
|
params.tagBuffer = buffer;
|
|
|
|
const obj = {
|
|
position: [0.0, 0.0, 0.0],
|
|
orientation: [0.0, 0.0, 0.0],
|
|
geometry: buffer,
|
|
glContext: params.worldGl,
|
|
};
|
|
|
|
objects.push(obj);
|
|
}
|
|
|
|
// Stuff I need to do:
|
|
// [x] a skybox
|
|
// [x] a movable camera
|
|
// [x] some kind of gravity
|
|
// [x] collision detection
|
|
// [x] more blocks
|
|
// [x] ability to mine & place
|
|
// [x] generating & loading of more chunks
|
|
// [x] distance fog
|
|
// [x] better controls
|
|
// [x] non-flowy water
|
|
// [x] slightly cooler terrain
|
|
// [ ] fullscreen
|
|
// [ ] a soundrack
|
|
// [ ] trees and stuff
|
|
// [ ] different biomes (with different noise stats)
|
|
// [ ] flowy water
|
|
// [ ] save the world (yay) to local storage (bah)
|
|
// [ ] caves
|
|
// [ ] crafting
|
|
// [ ] fix bugs
|
|
// [ ] better light
|
|
// [ ] inventory
|
|
// [ ] monsters
|
|
// [ ] multi player
|
|
|
|
export function setupParamPanel(params) {
|
|
document.querySelector('#lightx').oninput = e => {
|
|
params.lightDirection[0] = e.target.value / 100;
|
|
};
|
|
document.querySelector('#lighty').oninput = e => {
|
|
params.lightDirection[1] = e.target.value / 100;
|
|
};
|
|
document.querySelector('#lightz').oninput = e => {
|
|
params.lightDirection[2] = e.target.value / 100;
|
|
};
|
|
document.querySelector('#ambiant').oninput = e => {
|
|
params.ambiantLight = e.target.value / 100;
|
|
};
|
|
|
|
const collapsibles = document.getElementsByClassName("collapsible");
|
|
for (const collapsible of collapsibles) {
|
|
collapsible.onclick = () => {
|
|
const content = collapsible.nextElementSibling;
|
|
if (content.style.height === 'fit-content') {
|
|
content.style.height = '0px';
|
|
} else {
|
|
content.style.height = 'fit-content';
|
|
}
|
|
};
|
|
}
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
function destroySelectedBlock(params) {
|
|
const hit = castRay(params.world, params.camera.position, viewDirection(params), params.blockSelectDistance);
|
|
if (hit === undefined || hit.block.type === BlockType.UNDEFINED) {
|
|
return;
|
|
}
|
|
if (hit.block.type === BlockType.WATER) {
|
|
return;
|
|
}
|
|
destroyBlock(params.world, hit.block);
|
|
}
|
|
|
|
function makeDirBlock(params) {
|
|
const hit = castRay(params.world, params.camera.position, viewDirection(params), params.blockSelectDistance);
|
|
if (hit === undefined || hit.block.type === BlockType.UNDEFINED) {
|
|
return;
|
|
}
|
|
const newBlockPosition = hit.block.centerPosition.map((v, i) => v + hit.normal[i]);
|
|
makeBlock(params.world, newBlockPosition, BlockType.DIRT);
|
|
}
|
|
|
|
export function initUiListeners(params, canvas) {
|
|
const canvasClickHandler = () => {
|
|
canvas.requestPointerLock();
|
|
canvas.onclick = null;
|
|
const clickListener = e => {
|
|
switch(e.button) {
|
|
case 0: // left click
|
|
destroySelectedBlock(params);
|
|
break;
|
|
case 2: // right click
|
|
makeDirBlock(params);
|
|
break;
|
|
}
|
|
};
|
|
const keyListener = e => {
|
|
if (e.type === 'keydown') {
|
|
params.keys.add(e.code);
|
|
|
|
switch (e.code) {
|
|
case 'KeyF':
|
|
params.flying = !params.flying;
|
|
break;
|
|
case 'Space':
|
|
if (!params.flying) {
|
|
if (params.jumpAmount > 0) {
|
|
const amount = 0.08;
|
|
params.camera.velocity[1] = amount;
|
|
params.jumpAmount -= 1;
|
|
}
|
|
}
|
|
break;
|
|
}
|
|
} else {
|
|
params.keys.delete(e.code);
|
|
}
|
|
};
|
|
const moveListener = e => {
|
|
params.camera.orientation[1] -= e.movementX / 500;
|
|
params.camera.orientation[0] -= e.movementY / 500;
|
|
|
|
params.camera.orientation[0] = Math.min(Math.max(
|
|
params.camera.orientation[0], -Math.PI / 2
|
|
), Math.PI / 2);
|
|
};
|
|
const changeListener = () => {
|
|
if (document.pointerLockElement === canvas) {
|
|
return;
|
|
}
|
|
document.removeEventListener('pointerdown', clickListener);
|
|
document.removeEventListener('pointerlockchange', changeListener);
|
|
document.removeEventListener('pointermove', moveListener);
|
|
document.removeEventListener('keydown', keyListener);
|
|
document.removeEventListener('keyup', keyListener);
|
|
canvas.onclick = canvasClickHandler;
|
|
};
|
|
document.addEventListener('pointerdown', clickListener);
|
|
document.addEventListener('pointerlockchange', changeListener);
|
|
document.addEventListener('pointermove', moveListener);
|
|
document.addEventListener('keydown', keyListener);
|
|
document.addEventListener('keyup', keyListener);
|
|
};
|
|
canvas.onclick = canvasClickHandler;
|
|
}
|
|
|
|
export function tick(time, gl, params) {
|
|
handleKeys(params);
|
|
updatePhysics(params);
|
|
|
|
const campos = params.camera.position;
|
|
|
|
// expensive stuff, can take several cycles
|
|
try {
|
|
// frame time is typically 16.7ms, so this may lag a bit
|
|
let timeLeft = 10;
|
|
const start = performance.now();
|
|
generateMissingChunks(params.world, campos[2], campos[0], timeLeft);
|
|
|
|
timeLeft -= performance.now() - start;
|
|
updateWorldGeometry(gl, params.world, campos[2], campos[0], timeLeft);
|
|
}
|
|
catch (ex) {
|
|
if (ex !== 'timesup') {
|
|
throw ex;
|
|
}
|
|
}
|
|
|
|
const objects = getObjects(params.world, campos[2], campos[0], params.worldGl);
|
|
|
|
tagABlock(gl, params, objects);
|
|
|
|
draw(gl, params, objects);
|
|
|
|
const dt = (time - stuff.lastFrameTime) * 0.001;
|
|
stuff.lastFrameTime = time;
|
|
|
|
document.querySelector('#fps').textContent = `${1.0 / dt} fps`;
|
|
document.querySelector('#lightDirVec').textContent = JSON.stringify(params.lightDirection);
|
|
|
|
requestAnimationFrame(time => tick(time, gl, params));
|
|
} |