@driftengine/core 4.11.0 → 4.12.0

package/src/render/surfaceLayerLooks.ts

@@ -0,0 +1,155 @@
+/**
+ * Which layer of a layered material's arrays each of its layers reads, and how each looks: the
+ * fifteen vectors `shaders/flat/layerLooks.ts` reads, packed from `SurfaceMaterial.layers`.
+ *
+ * **Why a material needs these at all.** Layers read from the material's own arrays in order, so
+ * a texture worn by fifty materials in fifty tints had to be baked fifty times, each with its tint,
+ * its roughness range and its normal strength in the pixels. Picked by index from arrays the
+ * materials share, and given their look as numbers, each texture is held once: a set of layered
+ * materials built from a few textures costs those textures rather than one copy per material.
+ *
+ * **What it gives up**: fifteen fragment uniform vectors, so it is a lit switch of its own,
+ * `LAYER_LOOKS`, which a device short of vectors refuses while still drawing the layers; a layer's
+ * look is a handful of numbers, not a graph; and every layer is still read wherever any shows, as
+ * `surfaceLayers.ts` says, now from arrays that may be large.
+ */
+import type { Vec3 } from '../math/color.ts';
+import type { SurfaceLayers } from './surfaceLayers.ts';
+import { MAX_SURFACE_LAYERS, across } from './surfaceLayers.ts';
+
+/**
+ * One layer's own look, applied to what it reads before the layers are blended. Every field is the
+ * identity where it is absent, so a material names only what differs.
+ */
+export interface SurfaceLayerLook {
+  /** Multiplies the layer's colour, linear. Above 1 brightens it. Absent: `[1, 1, 1]`. */
+  readonly tint?: Vec3;
+  /** The roughness the ORM's green channel is spread over, from its 0 to its 1. Absent: `[0, 1]`. */
+  readonly roughness?: readonly [number, number];
+  /** The metalness the ORM's blue channel is spread over, the same way. Absent: `[0, 1]`. */
+  readonly metalness?: readonly [number, number];
+  /**
+   * How far the layer's normal map bends the surface: its tangent-space x and y times this, before
+   * the layers' normals are blended. 0 is flat, 1 the map as it is. Absent: 1.
+   */
+  readonly normalStrength?: number;
+  /**
+   * The layer's specular, in the units a mesh's vertices carry theirs: how strong a highlight is,
+   * and under `physicalSpecular` the reflectance head-on, `0.08 × specular`. Blended across the
+   * layers as their colours are. Absent: the surface's own, as its vertices give it.
+   */
+  readonly specular?: number;
+}
+
+/** What an occlusion read at the mesh's own coordinates darkens, and how far. */
+export interface SurfaceMeshOcclusion {
+  /** 0 to 1: the surface times `mix(1, occlusion, strength)`. Absent: 1. */
+  readonly strength?: number;
+  /**
+   * `'color'`, the default, darkens the blended colour, and so every light on it, the sun's too.
+   * `'ambient'` darkens the ambient light alone, sky, ground and probe, as an ambient occlusion
+   * does, leaving the sun, the lamps and the reflections as they were.
+   */
+  readonly into?: 'color' | 'ambient';
+  /** The range the occlusion's red is spread over, from its 0 to its 1. Absent: `[0, 1]`. */
+  readonly range?: readonly [number, number];
+}
+
+/** Floats `packLayerLooks` writes: fifteen vectors. */
+export const LOOK_FLOATS = 60;
+
+/** The specular a layer is packed with when it names none: the surface's own, as its vertices give it. */
+const OWN_SPECULAR = -1;
+
+/**
+ * Whether a material asks for anything the `LAYER_LOOKS` switch carries: layers picked by index,
+ * extra maps placed somewhere other than just past the layers, a look, a repeat that is a pair, or
+ * a mesh occlusion.
+ */
+export function asksLayerLooks<Texture>(
+  layers: SurfaceLayers<Texture> | null | undefined,
+): boolean {
+  if (layers === null || layers === undefined) return false;
+  return (
+    layers.arrayLayers !== undefined ||
+    layers.extrasAt !== undefined ||
+    layers.looks !== undefined ||
+    layers.repeats.some((repeat) => typeof repeat !== 'number') ||
+    occlusionOf(layers.meshOcclusion).strength > 0
+  );
+}
+
+/**
+ * `layers` into `out`, fifteen vectors, the identity wherever a material says nothing — which is
+ * also what a layered material that asks for none of this is drawn with once another has switched
+ * `LAYER_LOOKS` on, so it must draw exactly as it did before.
+ *
+ * - **0 to 7**: the array layer each layer reads, base first (layer `i` where not given); where the
+ *   maps beyond the layers start (the layer count where not given); the mesh occlusion's strength,
+ *   and what it darkens, 0 the colour and 1 the ambient light.
+ * - **8 to 47**: two vectors a layer, base first: its tint and its normal strength, then its
+ *   roughness range and its metalness range.
+ * - **48 to 59**: each layer's specular (−1 for the surface's own), each layer's repeat down (its
+ *   repeat across where it gave one number), and the range the occlusion is spread over.
+ *
+ * An array layer that is not a whole number at or above 0 reads layer `i`; a start that is not one
+ * is the count; a strength is held to 0..1; a tint channel, a normal strength or a specular that is
+ * not a number at or above 0 is the identity; a repeat down that is not a positive number is the
+ * repeat across; a range end that is not a number is the identity's end.
+ */
+export function packLayerLooks<Texture>(
+  layers: SurfaceLayers<Texture> | null | undefined,
+  out: Float32Array,
+): void {
+  const count = Math.min(layers?.repeats.length ?? 0, MAX_SURFACE_LAYERS);
+  const picks = layers?.arrayLayers;
+  for (let i = 0; i < MAX_SURFACE_LAYERS; i++) out[i] = arrayLayer(picks?.[i], i);
+  out[5] = arrayLayer(layers?.extrasAt, count);
+  const occlusion = occlusionOf(layers?.meshOcclusion);
+  out[6] = occlusion.strength;
+  out[7] = occlusion.into === 'ambient' ? 1 : 0;
+  for (let i = 0; i < MAX_SURFACE_LAYERS; i++) {
+    const look = layers?.looks?.[i] ?? null;
+    const at = 8 + i * 8;
+    out[at] = atLeastZero(look?.tint?.[0], 1);
+    out[at + 1] = atLeastZero(look?.tint?.[1], 1);
+    out[at + 2] = atLeastZero(look?.tint?.[2], 1);
+    out[at + 3] = atLeastZero(look?.normalStrength, 1);
+    out[at + 4] = finiteOr(look?.roughness?.[0], 0);
+    out[at + 5] = finiteOr(look?.roughness?.[1], 1);
+    out[at + 6] = finiteOr(look?.metalness?.[0], 0);
+    out[at + 7] = finiteOr(look?.metalness?.[1], 1);
+    out[48 + i] = atLeastZero(look?.specular, OWN_SPECULAR);
+    const repeat = layers?.repeats[i];
+    const acrossIt = positiveOr(across(repeat), 1);
+    out[53 + i] = typeof repeat === 'object' ? positiveOr(repeat[1], acrossIt) : acrossIt;
+  }
+  out[58] = finiteOr(occlusion.range?.[0], 0);
+  out[59] = finiteOr(occlusion.range?.[1], 1);
+}
+
+/** The number form of `meshOcclusion` as the object form, the strength held to 0..1. */
+function occlusionOf(
+  occlusion: number | SurfaceMeshOcclusion | undefined,
+): SurfaceMeshOcclusion & { readonly strength: number } {
+  const given =
+    typeof occlusion === 'number' ? { strength: occlusion } : (occlusion ?? { strength: 0 });
+  const strength = given.strength ?? 1;
+  return { ...given, strength: Number.isFinite(strength) ? Math.min(Math.max(strength, 0), 1) : 0 };
+}
+
+function arrayLayer(value: number | undefined, otherwise: number): number {
+  return value !== undefined && Number.isInteger(value) && value >= 0 ? value : otherwise;
+}
+
+function atLeastZero(value: number | undefined, otherwise: number): number {
+  return value !== undefined && Number.isFinite(value) && value >= 0 ? value : otherwise;
+}
+
+function positiveOr(value: number | undefined, otherwise: number): number {
+  return value !== undefined && Number.isFinite(value) && value > 0 ? value : otherwise;
+}
+
+function finiteOr(value: number | undefined, otherwise: number): number {
+  return value !== undefined && Number.isFinite(value) ? value : otherwise;
+}

