orbit: fix planets not orbiting

now with wavefront .obj format support

skycraft/chunk.ts

@@ -0,0 +1,313 @@
+import { makeFace } from '../geometry';
+import * as linalg from './linalg';
+import {memoize} from '../memoize';
+
+type direction = ('-x' | '+x' | '-y' | '+y' | '-z' | '+z');
+
+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 makeDirtBlock(seed: number) {
+    // 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,
+        seed,
+    };
+}
+
+function makeSunChunk(seed: number, i: number, j: number, k: number) {
+    const cs = CHUNKSIZE;
+    const radius = 42;
+    if (Math.abs(cs * i) > radius
+        || Math.abs(cs * j) > radius
+        || Math.abs(cs * k) > radius) {
+        return undefined;
+    }
+    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],
+        layout: [i, j, k],
+        blocks,
+        seed,
+        underground,
+    };
+}
+
+function _getChunk(seed: number, chunkX: number, chunkY: number, chunkZ: number) {
+    if (seed === 0) {
+        return makeSunChunk(seed, chunkX, chunkY, chunkZ);
+    }
+    if (chunkX === 0 && chunkY === 0 && chunkZ === 0) {
+        return makeDirtBlock(seed);  // x, y, z unused right now
+    }
+    return undefined;
+}
+const getChunk = memoize(_getChunk);
+
+function faceTexture(type: number, dir: direction) {
+    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: linalg.Vec3, dir: direction) {
+        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 neighborChunk(dir: direction) {
+        const [chunkX, chunkY, chunkZ] = chunk.layout;
+        if (chunk.neighbors === undefined) {
+            chunk.neighbors = {};
+        }
+        if (!(dir in chunk.neighbors)) {
+            switch (dir) {
+                case '-x':
+                    chunk.neighbors[dir] = getChunk(chunk.seed, chunkX - 1, chunkY, chunkZ);
+                    break;
+                case '+x':
+                    chunk.neighbors[dir] = getChunk(chunk.seed, chunkX + 1, chunkY, chunkZ);
+                    break;
+                case '-y':
+                    chunk.neighbors[dir] = getChunk(chunk.seed, chunkX, chunkY - 1, chunkZ);
+                    break;
+                case '+y':
+                    chunk.neighbors[dir] = getChunk(chunk.seed, chunkX, chunkY + 1, chunkZ);
+                    break;
+                case '-z':
+                    chunk.neighbors[dir] = getChunk(chunk.seed, chunkX, chunkY, chunkZ - 1);
+                    break;
+                case '+z':
+                    chunk.neighbors[dir] = getChunk(chunk.seed, chunkX, chunkY, chunkZ + 1);
+                    break;
+            }
+        }
+        return chunk.neighbors[dir];
+    }
+
+    const neighborIndices = {
+        '-x': (x, y, z) => z * cs * cs + y * cs + (cs - 1),
+        '+x': (x, y, z) => z * cs * cs + y * cs + 0,
+        '-y': (x, y, z) => z * cs * cs + (cs - 1) * cs + x,
+        '+y': (x, y, z) => z * cs * cs + 0 * cs + x,
+        '-z': (x, y, z) => (cs - 1) * cs * cs + y * cs + x,
+        '+z': (x, y, z) => 0 * cs * cs + y * cs + x,
+    };
+
+    function neighborBlock(dir: direction, x, y, z) {
+        const neighbor = neighborChunk(dir);
+        let block;
+        if (neighbor === undefined) {
+            block = BlockType.AIR;
+        } else {
+            block = neighbor.blocks[neighborIndices[dir](x, y, z)];
+        }
+        return { dir, block };
+    }
+
+    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 neighborBlock('-x', x, y, z);
+        }
+        if (x < cs - 1) {
+            yield {
+                block: chunk.blocks[idx + 1],
+                dir: '+x',
+            };
+        } else {
+            yield neighborBlock('+x', x, y, z);
+        }
+        if (y > 0) {
+            yield {
+                block: chunk.blocks[idx - cs],
+                dir: '-y',
+            };
+        } else {
+            yield neighborBlock('-y', x, y, z);
+        }
+        if (y < cs - 1) {
+            yield {
+                block: chunk.blocks[idx + cs],
+                dir: '+y',
+            };
+        } else {
+            yield neighborBlock('+y', x, y, z);
+        }
+        if (z > 0) {
+            yield {
+                block: chunk.blocks[idx - cs * cs],
+                dir: '-z',
+            };
+        } else {
+            yield neighborBlock('-z', x, y, z);
+        }
+        if (z < cs - 1) {
+            yield {
+                block: chunk.blocks[idx + cs * cs],
+                dir: '+z',
+            };
+        } else {
+            yield neighborBlock('+z', x, y, 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, dir), faceCenter(bkpos, dir));
+                }
+            }
+        }
+    }
+}
+
+function getBodyChunks(seed: number) {
+    const chunks = [];
+    const toCheck = [[0, 0, 0]];
+    while (toCheck.length > 0) {
+        const [chunkX, chunkY, chunkZ] = toCheck.pop();
+        const thisChunk = getChunk(seed, chunkX, chunkY, chunkZ);
+        if (thisChunk === undefined || chunks.includes(thisChunk)) {
+            continue;
+        }
+        chunks.push(thisChunk);
+        toCheck.push([chunkX - 1, chunkY, chunkZ]);
+        toCheck.push([chunkX + 1, chunkY, chunkZ]);
+        toCheck.push([chunkX, chunkY - 1, chunkZ]);
+        toCheck.push([chunkX, chunkY + 1, chunkZ]);
+        toCheck.push([chunkX, chunkY, chunkZ - 1]);
+        toCheck.push([chunkX, chunkY, chunkZ + 1]);
+    }
+    return chunks;
+}
+
+export function getBodyGeometry(seed: number) {
+    const faces = getBodyChunks(seed)
+        .filter(chunk => !chunk.underground)
+        .map(chunk => [...makeChunkFaces(chunk)]);
+
+    return faces.reduce((a, b) => a.concat(b));
+}

skycraft/draw.ts

