From 2fccb1fb7c1a43c43a37e22af2e7bbeee77ad4b9 Mon Sep 17 00:00:00 2001 From: Paul Mathieu Date: Tue, 18 Oct 2022 14:45:17 -0700 Subject: [PATCH] skycraft: now with celestial bodies --- skycraft/index.js | 781 ++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 653 insertions(+), 128 deletions(-) diff --git a/skycraft/index.js b/skycraft/index.js index bc71884..52ae1c1 100644 --- a/skycraft/index.js +++ b/skycraft/index.js @@ -4,6 +4,43 @@ import * as se3 from '../se3'; import {loadTexture, makeProgram} from '../gl'; import {makeFace, makeBufferFromFaces} from '../geometry'; +const linalg = { + cross: (a, b) => { + return [ + a[1] * b[2] - a[2] * b[1], + a[2] * b[0] - a[0] * b[2], + a[0] * b[1] - a[1] * b[0], + ]; + }, + diff: (a, b) => { + return [ + a[0] - b[0], + a[1] - b[1], + a[2] - b[2], + ]; + }, + add: (a, b) => { + return [ + a[0] + b[0], + a[1] + b[1], + a[2] + b[2], + ]; + }, + norm: a => { + return Math.sqrt(a[0]**2 + a[1]**2 + a[2]**2); + }, + dot: (a, b) => { + return a[0] * b[0] + a[1] * b[1] + a[2] * b[2]; + }, + scale: (a, s) => { + return [ + a[0] * s, + a[1] * s, + a[2] * s, + ]; + }, +}; + const VSHADER = ` attribute vec3 aPosition; attribute vec3 aNormal; @@ -218,6 +255,385 @@ function getOrbitDrawContext(gl) { }; } +const BlockType = { + UNDEFINED: 0, + AIR: 1, + DIRT: 2, + GRASS: 3, + STONE: 4, + WATER: 5, + TREE: 6, + LEAVES: 7, + SUN: 8, +}; + +const CHUNKSIZE = 32; + +/** seed: some kind of number uniquely defining the body + * x, y, z: space coordinates in the body's frame + * + * returns: a chunk + */ +function getChunk(seed, x, y, z) { + // XXX: for now, return a premade chunk: a 24x24x24 cube of dirt + // surrounded by 4 blocks of air all around + const cs = CHUNKSIZE; + + if (seed !== 1337) { + return {}; + } +// if (Math.abs + + const blocks = new Array(cs * cs * cs); + blocks.fill(BlockType.AIR); + + const dirt = new Array(24).fill(BlockType.DIRT); + + for (let i = 0; i < 24; i++) { + for (let j = 4; j < 28; j++) { + const offset = cs * cs * (i + 4) + cs * j; + blocks.splice(offset + 4, 24, ...dirt); + } + } + + const half = cs / 2; + + return { + position: [-half, -half, -half], + blocks, + underground: false, + }; +} + +function getBodyChunks(seed) { + if (seed === 0) { + return makeSun(); + } + + return [getChunk(seed, 0, 0, 0)]; +} + +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]; + case BlockType.SUN: return [0, 4]; + default: return [0, 0]; + } +} + +function* makeChunkFaces(chunk) { + const cs = CHUNKSIZE; + + function faceCenter(pos, dir) { + switch (dir) { + case '-x': return [pos[0] - 0.5, pos[1], pos[2]]; + case '+x': return [pos[0] + 0.5, pos[1], pos[2]]; + case '-y': return [pos[0], pos[1] - 0.5, pos[2]]; + case '+y': return [pos[0], pos[1] + 0.5, pos[2]]; + case '-z': return [pos[0], pos[1], pos[2] - 0.5]; + case '+z': return [pos[0], pos[1], pos[2] + 0.5]; + } + } + + function* neighbors(x, y, z) { + const idx = ( + z * cs * cs + + y * cs + + x + ); + if (x > 0) { + yield { + block: chunk.blocks[idx - 1], + dir: '-x', + }; + } else { + yield { + block: BlockType.AIR, + dir: '-x', + }; + } + if (x < 31) { + yield { + block: chunk.blocks[idx + 1], + dir: '+x', + }; + } else { + yield { + block: BlockType.AIR, + dir: '+x', + }; + } + if (y > 0) { + yield { + block: chunk.blocks[idx - cs], + dir: '-y', + }; + } else { + yield { + block: BlockType.AIR, + dir: '-y', + }; + } + if (y < 31) { + yield { + block: chunk.blocks[idx + cs], + dir: '+y', + }; + } else { + yield { + block: BlockType.AIR, + dir: '+y', + }; + } + if (z > 0) { + yield { + block: chunk.blocks[idx - cs * cs], + dir: '-z', + }; + } else { + yield { + block: BlockType.AIR, + dir: '-z', + }; + } + if (z < 31) { + yield { + block: chunk.blocks[idx + cs * cs], + dir: '+z', + }; + } else { + yield { + block: BlockType.AIR, + dir: '+z', + }; + } + } + + for (let x = 0; x < cs; x++) { + for (let y = 0; y < cs; y++) { + for (let z = 0; z < cs; z++) { + const idx = ( + z * cs * cs + + y * cs + + x + ); + const chpos = chunk.position; + const bkpos = [ + chpos[0] + x, + chpos[1] + y, + chpos[2] + z, + ]; + const bt = chunk.blocks[idx]; + if (bt === BlockType.AIR) { + continue; + } + for (const {block, dir} of neighbors(x, y, z)) { + if (block !== BlockType.AIR) { + continue; + } + yield makeFace(dir, faceTexture(bt), faceCenter(bkpos, dir)); + } + } + } + } +} + +function closeToPlanet(context) { + const body = findSoi(context); + const relativePos = linalg.diff(context.player.position, body.position); + + return linalg.norm(relativePos) < 20; +} + +function makeSun(seed) { + const radius = 79; + const radiusChunks = Math.floor(radius / CHUNKSIZE); + + const chunks = []; + + function makeSunChunk(i, j, k) { + const cs = CHUNKSIZE; + const half = cs / 2; + const blocks = new Array(cs**3); + blocks.fill(BlockType.SUN); + + let underground = true; + + for (let x = 0; x < cs; x++) { + for (let y = 0; y < cs; y++) { + for (let z = 0; z < cs; z++) { + const pos = [ + x + i * cs - half, + y + j * cs - half, + z + k * cs - half, + ]; + const idx = ( + z * cs * cs + + y * cs + + x + ); + if (pos[0]**2 + pos[1]**2 + pos[2]**2 > radius**2) { + blocks[idx] = BlockType.AIR; + underground = false; + } + } + } + } + + return { + position: [i * cs - half, j * cs - half, k * cs - half], + blocks, + underground, + }; + } + + for (let i = -radiusChunks; i <= radiusChunks; i++) { + for (let j = -radiusChunks; j <= radiusChunks; j++) { + for (let k = -radiusChunks; k <= radiusChunks; k++) { + chunks.push(makeSunChunk(i, j, k)); + } + } + } + + return chunks; +} + +function getBodyGeometry(seed) { + const faces = getBodyChunks(seed) + .filter(chunk => !chunk.underground) + .map(chunk => [...makeChunkFaces(chunk)]); + + return faces.reduce((a, b) => a.concat(b)); +} + +function getSolarSystem(seed) { + /// XXX: only returns 1 body for now + + return { + name: 'Tat', + + mass: 1000.0, + spin: [0, 0, 0.2], + + geometry: getBodyGeometry(0), + + children: [ + { + name: 'Quicksilver', + seed: 1336, + + mass: 0.1, + spin: [0.0, 0.0, 0.05], + + geometry: makeCube([0, 4]), + + orbit: { + excentricity: 0.0, + semimajorAxis: 200, + inclination: 0.8, + ascendingNodeLongitude: 0, + periapsisArgument: 0, + t0: 0, + }, + }, + { + name: 'Satourne', + seed: 1338, + + mass: 0.1, + spin: [0.0, 0.5, 0.0], + + geometry: makeCube([0, 5]), + + orbit: { + excentricity: 0.0, + semimajorAxis: 900, + inclination: 0.0, + ascendingNodeLongitude: 0, + periapsisArgument: 0, + t0: 0, + }, + + children: [ + { + name: 'Kyoujin', + seed: 13381, + + mass: 0.01, + spin: [0.0, 0.0, 0.05], + + geometry: makeCube([0, 6]), + + orbit: { + excentricity: 0.0, + semimajorAxis: 20, + inclination: Math.PI / 2, + ascendingNodeLongitude: 0, + periapsisArgument: 0, + t0: 0, + }, + }, + ], + }, + { + name: 'Tataooine', + seed: 1337, + + mass: 50, + spin: [0.0, 0.0, 0.05], + + geometry: getBodyGeometry(1337), + + orbit: { + excentricity: 0.3, + semimajorAxis: 500, + inclination: 0.0, + ascendingNodeLongitude: 0, + periapsisArgument: 0, + t0: 0, + }, + + children: [ + { + name: 'Mun', + seed: 13371, + + mass: 0.01, + spin: [0.0, 0.0, 0.05], + + geometry: makeCube([0, 7]), + + orbit: { + excentricity: 0.0, + semimajorAxis: 50, + inclination: Math.PI / 2, + ascendingNodeLongitude: 0, + periapsisArgument: 0, + t0: 0, + }, + }, + ], + }, + ], + }; +} + function initUiListeners(canvas, context) { const canvasClickHandler = () => { canvas.requestPointerLock(); @@ -240,13 +656,20 @@ function initUiListeners(canvas, context) { switch (e.code) { case 'KeyF': -// context.flying = !context.flying; + context.flying = !context.flying; + context.player.velocity = [0, 0, 0]; + delete context.orbit; + return false; + case 'KeyL': + if (closeToPlanet(context)) { + context.landing = True; + } return false; case 'Space': if (!context.flying) { if (context.jumpAmount > 0) { const amount = context.jumpForce; - context.camera.velocity[1] = amount; + context.player.velocity[1] = amount; context.jumpAmount -= 1; } } @@ -257,12 +680,12 @@ function initUiListeners(canvas, context) { } }; const moveListener = e => { - context.camera.orientation[1] -= e.movementX / 500; context.camera.orientation[0] -= e.movementY / 500; - - context.camera.orientation[0] = Math.min(Math.max( - context.camera.orientation[0], -Math.PI / 2 - ), Math.PI / 2); + context.camera.orientation[1] -= e.movementX / 500; + context.camera.tf = se3.product( + se3.roty(context.camera.orientation[1]), + se3.rotx(context.camera.orientation[0]), + ); }; const changeListener = () => { if (document.pointerLockElement === canvas) { @@ -294,63 +717,216 @@ function initUiListeners(canvas, context) { function handleInput(context) { const move = (forward, right) => { - const dir = [right, 0, -forward, 1.0]; - const ori = se3.roty(context.camera.orientation[1]); - const tf = se3.apply(ori, dir); - const maxSpeed = 8; - const airMovement = 0.08; - - if (context.flying) { - context.camera.position[0] += tf[0] / 60; - context.camera.position[2] += tf[2] / 60; + if (context.keys.has('ShiftLeft')) { + forward *= 10; + right *= 10; } - if (context.isOnGround) { - context.camera.velocity[0] = tf[0]; - context.camera.velocity[2] = tf[2]; + const tf = se3.product( + se3.orientationOnly(context.player.tf), + context.camera.tf, + ); + const dir = [right, 0, -forward, 10]; + if (context.flying) { + context.player.tf = [ + context.player.tf, + context.camera.tf, + se3.translation(...dir), + ].reduce(se3.product); + context.camera.tf = se3.identity(); + context.camera.orientation = [0, 0, 0]; } else { - const vel = context.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; - } + const vel = context.player.velocity; + const dv = linalg.scale(se3.apply(tf, dir), 1/dir[3]); + context.player.velocity = linalg.add(vel, dv); + delete context.orbit; } }; context.keys.forEach(key => { switch (key) { case 'KeyW': - move(8, 0.0); + move(0.5, 0.0); return; case 'KeyA': - move(0.0, -8); + move(0.0, -0.5); return; case 'KeyS': - move(-8, 0.0); + move(-0.5, 0.0); return; case 'KeyD': - move(0.0, 8); - return; - - case 'Space': - if (context.flying) { - context.camera.position[1] += 8 / 60; - } - return; - - case 'ShiftLeft': - context.camera.position[1] -= 8 / 60; + move(0.0, 0.5); return; } }); } +function updateBodyPhysics(time, body, parentBody) { + if (parentBody !== undefined) { + const mu = parentBody.mass; + const {position, velocity} = getCartesianState(body.orbit, mu, time); + body.position = [ + parentBody.position[0] + position[0], + parentBody.position[1] + position[1], + parentBody.position[2] + position[2], + ]; + body.velocity = [ + parentBody.velocity[0] + velocity[0], + parentBody.velocity[1] + velocity[1], + parentBody.velocity[2] + velocity[2], + ]; + } else { + body.position = [0, 0, 0]; + body.velocity = [0, 0, 0]; + } + body.orientation = getOrientation(body, time); + + if (body.children !== undefined) { + for (const child of body.children) { + updateBodyPhysics(time, child, body); + } + } +} + +function findSoi(context) { + const bodies = [context.universe]; + let body; + while (bodies.length > 0) { + body = bodies.shift(); + + if (body.children === undefined) { + return body; + } + + for (const child of body.children) { + const soi = child.orbit.semimajorAxis * Math.pow(child.mass / body.mass, 2/5); + const pos = context.player.position; + const bod = child.position; + const dr = [pos[0] - bod[0], pos[1] - bod[1], pos[2] - bod[2]]; + if (dr[0]**2 + dr[1]**2 + dr[2]**2 < soi**2) { + bodies.push(child); + } + } + } + + return body; +} + +function computeOrbit(player, body, time) { + const {cross, diff, norm, dot, scale} = linalg; + const rvec = diff(player.position, body.position); + const r = norm(rvec); + + if (norm(player.velocity) < 1e-6) { + // cheating + console.log('cheating'); + player.velocity = scale(cross([1, 1, 1], rvec), 0.01/(r**2)); + } + const vvec = diff(player.velocity, body.velocity); + const v = norm(vvec); + const Hvec = cross(rvec, vvec); + const H = norm(Hvec); + + const mu = body.mass; + const p = H**2 / mu; + const resinnu = Math.sqrt(p/mu) * dot(vvec, rvec) + const recosnu = p - r; + + const e = Math.sqrt(resinnu**2 + recosnu**2) / r; + + // should also work for hyperbolic orbits + const a = p/(1-e**2); + + const x = scale(rvec, 1/r); + const yy = cross(Hvec, rvec); + const y = scale(yy, 1/norm(yy)); + const z = scale(Hvec, 1/H); + + // Om i and w can be skipped when we just give tf... + let Om = Math.atan2(Hvec[0], -Hvec[1]); + if (Hvec[0] === 0 && Hvec[1] === 0) { + Om = 0; + } + + let i = Math.atan2(Math.sqrt(Hvec[0]**2 + Hvec[1]**2), Hvec[2]); + if (i * Math.sign((Hvec[0] || 1) * Math.sin(Om)) < 0) { + i *= -1; + } + + const nu = Math.atan2(resinnu, recosnu); + + let w = Math.atan2(rvec[2] / r / Math.sin(i), y[2] / Math.sin(i)) || 0 - nu; + + let t0; + let E; + + if (a < 0) { + E = 2 * Math.atanh(Math.sqrt((e-1)/(e+1)) * Math.tan(nu/2)); + const n = Math.sqrt(-mu / (a**3)); + t0 = time - (e*Math.sinh(E) - E) / n; + } else { + E = 2 * Math.atan(Math.sqrt((1-e)/(1+e)) * Math.tan(nu/2)); + const n = Math.sqrt(mu / (a**3)); + t0 = time - (1/n)*(E - e*Math.sin(E)); + } + + // column-major... see se3.js + const tf = se3.product([ + x[0], x[1], x[2], 0, + y[0], y[1], y[2], 0, + z[0], z[1], z[2], 0, + 0, 0, 0, 1, + ], se3.rotz(-nu)); + + const orbit = { + excentricity: e, + semimajorAxis: a, + inclination: i, + ascendingNodeLongitude: Om, + periapsisArgument: w, + t0, + tf, + lastE: E, + }; + + return orbit; +} + function updatePhysics(time, context) { + const {player} = context; + const dt = time - (context.lastTime || 0); + context.lastTime = time; + + player.position = se3.apply(player.tf, [0, 0, 0, 1]); + + updateBodyPhysics(time, context.universe); + + if (!context.flying) { + if (context.orbit === undefined) { + const newPos = linalg.add(player.position, linalg.scale(player.velocity, dt)); + const dx = linalg.diff(newPos, player.position); + player.tf = se3.product(se3.translation(...dx), player.tf); + + const body = findSoi(context); + context.orbit = computeOrbit(player, body, time); + console.log(`orbiting ${body.name}, excentricity: ${context.orbit.excentricity}`); + context.orbitBody = body; + } else { + const {position: orbitPos, velocity: orbitVel} = getCartesianState( + context.orbit, context.orbitBody.mass, time); + if (orbitPos === undefined) { + const newPos = linalg.add(player.position, linalg.scale(player.velocity, dt)); + const dx = linalg.diff(newPos, player.position); + player.tf = se3.product(se3.translation(...dx), player.tf); + } else { + const position = linalg.add(orbitPos, context.orbitBody.position); + const velocity = linalg.add(orbitVel, context.orbitBody.velocity); + player.velocity = velocity; + const dx = linalg.diff(position, player.position); + player.tf = se3.product(se3.translation(...dx), player.tf); + } + } + } + } function updateGeometry(context, timeout_ms = 10) { @@ -358,7 +934,7 @@ function updateGeometry(context, timeout_ms = 10) { function normalizeAngle(theta) { const twopi = 2 * Math.PI; - return theta - twopi * Math.floor((theta + twopi) / twopi); + return theta - twopi * Math.floor((theta + Math.PI) / twopi); } /** Let's be honest I should clean this up. @@ -449,7 +1025,7 @@ function makeOrbitObject(context, orbit, parentPosition) { const glContext = context.orbitGlContext; const orientation = [ se3.rotz(orbit.ascendingNodeLongitude), - se3.roty(-orbit.inclination), + se3.rotx(orbit.inclination), se3.rotz(orbit.periapsisArgument), ].reduce(se3.product); @@ -482,43 +1058,43 @@ function makeOrbitObject(context, orbit, parentPosition) { }; } -function getObjects(context, body, time, parentBody, parentPosition) { - const kGravitationalConstant = 6.674e-11; +const kGravitationalConstant = 6.674e-11; + +function getObjects(context, body, parentPosition) { const objects = []; const {gl, glContext} = context; - let position = [0, 0, 0]; - if (parentBody !== undefined) { -// const mu = kGravitationalConstant * parentBody.mass; - const mu = 10; - const coord = getCartesianPosition(body.orbit, mu, time); - position = [ - parentPosition[0] + coord[0], - parentPosition[1] + coord[1], - parentPosition[2] + coord[2], - ]; + const {position, orientation} = body; - objects.push(makeOrbitObject(context, body.orbit, parentPosition)); + if (body.glBuffer === undefined) { + body.glBuffer = makeBufferFromFaces(gl, body.geometry); } objects.push({ - geometry: makeBufferFromFaces(gl, body.geometry), - orientation: getOrientation(body, time), + geometry: body.glBuffer, + orientation, position, glContext, }); + if (parentPosition !== undefined) { + const orbitObject = makeOrbitObject(context, body.orbit, parentPosition); + objects.push(orbitObject); + } if (body.children !== undefined) { for (const child of body.children) { - objects.push(...getObjects(context, child, time, body, position)); + objects.push(...getObjects(context, child, position)); } } return objects; } -function draw(context, time) { - const {gl, camera, universe} = context; - const objects = getObjects(context, universe, time * 0.001); +function draw(context) { + const {gl, camera, player, universe} = context; + const objects = getObjects(context, universe); + if (context.orbit !== undefined && context.orbit.excentricity < 1) { + objects.push(makeOrbitObject(context, context.orbit, context.orbitBody.position)); + } gl.clearColor(...context.skyColor, 1.0); gl.clearDepth(1.0); @@ -532,13 +1108,7 @@ function draw(context, time) { gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); - const camrot = camera.orientation; - const campos = camera.position; - const viewMatrix = se3.product( - se3.rotxyz(-camrot[0], -camrot[1], -camrot[2]), - se3.translation(-campos[0], -campos[1], -campos[2]) - ); - + const viewMatrix = se3.inverse(se3.product(context.player.tf, context.camera.tf)); let lastGlContext; for (const {position, orientation, geometry, glContext} of objects) { @@ -565,9 +1135,9 @@ function draw(context, time) { function tick(time, context) { handleInput(context); - updatePhysics(time, context); + updatePhysics(time * 0.001, context); - const campos = context.camera.position; + const campos = context.player.position; // world generation / geometry update { @@ -577,7 +1147,7 @@ function tick(time, context) { updateGeometry(context, timeLeft); } - draw(context, time); + draw(context); const dt = (time - context.lastFrameTime) * 0.001; context.lastFrameTime = time; @@ -617,55 +1187,6 @@ function makeObjects(gl) { ]; } -function makeSolarSystem(gl) { - return { - mass: 1.0, - spin: [0, 1.0, 0], - geometry: makeCube([0, 4]), - children: [ - { - mass: 0.1, - spin: [0.2, 0.0, 0.0], - geometry: makeCube([0, 8]), - orbit: { - excentricity: 0, - semimajorAxis: 3, - inclination: 0, - ascendingNodeLongitude: 0, - periapsisArgument: 0, - trueAnomaly: 0, - }, - }, - { - mass: 0.1, - spin: [0.2, 0.0, 0.0], - geometry: makeCube([0, 1]), - orbit: { - excentricity: 0.8, - semimajorAxis: 5, - inclination: 0, - ascendingNodeLongitude: 0, - periapsisArgument: 0, - trueAnomaly: 0, - }, - }, - { - mass: 0.1, - spin: [0.0, 0.0, 1.0], - geometry: makeCube([9, 9]), - orbit: { - excentricity: 0.3, - semimajorAxis: 5, - inclination: 1.0, - ascendingNodeLongitude: 0, - periapsisArgument: 0, - trueAnomaly: 0, - }, - }, - ], - } -} - async function main() { const canvas = document.querySelector('#game'); // adjust canvas aspect ratio to that of the screen @@ -679,12 +1200,16 @@ async function main() { const context = { gl, - projMatrix: se3.perspective(Math.PI / 3, canvas.clientWidth / canvas.clientHeight, 0.1, 100.0), - camera: { + projMatrix: se3.perspective(Math.PI / 3, canvas.clientWidth / canvas.clientHeight, 0.1, 10000.0), + player: { + tf: se3.translation(0.0, 0.0, 2.0), position: [0.0, 0.0, 2.0], - orientation: [0.0, 0.0, 0.0], velocity: [0, 0, 0], }, + camera: { + orientation: [0, 0, 0], + tf: se3.identity(), + }, keys: new Set(), lightDirection: [-0.2, -0.5, 0.4], skyColor: [0.10, 0.15, 0.2], @@ -695,7 +1220,7 @@ async function main() { gravity: -17, jumpForce: 6.5, // objects: makeObjects(gl), - universe: makeSolarSystem(gl), + universe: getSolarSystem(0), }; context.glContext = await initWorldGl(gl);