@johnmorrisdotca/uchusen-rockets 0.2.1 → 0.3.0

package/dist/data/tower.js

@@ -0,0 +1,26 @@
+// The tower's 13 m footprint in this file is © OpenStreetMap contributors, under the Open Database License (ODbL 1.0, https://www.openstreetmap.org/copyright), not MIT: see NOTICE.md.
+// The integration tower at Starbase, with its mount and arms, as sourced: the FAA's assessment gives its height. No source read here gives its width, its arms' length or the mount's size: those are judged from photographs.
+import { STARSHIP_VARIANTS } from "./starship.js";
+import { blank } from "./types.js";
+const F = "faa-pea-2022";
+const W = "wikipedia-starbase";
+const m = (value, source, extra = {}) => ({ value, source, ...extra });
+const said = (value, source, extra = {}) => ({ value, source, ...extra });
+export const TOWER_HEIGHT = 146.3;
+const v3 = STARSHIP_VARIANTS.find((variant) => variant.id === "v3");
+const TOWER = m(TOWER_HEIGHT, F, { brief: "approximately", note: "About 480 feet, with a 10-foot lightning rod on top, as proposed in 2022.", others: [{ value: 146, source: W, note: "Wikipedia's Starbase article gives 479 feet from the FAA's 2021 determination of no hazard to air navigation." }] });
+const JUDGED = "No source read here gives its size: it is judged from photographs.";
+const facts = (withRocket) => ({
+    height: TOWER,
+    diameter: { value: 13, source: "openstreetmap", brief: "the tower", note: "The map's footprint of tower 1, 13 by 12 m." },
+    parts: { tower: TOWER, mount: blank(JUDGED), arms: blank(JUDGED), ...(withRocket ? { booster: v3.facts.parts.booster, ship: v3.facts.parts.ship } : {}) },
+    engines: {},
+    more: {},
+});
+const base = { rocket: "launch-tower", status: "support", firstWord: "Stacked" };
+const FIRST = said("2021-07", W, { brief: "first tower fully stacked" });
+export const TOWER_VARIANTS = [
+    { ...base, id: "tower", name: "Integration tower and mount", firstFlight: FIRST, slots: ["mount", "tower", "arms"], note: "The tower at Starbase with its launch mount and its two arms, the chopsticks, held open. The arms' length, the mount and how far it stands from the tower are judged from photographs. No lettering or mark is drawn.", facts: facts(false) },
+    { ...base, id: "stack", name: "Tower, with Block 3 stacked on the mount", firstFlight: FIRST, slots: ["mount", "tower", "arms", "booster", "ship"], note: "Super Heavy on the mount and the Ship on Super Heavy, as they are stacked by the arms. The rocket is Block 3's own parts, painted by this package's code here to keep the scene light. No lettering or mark is drawn.", facts: facts(true) },
+    { ...base, id: "catch", name: "Tower, catching Super Heavy", firstFlight: said("2024-10-13", W, { brief: "first catch", note: "Flight 5: Booster 12." }), slots: ["mount", "tower", "arms", "booster"], note: "The arms closed under the grid fins, as on Flight 5, with Block 3's booster. How high it hangs is judged from photographs of that catch, which show an earlier booster. No lettering or mark is drawn.", facts: { ...facts(true), parts: { tower: TOWER, mount: blank(JUDGED), arms: blank(JUDGED), booster: v3.facts.parts.booster } } },
+];

package/dist/data/types.d.ts

