409 lines
13 KiB
TypeScript
409 lines
13 KiB
TypeScript
import { makeFace } from '../geometry';
|
|
|
|
import * as linalg from './linalg';
|
|
import { loadObjModel } from './obj';
|
|
import * as se3 from '../se3';
|
|
import { computeOrbit, findSoi, getCartesianState, updateBodyPhysics } from './orbit';
|
|
import { getBodyGeometry } 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':
|
|
if (closeToPlanet(context)) {
|
|
context.landing = True;
|
|
}
|
|
return false;
|
|
case 'Space':
|
|
if (!context.flying) {
|
|
if (context.jumpAmount > 0) {
|
|
const amount = context.jumpForce;
|
|
context.player.velocity[1] = amount;
|
|
context.jumpAmount -= 1;
|
|
}
|
|
}
|
|
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;
|
|
}
|
|
};
|
|
|
|
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 'KeyR':
|
|
context.timeOffset += 1;
|
|
return;
|
|
}
|
|
});
|
|
}
|
|
|
|
function slerp(current: linalg.Mat4, target: linalg.Mat4, maxVelocity: number) : linalg.Mat4 {
|
|
const q0 = quat.mat2Quat(current);
|
|
const 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))));
|
|
return quat.quat2Mat(q);
|
|
}
|
|
|
|
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]);
|
|
|
|
updateBodyPhysics(time, context.universe);
|
|
|
|
const dr = slerp(se3.identity(), context.camera.tf, 0.007);
|
|
player.tf = se3.product(player.tf, dr);
|
|
context.camera.tf = se3.product(context.camera.tf, se3.inverse(dr));
|
|
|
|
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.universe, context.player.position);
|
|
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) {
|
|
}
|
|
|
|
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 [
|
|
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;
|
|
console.log(`loaded ${starshipGeom.length} triangles`);
|
|
|
|
context.spaceship = starshipGeom;
|
|
|
|
requestAnimationFrame(time => tick(time, context));
|
|
}
|
|
|
|
window.onload = main; |