@johnmorrisdotca/uchusen-rockets 0.2.0 → 0.2.1

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 ## [Unreleased]
 
+## [0.2.1]
+
+- Fixed: the demo could hang the screen while turning. When the 3D view turned by itself, or glided to a stop after a drag, the controls' change event asked for the next frame while the view's own loop did too, so each frame started two and the number of draws doubled every frame: thousands of draws a second, enough to starve the graphics card (measured in a real browser on a real graphics card: 12,308 draws in 3 seconds, against 181 now at 60 frames a second). One frame is asked for, once.
+- Fixed: every change of variant, look or parts left the old shapes in the graphics card (about 60 buffers each), and a painted model's pictures with them. They are given back now, and the glow's too.
+- Fixed: the canvas had no size limit but a ratio of 2. It is held to 4096 pixels a side and 6 million pixels in all, so a view as wide as a 5K screen is no longer drawn at 15 million.
+- The drawing, with no WebGL, is zoomed and moved by its `viewBox` instead of a CSS scale, so it never grows past its box; it is made again at most 20 times a second, never while out of sight (a hidden tab, scrolled away), and is not rebuilt when only the zoom or the move changes.
+- The "Tilt to turn" listener is let go when the 3D view is, and does nothing out of sight; it was added again after each return to the screen.
+- `drive()` with the same choice again does nothing.
+- The demo's auto-turn stops after a minute and when the view leaves the screen; Play starts it again.
+- `pixelRatioFor(width, height, deviceRatio)`, with `MAX_PIXELS`, `MAX_SIDE` and `MAX_RATIO`.
+- New browser tests: draws per frame, nothing drawing when still or out of sight, no growth of contexts, buffers, vertex arrays or textures over changes, a lost context, and the canvas within its budget from 1x to 5x on a 5K screen.
+
 ## [0.2.0]
 
 - `element.drive({ yaw, tilt, zoom, panX, panY })`: a page can hand the turn, tip, zoom and move to the family's `<kazoku-view-controls>` ([`@johnmorrisdotca/kazoku-ui`](https://www.npmjs.com/package/@johnmorrisdotca/kazoku-ui)). The element's own drag, wheel, keys and spin stand down, and the 3D view and the drawing both follow, so it works with no WebGL as well. `drive(null)` takes them back. kazoku-ui is not imported by the package: the demo uses it, as a dev dependency.

package/dist/element/scene.d.ts

