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; const airMovement = 0.08; 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 { const vel = params.camera.velocity; vel[0] += tf[0] * airMovement; vel[2] += tf[2] * airMovement; const curVel = Math.sqrt(vel[0] * vel[0] + vel[2] * vel[2]); if (curVel > maxSpeed) { vel[0] *= maxSpeed / curVel; vel[2] *= maxSpeed / curVel; } } }; 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; }) .sort((a, b) => { const zz = Math.floor(z / 16); const xx = Math.floor(x / 16); const azz = Math.floor(a.position.z / 16) - zz; const axx = Math.floor(a.position.x / 16) - xx; const bzz = Math.floor(b.position.z / 16) - zz; const bxx = Math.floor(b.position.x / 16) - xx; const da = Math.abs(azz) + Math.abs(axx); const db = Math.abs(bzz) + Math.abs(bxx); return db - da; }); 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 // [x] double jump!! // [x] fullscreen // [ ] a soundrack // [x] trees and stuff // [ ] different biomes (with different noise stats) // [ ] water you can swim in (and not walk on) // [ ] flowy water // [ ] save the world (yay) to local storage (bah) // [ ] caves // [ ] crafting // [ ] fix bugs // [ ] better light (esp. cave lighting) // [ ] 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; document.addEventListener('keydown', e => { switch (e.code) { case 'F11': canvas.requestFullscreen().then(() => { console.log('full screen!!'); }); break; } }); } 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)); }