@@ -0,0 +1,335 @@
+import {makeBufferFromFaces } from '../geometry';
+import { loadTexture, makeProgram } from '../gl';
+import * as linalg from './linalg';
+import * as se3 from '../se3';
+import { makeOrbitObject } from './orbit';
+
+const VSHADER = `
+attribute vec3 aPosition;
+attribute vec3 aNormal;
+attribute vec2 aTextureCoord;
+
+uniform mat4 uProjection;
+uniform mat4 uModel;
+uniform mat4 uView;
+uniform vec3 uLightDirection;
+uniform float uAmbiantLight;
+uniform vec3 uGlowColor;
+
+varying highp vec2 vTextureCoord;
+varying lowp vec3 vLighting;
+varying lowp vec3 vRay;
+varying lowp vec3 vLightDir;
+varying lowp vec3 vNormal;
+
+highp mat3 transpose(in highp mat3 inmat) {
+    highp vec3 x = inmat[0];
+    highp vec3 y = inmat[1];
+    highp vec3 z = inmat[2];
+
+    return mat3(
+        vec3(x.x, y.x, z.x),
+        vec3(x.y, y.y, z.y),
+        vec3(x.z, y.z, z.z)
+    );
+}
+
+void main() {
+    highp mat4 modelview = uView * uModel;
+
+    gl_Position = uProjection * modelview * vec4(aPosition, 1.0);
+
+    lowp vec3 normal = mat3(uModel) * aNormal;
+    lowp float diffuseAmount = max(dot(-uLightDirection, normal), 0.0);
+    lowp vec3 ambiant = uAmbiantLight * vec3(1.0, 1.0, 0.9);
+    vLighting = ambiant + vec3(1.0, 1.0, 1.0) * diffuseAmount + uGlowColor;
+
+    vTextureCoord = aTextureCoord;
+
+    lowp vec3 camPos = -transpose(mat3(uView))*(uView * vec4(0.0, 0.0, 0.0, 1.0)).xyz;
+    vRay = -normalize((uModel * vec4(aPosition, 1.0)).xyz - camPos);
+    vLightDir = -uLightDirection;
+    vNormal = normal;
+}
+`;
+
+const FSHADER = `
+uniform sampler2D uSampler;
+
+varying highp vec2 vTextureCoord;
+varying lowp vec3 vLighting;
+varying lowp vec3 vRay;
+varying lowp vec3 vLightDir;
+varying lowp vec3 vNormal;
+
+void main() {
+    highp vec4 color = texture2D(uSampler, vTextureCoord);
+    if (color.a < 0.1) {
+        discard;
+    }
+    lowp vec3 specularDir = 2.0 * dot(vLightDir, vNormal) * vNormal - vLightDir;
+    lowp float specularAmount = smoothstep(0.92, 1.0, dot(vRay, specularDir));
+    lowp vec3 specular = 0.8 * specularAmount * vec3(1.0, 1.0, 0.8);
+    gl_FragColor = vec4(vLighting * color.rgb + specular, color.a);
+}
+`;
+
+export async function initWorldGl(gl: WebGLRenderingContext) {
+    const program = makeProgram(gl, VSHADER, FSHADER);
+    const texture = await loadTexture(gl, 'texture.png');
+
+    // load those ahead of time
+    const viewLoc = gl.getUniformLocation(program, 'uView');
+    const modelLoc = gl.getUniformLocation(program, 'uModel');
+    const projLoc = gl.getUniformLocation(program, 'uProjection');
+    const samplerLoc = gl.getUniformLocation(program, 'uSampler');
+    const lightDirectionLoc = gl.getUniformLocation(program, 'uLightDirection');
+    const ambiantLoc = gl.getUniformLocation(program, 'uAmbiantLight');
+    const glowColorLoc = gl.getUniformLocation(program, 'uGlowColor');
+
+    const positionLoc = gl.getAttribLocation(program, 'aPosition');
+    const normalLoc = gl.getAttribLocation(program, 'aNormal');
+    const textureLoc = gl.getAttribLocation(program, 'aTextureCoord');
+
+    const setupScene = (sceneParams) => {
+        const {
+            projectionMatrix,
+            viewMatrix,
+            ambiantLightAmount,
+        } = sceneParams;
+
+        gl.useProgram(program);
+
+        gl.uniformMatrix4fv(projLoc, false, new Float32Array(projectionMatrix));
+        gl.uniformMatrix4fv(viewLoc, false, new Float32Array(viewMatrix));
+        gl.uniform1f(ambiantLoc, ambiantLightAmount);
+
+        // doing this here because it's the same for all world stuff
+        gl.uniformMatrix4fv(modelLoc, false, new Float32Array(se3.identity()));
+        gl.uniform1i(samplerLoc, 0);
+
+        gl.enableVertexAttribArray(positionLoc);
+        gl.enableVertexAttribArray(normalLoc);
+        gl.enableVertexAttribArray(textureLoc);
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+    };
+
+    const drawObject = (objectParams) => {
+        const {
+            position,
+            orientation,
+            glBuffer,
+            numVertices,
+            lightDirection,
+            glowColor,
+        } = objectParams;
+
+        gl.uniformMatrix4fv(modelLoc, false, new Float32Array(se3.product(
+            se3.translation(...position), orientation)));
+        gl.uniform3fv(lightDirectionLoc, lightDirection);
+        gl.uniform3fv(glowColorLoc, glowColor);
+
+        gl.bindBuffer(gl.ARRAY_BUFFER, glBuffer);
+
+        gl.vertexAttribPointer(positionLoc, 3, gl.FLOAT, false, 20, 0);
+        gl.vertexAttribPointer(normalLoc, 3, gl.BYTE, true, 20, 12);
+        gl.vertexAttribPointer(textureLoc, 2, gl.UNSIGNED_SHORT, true, 20, 16);
+
+        gl.drawArrays(gl.TRIANGLES, 0, numVertices);
+    };
+
+    return {
+        setupScene,
+        drawObject,
+    };
+}
+
+const ORBIT_VSHADER = `
+attribute vec3 aPosition;
+attribute vec2 aValue;
+
+uniform mat4 uProjection;
+uniform mat4 uModel;
+uniform mat4 uView;
+
+varying lowp vec2 vCoords;
+
+void main() {
+    highp mat4 modelview = uView * uModel;
+    gl_Position = uProjection * modelview * vec4(aPosition, 1.0);
+
+    vCoords = aValue;
+}
+`;
+
+const ORBIT_FSHADER = `
+varying lowp vec2 vCoords;
+
+void main() {
+  lowp float x = vCoords.x;
+  lowp float y = vCoords.y;
+  
+  lowp float f = sqrt(x * x + y * y);
+  
+  if (f > 1.00) {
+    discard;
+  } else if (f < 0.98) {
+    discard;
+  }
+  gl_FragColor = vec4(1, .5, 0, 0.5);
+}
+`;
+
+export function getOrbitDrawContext(gl: WebGLRenderingContext) {
+    const program = makeProgram(gl, ORBIT_VSHADER, ORBIT_FSHADER);
+
+    // load those ahead of time
+    const viewLoc = gl.getUniformLocation(program, 'uView');
+    const modelLoc = gl.getUniformLocation(program, 'uModel');
+    const projLoc = gl.getUniformLocation(program, 'uProjection');
+
+    const positionLoc = gl.getAttribLocation(program, 'aPosition');
+    const valueLoc = gl.getAttribLocation(program, 'aValue');
+
+    const setupScene = (sceneParams) => {
+        const {
+            projectionMatrix,
+            viewMatrix,
+        } = sceneParams;
+
+        gl.useProgram(program);
+
+        gl.uniformMatrix4fv(projLoc, false, new Float32Array(projectionMatrix));
+        gl.uniformMatrix4fv(viewLoc, false, new Float32Array(viewMatrix));
+
+        // doing this here because it's the same for all world stuff
+        gl.uniformMatrix4fv(modelLoc, false, new Float32Array(se3.identity()));
+
+        gl.enableVertexAttribArray(positionLoc);
+        gl.enableVertexAttribArray(valueLoc);
+    };
+
+    const drawObject = (objectParams) => {
+        const {
+            position,
+            orientation,
+            value,
+            glBuffer,
+        } = objectParams;
+
+        gl.uniformMatrix4fv(modelLoc, false, new Float32Array(se3.product(
+            se3.translation(...position), orientation)));
+
+        gl.bindBuffer(gl.ARRAY_BUFFER, glBuffer);
+
+        gl.vertexAttribPointer(positionLoc, 3, gl.FLOAT, false, 20, 0);
+        gl.vertexAttribPointer(valueLoc, 2, gl.FLOAT, false, 20, 12);
+
+        gl.disable(gl.CULL_FACE);
+        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+        gl.enable(gl.CULL_FACE);
+    };
+
+    return {
+        setupScene,
+        drawObject,
+    };
+}
+
+function getObjects(context, body, parentPosition = undefined) {
+    const objects = [];
+    const {gl, glContext, player} = context;
+    const {position, orientation, glowColor} = body;
+
+    if (body.glBuffer === undefined) {
+        body.glBuffer = makeBufferFromFaces(gl, body.geometry);
+    }
+
+    objects.push({
+        geometry: body.glBuffer,
+        orientation,
+        position,
+        glContext,
+        glowColor,
+    });
+    if (parentPosition !== undefined) {
+        const orbitObject = makeOrbitObject(gl, context.orbitGlContext, body.orbit, parentPosition);
+        objects.push(orbitObject);
+    } else {
+        const shipOrientation = [
+            se3.rotationOnly(player.tf),
+            //se3.rotationOnly(context.camera.tf),
+            se3.rotxyz(-Math.PI / 2, Math.PI / 2, Math.PI / 2),
+        ].reduce(se3.product);
+        const shipPos = player.position;
+        objects.push({
+            geometry: makeBufferFromFaces(gl, context.spaceship),
+            orientation: shipOrientation,
+            position: shipPos,
+            glContext,
+        });
+    }
+
+    if (body.children !== undefined) {
+        for (const child of body.children) {
+            objects.push(...getObjects(context, child, position));
+        }
+    }
+
+    return objects;
+}
+
+function sunDirection(position: linalg.Vec3) {
+    return linalg.scale(position, 1/linalg.norm(position));
+}
+
+export function draw(context) {
+    const {gl, camera, player, universe, orbit, orbitGlContext, orbitBody} = context;
+    const {skyColor, ambiantLight, projMatrix} = context;
+    const objects = getObjects(context, universe); 
+    if (orbit !== undefined && orbit.excentricity < 1) {
+        objects.push(makeOrbitObject(gl, orbitGlContext, orbit, orbitBody.position));
+    }
+
+    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 viewMatrix = se3.inverse([
+        player.tf,  // player position & orientation
+        camera.tf,  // camera orientation relative to player
+        se3.translation(0, 1, 4),  // step back from the player
+    ].reduce(se3.product));
+    let lastGlContext;
+
+    for (const {position, orientation, geometry, glContext, glowColor} of objects) {
+        if (glContext !== lastGlContext) {
+            glContext.setupScene({
+                projectionMatrix: projMatrix,
+                viewMatrix,
+                ambiantLightAmount: ambiantLight,
+            });
+        }
+
+        lastGlContext = glContext;
+        const lightDirection = sunDirection(position);
+
+        glContext.drawObject({
+            position,
+            orientation,
+            glBuffer: geometry.glBuffer,
+            numVertices: geometry.numVertices,
+            lightDirection,
+            glowColor: glowColor || [0, 0, 0],
+        });
+    }
+}