package/src/render/surfaceLayers.ts

@@ -1,7 +1,9 @@
 /**
- * A material blended from layers by a mask: `SurfaceMaterial.layers`, and the two vectors
- * `shaders/flat/layered.ts` reads it from.
+ * A material blended from layers by a mask: `SurfaceMaterial.layers`, the four vectors
+ * `shaders/flat/layered.ts` reads it from, and the decisions both backends take about it.
  */
+import type { SurfaceLayerLook, SurfaceMeshOcclusion } from './surfaceLayerLooks.ts';
+import type { SurfaceProjection } from './surfaceProjection.ts';
 
 /** The most layers a material blends: a base and one for each of the mask's four channels. */
 export const MAX_SURFACE_LAYERS = 5;
@@ -9,36 +11,130 @@ export const MAX_SURFACE_LAYERS = 5;
 /**
  * Up to five layers, each its own colour, normal and roughness at its own repeat, blended by a mask.
  *
- * **Layer `i` is layer `i` of the material's arrays**: `albedo`, `normal` and `orm` each an array
- * whose layers are the material's layers in order, read at the mesh's coordinates times
+ * **Layer `i` is layer `i` of the material's arrays**, unless `arrayLayers` picks another: `albedo`,
+ * `normal` and `orm` each an array whose layers are the material's layers, read at the mesh's
+ * coordinates times
  * `repeats[i]`, so rock can repeat forty times across a cliff while the moss on it repeats three.
- * **The mask** is read at the mesh's own coordinates and lays each layer over those before it: red
- * lays layer 1 over the base, green layer 2 over that, blue layer 3, alpha layer 4. Its layer 0 is
- * read, from where a shading model's map goes, which is why a layered material carries no
- * `modelMap`. `emissiveLayer` gives the material's emissive map to one layer, glowing where that
- * layer shows and nowhere it is covered; absent, the map glows as on any material.
+ * Where the material has a `projection`, the layers are read at the world's horizontal position
+ * instead, so a repeat is so many a metre (with the projection's own scale at 1). **The mask** is
+ * read at the mesh's own coordinates and lays each layer over those before it: red lays layer 1
+ * over the base, green layer 2 over that, blue layer 3, alpha layer 4. `emissiveLayer` gives the
+ * material's emissive map to one layer, glowing where that layer shows and nowhere it is covered;
+ * absent, the map glows as on any material.
+ *
+ * **Maps beyond the layers ride the material's own arrays, after its layers**, so they take no
+ * texture binding of their own — the lit stage has none to spare: a mask the ORM array carries
+ * (`mask: 'orm'`) is the ORM array's layer just past the layers, an `addMask` the one after that,
+ * a `meshOcclusion` the one after any of those, and `meshNormal` the normal array's layer just past
+ * the layers. `extrasAt` moves where "just past" is, for materials that share arrays. Each shares
+ * its array's size and format, so a four-channel mask wants an array that stores four.
+ *
+ * **Shared arrays and a look of each layer's own** — `arrayLayers`, `extrasAt`, `looks` and
+ * `meshOcclusion` — are a lit switch of their own, `LAYER_LOOKS`, and `surfaceLayerLooks.ts` says
+ * what they cost.
  *
  * **What it gives up**: every layer's maps are read wherever any shows, three reads a layer, so five
  * layers are fifteen reads where one material is three; layers share an array's size and format; a
- * cutout reads the base layer's alpha; and the mask is sampled linear, so it is uploaded as data
+ * cutout reads the base layer's alpha; a mask read where a model's map goes leaves no room for one,
+ * so a lightmapped surface carries its mask in its ORM array or its vertices; a triplanar projection
+ * lays layers on the horizontal plane alone; and a mask is sampled linear, so it is uploaded as data
  * (`colorSpace: 'linear'`).
  */
 export interface SurfaceLayers<Texture> {
-  /** The weights, red to alpha laying layers 1 to 4, read at the mesh's coordinates. */
-  readonly mask: Texture;
-  /** Each layer's repeats across the mesh's coordinates, base first: one to five of them. */
-  readonly repeats: readonly number[];
+  /**
+   * Where the weights come from, red to alpha laying layers 1 to 4: a map read where a shading
+   * model's map goes; `'orm'`, the ORM array's layer just past the layers; or `'vertex'`, the
+   * vertex colour's red, green and blue, which then weights the layers instead of tinting them.
+   */
+  readonly mask: Texture | 'orm' | 'vertex';
+  /**
+   * Each layer's repeats across the mesh's coordinates, base first: one to five of them. A pair is a
+   * repeat across and a repeat down apart, moss stretched along a trunk; a pair is drawn through the
+   * `LAYER_LOOKS` switch, which a single number does not need.
+   */
+  readonly repeats: readonly (number | readonly [number, number])[];
   /** The layer the emissive map glows on, 0 to 4. Absent: everywhere, as on any material. */
   readonly emissiveLayer?: number;
+  /**
+   * How the layers combine. `'over'`, the default, lays each over the ones before it by its
+   * channel. `'sum'` mixes the base toward the sum of each layer times its channel, by the channels'
+   * sum held to 1: two layers at half each are both half there, where laying over would let the
+   * second cover half of the first.
+   */
+  readonly blend?: 'over' | 'sum';
+  /**
+   * A second mask added to one layer's weight, read where the layers are (the world, under a
+   * `projection`) times `repeat`, its red times `intensity`: sand drifting into the gravel's layer at
+   * a scale of its own. The ORM array's layer after the layers and any mask it carries.
+   */
+  readonly addMask?: {
+    readonly layer: number;
+    readonly repeat: number;
+    readonly intensity: number;
+  };
+  /**
+   * One layer weighted by how much the surface faces up rather than by its mask channel:
+   * `saturate(bias + sharpness × (up / 2 + 1/2))`, `up` the world normal's upward share before any
+   * normal map. Snow on the tops of rocks, moss on a ledge.
+   */
+  readonly facing?: {
+    readonly layer: number;
+    readonly bias: number;
+    readonly sharpness: number;
+  };
+  /**
+   * A normal map read at the mesh's own coordinates and tangents, the normal array's layer just past
+   * the layers, under the layers' blended normal: the large shapes of a rock or a cliff, which a
+   * layer repeating forty times across it cannot carry.
+   */
+  readonly meshNormal?: boolean;
+  /**
+   * Which layer of the material's albedo, normal and ORM arrays each layer reads, base first, so
+   * many materials can share one array of each kind and hold every texture once. Absent, or past
+   * its end, layer `i` reads layer `i`. The same index reads all three arrays, so a texture's three
+   * maps sit at the same layer of each.
+   */
+  readonly arrayLayers?: readonly number[];
+  /**
+   * The layer of each array where the maps beyond the layers start: the ORM array's mask, added
+   * mask and mesh occlusion, in that order, and the normal array's mesh normal. Absent: just past
+   * the layers, at the layer count — which is no place for them once materials share arrays.
+   */
+  readonly extrasAt?: number;
+  /**
+   * Each layer's own look, base first: a tint, the ranges its ORM's roughness and metalness are
+   * spread over, and how far its normal map bends the surface. Absent or null for a layer: the map
+   * as it is.
+   */
+  readonly looks?: readonly (SurfaceLayerLook | null | undefined)[];
+  /**
+   * An occlusion read at the mesh's own coordinates — the red of the ORM array's layer after the
+   * layers and any mask or added mask the array carries — darkening the surface by a strength from 0
+   * to 1: the large shading of a cliff that layers repeating across it cannot carry, as
+   * `meshNormal` carries its shape. A number is that strength, darkening the blended colour; the
+   * object form also chooses what it darkens and the range its red is spread over. Absent or 0:
+   * none.
+   */
+  readonly meshOcclusion?: number | SurfaceMeshOcclusion;
 }
 
