Paul Mathieu
4a9bca98ef
Once landed, position is locked to the body it landed on. Not enough fuel to launch again.
528 lines
16 KiB
TypeScript
528 lines
16 KiB
TypeScript
import { makeFace } from 'wmc-common/geometry';
|
|
|
|
import * as linalg from './linalg';
|
|
import { loadObjModel } from './obj';
|
|
import * as se3 from 'wmc-common/se3';
|
|
import { computeOrbit, findSoi, getCartesianState, updateBodyPhysics, isInSoi } from './orbit';
|
|
import { getBodyGeometry, castRay, BlockType } from './chunk';
|
|
import { draw, getOrbitDrawContext, initWorldGl } from './draw';
|
|
import * as quat from './quat';
|
|
|
|
const kEpoch = 0;
|
|
|
|
function closeToPlanet(context) {
|
|
const body = findSoi(context.universe, context.player.position);
|
|
const relativePos = linalg.diff(context.player.position, body.position);
|
|
|
|
return linalg.norm(relativePos) < 20;
|
|
}
|
|
|
|
function getSolarSystem(seed: number) {
|
|
/// XXX: only returns 1 body for now
|
|
|
|
return {
|
|
name: 'Tat',
|
|
|
|
mass: 1000.0,
|
|
spin: [0, 0, 0.2],
|
|
|
|
geometry: getBodyGeometry(0),
|
|
glowColor: [0.5, 0.5, 0.46],
|
|
|
|
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: HTMLCanvasElement, context) {
|
|
const canvasClickHandler = () => {
|
|
canvas.requestPointerLock();
|
|
canvas.onclick = null;
|
|
// const clickListener = e => {
|
|
// switch(e.button) {
|
|
// case 0: // left click
|
|
// destroySelectedBlock(context);
|
|
// break;
|
|
// case 2: // right click
|
|
// makeDirBlock(context);
|
|
// break;
|
|
// }
|
|
// };
|
|
const clickListener = e => {};
|
|
const keyListener = e => {
|
|
if (e.type === 'keydown') {
|
|
if (e.repeat) return;
|
|
context.keys.add(e.code);
|
|
|
|
switch (e.code) {
|
|
case 'KeyF':
|
|
context.flying = !context.flying;
|
|
context.player.velocity = [0, 0, 0];
|
|
delete context.orbit;
|
|
return false;
|
|
case 'KeyL':
|
|
context.landing = !context.landing;
|
|
return false;
|
|
case 'Space':
|
|
context.pause = !context.pause;
|
|
return false;
|
|
}
|
|
} else {
|
|
context.keys.delete(e.code);
|
|
}
|
|
};
|
|
const moveListener = e => {
|
|
// context.camera.orientation[0] -= e.movementY / 500;
|
|
// context.camera.orientation[1] -= e.movementX / 500;
|
|
context.camera.tf =[
|
|
context.camera.tf,
|
|
se3.roty(-e.movementX / 500),
|
|
se3.rotx(-e.movementY / 500),
|
|
].reduce(se3.product);
|
|
};
|
|
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 => {
|
|
if (e.repeat) return;
|
|
switch (e.code) {
|
|
case 'F11':
|
|
canvas.requestFullscreen();
|
|
break;
|
|
}
|
|
});
|
|
}
|
|
|
|
function handleInput(context) {
|
|
const move = (forward: number, right: number) => {
|
|
if (context.keys.has('ShiftLeft')) {
|
|
forward *= 10;
|
|
right *= 10;
|
|
}
|
|
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,
|
|
se3.translation(...dir),
|
|
].reduce(se3.product);
|
|
} else {
|
|
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;
|
|
}
|
|
};
|
|
|
|
const roll = (amount: number) => {
|
|
if (context.keys.has('ShiftLeft')) {
|
|
amount *= 10;
|
|
}
|
|
context.camera.tf =[
|
|
context.camera.tf,
|
|
se3.rotz(amount),
|
|
].reduce(se3.product);
|
|
};
|
|
|
|
context.keys.forEach(key => {
|
|
switch (key) {
|
|
case 'KeyW':
|
|
move(0.5, 0.0);
|
|
return;
|
|
case 'KeyA':
|
|
move(0.0, -0.5);
|
|
return;
|
|
case 'KeyS':
|
|
move(-0.5, 0.0);
|
|
return;
|
|
case 'KeyD':
|
|
move(0.0, 0.5);
|
|
return;
|
|
case 'KeyQ':
|
|
roll(0.02);
|
|
return;
|
|
case 'KeyE':
|
|
roll(-0.02);
|
|
return;
|
|
case 'KeyR':
|
|
context.timeOffset += 1;
|
|
return;
|
|
}
|
|
});
|
|
}
|
|
|
|
function slerp(current: linalg.Mat4, target: linalg.Mat4, maxVelocity: number) : linalg.Mat4 {
|
|
const q0 = quat.mat2Quat(current);
|
|
let q1 = quat.mat2Quat(target);
|
|
|
|
const dq = quat.diff(q1, q0);
|
|
const maxt = maxVelocity / quat.norm(dq);
|
|
|
|
//const q = quat.normalize(quat.add(q0, quat.scale(dq, Math.min(1, maxt))));
|
|
const t = maxVelocity;
|
|
if (quat.dot(q0, q1) < 0) {
|
|
q1 = quat.scale(q1, -1);
|
|
}
|
|
const q = quat.normalize(quat.add(quat.scale(q0, 1 - t), quat.scale(q1, t)));
|
|
return quat.quat2Mat(q);
|
|
}
|
|
|
|
function distanceToGround(body: Body, position: number[], direction: number[]) : number {
|
|
const inChunkOrientation = se3.inverse(body.orientation);
|
|
const toChunk = vec => se3.apply(inChunkOrientation, vec.concat([0]));
|
|
const directionInChunk = toChunk(direction);
|
|
const positionInChunk = toChunk(linalg.diff(position, body.position));
|
|
|
|
const hit = castRay(body.geometry.chunkMap, positionInChunk, directionInChunk);
|
|
|
|
if (hit === undefined || hit.block.type === BlockType.UNDEFINED || hit.block.type === undefined) {
|
|
const ray = linalg.diff(position, body.position);
|
|
return {
|
|
distance: linalg.norm(ray),
|
|
normal: linalg.normalize(ray),
|
|
};
|
|
}
|
|
|
|
const distance = linalg.norm(linalg.diff(positionInChunk, hit.block.centerPosition));
|
|
const normal = se3.apply(body.orientation, hit.normal.concat([0]));
|
|
return {distance, normal};
|
|
}
|
|
|
|
function autoLand(context) {
|
|
const p = context.player;
|
|
// 0. check prereqs:
|
|
// - none
|
|
// 1. adjust tangential speed to match body rotational
|
|
// 2. cast ray towards center
|
|
// 3. while high, go towards center
|
|
// 4. when low, go towards ground
|
|
// 5. stop when on ground
|
|
const kShipRotateSpeed = 0.1;
|
|
|
|
const body = findSoi(context.universe, p.position);
|
|
const toBodyCenter = linalg.diff(body.position, p.position);
|
|
const {distance: altitude, normal: surfaceNormal} = distanceToGround(body, p.position, linalg.normalize(toBodyCenter));
|
|
|
|
// figure out tangential speed
|
|
const spinSpeed = linalg.add(body.velocity, linalg.cross(body.spin, linalg.scale(toBodyCenter, -1)));
|
|
const dv = linalg.diff(spinSpeed, p.velocity);
|
|
// remove vertical component
|
|
const vertical = linalg.scale(surfaceNormal, -linalg.dot(dv, surfaceNormal));
|
|
const smallDv = linalg.scale(linalg.add(dv, vertical), 0.01);
|
|
// const smallDv = linalg.scale(dv, 0.05);
|
|
p.velocity = linalg.add(p.velocity, smallDv);
|
|
|
|
// up is up
|
|
const shipZ = se3.apply(p.tf, [0, 0, 1, 0]);
|
|
const ny = surfaceNormal;
|
|
const nx = linalg.normalize(linalg.cross(ny, shipZ));
|
|
const nz = linalg.normalize(linalg.cross(nx, ny));
|
|
|
|
const targetOrientation = se3.fromBases(nx, ny, nz);
|
|
const currentOrientation = slerp(p.tf, targetOrientation, kShipRotateSpeed);
|
|
p.tf = se3.setOrientation(p.tf, currentOrientation);
|
|
|
|
if (altitude < 1.5) {
|
|
const upward = linalg.dot(linalg.diff(p.velocity, body.velocity), surfaceNormal);
|
|
if (upward < -2) {
|
|
p.velocity = linalg.add(p.velocity, linalg.scale(surfaceNormal, -2*upward));
|
|
context.landing = false;
|
|
} else if (upward < 0) {
|
|
context.landed = true;
|
|
context.landedBody = body;
|
|
|
|
p.tf = [
|
|
se3.inverse(body.orientation),
|
|
se3.inverse(se3.translation(...body.position)),
|
|
p.tf,
|
|
].reduce(se3.product);
|
|
p.velocity = [0, 0, 0];
|
|
p.position = se3.apply(p.tf, [0, 0, 0, 1]);
|
|
}
|
|
}
|
|
// p.velocity = linalg.add(p.velocity, linalg.scale(surfaceNormal, dvup));
|
|
}
|
|
|
|
function effectiveGravity(position: number[], rootBody: Body) : number[] {
|
|
let body = rootBody;
|
|
let acceleration = [0, 0, 0];
|
|
while (body !== undefined) {
|
|
const toBodyCenter = linalg.diff(body.position, position);
|
|
const d = linalg.norm(toBodyCenter);
|
|
const gravity = body.mass / d**3;
|
|
acceleration = linalg.add(acceleration, linalg.scale(toBodyCenter, gravity));
|
|
|
|
const parentMass = body.mass;
|
|
const children = body.children || [];
|
|
body = undefined;
|
|
for (const child of children) {
|
|
if (!isInSoi(child, parentMass, position)) {
|
|
continue;
|
|
}
|
|
body = child;
|
|
break;
|
|
}
|
|
}
|
|
|
|
return acceleration;
|
|
}
|
|
|
|
function updatePhysics(time: number, context) {
|
|
const {player} = context;
|
|
const dt = time - (context.lastTime || 0);
|
|
context.lastTime = time;
|
|
|
|
player.position = se3.apply(player.tf, [0, 0, 0, 1]);
|
|
|
|
if (!context.pause) {
|
|
updateBodyPhysics(time, context.universe);
|
|
}
|
|
|
|
const kShipRotateSpeed = 0.1;
|
|
|
|
if (context.landed) {
|
|
return; // TODO: implement
|
|
}
|
|
|
|
if (context.landing) {
|
|
autoLand(context);
|
|
} else {
|
|
// allow acdjusting camera
|
|
const dr = slerp(se3.identity(), context.camera.tf, kShipRotateSpeed);
|
|
player.tf = se3.product(player.tf, dr);
|
|
context.camera.tf = se3.product(context.camera.tf, se3.inverse(dr));
|
|
}
|
|
|
|
if (context.flying) {
|
|
// no physics, just magically moving around
|
|
return;
|
|
}
|
|
|
|
const gravity = effectiveGravity(player.position, context.universe);
|
|
player.velocity = linalg.add(player.velocity, linalg.scale(gravity, dt));
|
|
|
|
const newPos = linalg.add(player.position, linalg.scale(player.velocity, dt));
|
|
player.tf = se3.setPosition(player.tf, newPos);
|
|
|
|
if (context.orbit === undefined) {
|
|
const body = findSoi(context.universe, context.player.position);
|
|
context.orbit = computeOrbit(player, body, time);
|
|
console.log(`orbiting ${body.name}, excentricity: ${context.orbit.excentricity}`);
|
|
context.orbitBody = body;
|
|
}
|
|
}
|
|
|
|
function updateGeometry(context, timeout_ms = 10) {
|
|
}
|
|
|
|
function tick(time: number, context) {
|
|
handleInput(context);
|
|
const simTime = time * 0.001 + context.timeOffset;
|
|
updatePhysics(simTime, context);
|
|
|
|
// world generation / geometry update
|
|
{
|
|
// frame time is typically 16.7ms, so this may lag a bit
|
|
let timeLeft = 10;
|
|
const start = performance.now();
|
|
updateGeometry(context, timeLeft);
|
|
}
|
|
|
|
draw(context);
|
|
|
|
const dt = (time - context.lastFrameTime) * 0.001;
|
|
context.lastFrameTime = time;
|
|
|
|
document.querySelector('#fps')!.textContent = `${1.0 / dt} fps`;
|
|
|
|
requestAnimationFrame(time => tick(time, context));
|
|
}
|
|
|
|
function makeCube(texture) {
|
|
return {
|
|
faces: [
|
|
makeFace('-x', texture, [-0.5, 0, 0]),
|
|
makeFace('+x', texture, [+0.5, 0, 0]),
|
|
makeFace('-y', texture, [0, -0.5, 0]),
|
|
makeFace('+y', texture, [0, +0.5, 0]),
|
|
makeFace('-z', texture, [0, 0, -0.5]),
|
|
makeFace('+z', texture, [0, 0, +0.5]),
|
|
]
|
|
};
|
|
}
|
|
|
|
async function main() {
|
|
const canvas = document.querySelector('#game')! as HTMLCanvasElement;
|
|
// adjust canvas aspect ratio to that of the screen
|
|
canvas.height = screen.height / screen.width * canvas.width;
|
|
const gl = canvas.getContext('webgl');
|
|
|
|
if (gl === null) {
|
|
console.error('webgl not available')
|
|
return;
|
|
}
|
|
|
|
// TODO
|
|
// [ ] loading bar
|
|
// [x] spaceship
|
|
// [ ] landing
|
|
// [ ] huge planets
|
|
// [x] lighting
|
|
// [x] better lighting
|
|
// [ ] betterer lighting
|
|
// [x] optimize geometry generation
|
|
|
|
const modelPromise = loadObjModel('spaceship.obj');
|
|
|
|
const context = {
|
|
gl,
|
|
projMatrix: se3.perspective(Math.PI / 3, canvas.clientWidth / canvas.clientHeight, 0.1, 10000.0),
|
|
player: {
|
|
tf: se3.translation(0.0, 0.0, 80.0),
|
|
position: [0.0, 0.0, 80.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],
|
|
ambiantLight: 0.4,
|
|
blockSelectDistance: 8,
|
|
flying: true,
|
|
isOnGround: false,
|
|
gravity: -17,
|
|
jumpForce: 6.5,
|
|
universe: getSolarSystem(0),
|
|
timeOffset: 0,
|
|
};
|
|
|
|
context.glContext = await initWorldGl(gl);
|
|
context.orbitGlContext = getOrbitDrawContext(gl);
|
|
initUiListeners(canvas, context);
|
|
|
|
const starshipGeom = await modelPromise;
|
|
|
|
context.spaceship = starshipGeom;
|
|
|
|
requestAnimationFrame(time => tick(time, context));
|
|
}
|
|
|
|
window.onload = main;
|