skycraft/index.js

@@ -1,710 +0,0 @@
-//import { initUiListeners, setupParamPanel, tick } from './game';
-//import { initWorldGl, makeWorld } from './world';
-import * as se3 from '../se3';
-import {loadTexture, makeProgram} from '../gl';
-import {makeFace, makeBufferFromFaces} from '../geometry';
-
-const VSHADER = `
-attribute vec3 aPosition;
-attribute vec3 aNormal;
-attribute vec2 aTextureCoord;
-
-uniform mat4 uProjection;
-uniform mat4 uModel;
-uniform mat4 uView;
-uniform vec3 uLightDirection;
-uniform float uAmbiantLight;
-
-varying highp vec2 vTextureCoord;
-varying lowp vec3 vLighting;
-varying lowp float vDistance;
-
-void main() {
-    highp mat4 modelview = uView * uModel;
-
-    gl_Position = uProjection * modelview * vec4(aPosition, 1.0);
-
-    lowp vec3 normal = mat3(uModel) * aNormal;
-    lowp float diffuseAmount = max(dot(-uLightDirection, normal), 0.0);
-    lowp vec3 ambiant = uAmbiantLight * vec3(1.0, 1.0, 0.9);
-    vLighting = ambiant + vec3(1.0, 1.0, 1.0) * diffuseAmount;
-
-    vTextureCoord = aTextureCoord;
-
-    vDistance = length(modelview * vec4(aPosition, 1.0));
-}
-`;
-
-const FSHADER = `
-uniform sampler2D uSampler;
-uniform lowp vec3 uFogColor;
-
-varying highp vec2 vTextureCoord;
-varying lowp vec3 vLighting;
-varying lowp float vDistance;
-
-void main() {
-    highp vec4 color = texture2D(uSampler, vTextureCoord);
-    if (color.a < 0.1) {
-        discard;
-    }
-    lowp float fogamount = 0.0; //smoothstep(80.0, 100.0, vDistance);
-    gl_FragColor = mix(vec4(vLighting * color.rgb, color.a), vec4(uFogColor, 1.0), fogamount);
-}
-`;
-
-const kEpoch = 0;
-
-async function initWorldGl(gl) {
-    const program = makeProgram(gl, VSHADER, FSHADER);
-    const texture = await loadTexture(gl, 'texture.png');
-
-    // load those ahead of time
-    const viewLoc = gl.getUniformLocation(program, 'uView');
-    const modelLoc = gl.getUniformLocation(program, 'uModel');
-    const projLoc = gl.getUniformLocation(program, 'uProjection');
-    const samplerLoc = gl.getUniformLocation(program, 'uSampler');
-    const fogColorLoc = gl.getUniformLocation(program, 'uFogColor');
-    const lightDirectionLoc = gl.getUniformLocation(program, 'uLightDirection');
-    const ambiantLoc = gl.getUniformLocation(program, 'uAmbiantLight');
-
-    const positionLoc = gl.getAttribLocation(program, 'aPosition');
-    const normalLoc = gl.getAttribLocation(program, 'aNormal');
-    const textureLoc = gl.getAttribLocation(program, 'aTextureCoord');
-
-    const setupScene = (sceneParams) => {
-        const {
-            projectionMatrix,
-            viewMatrix,
-            fogColor,
-            lightDirection,
-            ambiantLightAmount,
-        } = sceneParams;
-
-        gl.useProgram(program);
-
-        gl.uniformMatrix4fv(projLoc, false, new Float32Array(projectionMatrix));
-        gl.uniformMatrix4fv(viewLoc, false, new Float32Array(viewMatrix));
-        gl.uniform3fv(fogColorLoc, fogColor);
-        gl.uniform3fv(lightDirectionLoc, lightDirection);
-        gl.uniform1f(ambiantLoc, ambiantLightAmount);
-
-        // doing this here because it's the same for all world stuff
-        gl.uniformMatrix4fv(modelLoc, false, new Float32Array(se3.identity()));
-        gl.uniform1i(samplerLoc, 0);
-
-        gl.enableVertexAttribArray(positionLoc);
-        gl.enableVertexAttribArray(normalLoc);
-        gl.enableVertexAttribArray(textureLoc);
-        gl.activeTexture(gl.TEXTURE0);
-        gl.bindTexture(gl.TEXTURE_2D, texture);
-    };
-
-    const drawObject = (objectParams) => {
-        const {
-            position,
-            orientation,
-            glBuffer,
-            numVertices,
-        } = objectParams;
-
-        gl.uniformMatrix4fv(modelLoc, false, new Float32Array(se3.product(
-            se3.translation(...position), orientation)));
-
-        gl.bindBuffer(gl.ARRAY_BUFFER, glBuffer);
-
-        gl.vertexAttribPointer(positionLoc, 3, gl.FLOAT, false, 20, 0);
-        gl.vertexAttribPointer(normalLoc, 3, gl.BYTE, true, 20, 12);
-        gl.vertexAttribPointer(textureLoc, 2, gl.UNSIGNED_SHORT, true, 20, 16);
-
-        gl.drawArrays(gl.TRIANGLES, 0, numVertices);
-    };
-
-    return {
-        setupScene,
-        drawObject,
-    };
-}
-
-const ORBIT_VSHADER = `
-attribute vec3 aPosition;
-attribute vec2 aValue;
-
-uniform mat4 uProjection;
-uniform mat4 uModel;
-uniform mat4 uView;
-
-varying lowp vec2 vCoords;
-
-void main() {
-    highp mat4 modelview = uView * uModel;
-    gl_Position = uProjection * modelview * vec4(aPosition, 1.0);
-
-    vCoords = aValue;
-}
-`;
-
-const ORBIT_FSHADER = `
-varying lowp vec2 vCoords;
-
-void main() {
-  lowp float x = vCoords.x;
-  lowp float y = vCoords.y;
-  
-  lowp float f = sqrt(x * x + y * y);
-  
-  if (f > 1.00) {
-    discard;
-  } else if (f < 0.98) {
-    discard;
-  }
-  gl_FragColor = vec4(1, .5, 0, 0.5);
-}
-`;
-
-function getOrbitDrawContext(gl) {
-    const program = makeProgram(gl, ORBIT_VSHADER, ORBIT_FSHADER);
-
-    // load those ahead of time
-    const viewLoc = gl.getUniformLocation(program, 'uView');
-    const modelLoc = gl.getUniformLocation(program, 'uModel');
-    const projLoc = gl.getUniformLocation(program, 'uProjection');
-
-    const positionLoc = gl.getAttribLocation(program, 'aPosition');
-    const valueLoc = gl.getAttribLocation(program, 'aValue');
-
-    const setupScene = (sceneParams) => {
-        const {
-            projectionMatrix,
-            viewMatrix,
-        } = sceneParams;
-
-        gl.useProgram(program);
-
-        gl.uniformMatrix4fv(projLoc, false, new Float32Array(projectionMatrix));
-        gl.uniformMatrix4fv(viewLoc, false, new Float32Array(viewMatrix));
-
-        // doing this here because it's the same for all world stuff
-        gl.uniformMatrix4fv(modelLoc, false, new Float32Array(se3.identity()));
-
-        gl.enableVertexAttribArray(positionLoc);
-        gl.enableVertexAttribArray(valueLoc);
-    };
-
-    const drawObject = (objectParams) => {
-        const {
-            position,
-            orientation,
-            value,
-            glBuffer,
-        } = objectParams;
-
-        gl.uniformMatrix4fv(modelLoc, false, new Float32Array(se3.product(
-            se3.translation(...position), orientation)));
-
-        gl.bindBuffer(gl.ARRAY_BUFFER, glBuffer);
-
-        gl.vertexAttribPointer(positionLoc, 3, gl.FLOAT, false, 20, 0);
-        gl.vertexAttribPointer(valueLoc, 2, gl.FLOAT, false, 20, 12);
-
-        gl.disable(gl.CULL_FACE);
-        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
-        gl.enable(gl.CULL_FACE);
-    };
-
-    return {
-        setupScene,
-        drawObject,
-    };
-}
-
-function initUiListeners(canvas, 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;
-                        return false;
-                    case 'Space':
-                        if (!context.flying) {
-                            if (context.jumpAmount > 0) {
-                                const amount = context.jumpForce;
-                                context.camera.velocity[1] = amount;
-                                context.jumpAmount -= 1;
-                            }
-                        }
-                        return false;
-                }
-            } else {
-                context.keys.delete(e.code);
-            }
-        };
-        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);
-        };
-        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, 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.isOnGround) {
-            context.camera.velocity[0] = tf[0];
-            context.camera.velocity[2] = tf[2];
-        } 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;
-            }
-        }
-    };
-
-    context.keys.forEach(key => {
-        switch (key) {
-            case 'KeyW':
-                move(8, 0.0);
-                return;
-            case 'KeyA':
-                move(0.0, -8);
-                return;
-            case 'KeyS':
-                move(-8, 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;
-                return;
-        }
-    });
-}
-
-function updatePhysics(time, context) {
-}
-
-function updateGeometry(context, timeout_ms = 10) {
-}
-
-function normalizeAngle(theta) {
-    const twopi = 2 * Math.PI;
-    return theta - twopi * Math.floor((theta + twopi) / twopi);
-}
-
-/** Let's be honest I should clean this up.
- * 
- * This is the part that solves Kepler's equation using Newton's method.
- * For circular-ish orbits, one or two iterations are usually enough.
- * More excentric orbits can take more (6 or 7?).
- * 
- * For near-parabolic orbits (and some others?) it often fails to converge...
- */
-function getCartesianState(orbit, mu, time) {
-    const {
-        excentricity: e,
-        semimajorAxis: a,
-        inclination: i,
-        ascendingNodeLongitude: Om,
-        periapsisArgument: w,
-        t0,
-    } = orbit;
-    let n = Math.sqrt(mu/(a**3));
-    if (a < 0) {
-        n = Math.sqrt(mu/-(a**3));  // mean motion
-    }
-    const M = n * (time - t0);  // mean anomaly
-
-    // Newton's method
-    var E2 = 0;
-    var E = orbit.lastE || M;
-    let iterations = 0;
-    // a clever guess? https://link.springer.com/article/10.1023/A:1008200607490
-    // doesn't work at all.
-
-    while (Math.abs(E - E2) > 1e-10) {
-        if (e < 0.001) {
-            break;
-        }
-        E = E2;
-        if (e < 1) {
-            E2 = E - (E - e * Math.sin(E) - M) / (1 - e * Math.cos(E));
-        } else if (e > 1) {
-            E2 = E - (-E + e * Math.sinh(E) - M) / (e * Math.cosh(E) - 1);
-        } else {
-            E2 = E - (E + E*E*E/3 - M) / (1 + E*E);
-        }
-
-        iterations++;
-        if (iterations > 100) {
-            console.log('numerical instability');
-            return {};
-        }
-    }
-    orbit.lastE = E;
-    let nu;
-    if (e > 1) {
-        nu = 2 * Math.atan(Math.sqrt((e+1) / (e-1)) * Math.tanh(E/2));
-    } else {
-        nu = 2 * Math.atan(Math.sqrt((1+e) / (1-e)) * Math.tan(E/2));
-    }
-    const p = a * (1 - e**2);
-    const r = p / (1 + e * Math.cos(nu));// * ((a < 0) ? -1 : 1);
-    const rd = e * Math.sqrt(mu / p) * Math.sin(nu);
-
-    if (orbit.tf === undefined) {
-        orbit.tf = [se3.rotz(Om), se3.rotx(i), se3.rotz(w)].reduce(se3.product);
-    }
-
-    const tf = se3.product(orbit.tf, se3.rotz(nu));
-    const pos = se3.apply(tf, [r, 0, 0, 1]);
-    const vel = se3.apply(tf, [rd, Math.sqrt(p * mu) / r, 0, 1]);
-
-    return {
-        position: pos.slice(0, 3),
-        velocity: vel.slice(0, 3),
-    };
-}
-
-function getOrientation(body, time) {
-    return se3.rotxyz(
-        body.spin[0] * time,
-        body.spin[1] * time,
-        body.spin[2] * time,
-    );
-}
-
-function makeOrbitObject(context, orbit, parentPosition) {
-    const {gl} = context;
-    const position = parentPosition;
-    const glContext = context.orbitGlContext;
-    const orientation = [
-        se3.rotz(orbit.ascendingNodeLongitude),
-        se3.roty(-orbit.inclination),
-        se3.rotz(orbit.periapsisArgument),
-    ].reduce(se3.product);
-
-    const buffer = gl.createBuffer();
-    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-
-    const a = orbit.semimajorAxis;
-    const b = a * Math.sqrt(1 - orbit.excentricity**2);
-
-    const x = - orbit.semimajorAxis * orbit.excentricity;
-
-    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
-        x-a, -b, 0, -1, -1,
-        x-a, +b, 0, -1, +1,
-        x+a, -b, 0, +1, -1,
-        x+a, +b, 0, +1, +1,
-    ]), gl.STATIC_DRAW);
-
-    const geometry = {
-        glBuffer: buffer,
-        numVertices: 4,
-        delete: () => gl.deleteBuffer(buffer),
-    };
-
-    return {
-        geometry,
-        orientation,
-        position,
-        glContext,
-    };
-}
-
-function getObjects(context, body, time, parentBody, parentPosition) {
-    const kGravitationalConstant = 6.674e-11;
-    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],
-        ];
-
-        objects.push(makeOrbitObject(context, body.orbit, parentPosition));
-    }
-
-    objects.push({
-        geometry: makeBufferFromFaces(gl, body.geometry),
-        orientation: getOrientation(body, time),
-        position,
-        glContext,
-    });
-
-    if (body.children !== undefined) {
-        for (const child of body.children) {
-            objects.push(...getObjects(context, child, time, body, position));
-        }
-    }
-
-    return objects;
-}
-
-function draw(context, time) {
-    const {gl, camera, universe} = context;
-    const objects = getObjects(context, universe, time * 0.001);
-
-    gl.clearColor(...context.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 = 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])
-    );
-
-    let lastGlContext;
-
-    for (const {position, orientation, geometry, glContext} of objects) {
-        if (glContext !== lastGlContext) {
-            glContext.setupScene({
-                projectionMatrix: context.projMatrix,
-                viewMatrix,
-                fogColor: context.skyColor,
-                lightDirection: context.lightDirection,
-                ambiantLightAmount: context.ambiantLight,
-            });
-        }
-
-        lastGlContext = glContext;
-
-        glContext.drawObject({
-            position,
-            orientation,
-            glBuffer: geometry.glBuffer,
-            numVertices: geometry.numVertices,
-        });
-    }
-}
-
-function tick(time, context) {
-    handleInput(context);
-    updatePhysics(time, context);
-
-    const campos = context.camera.position;
-
-    // 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, time);
-
-    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]),
-    ];
-}
-
-function makeObjects(gl) {
-    const texture = [0, 4];
-    const 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]),
-    ];
-    return [
-        {
-            geometry: makeBufferFromFaces(gl, faces),
-            orientation: [0, 0, 0],
-            position: [0, 0, 0],
-        },
-    ];
-}
-
-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
-    canvas.height = screen.height / screen.width * canvas.width;
-    const gl = canvas.getContext('webgl');
-
-    if (gl === null) {
-        console.error('webgl not available')
-        return;
-    }
-
-    const context = {
-        gl,
-        projMatrix: se3.perspective(Math.PI / 3, canvas.clientWidth / canvas.clientHeight, 0.1, 100.0),
-        camera: {
-            position: [0.0, 0.0, 2.0],
-            orientation: [0.0, 0.0, 0.0],
-            velocity: [0, 0, 0],
-        },
-        keys: new Set(),
-        lightDirection: [-0.2, -0.5, 0.4],
-        skyColor: [0.10, 0.15, 0.2],
-        ambiantLight: 0.7,
-        blockSelectDistance: 8,
-        flying: true,
-        isOnGround: false,
-        gravity: -17,
-        jumpForce: 6.5,
-//        objects: makeObjects(gl),
-        universe: makeSolarSystem(gl),
-    };
-
-    context.glContext = await initWorldGl(gl);
-    context.orbitGlContext = getOrbitDrawContext(gl);
-    initUiListeners(canvas, context);
-
-//    setupParamPanel(context);
-
-    requestAnimationFrame(time => tick(time, context));
-}
-
-window.onload = main;