@@ -102,7 +102,8 @@ export declare class RocketViewer {
     private lens;
     setTilt(azimuthDeg: number, polarDeg: number): void;
     dispose(): void;
-    private disposeTree;
+    /** Lets the graphics card have back what the parts took: geometries, the thick lines' materials and a licensed model's own materials and pictures. */
+    private disposeParts;
     private addGlow;
     /** The pool of light is as wide as what stands in it. */
     private fitGlow;

package/dist/element/scene.js

@@ -9,6 +9,7 @@ import { LineSegmentsGeometry } from "three/addons/lines/LineSegmentsGeometry.js
 import { GLTFLoader } from "three/addons/loaders/GLTFLoader.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";
 const IDLE_STOP_MS = 90_000;
@@ -72,6 +73,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];
+/** 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 {
     canvas;
     frames = 0;
@@ -110,7 +113,6 @@ export class RocketViewer {
         this.holder = holder;
         this.options = options;
         this.renderer = new WebGLRenderer({ antialias: true, alpha: true, powerPreference: "low-power" });
-        this.renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
         this.renderer.outputColorSpace = SRGBColorSpace;
         this.renderer.toneMapping = ACESFilmicToneMapping;
         this.renderer.toneMappingExposure = 1;
@@ -188,9 +190,7 @@ export class RocketViewer {
         const gltf = await new GLTFLoader().parseAsync(bytes.buffer.slice(bytes.byteOffset, bytes.byteOffset + bytes.byteLength), "");
         if (this.disposed || generation !== this.generation)
             return;
-        for (const part of this.parts)
-            part.holder.removeFromParent();
-        this.disposeTree(this.root);
+        this.disposeParts();
         this.root.clear();
         this.parts = [];
         this.built = built;
@@ -609,6 +609,9 @@ export class RocketViewer {
     }
     /** Hands the turn, tip, zoom and pan to the page, as the family's view controls report them: this view's own hands (drag, wheel, keys, spin) stand down, and the camera is the chosen view's angle turned and tipped by them. `null` takes them back. */
     drive(choice) {
+        const same = choice !== null && this.driven !== null && Object.keys(choice).every((key) => choice[key] === this.driven?.[key]);
+        if (same)
+            return;
         this.driven = choice;
         this.controls.enabled = choice === null;
         if (choice)
@@ -670,7 +673,9 @@ export class RocketViewer {
         document.removeEventListener("visibilitychange", this.onVisibility);
         this.resize.disconnect();
         this.controls.dispose();
-        this.disposeTree(this.root);
+        this.disposeParts();
+        this.glow?.geometry.dispose();
+        this.glow?.material?.dispose();
         for (const material of this.materialCache.values())
             material.dispose();
         this.outlineMaterial.dispose();
@@ -681,13 +686,25 @@ export class RocketViewer {
         this.renderer.forceContextLoss();
         this.canvas.remove();
     }
-    disposeTree(tree) {
-        tree.traverse((node) => {
-            const geometry = node.geometry;
-            geometry?.dispose();
-            if (node instanceof LineSegments2)
-                node.material.dispose();
-        });
+    /** 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() {
+        for (const part of this.parts) {
+            part.holder.traverse((node) => {
+                node.geometry?.dispose();
+                if (node instanceof LineSegments2)
+                    node.material.dispose();
+            });
+            part.model?.traverse((node) => {
+                if (!(node instanceof Mesh))
+                    return;
+                for (const material of Array.isArray(node.material) ? node.material : [node.material]) {
+                    for (const slot of MODEL_PICTURES)
+                        material[slot]?.dispose();
+                    material.dispose();
+                }
+            });
+            part.holder.removeFromParent();
+        }
     }
     addGlow() {
         if (!this.built || this.glow)
@@ -805,7 +822,8 @@ export class RocketViewer {
             if (this.glow)
                 this.glow.visible = this.look !== "painted" && this.camera.position.y > 0;
         }
-        if ((ambient && this.controls.autoRotate) || changed || this.pose || this.needsDraw || Math.abs(dA) > 1e-5)
+        // 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))
             this.frame = requestAnimationFrame(this.tick);
     };
     syncSizes() {
@@ -815,7 +833,9 @@ export class RocketViewer {
     fit() {
         const w = Math.max(1, this.holder.clientWidth);
         const h = Math.max(1, this.holder.clientHeight);
+        this.renderer.setPixelRatio(pixelRatioFor(w, h, window.devicePixelRatio));
         this.renderer.setSize(w, h, false);
+        this.outlineMaterial.uniforms.width.value = LOOKS[this.look].outlinePx * this.renderer.getPixelRatio();
         this.camera.aspect = w / h;
         this.lens();
         this.syncSizes();

package/dist/element.d.ts

@@ -13,7 +13,6 @@ export declare class UchusenRocket extends HTMLBase {
     private drawing;
     private viewer;
     private watch;
-    private cleanups;
     private releaseTimer;
     private revealTimer;
     private generation;
@@ -25,6 +24,11 @@ export declare class UchusenRocket extends HTMLBase {
     private key;
     private driven;
     private placeFrame;
+    private placedAt;
+    private stale;
+    private onScreen;
+    private drawn;
+    private tiltCleanups;
     /** What is showing now. */
     get state(): RocketState;
     /** What the fit check said about what is showing: its label, parts and credits. */
@@ -36,8 +40,9 @@ export declare class UchusenRocket extends HTMLBase {
     get angle(): Angle | null;
     /** Lets a page choose the turn, tip, zoom and pan, as the family's `<kazoku-view-controls>` reports them in `kazoku-viewchange` (`element.drive(event.detail)`): the element's own drag, wheel, keys and spin stand down, and the 3D view and the drawing both follow. `null` takes them back. */
     drive(choice: Partial<ViewChoice> | null): void;
-    /** The drawing, turned and moved to the chosen view. The 3D view moves itself, so only the drawing needs it, and only until the 3D view shows. */
+    /** The drawing, turned and moved to the chosen view. The 3D view moves itself, so only the drawing needs it, and only until the 3D view shows. It is drawn at most about 20 times a second and never while out of sight: it is made again when it comes back. */
     private place;
+    private seen;
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, before: string | null, after: string | null): void;
@@ -51,13 +56,14 @@ export declare class UchusenRocket extends HTMLBase {
     private settings;
     private update;
     private renderShell;
-    /** The drawing for what the attributes say now. It is made from code, so it needs no file. */
+    /** The drawing for what the attributes say now. It is made from code, so it needs no file. A zoom or a move only changes which part of it the box shows (its viewBox), so the drawing is as sharp as the box and never grows past it. */
     private redraw;
     private mark;
     private applyRocket;
     private lastView;
     private applySettings;
     private startWatching;
+    private stopTilt;
     private fallBack;
     private start;
     private startTilt;

package/dist/element.js

@@ -14,6 +14,8 @@ const HTMLBase = typeof HTMLElement === "undefined" ? class {
 /** A view out of sight keeps its WebGL canvas this long before letting it go (a browser allows only a few at a time). */
 const RELEASE_MS = 30_000;
 const DEFAULT_SPIN = { seconds: 180, way: "cw" };
+/** The drawing, followed along a turn, is made again at most this often. */
+const PLACE_MS = 50;
 let assetBase = null;
 /** Where the licensed models are, for every element with no `assets` attribute of its own. Left unset: beside this module, in ./assets/. */
 export function setAssetBase(url) {
@@ -88,7 +90,6 @@ export class UchusenRocket extends HTMLBase {
     drawing = null;
     viewer = null;
     watch = null;
-    cleanups = [];
     releaseTimer = 0;
     revealTimer = 0;
     generation = 0;
@@ -100,6 +101,11 @@ export class UchusenRocket extends HTMLBase {
     key = "";
     driven = null;
     placeFrame = 0;
+    placedAt = 0;
+    stale = false;
+    onScreen = true;
+    drawn = { key: "", box: [0, 0, 1, 1] };
+    tiltCleanups = [];
     /** What is showing now. */
     get state() {
         return this.stateNow;
@@ -122,6 +128,7 @@ export class UchusenRocket extends HTMLBase {
     }
     /** Lets a page choose the turn, tip, zoom and pan, as the family's `<kazoku-view-controls>` reports them in `kazoku-viewchange` (`element.drive(event.detail)`): the element's own drag, wheel, keys and spin stand down, and the 3D view and the drawing both follow. `null` takes them back. */
     drive(choice) {
+        const before = this.driven;
         if (choice === null) {
             this.driven = null;
             delete this.dataset.driven;
@@ -137,22 +144,44 @@ export class UchusenRocket extends HTMLBase {
             };
             this.dataset.driven = "true";
         }
+        const now = this.driven;
+        if (before && now && Object.keys(now).every((key) => before[key] === now[key]))
+            return;
         this.viewer?.drive(this.driven);
         this.place();
     }
-    /** The drawing, turned and moved to the chosen view. The 3D view moves itself, so only the drawing needs it, and only until the 3D view shows. */
+    /** The drawing, turned and moved to the chosen view. The 3D view moves itself, so only the drawing needs it, and only until the 3D view shows. It is drawn at most about 20 times a second and never while out of sight: it is made again when it comes back. */
     place() {
         if (this.stateNow === "3d" && this.viewer)
             return;
+        if (!this.onScreen || document.hidden) {
+            this.stale = true;
+            return;
+        }
         window.cancelAnimationFrame(this.placeFrame);
-        this.placeFrame = window.requestAnimationFrame(() => this.redraw());
+        const frame = (time) => {
+            if (time - this.placedAt < PLACE_MS) {
+                this.placeFrame = window.requestAnimationFrame(frame);
+                return;
+            }
+            this.placedAt = time;
+            this.stale = false;
+            this.redraw();
+        };
+        this.placeFrame = window.requestAnimationFrame(frame);
     }
+    seen = () => {
+        if (!document.hidden && this.stale)
+            this.place();
+    };
     connectedCallback() {
         if (!this.shadowRoot)
             adopt(this.attachShadow({ mode: "open" }), CSS, rocketSheet);
+        document.addEventListener("visibilitychange", this.seen);
         this.queue();
     }
     disconnectedCallback() {
+        document.removeEventListener("visibilitychange", this.seen);
         this.teardown();
         this.key = "";
     }
@@ -204,8 +233,7 @@ export class UchusenRocket extends HTMLBase {
         window.clearTimeout(this.releaseTimer);
         window.clearTimeout(this.revealTimer);
         window.cancelAnimationFrame(this.placeFrame);
-        for (const clean of this.cleanups.splice(0))
-            clean();
+        this.stopTilt();
         this.viewer?.dispose();
         this.viewer = null;
     }
@@ -274,23 +302,35 @@ export class UchusenRocket extends HTMLBase {
         this.holder = holder;
         this.startWatching();
     }
-    /** The drawing for what the attributes say now. It is made from code, so it needs no file. */
+    /** The drawing for what the attributes say now. It is made from code, so it needs no file. A zoom or a move only changes which part of it the box shows (its viewBox), so the drawing is as sharp as the box and never grows past it. */
     redraw() {
         if (!this.builtNow || !this.drawing)
             return;
         const { look, show, angle } = this.settings(this.builtNow);
         // when a 3D view is showing, a drawing of the same angle is ready behind it
         const from = this.driven ? turnedBy(angle, this.driven.yaw, this.driven.tilt) : (this.viewer?.currentAngle() ?? angle);
-        const svg = this.builtNow.svg({ look, show, view: from });
-        const template = document.createElement("template");
-        template.innerHTML = svg;
-        const node = template.content.firstElementChild;
-        if (!node)
-            return;
-        node.setAttribute("aria-label", this.getAttribute("label") ?? this.builtNow.report.label);
-        this.drawing.replaceChildren(node);
+        const label = this.getAttribute("label") ?? this.builtNow.report.label;
+        const key = `${this.key}|${look}|${show}|${from.az.toFixed(2)}|${from.el.toFixed(2)}|${label}`;
+        let node = this.drawing.firstElementChild;
+        if (key !== this.drawn.key || !node) {
+            const template = document.createElement("template");
+            template.innerHTML = this.builtNow.svg({ look, show, view: from });
+            node = template.content.firstElementChild;
+            if (!node)
+                return;
+            node.setAttribute("aria-label", label);
+            this.drawing.replaceChildren(node);
+            const [x = 0, y = 0, w = 1, h = 1] = (node.getAttribute("viewBox") ?? "").split(/[\s,]+/).map(Number);
+            this.drawn = { key, box: [x, y, w, h] };
+        }
         const { zoom = 1, panX = 0, panY = 0 } = this.driven ?? {};
-        this.drawing.style.transform = zoom !== 1 || panX !== 0 || panY !== 0 ? `translate(${panX}px, ${panY}px) scale(${zoom})` : "";
+        const [x, y, w, h] = this.drawn.box;
+        // the picture fits the box (meet), so a user unit is `unit` pixels; the zoom is about the box's middle and the move is in pixels
+        const unit = Math.min(this.drawing.clientWidth / w, this.drawing.clientHeight / h) || 1;
+        const view = zoom === 1 && panX === 0 && panY === 0 ? [x, y, w, h] : [x + w / 2 - w / (2 * zoom) - panX / (unit * zoom), y + h / 2 - h / (2 * zoom) - panY / (unit * zoom), w / zoom, h / zoom];
+        node.setAttribute("viewBox", view.map((n) => +n.toFixed(3)).join(" "));
+        this.drawing.dataset.zoom = zoom.toFixed(2);
+        this.drawing.dataset.pan = `${Math.round(panX)},${Math.round(panY)}`;
     }
     mark() {
         if (!this.builtNow)
@@ -340,10 +380,15 @@ export class UchusenRocket extends HTMLBase {
             this.setState(reason === "off" ? "picture" : "fallback", reason);
             if (reason !== "off")
                 this.emit("uchusen-fallback", { reason });
-            return;
         }
-        this.setState("picture");
+        else
+            this.setState("picture");
         this.watch = new IntersectionObserver(([seen]) => {
+            this.onScreen = seen.isIntersecting;
+            if (seen.isIntersecting && this.stale)
+                this.place();
+            if (reason)
+                return;
             if (seen.isIntersecting) {
                 this.shownAt ||= performance.now();
                 window.clearTimeout(this.releaseTimer);
@@ -358,6 +403,7 @@ export class UchusenRocket extends HTMLBase {
                 this.releaseTimer = window.setTimeout(() => {
                     this.viewer?.dispose();
                     this.viewer = null;
+                    this.stopTilt();
                     if (generation === this.generation) {
                         this.setState("picture");
                         if (this.driven)
@@ -368,7 +414,12 @@ export class UchusenRocket extends HTMLBase {
         }, { rootMargin: "200px 0px" });
         this.watch.observe(this);
     }
+    stopTilt() {
+        for (const clean of this.tiltCleanups.splice(0))
+            clean();
+    }
     fallBack(why) {
+        this.stopTilt();
         this.viewer?.dispose();
         this.viewer = null;
         this.setState("fallback", why);
@@ -428,6 +479,7 @@ export class UchusenRocket extends HTMLBase {
         }
     }
     startTilt() {
+        this.stopTilt();
         const Orientation = (typeof DeviceOrientationEvent === "undefined" ? undefined : DeviceOrientationEvent);
         const mode = tiltMode({
             reducedMotion: media("(prefers-reduced-motion: reduce)"),
@@ -438,6 +490,8 @@ export class UchusenRocket extends HTMLBase {
         const listen = () => {
             let rest = null;
             const onTilt = (event) => {
+                if (!this.onScreen || document.hidden)
+                    return;
                 const reading = { beta: event.beta, gamma: event.gamma };
                 rest ??= reading;
                 const turn = tiltTurn(reading, rest, window.screen.orientation?.angle ?? 0);
@@ -445,7 +499,7 @@ export class UchusenRocket extends HTMLBase {
                     this.viewer?.setTilt(turn.azimuth, turn.polar);
             };
             window.addEventListener("deviceorientation", onTilt);
-            this.cleanups.push(() => window.removeEventListener("deviceorientation", onTilt));
+            this.tiltCleanups.push(() => window.removeEventListener("deviceorientation", onTilt));
         };
         if (mode === "on")
             listen();
@@ -466,7 +520,7 @@ export class UchusenRocket extends HTMLBase {
                 }
             });
             this.picture.appendChild(button);
-            this.cleanups.push(() => button.remove());
+            this.tiltCleanups.push(() => button.remove());
         }
     }
 }

package/dist/index.d.ts

@@ -17,6 +17,7 @@ export type { Look, LookName } from "./looks.ts";
 export { cleanShow, placesFor, showsOf } from "./layout.ts";
 export type { Place, ShowName } from "./layout.ts";
 export { CROSSFADE_MS, DRAWING_HOLD_MS, REDUCED_FADE_MS, revealDelay } from "./crossfade.ts";
+export { MAX_PIXELS, MAX_RATIO, MAX_SIDE, pixelRatioFor } from "./pixels.ts";
 export { tiltMode, tiltTurn } from "./tilt.ts";
 export type { Reading, TiltMode } from "./tilt.ts";
 export { MATERIALS } from "./model/materials.ts";

package/dist/index.js

@@ -9,5 +9,6 @@ export { axesOf, cleanView, DEFAULT_VIEW, directionOf, FOV_DEG, frameFor, PICTUR
 export { cleanLook, DEFAULT_LOOK, LOOK_NAMES, LOOKS } from "./looks.js";
 export { cleanShow, placesFor, showsOf } from "./layout.js";
 export { CROSSFADE_MS, DRAWING_HOLD_MS, REDUCED_FADE_MS, revealDelay } from "./crossfade.js";
+export { MAX_PIXELS, MAX_RATIO, MAX_SIDE, pixelRatioFor } from "./pixels.js";
 export { tiltMode, tiltTurn } from "./tilt.js";
 export { MATERIALS } from "./model/materials.js";

package/dist/pixels.d.ts

@@ -0,0 +1,8 @@
+/** The most the backing store may hold, in pixels (a 620 x 827 view at a ratio of 2 is 2 million). */
+export declare const MAX_PIXELS = 6000000;
+/** The longest side the backing store may have. */
+export declare const MAX_SIDE = 4096;
+/** The sharpest ratio ever used, however dense the screen. */
+export declare const MAX_RATIO = 2;
+/** The device pixel ratio to draw a `width` x `height` view at: the screen's own, held to 2, to 4096 pixels a side and to 6 million in all. At least 0.25, and 1 for a nonsense value. */
+export declare function pixelRatioFor(width: number, height: number, deviceRatio: number): number;

package/dist/pixels.js

@@ -0,0 +1,14 @@
+// How sharp the 3D canvas may be. The backing store is width x height x ratio squared, and a view as big as a 5K screen at a ratio of 2 would ask the graphics card for 15 million pixels, every frame. Pure.
+/** The most the backing store may hold, in pixels (a 620 x 827 view at a ratio of 2 is 2 million). */
+export const MAX_PIXELS = 6_000_000;
+/** The longest side the backing store may have. */
+export const MAX_SIDE = 4096;
+/** The sharpest ratio ever used, however dense the screen. */
+export const MAX_RATIO = 2;
+/** The device pixel ratio to draw a `width` x `height` view at: the screen's own, held to 2, to 4096 pixels a side and to 6 million in all. At least 0.25, and 1 for a nonsense value. */
+export function pixelRatioFor(width, height, deviceRatio) {
+    const w = Math.max(1, width);
+    const h = Math.max(1, height);
+    const wanted = Number.isFinite(deviceRatio) && deviceRatio > 0 ? Math.min(deviceRatio, MAX_RATIO) : 1;
+    return Math.max(0.25, Math.min(wanted, MAX_SIDE / Math.max(w, h), Math.sqrt(MAX_PIXELS / (w * h))));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@johnmorrisdotca/uchusen-rockets",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Uchusen Rockets 宇宙船: line drawings and 3D views of rockets, as a web component. Every variant with its own sourced sizes, a typed way to assemble a rocket from parts, stack and separate. No logos. three.js is a peer dependency.",
   "keywords": ["rocket", "rockets", "spaceship", "starship", "super-heavy", "falcon-9", "dragon", "spaceflight", "line-drawing", "svg", "3d", "3d-models", "glb", "gltf", "three", "threejs", "webgl", "web-component", "custom-element", "react", "typescript", "data"],
   "homepage": "https://johnmorrisdotca.github.io/uchusen-rockets/",