-/** Floats `packSurfaceLayers` writes: two vectors. */
-export const LAYER_FLOATS = 8;
+/** Floats `packSurfaceLayers` writes: four vectors. */
+export const LAYER_FLOATS = 16;
+
+/** Where the mask is read, as the fourth float of the second vector carries it. */
+const MASK_SOURCE = { map: 0, orm: 1, vertex: 2 } as const;
 
 /**
- * `layers` into `out`: the five repeats (1 for a layer not given), then how many layers there are
- * and which one glows (−1 for none); zeros, no layers, where there are none. A repeat that is not a
- * positive number is 1, so a layer is never laid at a scale that collapses it to a point.
+ * `layers` into `out`, four vectors. The first five floats are the repeats (1 for a layer not
+ * given), then how many layers there are, which one glows (−1 for none) and where the mask comes
+ * from (0 a map, 1 the ORM array, 2 the vertex colour). Then the blend (0 over, 1 sum), whether a
+ * mesh normal is laid under the layers, the added mask's layer (−1 for none) and repeat; its
+ * intensity; and the facing layer (−1 for none), its bias and its sharpness. Zeros, no layers, where
+ * there are none.
+ *
+ * A repeat that is not a positive number is 1, so a layer is never laid at a scale that collapses it
+ * to a point; a glow, an added mask or a facing layer naming a layer there is not is none, and the
+ * base, which no channel lays, is not one an added mask or the facing can name.
  */
 export function packSurfaceLayers<Texture>(
   layers: SurfaceLayers<Texture> | null | undefined,
@@ -47,11 +143,79 @@ export function packSurfaceLayers<Texture>(
   out.fill(0);
   if (layers === null || layers === undefined || layers.repeats.length === 0) return;
   const count = Math.min(layers.repeats.length, MAX_SURFACE_LAYERS);
-  for (let i = 0; i < MAX_SURFACE_LAYERS; i++) {
-    const repeat = i < count ? (layers.repeats[i] as number) : 1;
-    out[i] = Number.isFinite(repeat) && repeat > 0 ? repeat : 1;
-  }
+  for (let i = 0; i < MAX_SURFACE_LAYERS; i++)
+    out[i] = positive(i < count ? across(layers.repeats[i]) : 1);
   out[5] = count;
   const glow = layers.emissiveLayer;
   out[6] = glow !== undefined && Number.isInteger(glow) && glow >= 0 && glow < count ? glow : -1;
+  out[7] =
+    layers.mask === 'orm'
+      ? MASK_SOURCE.orm
+      : layers.mask === 'vertex'
+        ? MASK_SOURCE.vertex
+        : MASK_SOURCE.map;
+  out[8] = layers.blend === 'sum' ? 1 : 0;
+  out[9] = layers.meshNormal === true ? 1 : 0;
+  const added = layers.addMask;
+  const addLayer = laidLayer(added?.layer, count);
+  out[10] = addLayer;
+  out[11] = addLayer < 0 ? 0 : positive(added?.repeat);
+  out[12] = addLayer < 0 ? 0 : finite(added?.intensity);
+  const facing = layers.facing;
+  const faceLayer = laidLayer(facing?.layer, count);
+  out[13] = faceLayer;
+  out[14] = faceLayer < 0 ? 0 : finite(facing?.bias);
+  out[15] = faceLayer < 0 ? 0 : finite(facing?.sharpness);
+}
+
+/** The texture a layered material's mask is, where it is one rather than another array or the vertices. */
+export function layerMaskMap<Texture>(
+  layers: SurfaceLayers<Texture> | null | undefined,
+): Texture | null {
+  const mask = layers?.mask;
+  return mask === undefined || mask === 'orm' || mask === 'vertex' ? null : mask;
+}
+
+/**
+ * Whether a material's layers can be drawn beside its `modelMap`: always, unless the mask is a map,
+ * which is read where a model's map goes and so cannot share the slot with one — a lightmap's page
+ * among them. The backends draw such a material as one layer and say so once.
+ */
+export function layersFitBeside<Texture>(
+  layers: SurfaceLayers<Texture>,
+  modelMap: Texture | null | undefined,
+): boolean {
+  return modelMap === null || modelMap === undefined || layerMaskMap(layers) === null;
+}
+
+/**
+ * The projection a layered material is drawn with: a triplanar one is laid on the horizontal plane,
+ * at its own scale, since every layer's maps read three times over would be forty-five reads a pixel.
+ * Anything else as it was. Whether to say so is the caller's.
+ */
+export function layeredProjection<Texture>(
+  projection: SurfaceProjection | null | undefined,
+  layers: SurfaceLayers<Texture> | null | undefined,
+): SurfaceProjection | null {
+  if (projection === null || projection === undefined) return null;
+  if (layers === null || layers === undefined || projection.kind !== 'triplanar') return projection;
+  return { kind: 'planar', scale: projection.scale };
+}
+
+/** A layer's repeat across: the number, or the first of a pair. The second is `LAYER_LOOKS`'. */
+export function across(repeat: number | readonly [number, number] | undefined): number | undefined {
+  return typeof repeat === 'number' || repeat === undefined ? repeat : repeat[0];
+}
+
+/** A layer an added mask or the facing may name: one a channel lays, 1 to `count − 1`, or −1. */
+function laidLayer(layer: number | undefined, count: number): number {
+  return layer !== undefined && Number.isInteger(layer) && layer >= 1 && layer < count ? layer : -1;
+}
+
+function positive(value: number | undefined): number {
+  return value !== undefined && Number.isFinite(value) && value > 0 ? value : 1;
+}
+
+function finite(value: number | undefined): number {
+  return value !== undefined && Number.isFinite(value) ? value : 0;
 }

package/src/render/surfaceTexture.ts

@@ -235,12 +235,21 @@ export interface SurfaceMaterial<Texture = SurfaceTexture> {
    * light through by its own rule (`TranslucentMeshOptions.glass`).
    */
   diffuseTransmission?: number;
+  /**
+   * The colour the light from behind takes through the surface, linear, in place of its own colour:
+   * a banner whose cloth glows a flat red behind a printed face, a leaf whose veins are not what the
+   * light through it shows. Absent, the surface's colour, as `diffuseTransmission` has always used.
+   * Each component is held at zero or above. Read only where `diffuseTransmission` lets light through.
+   */
+  transmissionColor?: readonly [number, number, number] | null;
   /**
    * Up to five layers blended by a mask, each at its own repeat: `albedo`, `normal` and `orm` arrays
-   * whose layers are the material's, and a mask laying each over the ones before it. Absent, the
-   * material is one layer, as every material was. **A lit switch**, compiled in the first time a
-   * material asks. The mask is read where `modelMap` goes, so a material carries one or the other.
-   * See `surfaceLayers.ts` for what it gives up.
+   * whose layers are the material's, and a mask laying each over the ones before it or summing them,
+   * from a map, the ORM array or the vertex colour; under a `projection` the layers are placed by the
+   * world. Absent, the material is one layer, as every material was. **A lit switch**, compiled in the
+   * first time a material asks. A mask that is a map is read where `modelMap` goes, so such a
+   * material carries one or the other; a lightmapped one keeps its mask in its ORM array or its
+   * vertices. See `surfaceLayers.ts` for the rest and what it gives up.
    */
   layers?: SurfaceLayers<Texture> | null;
 }

package/src/render/transmission.ts

@@ -0,0 +1,27 @@
+/**
+ * A thin surface's light from behind as the lit stage reads it: `SurfaceMaterial.diffuseTransmission`
+ * and `transmissionColor` into the four lanes of the glass tint an opaque material leaves unused.
+ *
+ * **The colour rides lanes glass owns**, because the lit stage's uniform rows are spent
+ * (`flat/preamble.ts`): a pane writes its own tint there for its draw, so whatever binds a pane
+ * puts this back after it, or the next draw of the material lets light through in the pane's colour.
+ * **−1 in the colour lanes means "the albedo"**, which is what a material naming no colour has
+ * always let through, so a scene that names none draws to the bit as it did.
+ */
+
+/** What a material lets through from behind and in which colour, as the glass tint carries it. */
+export interface Transmission {
+  readonly diffuseTransmission?: number;
+  readonly transmissionColor?: readonly [number, number, number] | null;
+}
+
+/**
+ * `material` into `out`: the colour, or −1 three times where it names none, then the amount held
+ * to 0..1. A colour component below zero is held at zero, so a mistyped colour lets no light
+ * through rather than reading as "the albedo".
+ */
+export function resolveTransmission(material: Transmission | null, out: Float32Array): void {
+  const colour = material?.transmissionColor ?? null;
+  for (let i = 0; i < 3; i++) out[i] = colour === null ? -1 : Math.max(colour[i] ?? 0, 0) || 0;
+  out[3] = Math.min(Math.max(material?.diffuseTransmission ?? 0, 0), 1) || 0;
+}

package/src/ui/splash.ts

@@ -101,8 +101,9 @@ export const SPLASH_FADE_MS = 420;
 /**
  * When the badge gives the screen to the game. Two conditions and a cap, each for a named failure.
  *
- *   - **The game has painted.** Swapping before that shows the empty canvas the badge exists to
- *     cover.
+ *   - **The game has painted**, and every promise it asked the badge to wait for has settled
+ *     (`holdSplash`). Swapping before that shows the empty canvas, or the half-loaded first screen,
+ *     the badge exists to cover.
  *   - **The minimum has passed.** A badge that vanishes the instant a fast machine paints is a
  *     flicker, and the machines that boot fastest are the ones a developer tests on.
  *   - **The cap overrides both**, and is checked first so that a minimum longer than the cap
@@ -138,6 +139,65 @@ export interface MountedSplash {
   present(): void;
   /** Take it down now, whatever the clock says. Idempotent. */
   release(): void;
+  /** Keep it up until `until` settles as well, under `capMs`. False once it has left. */
+  holdUntil(until: PromiseLike<unknown>, capMs?: number): boolean;
+}
+
+/**
+ * What a badge waits for besides the clock: the game's first frame, and every promise the game asked
+ * it to wait for (`holdSplash`), under the cap the game named, the longest of several, or the engine's.
+ *
+ * **A hold settles whichever way its promise does.** A load that failed must not pin the logo: the
+ * game is shown, broken and visible, which is the cap's own argument. Pure apart from the promises,
+ * so the rule is testable in Node.
+ */
+export class SplashState {
+  /** Whether a frame of the game has reached the screen. */
+  painted = false;
+  private pending = 0;
+  /** The longest cap a hold has named, or 0 for none. */
+  private asked = 0;
+
+  /** The longest the badge may stay: the cap a hold named, the longest of several, or the engine's. */
+  get capMs(): number {
+    return this.asked > 0 ? this.asked : SPLASH_HARD_CAP_MS;
+  }
+
+  /** Wait for `until` too, under `capMs` where it names one; `settled` once it has. */
+  hold(until: PromiseLike<unknown>, capMs: number | undefined, settled: () => void): void {
+    this.pending += 1;
+    if (capMs !== undefined && Number.isFinite(capMs) && capMs > this.asked) this.asked = capMs;
+    const done = (): void => {
+      this.pending -= 1;
+      settled();
+    };
+    Promise.resolve(until).then(done, done);
+  }
+
+  /** Painted, with every hold settled: what `splashDecision` calls the content being ready. */
+  get ready(): boolean {
+    return this.painted && this.pending === 0;
+  }
+}
+
+/** The badge on the page, which `holdSplash` holds. One screen, so one badge: see `bootGate.ts`. */
+let mounted: MountedSplash | null = null;
+
+/**
+ * Keep the engine's badge up until `until` settles, as well as until the game's first frame: a game
+ * whose first screen loads for longer than that frame — a stage, figures and their pictures on a
+ * first visit — is seen whole rather than loading. **`capMs` is the game's own ceiling** on the
+ * badge in place of the engine's twenty seconds, longer for a slow first visit or shorter, so a load
+ * that never settles is still shown in the end; the longest of several holds' wins, and the minimum
+ * hold is unchanged.
+ *
+ * **Frames run while the game loads behind the plate**, since a load may need them, and are held
+ * once it has settled, for whatever is left of the minimum, as they are after a first frame with no
+ * hold. Returns whether there was a badge to hold: none in a packaged build, whose shell shows its
+ * own until the first frame, nor where `splash: false` or `?splash=0` turned it off.
+ */
+export function holdSplash(until: PromiseLike<unknown>, options: { capMs?: number } = {}): boolean {
+  return mounted?.holdUntil(until, options.capMs) ?? false;
 }
 
 /**
@@ -275,18 +335,19 @@ export function mountSplash(options: SplashOptions = {}): MountedSplash | null {
     }
   }
 
-  let painted = false;
+  const state = new SplashState();
   let leaving = false;
   let timer: ReturnType<typeof setTimeout> | null = null;
 
   /*
-   * **Freeze the game the moment it has proved it can draw.**
+   * **Freeze the game the moment it has proved it can draw and has loaded.**
    *
-   * `painted` is the first `endFrame`, and everything after it until the plate leaves is time the
-   * game would otherwise spend running behind an opaque screen. `bootGate` is read by `startLoop`
+   * Ready is the first `endFrame` with every hold settled (`SplashState`), and everything after it
+   * until the plate leaves is time the game would otherwise spend running behind an opaque screen.
+   * Before it, frames run: a load the game is holding the badge for may need them. `bootGate` is read by `startLoop`
    * and named by neither of them; see its own comment for why the state is shared that way.
    */