skycraft/index.ts

@@ -0,0 +1,409 @@
+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;

skycraft/linalg.ts

@@ -0,0 +1,41 @@
+export type Vec3 = [number, number, number];
+export type Mat4 = number[];
+
+export function cross(a: Vec3, b: Vec3) : Vec3 {
+    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],
+    ];
+}
+
+export function diff(a: Vec3, b: Vec3) : Vec3 {
+    return [
+        a[0] - b[0],
+        a[1] - b[1],
+        a[2] - b[2],
+    ];
+}
+
+export function add(a: Vec3, b: Vec3) : Vec3 {
+    return [
+        a[0] + b[0],
+        a[1] + b[1],
+        a[2] + b[2],
+    ];
+}
+
+export function norm(a: Vec3) : number {
+    return Math.sqrt(a[0] ** 2 + a[1] ** 2 + a[2] ** 2);
+}
+
+export function dot(a: Vec3, b: Vec3) : number {
+    return a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
+}
+export function scale(a: Vec3, s: number) : Vec3 {
+    return [
+        a[0] * s,
+        a[1] * s,
+        a[2] * s,
+    ];
+}

skycraft/obj.ts

@@ -0,0 +1,74 @@
+function parseObjLine(line: string, obj: any) {
+    line = line.trim();
+    if (line[0] === '#' || line.length < 1) {
+        return;
+    }
+    const elements = line.split(/\s+/);
+    obj[elements[0]].push(elements.slice(1));
+}
+
+function getFaces(obj: any) {
+    return obj.f.map(f => {
+        const face = {
+            'vertices': [],
+            'normals': [],
+            'textures': [],
+        };
+        if (f.length === 4) {  // add duplicate vertices to make triangles
+            f.splice(3, 0, f[0]);
+            f.splice(4, 0, f[2]);
+        }
+        f.forEach(v => {
+            const [vidx, vtidx, vnidx] = v.split('/');
+            face.vertices.push((obj.v[vidx - 1] || []).map(Number));
+            face.normals.push((obj.vn[vnidx - 1] || []).map(Number));
+            //face.textures.push((obj.vt[vtidx] || []).map(Number));
+            face.textures.push([0, 0]);
+        });
+        return face;
+    });
+}
+
+export async function loadObjModel(url: string) {
+    const stlDataStream = (await fetch(url)).body;
+    if (stlDataStream === null) {
+        return Promise.reject(new Error(`Could not fetch ${url}`));
+    }
+    const obj = new Proxy({}, {
+        get: (target, name) =>{
+            if (!(name in target)) {
+                target[name] = [];
+            }
+            return target[name];
+        },
+    });
+
+    return new Promise((resolve, reject) => {
+        let partialLine = "";
+        const reader = stlDataStream.getReader();
+        const decoder = new TextDecoder();
+
+        function pump() {
+            reader.read().then(({ done, value }) => {
+                if (done) {
+                    parseObjLine(partialLine, obj);
+                    return resolve(getFaces(obj));
+                }
+
+                const textInput = decoder.decode(value);
+                const lines = textInput.split('\n');
+
+                if (lines.length > 1) {
+                    parseObjLine(partialLine + lines[0], obj);
+                    partialLine = "";
+                    lines.slice(0, -1).forEach(line => {
+                        parseObjLine(line, obj);
+                    });
+                }
+                partialLine = partialLine + lines.at(-1);
+                pump();
+            });
+        }
+        pump();
+    });
+}

