@johnmorrisdotca/uchusen-rockets 0.2.2 → 0.4.0

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. */

package/dist/element/scene.js

@@ -7,11 +7,15 @@ import { LineMaterial } from "three/addons/lines/LineMaterial.js";
 import { LineSegments2 } from "three/addons/lines/LineSegments2.js";
 import { LineSegmentsGeometry } from "three/addons/lines/LineSegmentsGeometry.js";
 import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
+import { bellsOf, FLAME_GAP_MS, FLAME_SETTLE_MS, pickBells } from "../engines.js";
 import { directionOf, FOV_DEG, frameFor, PICTURE_H, turnedBy } from "../framing.js";
 import { LOOKS } from "../looks.js";
 import { pixelRatioFor } from "../pixels.js";
 import { MATERIALS } from "../model/materials.js";
 import { paintGlow, paintSky, paintSteel, paintTiles } from "./paint.js";
+import { flightBounds, frameAt } from "../flight.js";
+import { GroundKit } from "./ground.js";
+import { PartPlumes, PlumeKit } from "./plumes.js";
 const IDLE_STOP_MS = 90_000;
 const MOVE_MS = 1400;
 const VIEW_MS = 700;
@@ -73,6 +77,8 @@ void main() {
 /** The materials of an engine's bell, in this package's own meshes. */
 const NOZZLE_MATERIALS = new Set(["bell", "bell-inside", "engine-metal"]);
 const asVec = (v) => [v.x, v.y, v.z];
+/** A flame's colours, a picture: Raptor burns methane, Merlin kerosene. */
+const fuelOf = (built) => (built.report.parts.some(({ part }) => part.rocket === "starship") ? "methane" : "kerosene");
 /** The pictures a licensed model's material may hold (the shared sky it reflects is not one of them). */
 const MODEL_PICTURES = ["map", "normalMap", "roughnessMap", "metalnessMap", "aoMap", "emissiveMap"];
 export class RocketViewer {
@@ -89,6 +95,20 @@ export class RocketViewer {
     built = null;
     look = "line";
     show = "together";
+    plumes;
+    lit = null;
+    /** What was lit before a flight took over the engines. */
+    litOutside = null;
+    burningNow = 0;
+    /** A flame moves until then. */
+    flameUntil = 0;
+    flameDrawn = 0;
+    inTick = false;
+    clockNow = null;
+    flightOn = false;
+    ground = null;
+    flightKey = "";
+    burnSlots = null;
     generation = 0;
     materialCache = new Map();
     outlineMaterial;
@@ -148,7 +168,8 @@ export class RocketViewer {
         rim.position.set(-4, 1, -5);
         const low = new DirectionalLight("#ffffff", 0.35);
         low.position.set(1, -4, 2);
-        this.scene.add(key, rim, low, new HemisphereLight("#d7e6ff", "#22252b", 0.35), this.root);
+        this.plumes = new PlumeKit();
+        this.scene.add(key, rim, low, new HemisphereLight("#d7e6ff", "#22252b", 0.35), this.plumes.light, this.root);
         this.outlineMaterial = new ShaderMaterial({
             vertexShader: OUTLINE_VERTEX,
             fragmentShader: OUTLINE_FRAGMENT,
@@ -220,6 +241,7 @@ export class RocketViewer {
                 from: [0, 0, 0],
                 to: [0, 0, 0],
                 hideAtEnd: false,
+                plumes: null,
             };
             this.takeMeshes(source, code, view);
             const place = places.find((p) => p.slot === part.slot);
@@ -230,7 +252,13 @@ export class RocketViewer {
         }
         this.addGlow();
         this.setLook(look);
+        this.plumes.setFuel(fuelOf(built));
         this.frameTo(angle ?? this.currentAngle(), false);
+        if (this.clockNow) {
+            this.flightKey = "";
+            this.flightOn = false;
+            this.setFlight(this.clockNow);
+        }
         this.canvas.dataset.ready = "true";
         this.canvas.dataset.parts = this.parts.map((part) => part.slot).join(" ");
         this.drivenDirty = this.driven !== null;
@@ -385,9 +413,200 @@ export class RocketViewer {
         if (this.glow)
             this.glow.visible = !painted;
         this.canvas.dataset.look = look;
+        this.plumes.setLook(painted);
+        this.relight();
         this.reportPainted();
         this.wake();
     }
+    /** 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) {
+        // a flight keeps its own, and what was asked for comes back after it
+        if (this.clockNow) {
+            this.litOutside = lit;
+            this.flightKey = "";
+            this.applyFlight();
+            this.wake();
+            return;
+        }
+        const framed = this.lit === "full";
+        this.lit = lit;
+        this.relight();
+        if (framed !== (lit === "full") && this.built && !this.pose)
+            this.reframe();
+        this.wake();
+    }
+    /** The page reads reduced motion again at each change, so a view opened earlier follows the reader now. */
+    setReduced(reduced) {
+        this.options.reducedMotion = reduced;
+    }
+    relight() {
+        if (!this.built)
+            return;
+        const counts = new Map();
+        if (this.lit === "full") {
+            for (const bell of this.built.flamesOf(this.show))
+                counts.set(bell.slot, (counts.get(bell.slot) ?? 0) + 1);
+        }
+        else if (this.lit)
+            for (const [slot, count] of Object.entries(this.lit))
+                counts.set(slot, count);
+        let burning = 0;
+        let lowest = null;
+        for (const view of this.parts) {
+            const count = counts.get(view.slot) ?? 0;
+            if (count > 0 && !view.plumes) {
+                const bells = bellsOf(this.built.parts.find((part) => part.slot === view.slot)?.pieces ?? []);
+                if (bells.length === 0)
+                    continue;
+                view.plumes = new PartPlumes(this.plumes, bells);
+                view.holder.add(view.plumes.group);
+            }
+            if (!view.plumes)
+                continue;
+            const fired = pickBells(view.plumes.bells, count);
+            view.plumes.light(fired);
+            burning += fired.length;
+            if (fired.length > 0 && !lowest)
+                lowest = { view, y: fired[0].y - 1 };
+        }
+        this.burningNow = burning;
+        this.burnSlots = lowest;
+        this.plumes.setBurning(burning);
+        this.plumes.light.intensity = burning === 0 || this.look !== "painted" ? 0 : Math.min(900, 120 + burning * 40);
+        this.placeGlow();
+        this.canvas.dataset.engines = burning > 0 ? "on" : "off";
+        this.canvas.dataset.plumes = String(burning);
+    }
+    /** The hull's glow stands under the lowest part that burns, wherever that part has got to. */
+    placeGlow() {
+        const lowest = this.burnSlots;
+        if (!lowest)
+            return;
+        lowest.view.holder.updateMatrix();
+        this.plumes.light.position.set(0, lowest.y, 0).applyMatrix4(lowest.view.holder.matrix);
+    }
+    /** 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) {
+        this.clockNow = clock;
+        if (!this.built)
+            return;
+        const before = this.flightOn;
+        this.flightOn = clock !== null;
+        if (!clock) {
+            if (!before)
+                return;
+            this.flightKey = "";
+            if (this.ground)
+                this.ground.group.visible = false;
+            for (const part of this.parts)
+                if (part.model)
+                    this.showCode(part, this.look === "painted");
+            const places = this.built.placesOf(this.show);
+            for (const part of this.parts) {
+                const place = places.find((one) => one.slot === part.slot);
+                part.holder.position.set(...(place?.at ?? [0, 0, 0]));
+                part.holder.rotation.set(0, 0, 0);
+                part.holder.visible = place?.shown ?? false;
+            }
+            this.plumes.setAir(0);
+            this.plumes.setFloor(-1e6);
+            this.reframe();
+            this.lit = this.litOutside;
+            this.relight();
+            this.wake();
+            return;
+        }
+        if (!before) {
+            this.litOutside = this.lit;
+            this.pose = null;
+            if (!this.ground) {
+                this.ground = new GroundKit();
+                this.scene.add(this.ground.group);
+            }
+            const { min, max } = this.boundsNow();
+            this.ground.fit(this.built.boundsOf("together").max[0] * 2.4 + 4, Math.max(Math.abs(min[0]), Math.abs(max[0])));
+            this.ground.group.visible = true;
+            for (const part of this.parts)
+                if (part.model)
+                    this.showCode(part, this.look === "painted");
+            this.reframe();
+        }
+        this.applyFlight();
+        this.wake();
+    }
+    /** After a flight starts or ends the camera holds the new bounds, keeping its angle. */
+    reframe() {
+        if (this.driven)
+            this.applyDriven();
+        else
+            this.applyFraming(this.framingFor(this.currentAngle()));
+    }
+    /** What is showing, with the flames when they are lit, so a flame is never cut off at the foot of the picture. */
+    litBounds() {
+        const built = this.built;
+        return this.lit === "full" ? built.boundsOf(this.show, true) : built.boundsOf(this.show);
+    }
+    /** What the picture must hold: all of a flight while one is on. */
+    boundsNow() {
+        if (!this.built)
+            throw new Error("nothing is loaded");
+        if (!this.clockNow)
+            return this.litBounds();
+        const { height, parts } = this.flightParts();
+        const { min, max } = flightBounds(this.clockNow.flight, parts, height);
+        return { min, max };
+    }
+    flightParts() {
+        const built = this.built;
+        const places = built.placesOf("together");
+        const height = built.boundsOf("together").max[1];
+        return {
+            height,
+            parts: built.parts.map((part) => {
+                const at = places.find((place) => place.slot === part.slot)?.at ?? [0, 0, 0];
+                return { slot: part.slot, baseY: at[1], height: part.record.height, radius: Math.max(part.record.diameter / 2, Math.abs(at[0]) + part.record.diameter / 2) };
+            }),
+        };
+    }
+    /** Puts everything where the timeline says now. */
+    applyFlight() {
+        const clock = this.clockNow;
+        if (!clock || !this.built)
+            return;
+        const { height, parts } = this.flightParts();
+        const frame = frameAt(clock.flight, clock.position, parts, height);
+        const places = this.built.placesOf("together");
+        for (const part of this.parts) {
+            const pose = frame.poses[part.slot];
+            const place = places.find((one) => one.slot === part.slot);
+            if (!pose || !place)
+                continue;
+            const turn = MathUtils.degToRad(pose.pitch);
+            const middle = (parts.find((one) => one.slot === part.slot)?.height ?? 0) / 2;
+            part.holder.visible = !pose.gone;
+            part.holder.rotation.set(0, 0, turn);
+            part.holder.position.set(place.at[0] + pose.dx + Math.sin(turn) * middle, place.at[1] + pose.dy + middle - Math.cos(turn) * middle, place.at[2]);
+        }
+        this.plumes.setAir(frame.air);
+        this.plumes.setFloor(frame.groundY);
+        this.ground?.set(frame.groundY, this.options.reducedMotion ? 0 : frame.smoke, performance.now() / 1000);
+        const key = `${clock.flight.id}/${frame.index}/${this.options.reducedMotion}`;
+        if (key !== this.flightKey) {
+            this.flightKey = key;
+            this.lit = this.options.reducedMotion ? null : frame.burns;
+            this.relight();
+            this.canvas.dataset.phase = frame.phase.id;
+        }
+        else
+            this.placeGlow();
+        this.needsDraw = true;
+    }
+    freePlumes() {
+        for (const view of this.parts) {
+            view.plumes?.dispose();
+            view.plumes = null;
+        }
+    }
     /** 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. */
     reportPainted() {
         if (this.look !== "painted") {
@@ -445,7 +664,8 @@ export class RocketViewer {
     showCode(part, painted) {
         const nozzleOnly = painted && part.ownNozzle;
         part.code.visible = !painted || nozzleOnly;
-        const nozzle = nozzleOnly && this.show !== "together";
+        // in a flight a stage leaves the one below, so its nozzle shows then too
+        const nozzle = nozzleOnly && (this.show !== "together" || this.flightOn);
         for (const { mesh, name } of part.faces)
             mesh.visible = !nozzleOnly || (nozzle && NOZZLE_MATERIALS.has(name));
         for (const lines of [...part.feature, ...part.weld])
@@ -455,7 +675,7 @@ export class RocketViewer {
     }
     /** Together, apart, or one part alone: an animated move, or a cut under reduced motion. */
     setShow(show) {
-        if (!this.built || show === this.show)
+        if (!this.built || show === this.show || this.clockNow)
             return;
         this.show = show;
         for (const part of this.parts)
@@ -474,6 +694,7 @@ export class RocketViewer {
             }
             this.pose = null;
             this.applyFraming(framing);
+            this.relight();
             this.wake();
             return;
         }
@@ -500,11 +721,12 @@ export class RocketViewer {
             }
         }
         this.startPose(framing, MOVE_MS, true);
+        this.relight();
     }
     framingFor(angle) {
         if (!this.built)
             throw new Error("nothing is loaded");
-        const { min, max } = this.built.boundsOf(this.show);
+        const { min, max } = this.boundsNow();
         return frameFor(min, max, angle, this.camera.aspect);
     }
     applyFraming(framing) {
@@ -674,6 +896,8 @@ export class RocketViewer {
         this.resize.disconnect();
         this.controls.dispose();
         this.disposeParts();
+        this.plumes.dispose();
+        this.ground?.dispose();
         this.glow?.geometry.dispose();
         this.glow?.material?.dispose();
         for (const material of this.materialCache.values())
@@ -688,6 +912,7 @@ export class RocketViewer {
     }
     /** Lets the graphics card have back what the parts took: geometries, the thick lines' materials and a licensed model's own materials and pictures. */
     disposeParts() {
+        this.freePlumes();
         for (const part of this.parts) {
             part.holder.traverse((node) => {
                 node.geometry?.dispose();
@@ -738,7 +963,11 @@ export class RocketViewer {
         this.wake();
     }
     wake() {
-        this.lastActive = performance.now();
+        // the view's own spin is not someone touching it: without this a spin would never settle
+        if (!this.inTick) {
+            this.lastActive = performance.now();
+            this.flameUntil = this.lastActive + FLAME_SETTLE_MS;
+        }
         this.needsDraw = true;
         if (!this.frame && this.visible && !document.hidden && !this.disposed)
             this.frame = requestAnimationFrame(this.tick);
@@ -747,6 +976,7 @@ export class RocketViewer {
         this.frame = 0;
         if (!this.visible || document.hidden || this.disposed)
             return;
+        this.inTick = true;
         this.clock.update(now);
         const dt = Math.min(this.clock.getDelta(), 0.1);
         const ambient = !this.options.reducedMotion && now - this.lastActive < IDLE_STOP_MS;
@@ -804,6 +1034,18 @@ export class RocketViewer {
         }
         if (!ambient)
             this.controls.autoRotate = false;
+        const flying = this.clockNow?.playing ?? false;
+        if (flying && this.clockNow) {
+            this.clockNow.advance(dt);
+            this.applyFlight();
+            this.options.onFlight?.();
+        }
+        const flaming = this.burningNow > 0 && !this.options.reducedMotion && (flying || performance.now() < this.flameUntil);
+        if (flaming && now - this.flameDrawn >= FLAME_GAP_MS) {
+            this.flameDrawn = now;
+            this.plumes.setTime(now / 1000);
+            this.needsDraw = true;
+        }
         const changed = this.controls.update(dt);
         if (this.needsDraw || changed || this.pose) {
             this.syncSizes();
@@ -820,11 +1062,12 @@ export class RocketViewer {
                 this.canvas.dataset.pan = `${Math.round(this.driven.panX)},${Math.round(this.driven.panY)}`;
             }
             if (this.glow)
-                this.glow.visible = this.look !== "painted" && this.camera.position.y > 0;
+                this.glow.visible = this.look !== "painted" && this.camera.position.y > 0 && !this.clockNow;
         }
         // the controls' own change event may already have asked for the next frame (wake): one frame is asked for, never two, or each frame would double the next
-        if (!this.frame && ((ambient && this.controls.autoRotate) || changed || this.pose || this.needsDraw || Math.abs(dA) > 1e-5))
+        if (!this.frame && ((ambient && this.controls.autoRotate) || changed || this.pose || this.needsDraw || Math.abs(dA) > 1e-5 || flaming || flying))
             this.frame = requestAnimationFrame(this.tick);
+        this.inTick = false;
     };
     syncSizes() {
         const size = this.renderer.getDrawingBufferSize(new Vector2());