-  const openGate = holdFrames(() => painted && !leaving);
+  const openGate = holdFrames(() => state.ready && !leaving);
 
   const remove = (): void => {
     /* Leaving the top layer is what `hidePopover` is for. `remove()` alone takes the element out
@@ -304,6 +365,7 @@ export function mountSplash(options: SplashOptions = {}): MountedSplash | null {
   const release = (): void => {
     if (leaving) return;
     leaving = true;
+    if (mounted === badge) mounted = null;
     /* Before the fade, not after it: the game resumes as the plate becomes transparent, so what
        shows through is a running frame rather than the still one it was frozen on. */
     openGate();
@@ -325,23 +387,30 @@ export function mountSplash(options: SplashOptions = {}): MountedSplash | null {
   const settle = (): void => {
     if (leaving) return;
     const elapsed = performance.now() - started;
-    if (splashDecision(elapsed, minMs, painted) === 'swap') {
+    if (splashDecision(elapsed, minMs, state.ready, state.capMs) === 'swap') {
       release();
       return;
     }
     if (timer !== null) clearTimeout(timer);
-    const next = painted ? minMs - elapsed : SPLASH_HARD_CAP_MS - elapsed;
+    const next = state.ready ? minMs - elapsed : state.capMs - elapsed;
     timer = setTimeout(settle, Math.max(0, next));
   };
 
-  settle();
-
-  return {
+  const badge: MountedSplash = {
     present(): void {
-      if (painted || leaving) return;
-      painted = true;
+      if (state.painted || leaving) return;
+      state.painted = true;
       settle();
     },
     release,
+    holdUntil(until: PromiseLike<unknown>, capMs?: number): boolean {
+      if (leaving) return false;
+      state.hold(until, capMs, settle);
+      settle();
+      return true;
+    },
   };
+  mounted = badge;
+  settle();
+  return badge;
 }