skycraft/orbit.ts

@@ -0,0 +1,280 @@
+import * as se3 from '../se3';
+import * as linalg from './linalg';
+import {Vec3} from './linalg';
+
+interface Orbit {
+    excentricity: number,
+    semimajorAxis: number,
+    inclination: number,
+    ascendingNodeLongitude: number,
+    periapsisArgument: number,
+    t0: number,
+
+    lastE: number | undefined,
+    tf: number[] | undefined,
+}
+
+interface Body {
+    position: Vec3,
+    velocity: Vec3,
+    orientation: Vec3,
+    children: Body[],
+    mass: number,
+    orbit: Orbit,
+    spin: Vec3,
+    name: string,
+}
+
+export function updateBodyPhysics(time: number, body: Body, parentBody : Body | undefined = undefined) {
+    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);
+        }
+    }
+}
+
+export function findSoi(rootBody: Body, position: number[]) : Body {
+    const bodies = [rootBody];
+    let body : 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 = 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!;
+}
+
+export function computeOrbit(player: any, body: Body, time: number) {
+    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;
+}
+
+/** Let's be honest I should clean this up.
+ * 
+ * This is the part that solves Kepler's equation using Newton's method.
+ * For circular-ish orbits, one or two iterations are usually enough.
+ * More excentric orbits can take more (6 or 7?).
+ * 
+ * For near-parabolic orbits (and some others?) it often fails to converge...
+ */
+export function getCartesianState(orbit: Orbit, mu: number, time: number) {
+    const {
+        excentricity: e,
+        semimajorAxis: a,
+        inclination: i,
+        ascendingNodeLongitude: Om,
+        periapsisArgument: w,
+        t0,
+    } = orbit;
+    let n = Math.sqrt(mu/(a**3));
+    if (a < 0) {
+        n = Math.sqrt(mu/-(a**3));  // mean motion
+    }
+    const M = n * (time - t0);  // mean anomaly
+
+    // Newton's method
+    var E2 = 0;
+    var E = M;
+    let iterations = 0;
+    // a clever guess? https://link.springer.com/article/10.1023/A:1008200607490
+    // doesn't work at all.
+
+    while (Math.abs(E - E2) > 1e-10) {
+        if (e < 0.001) {
+            break;
+        }
+        E = E2;
+        if (e < 1) {
+            E2 = E - (E - e * Math.sin(E) - M) / (1 - e * Math.cos(E));
+        } else if (e > 1) {
+            E2 = E - (-E + e * Math.sinh(E) - M) / (e * Math.cosh(E) - 1);
+        } else {
+            E2 = E - (E + E*E*E/3 - M) / (1 + E*E);
+        }
+
+        iterations++;
+        if (iterations > 100) {
+            console.log('numerical instability');
+            return {};
+        }
+    }
+    orbit.lastE = E;
+    let nu;
+    if (e > 1) {
+        nu = 2 * Math.atan(Math.sqrt((e+1) / (e-1)) * Math.tanh(E/2));
+    } else {
+        nu = 2 * Math.atan(Math.sqrt((1+e) / (1-e)) * Math.tan(E/2));
+    }
+    const p = a * (1 - e**2);
+    const r = p / (1 + e * Math.cos(nu));// * ((a < 0) ? -1 : 1);
+    const rd = e * Math.sqrt(mu / p) * Math.sin(nu);
+
+    if (orbit.tf === undefined) {
+        // FIXME: this is actually borken. :/
+        orbit.tf = [se3.rotz(Om), se3.rotx(i), se3.rotz(w)].reduce(se3.product);
+    }
+
+    const tf = se3.product(orbit.tf, se3.rotz(nu));
+    const pos = se3.apply(tf, [r, 0, 0, 1]);
+    const vel = se3.apply(tf, [rd, Math.sqrt(p * mu) / r, 0, 1]);
+
+    return {
+        position: pos.slice(0, 3),
+        velocity: vel.slice(0, 3),
+    };
+}
+
+function getOrientation(body: Body, time: number) {
+    return se3.rotxyz(
+        body.spin[0] * time,
+        body.spin[1] * time,
+        body.spin[2] * time,
+    );
+}
+
+export function makeOrbitObject(gl: WebGLRenderingContext, glContext: any, orbit: Orbit, parentPosition: number[]) {
+    const position = parentPosition;
+    
+    // FIXME: currently borken.
+    // const orientation = [
+    //     se3.rotz(orbit.ascendingNodeLongitude),
+    //     se3.rotx(orbit.inclination),
+    //     se3.rotz(orbit.periapsisArgument),
+    // ].reduce(se3.product);
+    const orientation = orbit.tf;
+
+    const buffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+
+    const a = orbit.semimajorAxis;
+    const b = a * Math.sqrt(1 - orbit.excentricity**2);
+
+    const x = - orbit.semimajorAxis * orbit.excentricity;
+
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+        x-a, -b, 0, -1, -1,
+        x-a, +b, 0, -1, +1,
+        x+a, -b, 0, +1, -1,
+        x+a, +b, 0, +1, +1,
+    ]), gl.STATIC_DRAW);
+
+    const geometry = {
+        glBuffer: buffer,
+        numVertices: 4,
+        delete: () => gl.deleteBuffer(buffer),
+    };
+
+    return {
+        geometry,
+        orientation,
+        position,
+        glContext,
+    };
+}