@@ -17,7 +17,7 @@ export interface Figure<T = number> {
 export declare const blank: <T = number>(note?: string, brief?: string) => Figure<T>;
 /** A figure as words for a table: its value and whatever must stay beside it; a blank says why, or that no source gives it. */
 export declare function figureWords(figure: Figure<number | string> | undefined, unit?: string): string;
-export type VariantStatus = "flown" | "announced" | "artist-model" | "test-vehicle";
+export type VariantStatus = "flown" | "announced" | "artist-model" | "test-vehicle" | "support";
 export interface VariantFacts {
     /** Overall height with every part in place, metres. */
     height: Figure;
@@ -28,6 +28,8 @@ export interface VariantFacts {
     engines: Readonly<Record<string, Figure<string>>>;
     /** Other facts, each with its own source. */
     more: Readonly<Record<string, Figure<number | string>>>;
+    /** Sizes that are not a height or a width, shown as they are named here: "Deck length". */
+    sizes?: Readonly<Record<string, Figure>>;
 }
 export interface Variant {
     /** "v1", "v2" and so on; a label for what is not a numbered version. */
@@ -36,6 +38,8 @@ export interface Variant {
     /** What it is called, in a line: "Block 3 (V3)". */
     name: string;
     status: VariantStatus;
+    /** What to call its first date, when it is not a vehicle that flew: "In service". */
+    firstWord?: string;
     /** When this variant, in this form, first flew. Its `brief` says so when the form is not the block's first. */
     firstFlight: Figure<string>;
     /** The parts this variant has, in stacking order from the bottom. */
@@ -45,4 +49,6 @@ export interface Variant {
     partIds?: Readonly<Record<string, string>>;
     /** What a reader should be told about it. */
     note?: string;
+    /** The side a to-scale lineup shows of it when asked for the front, because the front hides what it is: the orbiter stands behind the Shuttle's tank. */
+    lineupView?: "back" | "side";
 }

package/dist/draw/plume.d.ts

@@ -0,0 +1,8 @@
+import type { Camera } from "./svg.ts";
+import type { Vec3 } from "../framing.ts";
+import { type Bell } from "../engines.ts";
+import type { LookName } from "../looks.ts";
+/** The flames for these bells, in picture coordinates. Empty when there are none. */
+export declare function plumeMarkup(bells: readonly Bell[], at: Vec3, cam: Camera, look: LookName, prefix: string): string;
+/** The engines of a part seen from below, each in its own place, the burning ones filled: `engine by engine`. Its words are for a screen reader. */
+export declare function engineChart(bells: readonly Bell[], burning: readonly Bell[], label: string): string;

package/dist/draw/plume.js

@@ -0,0 +1,71 @@
+import { PLUME_DIAMONDS, plumeLength } from "../engines.js";
+const n = (v) => (Math.round(v * 100) / 100).toString();
+function hull(points) {
+    const p = [...points].sort((a, b) => a[0] - b[0] || a[1] - b[1]);
+    if (p.length < 3)
+        return p;
+    const cross = (o, a, b) => (a[0] - o[0]) * (b[1] - o[1]) - (a[1] - o[1]) * (b[0] - o[0]);
+    const half = (list) => {
+        const out = [];
+        for (const q of list) {
+            while (out.length >= 2 && cross(out[out.length - 2], out[out.length - 1], q) <= 0)
+                out.pop();
+            out.push(q);
+        }
+        out.pop();
+        return out;
+    };
+    return [...half(p), ...half([...p].reverse())];
+}
+const pathOf = (pts) => `M${pts.map(([x, y]) => `${n(x)} ${n(y)}`).join("L")}Z`;
+/** The flames for these bells, in picture coordinates. Empty when there are none. */
+export function plumeMarkup(bells, at, cam, look, prefix) {
+    if (bells.length === 0)
+        return "";
+    const painted = look === "painted";
+    const stroke = look === "thick" ? 2.4 : 1.2;
+    const parts = [];
+    bells.forEach((bell, index) => {
+        const mouth = [at[0] + bell.x, at[1] + bell.y, at[2] + bell.z];
+        const tip = [mouth[0], mouth[1] - plumeLength(bell.exit), mouth[2]];
+        const rim = [];
+        for (let step = 0; step < 10; step++) {
+            const angle = (step / 10) * Math.PI * 2;
+            rim.push(cam.project([mouth[0] + Math.sin(angle) * bell.exit, mouth[1], mouth[2] + Math.cos(angle) * bell.exit]));
+        }
+        const mouthPoint = cam.project(mouth);
+        const tipPoint = cam.project(tip);
+        const shape = hull([...rim, tipPoint]);
+        const id = `uchusen-plume-${prefix}-${index}`;
+        const glow = `uchusen-glow-${prefix}-${index}`;
+        const xs = rim.map((point) => point[0]);
+        const ys = rim.map((point) => point[1]);
+        const cx = (Math.min(...xs) + Math.max(...xs)) / 2;
+        const cy = (Math.min(...ys) + Math.max(...ys)) / 2;
+        const rx = Math.max(1.2, (Math.max(...xs) - Math.min(...xs)) / 2);
+        const ry = Math.max(1.2, (Math.max(...ys) - Math.min(...ys)) / 2);
+        const defs = painted
+            ? `<defs><linearGradient id="${id}" gradientUnits="userSpaceOnUse" x1="${n(mouthPoint[0])}" y1="${n(mouthPoint[1])}" x2="${n(tipPoint[0])}" y2="${n(tipPoint[1])}"><stop offset="0" stop-color="#fff4d2"/><stop offset="0.45" stop-color="#ff9a3a"/><stop offset="1" stop-color="#ff4a12" stop-opacity="0"/></linearGradient><radialGradient id="${glow}" gradientUnits="userSpaceOnUse" cx="${n(cx)}" cy="${n(cy)}" r="${n(Math.max(rx, ry))}"><stop offset="0" stop-color="#fff1c4"/><stop offset="1" stop-color="#ff7a1a" stop-opacity="0"/></radialGradient></defs>`
+            : "";
+        const flame = shape.length >= 3 ? (painted ? `<path data-plume="1" d="${pathOf(shape)}" fill="url(#${id})" stroke="none"/>` : `<path data-plume="1" d="${pathOf(shape)}" fill="none" stroke="#e7a24a" stroke-width="${stroke}"/><path d="M${n(mouthPoint[0])} ${n(mouthPoint[1])}L${n(tipPoint[0])} ${n(tipPoint[1])}" fill="none" stroke="#ffd7a1" stroke-width="${stroke * 0.6}"/>`) : "";
+        const ring = painted ? `<ellipse data-glow="1" cx="${n(cx)}" cy="${n(cy)}" rx="${n(rx * 1.35)}" ry="${n(ry * 1.35)}" fill="url(#${glow})"/>` : `<ellipse data-glow="1" cx="${n(cx)}" cy="${n(cy)}" rx="${n(rx * 1.2)}" ry="${n(ry * 1.2)}" fill="none" stroke="#e7a24a" stroke-width="${stroke}"/>`;
+        // the first few shock diamonds, as small rings down the flame: a picture
+        let diamonds = "";
+        for (let k = 1; k <= 3; k++) {
+            const along = k / PLUME_DIAMONDS;
+            const [dx, dy] = cam.project([mouth[0], mouth[1] - plumeLength(bell.exit) * along, mouth[2]]);
+            const size = n(Math.max(0.9, rx * 0.5 * (1 - along)));
+            diamonds += painted ? `<ellipse data-diamond="1" cx="${n(dx)}" cy="${n(dy)}" rx="${size}" ry="${size}" fill="#fff4d2" fill-opacity="0.7"/>` : `<ellipse data-diamond="1" cx="${n(dx)}" cy="${n(dy)}" rx="${size}" ry="${size}" fill="none" stroke="#e7a24a" stroke-width="${stroke * 0.6}"/>`;
+        }
+        if (flame !== "")
+            parts.push(`<g>${defs}${ring}${flame}${diamonds}</g>`);
+    });
+    return parts.join("");
+}
+/** The engines of a part seen from below, each in its own place, the burning ones filled: `engine by engine`. Its words are for a screen reader. */
+export function engineChart(bells, burning, label) {
+    const reach = Math.max(1, ...bells.map((bell) => Math.hypot(bell.x, bell.z) + bell.exit)) * 1.06;
+    const lit = new Set(burning);
+    const dots = bells.map((bell) => `<circle cx="${n(bell.x)}" cy="${n(-bell.z)}" r="${n(bell.exit)}" ${lit.has(bell) ? 'data-lit="1" fill="#ffb25c" stroke="#fff1c4"' : 'fill="none" stroke="currentColor"'} stroke-width="${n(reach * 0.03)}"/>`);
+    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${n(-reach)} ${n(-reach)} ${n(reach * 2)} ${n(reach * 2)}" role="img" aria-label="${label.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;")}">${dots.join("")}</svg>`;
+}

package/dist/draw/svg.d.ts

@@ -20,7 +20,7 @@ export interface DrawOptions {
     weight?: number;
 }
 /** One part's picture at `at`, as SVG text in painter's order. */
-export declare function drawPart(pieces: readonly Piece[], at: Vec3, cam: Camera, look: LookName, weight?: number): string;
+export declare function drawPart(pieces: readonly Piece[], at: Vec3, cam: Camera, look: LookName, weight?: number, line?: string): string;
 /** The picture's gradients and, on the tiled side, a mosaic of hexagons, for a look. */
 export declare function defsOf(look: LookName): string;
 export {};

package/dist/draw/svg.js

@@ -60,7 +60,7 @@ function latheItem(piece, cam, at, style, list) {
     const [cx, cz] = piece.at ?? [0, 0];
     const profile = piece.profile;
     const steps = piece.segs > 24 ? 36 : 14;
-    const here = (r, y, a) => [at[0] + cx + r * Math.sin(a), at[1] + y, at[2] + cz + r * Math.cos(a)];
+    const here = (r, y, a) => [at[0] + cx + r * Math.sin(a) + (piece.lean?.[0] ?? 0) * y, at[1] + y, at[2] + cz + r * Math.cos(a) + (piece.lean?.[1] ?? 0) * y];
     const middleY = (profile[0][1] + profile[profile.length - 1][1]) / 2;
     const middle = [at[0] + cx, at[1] + middleY, at[2] + cz];
     const axisHere = [at[0], at[1] + middleY, at[2]];
@@ -234,9 +234,9 @@ function linesItem(piece, cam, at, style, list) {
     list.push({ key: -1e3, svg: `<path d="${d}" fill="none" stroke="${style.line}" stroke-width="${n(piece.weight === "feature" ? style.feature : style.weld)}"/>` });
 }
 /** One part's picture at `at`, as SVG text in painter's order. */
-export function drawPart(pieces, at, cam, look, weight = 1) {
+export function drawPart(pieces, at, cam, look, weight = 1, line) {
     const base = LOOKS[look];
-    const style = { line: base.line, outline: base.outline * weight, feature: base.feature * weight, weld: base.weld * weight };
+    const style = { line: line ?? base.line, outline: base.outline * weight, feature: base.feature * weight, weld: base.weld * weight };
     const items = [];
     for (const piece of pieces) {
         if (piece.only === "mesh")

package/dist/element/ground.d.ts

@@ -0,0 +1,15 @@
+import { Group } from "three";
+export declare class GroundKit {
+    readonly group: Group<import("three").Object3DEventMap>;
+    private pad;
+    private puffs;
+    private puffShape;
+    private puffMaterial;
+    private padMaterial;
+    constructor();
+    /** How wide the smoke stands, and how far the plain ground reaches to hold everything that lands on it, in metres. */
+    fit(radius: number, reach: number): void;
+    /** Where the ground stands, and how much smoke is on it. `seconds` is the smoke's own clock, when it may move. */
+    set(y: number, smoke: number, seconds: number): void;
+    dispose(): void;
+}

package/dist/element/ground.js

@@ -0,0 +1,95 @@
+// The ground under a flight, for the 3D view: a plain pad, and smoke and water standing on it, all a picture. One instanced draw of soft puffs, moved by numbers on the graphics card, so a flight makes it once and it costs nothing when it is out of the picture. No pad, tower or drone ship of any real place: those are to come.
+import { BufferGeometry, CircleGeometry, DoubleSide, DynamicDrawUsage, Float32BufferAttribute, Group, InstancedMesh, Matrix4, Mesh, MeshBasicMaterial, Quaternion, ShaderMaterial, Vector3 } from "three";
+const PUFFS = 44;
+const WATER = 14;
+const PUFF_VERTEX = /* glsl */ `
+uniform float uSmoke;
+uniform float uTime;
+varying vec2 vCorner;
+varying float vWater;
+void main() {
+  vCorner = position.xy;
+  float id = float(gl_InstanceID);
+  vWater = step(${(PUFFS - WATER).toFixed(1)}, id);
+  float roll = fract(sin(id * 12.9898) * 43758.5453);
+  // each puff rolls outwards from the pad as the smoke grows; water stays low and close
+  float grow = mix(0.45 + 0.75 * uSmoke, 0.35 + 0.25 * uSmoke, vWater);
+  vec3 base = instanceMatrix[3].xyz;
+  vec3 where = vec3(base.x * grow, base.y * uSmoke + sin(uTime * 0.7 + roll * 6.28) * 0.04, base.z * grow);
+  vec4 middle = modelViewMatrix * vec4(where, 1.0);
+  middle.xy += position.xy * instanceMatrix[0][0] * (0.5 + uSmoke);
+  gl_Position = projectionMatrix * middle;
+}`;
+const PUFF_FRAGMENT = /* glsl */ `
+uniform float uSmoke;
+varying vec2 vCorner;
+varying float vWater;
+void main() {
+  float d = length(vCorner);
+  float alpha = smoothstep(1.0, 0.25, d) * mix(0.2, 0.3, vWater) * smoothstep(0.0, 0.25, uSmoke);
+  gl_FragColor = vec4(mix(vec3(0.78, 0.8, 0.83), vec3(0.82, 0.92, 1.0), vWater), alpha);
+}`;
+const scaleOf = new Vector3();
+const atOf = new Vector3();
+const none = new Quaternion();
+const matrix = new Matrix4();
+export class GroundKit {
+    group = new Group();
+    pad;
+    puffs;
+    puffShape;
+    puffMaterial;
+    padMaterial = new MeshBasicMaterial({ color: "#39424f", transparent: true, opacity: 0.55, side: DoubleSide, depthWrite: false });
+    constructor() {
+        this.group.name = "ground";
+        this.pad = new Mesh(new CircleGeometry(1, 48), this.padMaterial);
+        this.pad.rotation.x = -Math.PI / 2;
+        this.puffShape = new BufferGeometry();
+        this.puffShape.setAttribute("position", new Float32BufferAttribute([-1, -1, 0, 1, -1, 0, 1, 1, 0, -1, 1, 0], 3));
+        this.puffShape.setIndex([0, 1, 2, 0, 2, 3]);
+        this.puffMaterial = new ShaderMaterial({ vertexShader: PUFF_VERTEX, fragmentShader: PUFF_FRAGMENT, uniforms: { uSmoke: { value: 0 }, uTime: { value: 0 } }, transparent: true, depthWrite: false });
+        this.puffs = new InstancedMesh(this.puffShape, this.puffMaterial, PUFFS);
+        this.puffs.frustumCulled = false;
+        this.puffs.renderOrder = 2;
+        this.puffs.instanceMatrix.setUsage(DynamicDrawUsage);
+        // the same puffs every time: a fixed scatter, no clock and no random number
+        for (let i = 0; i < PUFFS; i++) {
+            const water = i >= PUFFS - WATER;
+            const a = i * 2.399963;
+            const r = water ? 0.55 + 0.1 * (i % 3) : 0.35 + ((i * 37) % 11) * 0.11;
+            const y = water ? 0.06 : 0.05 + ((i * 17) % 7) * 0.05;
+            const size = water ? 0.16 : 0.3 + ((i * 13) % 5) * 0.06;
+            this.puffs.setMatrixAt(i, matrix.compose(atOf.set(Math.cos(a) * r, y, Math.sin(a) * r), none, scaleOf.setScalar(size)));
+        }
+        this.group.add(this.pad, this.puffs);
+        this.group.visible = false;
+    }
+    /** How wide the smoke stands, and how far the plain ground reaches to hold everything that lands on it, in metres. */
+    fit(radius, reach) {
+        this.group.scale.setScalar(radius);
+        this.pad.scale.setScalar(Math.max(1, reach / radius));
+        // a puff stays round to the camera, so its size is not in the group's scale
+        for (let i = 0; i < PUFFS; i++) {
+            this.puffs.getMatrixAt(i, matrix);
+            const size = i >= PUFFS - WATER ? 0.16 : 0.3 + ((i * 13) % 5) * 0.06;
+            matrix.elements[0] = size * radius;
+            this.puffs.setMatrixAt(i, matrix);
+        }
+        this.puffs.instanceMatrix.needsUpdate = true;
+    }
+    /** Where the ground stands, and how much smoke is on it. `seconds` is the smoke's own clock, when it may move. */
+    set(y, smoke, seconds) {
+        this.group.position.y = y;
+        this.puffMaterial.uniforms.uSmoke.value = smoke;
+        this.puffMaterial.uniforms.uTime.value = seconds;
+        this.puffs.visible = smoke > 0.001;
+    }
+    dispose() {
+        this.group.removeFromParent();
+        this.pad.geometry.dispose();
+        this.padMaterial.dispose();
+        this.puffs.dispose();
+        this.puffShape.dispose();
+        this.puffMaterial.dispose();
+    }
+}

package/dist/element/plumes.d.ts

@@ -0,0 +1,38 @@
+import { BufferGeometry, Group, PointLight, ShaderMaterial } from "three";
+import { type Bell } from "../engines.ts";
+/** What burns in each engine's flame, as a picture: a fuel's flame is drawn in its own colours. */
+export type Fuel = "methane" | "kerosene";
+/** One part's flames: at most as many as it has bells. Its buffers are made once and written when the engines that burn change. */
+export declare class PartPlumes {
+    readonly group: Group<import("three").Object3DEventMap>;
+    readonly bells: readonly Bell[];
+    private flames;
+    private glows;
+    private key;
+    constructor(kit: PlumeKit, bells: readonly Bell[]);
+    /** The bells that burn now. Nothing is written when they are the ones that burned last. */
+    light(burning: readonly Bell[]): void;
+    dispose(): void;
+}
+/** One set of everything a flame needs, for one viewer. */
+export declare class PlumeKit {
+    readonly shape: BufferGeometry<import("three").NormalBufferAttributes, import("three").BufferGeometryEventMap>;
+    readonly quad: BufferGeometry<import("three").NormalBufferAttributes, import("three").BufferGeometryEventMap>;
+    readonly flame: ShaderMaterial;
+    readonly glow: ShaderMaterial;
+    /** The hull's own glow in the painted look. Always in the scene, at no strength when no engine burns, so lighting engines never makes the materials build again. */
+    readonly light: PointLight;
+    private uniforms;
+    constructor();
+    setLook(painted: boolean): void;
+    setFuel(fuel: Fuel): void;
+    /** 0 near the ground, 1 high up where a flame fans out. */
+    setAir(air: number): void;
+    /** Where the ground stands, for a flame to stop at. */
+    setFloor(y: number): void;
+    /** Many glows overlap: together they add up to about one bright ring, not a white disc. */
+    setBurning(count: number): void;
+    /** The flame's clock, in seconds, or `null` to hold it still. */
+    setTime(seconds: number | null): void;
+    dispose(): void;
+}

package/dist/element/plumes.js

@@ -0,0 +1,208 @@
+// Flames for the 3D view, made here and loaded only with it. One shape, one material and one instanced draw for every engine of a part, however many burn, so lighting and dousing engines changes numbers, never what the graphics card holds. The look of a flame (its shock diamonds, its length, its glow) is a picture, not a measurement.
+import { AdditiveBlending, BufferGeometry, Color, DoubleSide, DynamicDrawUsage, Float32BufferAttribute, Group, InstancedMesh, Matrix4, PointLight, Quaternion, ShaderMaterial, Vector3 } from "three";
+import { PLUME_DIAMONDS, plumeLength } from "../engines.js";
+const STEPS = 28;
+const AROUND = 12;
+const DIAMONDS = PLUME_DIAMONDS.toFixed(1);
+const FLAME_VERTEX = /* glsl */ `
+uniform float uTime;
+uniform float uMoving;
+uniform float uAir;
+varying float vT;
+varying float vFace;
+varying float vHeight;
+void main() {
+  float t = -position.y;
+  float seed = float(gl_InstanceID) * 1.7;
+  float jitter = uMoving * 0.035 * sin(uTime * 31.0 + seed) + uMoving * 0.02 * sin(uTime * 53.0 + seed * 2.3);
+  vec3 p = position;
+  // near the ground the flame is held in and pinched at its diamonds; high up it fans out and the diamonds go
+  float pinch = 1.0 - 0.16 * pow(0.5 + 0.5 * cos(t * 6.2832 * ${DIAMONDS}), 2.0);
+  p.xz *= mix(pinch, 1.0 + 2.6 * t, uAir);
+  p.y *= 1.0 + jitter;
+  vHeight = (modelMatrix * instanceMatrix * vec4(p, 1.0)).y;
+  vec4 view = modelViewMatrix * instanceMatrix * vec4(p, 1.0);
+  vec3 n = normalize(normalMatrix * mat3(instanceMatrix) * normal);
+  vFace = abs(dot(n, normalize(-view.xyz)));
+  vT = t;
+  gl_Position = projectionMatrix * view;
+}`;
+const FLAME_FRAGMENT = /* glsl */ `
+uniform vec3 uHot;
+uniform vec3 uCool;
+uniform float uAir;
+uniform float uLine;
+uniform float uFloor;
+varying float vT;
+varying float vFace;
+varying float vHeight;
+void main() {
+  // a flame stops at the ground
+  if (vHeight < uFloor) discard;
+  float fade = 1.0 - smoothstep(0.5, 1.0, vT);
+  float bands = pow(0.5 + 0.5 * cos(vT * 6.2832 * ${DIAMONDS}), 6.0) * (1.0 - vT) * (1.0 - uAir);
+  float core = pow(vFace, 1.6);
+  vec3 filled = mix(uCool, uHot, core * (1.0 - vT * 0.7)) + vec3(1.0, 0.95, 0.85) * bands * 1.1;
+  float full = (0.22 + 0.78 * core) * fade * (0.9 + bands * 0.6) * mix(1.0, 0.45, uAir);
+  // the line looks: an outline and the diamonds, nothing filled
+  float rim = 1.0 - smoothstep(0.06, 0.3, vFace);
+  float drawn = max(rim, bands * 1.4) * fade;
+  gl_FragColor = vec4(mix(filled, vec3(0.91, 0.62, 0.26), uLine), mix(full, drawn, uLine));
+}`;
+const GLOW_VERTEX = /* glsl */ `
+varying vec2 vCorner;
+void main() {
+  vCorner = position.xy;
+  vec4 middle = modelViewMatrix * vec4(instanceMatrix[3].xyz, 1.0);
+  middle.xy += position.xy * instanceMatrix[0][0];
+  gl_Position = projectionMatrix * middle;
+}`;
+const GLOW_FRAGMENT = /* glsl */ `
+uniform float uLine;
+uniform vec3 uHot;
+uniform float uGlow;
+varying vec2 vCorner;
+void main() {
+  float d = length(vCorner);
+  float soft = smoothstep(1.0, 0.1, d) * uGlow;
+  float ring = smoothstep(0.62, 0.7, d) * (1.0 - smoothstep(0.7, 0.78, d)) * 0.9;
+  gl_FragColor = vec4(mix(uHot, vec3(0.91, 0.62, 0.26), uLine), mix(soft, ring, uLine));
+}`;
+/** A flame of one exit radius and one length, tip down from its mouth, with its radius drawing in as it goes. */
+function flameShape() {
+    const position = [];
+    const normal = [];
+    const index = [];
+    for (let step = 0; step <= STEPS; step++) {
+        const t = step / STEPS;
+        const radius = Math.pow(1 - t, 0.72);
+        for (let i = 0; i < AROUND; i++) {
+            const a = (i / AROUND) * Math.PI * 2;
+            position.push(Math.sin(a) * radius, -t, Math.cos(a) * radius);
+            normal.push(Math.sin(a), 0.2, Math.cos(a));
+        }
+    }
+    for (let step = 0; step < STEPS; step++)
+        for (let i = 0; i < AROUND; i++) {
+            const a = step * AROUND + i;
+            const b = step * AROUND + ((i + 1) % AROUND);
+            index.push(a, a + AROUND, b, b, a + AROUND, b + AROUND);
+        }
+    const geometry = new BufferGeometry();
+    geometry.setAttribute("position", new Float32BufferAttribute(position, 3));
+    geometry.setAttribute("normal", new Float32BufferAttribute(normal, 3));
+    geometry.setIndex(index);
+    return geometry;
+}
+function glowShape() {
+    const geometry = new BufferGeometry();
+    geometry.setAttribute("position", new Float32BufferAttribute([-1, -1, 0, 1, -1, 0, 1, 1, 0, -1, 1, 0], 3));
+    geometry.setIndex([0, 1, 2, 0, 2, 3]);
+    return geometry;
+}
+const FUEL_COLOURS = {
+    methane: { hot: "#fff1e6", cool: "#6f7dff" },
+    kerosene: { hot: "#fff4d2", cool: "#ff7a1a" },
+};
+const place = new Matrix4();
+const still = new Quaternion();
+const at = new Vector3();
+const size = new Vector3();
+/** One part's flames: at most as many as it has bells. Its buffers are made once and written when the engines that burn change. */
+export class PartPlumes {
+    group = new Group();
+    bells;
+    flames;
+    glows;
+    key = "";
+    constructor(kit, bells) {
+        this.bells = bells;
+        this.group.name = "plumes";
+        this.flames = new InstancedMesh(kit.shape, kit.flame, bells.length);
+        this.glows = new InstancedMesh(kit.quad, kit.glow, bells.length);
+        for (const mesh of [this.flames, this.glows]) {
+            mesh.instanceMatrix.setUsage(DynamicDrawUsage);
+            mesh.frustumCulled = false;
+            mesh.renderOrder = 3;
+            mesh.count = 0;
+        }
+        this.group.add(this.flames, this.glows);
+    }
+    /** The bells that burn now. Nothing is written when they are the ones that burned last. */
+    light(burning) {
+        const key = burning.map((bell) => `${bell.x},${bell.z}`).join("|");
+        if (key === this.key)
+            return;
+        this.key = key;
+        burning.forEach((bell, i) => {
+            this.flames.setMatrixAt(i, place.compose(at.set(bell.x, bell.y, bell.z), still, size.set(bell.exit, plumeLength(bell.exit), bell.exit)));
+            this.glows.setMatrixAt(i, place.compose(at.set(bell.x, bell.y, bell.z), still, size.setScalar(bell.exit * 2.2)));
+        });
+        this.flames.count = burning.length;
+        this.glows.count = burning.length;
+        this.flames.instanceMatrix.needsUpdate = true;
+        this.glows.instanceMatrix.needsUpdate = true;
+    }
+    dispose() {
+        this.group.removeFromParent();
+        this.flames.dispose();
+        this.glows.dispose();
+    }
+}
+/** One set of everything a flame needs, for one viewer. */
+export class PlumeKit {
+    shape = flameShape();
+    quad = glowShape();
+    flame;
+    glow;
+    /** The hull's own glow in the painted look. Always in the scene, at no strength when no engine burns, so lighting engines never makes the materials build again. */
+    light = new PointLight("#ffb56b", 0, 0, 1.6);
+    uniforms = {
+        uTime: { value: 0 },
+        uMoving: { value: 0 },
+        uAir: { value: 0 },
+        uLine: { value: 1 },
+        uFloor: { value: -1e6 },
+        uGlow: { value: 0.75 },
+        uHot: { value: new Color(FUEL_COLOURS.kerosene.hot) },
+        uCool: { value: new Color(FUEL_COLOURS.kerosene.cool) },
+    };
+    constructor() {
+        const common = { transparent: true, depthWrite: false, blending: AdditiveBlending, toneMapped: false };
+        this.flame = new ShaderMaterial({ ...common, vertexShader: FLAME_VERTEX, fragmentShader: FLAME_FRAGMENT, uniforms: this.uniforms, side: DoubleSide });
+        this.glow = new ShaderMaterial({ ...common, vertexShader: GLOW_VERTEX, fragmentShader: GLOW_FRAGMENT, uniforms: this.uniforms });
+    }
+    setLook(painted) {
+        this.uniforms.uLine.value = painted ? 0 : 1;
+    }
+    setFuel(fuel) {
+        this.uniforms.uHot.value.set(FUEL_COLOURS[fuel].hot);
+        this.uniforms.uCool.value.set(FUEL_COLOURS[fuel].cool);
+    }
+    /** 0 near the ground, 1 high up where a flame fans out. */
+    setAir(air) {
+        this.uniforms.uAir.value = air;
+    }
+    /** Where the ground stands, for a flame to stop at. */
+    setFloor(y) {
+        this.uniforms.uFloor.value = y;
+    }
+    /** Many glows overlap: together they add up to about one bright ring, not a white disc. */
+    setBurning(count) {
+        this.uniforms.uGlow.value = 0.75 * Math.min(1, 5 / Math.max(1, count));
+    }
+    /** The flame's clock, in seconds, or `null` to hold it still. */
+    setTime(seconds) {
+        this.uniforms.uMoving.value = seconds === null ? 0 : 1;
+        if (seconds !== null)
+            this.uniforms.uTime.value = seconds;
+    }
+    dispose() {
+        this.shape.dispose();
+        this.quad.dispose();
+        this.flame.dispose();
+        this.glow.dispose();
+        this.light.dispose();
+        this.light.removeFromParent();
+    }
+}

package/dist/element/scene.d.ts

@@ -1,6 +1,8 @@
 import type { Built } from "../build/index.ts";
 import { type Angle, type ViewChoice } from "../framing.ts";
 import { type LookName } from "../looks.ts";
+import { type FlightClock } from "../flight.ts";
+import type { Spin } from "../spin.ts";
 export interface ViewerOptions {
     label: string;
     reducedMotion: boolean;
@@ -9,11 +11,8 @@ export interface ViewerOptions {
     assets: string;
     /** Tells the page which painted parts have come in. */
     onPainted: (state: string) => void;
-}
-export interface Spin {
-    /** Seconds a turn, 0 for not at all. */
-    seconds: number;
-    way: "cw" | "ccw";
+    /** Tells the page a timeline moved. */
+    onFlight?: () => void;
 }
 export declare class RocketViewer {
     readonly canvas: HTMLCanvasElement;
@@ -29,6 +28,20 @@ export declare class RocketViewer {
     private built;
     private look;
     private show;
+    private plumes;
+    private lit;
+    /** What was lit before a flight took over the engines. */
+    private litOutside;
+    private burningNow;
+    /** A flame moves until then. */
+    private flameUntil;
+    private flameDrawn;
+    private inTick;
+    private clockNow;
+    private flightOn;
+    private ground;
+    private flightKey;
+    private burnSlots;
     private generation;
     private materialCache;
     private outlineMaterial;
@@ -67,6 +80,27 @@ export declare class RocketViewer {
     private repeating;
     /** One of the three looks. The camera does not move. */
     setLook(look: LookName): void;
+    /** Which engines burn: at full thrust every one that shows, a count for each part, or none. Nothing is made or freed by this after a part's first flame: only which of its flames are drawn changes. */
+    setEngines(lit: {
+        readonly [slot: string]: number;
+    } | "full" | null): void;
+    /** The page reads reduced motion again at each change, so a view opened earlier follows the reader now. */
+    setReduced(reduced: boolean): void;
+    private relight;
+    /** The hull's glow stands under the lowest part that burns, wherever that part has got to. */
+    private placeGlow;
+    /** Starts, moves or ends a flight. While one is on, the parts stand where its timeline says, the engines are its own and the camera holds all of it. Under reduced motion it is the same, with no flames. */
+    setFlight(clock: FlightClock | null): void;
+    /** After a flight starts or ends the camera holds the new bounds, keeping its angle. */
+    private reframe;
+    /** What is showing, with the flames when they are lit, so a flame is never cut off at the foot of the picture. */
+    private litBounds;
+    /** What the picture must hold: all of a flight while one is on. */
+    private boundsNow;
+    private flightParts;
+    /** Puts everything where the timeline says now. */
+    private applyFlight;
+    private freePlumes;
     /** Which painted parts are in: "model" when all come from a licensed model, "code" when this package's own paint, "loading" while one is on its way. */
     private reportPainted;
     /** The licensed model of a part, fetched the first time the painted look asks for it. Until it is in, and if it fails, this package's own paint shows. */