skycraft/package.json

@@ -1,14 +1,14 @@
 {
   "name": "skycraft",
   "version": "1.0.0",
-  "main": "index.js",
+  "main": "index.ts",
   "license": "MIT",
   "dependencies": {
     "esbuild": "^0.14.2"
   },
   "scripts": {
-    "watch": "esbuild --outfile=app.js index.js --bundle --sourcemap=inline --watch",
-    "serve": "esbuild --outfile=app.js index.js --bundle --sourcemap=inline --servedir=.",
-    "build": "esbuild --outfile=app.js index.js --bundle --minify"
+    "watch": "esbuild --outfile=app.js index.ts --bundle --sourcemap=inline --watch",
+    "serve": "esbuild --outfile=app.js index.ts --bundle --sourcemap=inline --servedir=.",
+    "build": "esbuild --outfile=app.js index.ts --bundle --minify"
   }
 }

skycraft/quat.ts

@@ -0,0 +1,124 @@
+import {Mat4} from './linalg';
+import * as se3 from '../se3';
+
+export interface Quat {
+    x: number,
+    y: number,
+    z: number,
+    w: number,
+}
+
+export function mat2Quat(m: Mat4) : Quat {
+    const q : Quat = {};
+
+    if (m[0 * 4 + 0] + m[1 * 4 + 1] + m[2 * 4 + 2] > 0.0) {
+        const t = + m[0 * 4 + 0] + m[1 * 4 + 1] + m[2 * 4 + 2] + 1.0;
+        const s = 0.5 / Math.sqrt(t);
+        q.w = s * t;
+        q.z = (m[1 * 4 + 0] - m[0 * 4 + 1]) * s;
+        q.y = (m[0 * 4 + 2] - m[2 * 4 + 0]) * s;
+        q.x = (m[2 * 4 + 1] - m[1 * 4 + 2]) * s;
+    } else if (m[0 * 4 + 0] > m[1 * 4 + 1] && m[0 * 4 + 0] > m[2 * 4 + 2]) {
+        const t = + m[0 * 4 + 0] - m[1 * 4 + 1] - m[2 * 4 + 2] + 1.0;
+        const s = 0.5 / Math.sqrt(t);
+        q.x = s * t;
+        q.y = (m[1 * 4 + 0] + m[0 * 4 + 1]) * s;
+        q.z = (m[0 * 4 + 2] + m[2 * 4 + 0]) * s;
+        q.w = (m[2 * 4 + 1] - m[1 * 4 + 2]) * s;
+    } else if (m[1 * 4 + 1] > m[2 * 4 + 2]) {
+        const t = - m[0 * 4 + 0] + m[1 * 4 + 1] - m[2 * 4 + 2] + 1.0;
+        const s = 0.5 / Math.sqrt(t);
+        q.y = s * t;
+        q.x = (m[1 * 4 + 0] + m[0 * 4 + 1]) * s;
+        q.w = (m[0 * 4 + 2] - m[2 * 4 + 0]) * s;
+        q.z = (m[2 * 4 + 1] + m[1 * 4 + 2]) * s;
+    } else {
+        const t = - m[0 * 4 + 0] - m[1 * 4 + 1] + m[2 * 4 + 2] + 1.0;
+        const s = 0.5 / Math.sqrt(t);
+        q.z = s * t;
+        q.w = (m[1 * 4 + 0] - m[0 * 4 + 1]) * s;
+        q.x = (m[0 * 4 + 2] + m[2 * 4 + 0]) * s;
+        q.y = (m[2 * 4 + 1] + m[1 * 4 + 2]) * s;
+    }
+
+    return q;
+}
+
+export function quat2Mat(q: Quat): Mat4 {
+    const m: Mat4 = se3.identity();
+
+    const x2 = q.x + q.x;
+    const y2 = q.y + q.y;
+    const z2 = q.z + q.z;
+    {
+        const xx2 = q.x * x2;
+        const yy2 = q.y * y2;
+        const zz2 = q.z * z2;
+        m[0 * 4 + 0] = 1.0 - yy2 - zz2;
+        m[1 * 4 + 1] = 1.0 - xx2 - zz2;
+        m[2 * 4 + 2] = 1.0 - xx2 - yy2;
+    }
+    {
+        const yz2 = q.y * z2;
+        const wx2 = q.w * x2;
+        m[1 * 4 + 2] = yz2 - wx2;
+        m[2 * 4 + 1] = yz2 + wx2;
+    }
+    {
+        const xy2 = q.x * y2;
+        const wz2 = q.w * z2;
+        m[0 * 4 + 1] = xy2 - wz2;
+        m[1 * 4 + 0] = xy2 + wz2;
+    }
+    {
+        const xz2 = q.x * z2;
+        const wy2 = q.w * y2;
+        m[2 * 4 + 0] = xz2 - wy2;
+        m[0 * 4 + 2] = xz2 + wy2;
+    }
+
+    return m;
+}
+
+export function normalize(q: Quat) : Quat {
+    const n = norm(q);
+    if (n < 1e-10) {
+        return {x: 0, y: 0, z: 0, w: 1};
+    }
+    return {
+        x: q.x / n,
+        y: q.y / n,
+        z: q.z / n,
+        w: q.w / n,
+    };
+}
+
+export function diff(q0: Quat, q1: Quat) {
+    return {
+        x: q0.x - q1.x,
+        y: q0.y - q1.y,
+        z: q0.z - q1.z,
+        w: q0.w - q1.w,
+    };
+}
+export function norm(q: Quat) {
+    return Math.sqrt(q.x**2 + q.y**2 + q.z**2 + q.w**2);
+}
+
+export function add(q0: Quat, q1: Quat) {
+    return {
+        x: q0.x + q1.x,
+        y: q0.y + q1.y,
+        z: q0.z + q1.z,
+        w: q0.w + q1.w,
+    };
+}
+
+export function scale(q: Quat, a: number): Quat {
+    return {
+        x: a * q.x,
+        y: a * q.y,
+        z: a * q.z,
+        w: a * q.w,
+    };
+}

skycraft/stl.ts

@@ -0,0 +1,76 @@
+import * as linalg from './linalg';
+
+function parseTriangle(triangleData) {
+    const dv = new DataView(triangleData.buffer);
+    function data(idx) {
+        const offset = 4 * idx;
+        return dv.getFloat32(offset, /*littleEndian=*/true);
+    }
+
+    const attributeByteCount = dv.getUint16(48, /*littleEndian=*/true);
+    console.assert(attributeByteCount === 0);
+
+    const x = [data(3), data(4), data(5)];
+    const y = [data(6), data(7), data(8)];
+    const z = [data(9), data(10), data(11)];
+    const n = linalg.cross(linalg.diff(y, x), linalg.diff(z, y));
+
+    return {
+        vertices: [x, y, z],
+        normals: new Array(3).fill(linalg.scale(n, 1 / linalg.norm(n))),
+        textures: new Array(3).fill([0, 0]),
+    };  // no normals, default texture
+}
+
+export async function loadStlModel(url) {
+    const stlDataStream = (await fetch(url)).body;
+    const triangles = [];
+
+    return new Promise((resolve, reject) => {
+        let bytesReceived = 0;
+        let gotHeader = false;
+        const partial = new Uint8Array(50);  // each triangle is 50 bytes
+        let partialOffset = 0;
+        const reader = stlDataStream.getReader();
+
+        function pump() {
+            reader.read().then(({ done, value }) => {
+                if (done) {
+                    return resolve(triangles);
+                }
+      
+                const skipped = bytesReceived;
+                bytesReceived += value.length;
+                let inputOffset = 0;
+    
+                if (!gotHeader) {
+                    if (bytesReceived < 84) {  // header + triangle count
+                        return pump();
+                    } else {
+                        gotHeader = true;
+                        inputOffset = 84 - skipped;
+                    }
+                }
+    
+                // parse triangle data
+                while (true) {
+                    const spaceLeft = 50 - partialOffset;
+                    console.assert(spaceLeft > 0);
+    
+                    const leftToCopy = value.length - inputOffset;
+                    const toCopy = value.subarray(inputOffset, inputOffset + Math.min(leftToCopy, spaceLeft));
+                    partial.set(toCopy, partialOffset);
+                    if (leftToCopy < spaceLeft) {
+                        break;
+                    }
+                    // parse a triangle!
+                    triangles.push(parseTriangle(partial));
+                    partialOffset = 0;
+                    inputOffset += toCopy.length;
+                }
+                pump();
+            });
+        }
+        pump();
+    });
+}

skycraft/tsconfig.json

@@ -0,0 +1,15 @@
+{
+    "compilerOptions": {
+      "target": "es6",
+      "module": "commonjs",
+      "lib": ["es2022", "dom"],
+      "declaration": true,
+      "outDir": "dist",
+      "strict": true,
+      "esModuleInterop": true
+    },
+    "exclude": [
+      "node_modules",
+      "dist"
+    ]
+  }