@woosh/meep-engine 3.58.0 → 3.60.0

package/src/shade/playground/particle_ecs/bonfire_effects.js

@@ -20,7 +20,7 @@ import soot_json from "./effects/soot.json";
  *
  * ## They are documents, not code
  *
- * Each is a {@link ParticleEffectDocument} saved as JSON in `effects/`: the per-particle attribute
+ * Each is a {@link ParticleEffectDocument} saved as JSON in `effects/`: the particle field
  * declarations, the INIT and UPDATE node graphs with the positions they were arranged at, and the
  * emitter settings. That is the whole effect, and it is what the editor opens — press `E` on the
  * page, change something, download the result, drop it over the file, reload. There is no porting
@@ -38,7 +38,7 @@ import soot_json from "./effects/soot.json";
  *
  * - **INIT** places the particle, gives it a velocity, and rolls its lifetime, its base size and a
  *   personal `seed`. There is no built-in age or lifetime — the effect declares what it needs, which
- *   is why `age` and `life` are ordinary attributes.
+ *   is why `age` and `life` are ordinary particle fields.
  * - **UPDATE** advances the age, kills the particle when it runs out, integrates the forces, and
  *   drives the drawn size and colour from `age / life` through a ramp — a curve for the size and a
  *   gradient for the colour, both written into the program as arithmetic rather than sampled from a
@@ -46,10 +46,10 @@ import soot_json from "./effects/soot.json";
  *
  * Two things are worth knowing before editing one:
  *
- * - **One store per attribute per phase.** Every store runs and nothing orders them, so a second
- *   store does not refine the first, it replaces it — which is how the smoke's drag silently ate its
- *   own velocity integration until the editor's validator was pointed at it. The graph editor calls
- *   that an error; nothing at runtime does.
+ * - **One store per particle field per phase.** Every store runs and nothing orders them, so a
+ *   second store does not refine the first, it replaces it — which is how the smoke's drag silently
+ *   ate its own velocity integration until the editor's validator was pointed at it. The graph
+ *   editor calls that an error; nothing at runtime does.
  * - **The register budget is shared.** The VM keeps its file in shader registers, and one program
  *   needing more than `PARTICLE_VM_FAST_REGISTER_SLOTS` swaps emit and simulate for storage-backed
  *   variants *for the whole system* — so an effect that grows past it slows down every effect in the

package/src/shade/playground/particle_editor/README.md

@@ -73,16 +73,16 @@ edits it at both altitudes.
   map and the canvas are the same picture. The `-` in its corner folds it away to a button, and both
   phases fold together.
 - Node parameters are edited in the node: four fields for a vector, a swatch and an alpha field for
-  a colour, a picker for an ISA enum, a picker of the effect's own attributes for an attribute
-  reference, `xyzw` for a swizzle.
+  a colour, a picker for an ISA enum, a picker of the effect's own particle fields for a particle
+  field reference, `xyzw` for a swizzle.
 - Two of them are **ramps**, edited as a picture. An **RGBA Gradient** (and an RGB one) is a strip of
   the colour it produces with its stops underneath: drag a stop, click the lane to add one — in the
   colour the gradient already is there, so adding never changes anything — and middle-click to remove.
-  A **Curve** plots normalized time against unrestricted values, with a Y axis that fits the whole
-  curve, including peaks between keys. Its fields edit the selected key's time, value and tangents.
-  The scale stays fixed during a drag and refits on release. Neither ramp is sampled from a table
-  at runtime: both are written out into the program as arithmetic, which is what the **Code** tab
-  shows.
+  A **Curve** plots normalized time against unrestricted values, with a Y axis that fits the whole
+  curve, including peaks between keys. Its fields edit the selected key's time, value and tangents.
+  The scale stays fixed during a drag and refits on release. Neither ramp is sampled from a table
+  at runtime: both are written out into the program as arithmetic, which is what the **Code** tab
+  shows.
 - The strip along the bottom lists every problem with the effect, from **both** phases, loudest
   first. Click one to jump to the phase it is in and select the node; the node is outlined in the
   graph too.
@@ -131,8 +131,11 @@ be gone exactly when it is wanted.
   `Lower to assembly` — and watch the same thing happen from the other end.
 - Break the assembly (misspell a mnemonic). The line is marked, the panel says `does not assemble`,
   and the preview carries on with the last good program.
-- Add an attribute in the inspector, then bind a render channel to it. Remove one that a channel was
-  bound to: the channel unbinds, and every node that named it is reported against the node.
+- Add a particle field in the inspector, then bind a render channel to it. Remove one that a channel
+  was bound to: the channel unbinds, and every node that named it is reported against the node.
+- Add an emitter field and a global field in the inspector, and read them with `Read Emitter Field`
+  and `Read Global Field`. The inspector's value is what the preview gives each: an emitter's
+  starting value, and a stand-in for the value a game would set.
 - Drag the wire out of a bound input and drop it on the input below. It moves, rather than being
   copied — and `Ctrl+Z` puts it back in one go. Drag it out again and let go over open canvas: it is
   gone, and the menu opens offering what could take the value it was carrying.
@@ -151,7 +154,7 @@ be gone exactly when it is wanted.
   with two differences worth the instructions: its gradients turn as `alpha` moves, so the field
   swirls in place rather than sliding past, and it hands back its own derivative alongside the value.
   `Tiling Flow Noise 3D` is that with a period you can name, per axis.
-- Drop an `RGBA Gradient` on a `Write Attribute` bound to `color`, wire `t` to the particle's
+- Drop an `RGBA Gradient` on a `Write Particle Field` bound to `color`, wire `t` to the particle's
   normalised age, and drag the stops while the preview runs. Then look at **Code**: the gradient is a
   literal, a saturate and a multiply-add per stop, and there is no table anywhere.
 - Set **blend** to `alpha` and back to `additive`. The preview composites accordingly.
@@ -193,7 +196,7 @@ used only here:
 | a gradient and a curve, and the arithmetic they become | `src/shade/renderer/particles/graph/particle_ramp.js` |
 | the controls those two are edited with | `editor/view/particles/effect/ParticleGradientEditorView.js`, `ParticleCurveEditorView.js` |
 | code layer | `editor/view/particles/effect/ParticleCodeEditorView.js` |
-| emitter + attributes | `editor/view/particles/effect/ParticleEmitterInspectorView.js` |
+| emitter + particle, emitter and global fields | `editor/view/particles/effect/ParticleEmitterInspectorView.js` |
 | preview | `editor/view/particles/effect/ParticlePreviewView.js` |
 | the four assembled | `editor/view/particles/effect/ParticleEffectEditorView.js` |
 

package/src/shade/playground/particle_system/particle_prototype.js

@@ -64,24 +64,24 @@ export function fire_effect({ size_curve, alpha_curve, flipbook_frames = 16 } =
         const ground = particle_node(init, "vec3");
         particle_wire(init, ground, "x", jx); particle_wire(init, ground, "y", [0]); particle_wire(init, ground, "z", jz);
         const p0 = particle_node(init, "add"); particle_wire(init, p0, "a", ep); particle_wire(init, p0, "b", ground);
-        particle_wire(init, particle_node(init, "setAttribute", { name: "position" }), "value", p0);
+        particle_wire(init, particle_node(init, "setParticleField", { name: "position" }), "value", p0);
 
         // velocity = upward buoyancy + signed turbulence, a draw per lane
         const up = particle_node(init, "const", { value: [0, 2.0, 0] });
         const turb = particle_uniform_signed(init, 3);
         const turbS = particle_node(init, "scale"); particle_wire(init, turbS, "v", turb); particle_wire(init, turbS, "s", [0.5]);
         const v0 = particle_node(init, "add"); particle_wire(init, v0, "a", up); particle_wire(init, v0, "b", turbS);
-        particle_wire(init, particle_node(init, "setAttribute", { name: "velocity" }), "value", v0);
+        particle_wire(init, particle_node(init, "setParticleField", { name: "velocity" }), "value", v0);
 
-        particle_wire(init, particle_node(init, "setAttribute", { name: "age" }), "value", [0]);
+        particle_wire(init, particle_node(init, "setParticleField", { name: "age" }), "value", [0]);
         // lifetime 1.2..1.8s
         const lr = particle_node(init, "random", { components: 1 });
         const ls = particle_node(init, "mad"); particle_wire(init, ls, "a", lr); particle_wire(init, ls, "b", [0.6]); particle_wire(init, ls, "c", [1.2]);
-        particle_wire(init, particle_node(init, "setAttribute", { name: "lifetime" }), "value", ls);
+        particle_wire(init, particle_node(init, "setParticleField", { name: "lifetime" }), "value", ls);
 
-        particle_wire(init, particle_node(init, "setAttribute", { name: "size" }), "value", [0.4]);
-        particle_wire(init, particle_node(init, "setAttribute", { name: "color" }), "value", [1.0, 0.6, 0.2, 1.0]);
-        particle_wire(init, particle_node(init, "setAttribute", { name: "frame" }), "value", [0]);
+        particle_wire(init, particle_node(init, "setParticleField", { name: "size" }), "value", [0.4]);
+        particle_wire(init, particle_node(init, "setParticleField", { name: "color" }), "value", [1.0, 0.6, 0.2, 1.0]);
+        particle_wire(init, particle_node(init, "setParticleField", { name: "frame" }), "value", [0]);
     }
 
     // --- UPDATE: advance + destroy ---
@@ -90,12 +90,12 @@ export function fire_effect({ size_curve, alpha_curve, flipbook_frames = 16 } =
         const dt = particle_node(update, "builtin", { id: VM_BUILTIN.DELTA_TIME });
 
         // age += dt
-        const age = particle_node(update, "attribute", { name: "age" });
+        const age = particle_node(update, "particleField", { name: "age" });
         const newAge = particle_node(update, "add"); particle_wire(update, newAge, "a", age); particle_wire(update, newAge, "b", dt);
-        particle_wire(update, particle_node(update, "setAttribute", { name: "age" }), "value", newAge);
+        particle_wire(update, particle_node(update, "setParticleField", { name: "age" }), "value", newAge);
 
         // normalizedAge = age / lifetime
-        const lifetime = particle_node(update, "attribute", { name: "lifetime" });
+        const lifetime = particle_node(update, "particleField", { name: "lifetime" });
         const nAge = particle_node(update, "div"); particle_wire(update, nAge, "a", newAge); particle_wire(update, nAge, "b", lifetime);
 
         // kill when normalizedAge >= 1
@@ -103,22 +103,22 @@ export function fire_effect({ size_curve, alpha_curve, flipbook_frames = 16 } =
         particle_wire(update, particle_node(update, "kill"), "condition", dead);
 
         // buoyant rise + drift: velocity += (0, 1, 0)*dt ; position += velocity*dt
-        const vel = particle_node(update, "attribute", { name: "velocity" });
+        const vel = particle_node(update, "particleField", { name: "velocity" });
         const buoy = particle_node(update, "const", { value: [0, 1.0, 0] });
         const buoyDt = particle_node(update, "scale"); particle_wire(update, buoyDt, "v", buoy); particle_wire(update, buoyDt, "s", dt);
         const nVel = particle_node(update, "add"); particle_wire(update, nVel, "a", vel); particle_wire(update, nVel, "b", buoyDt);
-        particle_wire(update, particle_node(update, "setAttribute", { name: "velocity" }), "value", nVel);
-        const pos = particle_node(update, "attribute", { name: "position" });
+        particle_wire(update, particle_node(update, "setParticleField", { name: "velocity" }), "value", nVel);
+        const pos = particle_node(update, "particleField", { name: "position" });
         const velDt = particle_node(update, "scale"); particle_wire(update, velDt, "v", nVel); particle_wire(update, velDt, "s", dt);
         const nPos = particle_node(update, "add"); particle_wire(update, nPos, "a", pos); particle_wire(update, nPos, "b", velDt);
-        particle_wire(update, particle_node(update, "setAttribute", { name: "position" }), "value", nPos);
+        particle_wire(update, particle_node(update, "setParticleField", { name: "position" }), "value", nPos);
 
         // size + alpha from curves over life (or constants if no curve provided)
         if (size_curve !== undefined) {
             const sc = particle_node(update, "curveLiteral", { curve: size_curve }); particle_wire(update, sc, "t", nAge);
-            particle_wire(update, particle_node(update, "setAttribute", { name: "size" }), "value", sc);
+            particle_wire(update, particle_node(update, "setParticleField", { name: "size" }), "value", sc);
         }
-        const color = particle_node(update, "attribute", { name: "color" });
+        const color = particle_node(update, "particleField", { name: "color" });
         if (alpha_curve !== undefined) {
             const ac = particle_node(update, "curveLiteral", { curve: alpha_curve }); particle_wire(update, ac, "t", nAge);
             // color.rgb unchanged, color.a = ac : rebuild via select on a swizzle mask is overkill;
@@ -126,14 +126,14 @@ export function fire_effect({ size_curve, alpha_curve, flipbook_frames = 16 } =
             const alphaVec = particle_node(update, "mul");
             particle_wire(update, alphaVec, "a", color);
             particle_wire(update, alphaVec, "b", ac); // a scalar, so it scales every lane (rgb also fades — a warm ember look)
-            particle_wire(update, particle_node(update, "setAttribute", { name: "color" }), "value", alphaVec);
+            particle_wire(update, particle_node(update, "setParticleField", { name: "color" }), "value", alphaVec);
         }
 
         // flipbook frame = floor(normalizedAge * frames)
         const framesN = particle_node(update, "const", { value: [flipbook_frames] });
         const fscaled = particle_node(update, "mul"); particle_wire(update, fscaled, "a", nAge); particle_wire(update, fscaled, "b", framesN);
         const fframe = particle_node(update, "floor"); particle_wire(update, fframe, "x", fscaled);
-        particle_wire(update, particle_node(update, "setAttribute", { name: "frame" }), "value", fframe);
+        particle_wire(update, particle_node(update, "setParticleField", { name: "frame" }), "value", fframe);
     }
 
     const effect = create_particle_effect({ layout, init, update });

package/src/shade/playground/particle_system/particle_scene.js

@@ -477,7 +477,7 @@ function make_effect({ velocity, velocityJitter = 0, posJitter = 0, accel = 0, l
         const j = particle_node(init, "scale"); particle_wire(init, j, "v", d); particle_wire(init, j, "s", [posJitter]);
         const p = particle_node(init, "add"); particle_wire(init, p, "a", posN); particle_wire(init, p, "b", j); posN = p;
     }
-    particle_wire(init, particle_node(init, "setAttribute", { name: "position" }), "value", posN);
+    particle_wire(init, particle_node(init, "setParticleField", { name: "position" }), "value", posN);
 
     let velN = particle_node(init, "const", { value: [velocity[0], velocity[1], velocity[2], 0] });
     if (velocityJitter > 0) {
@@ -485,34 +485,34 @@ function make_effect({ velocity, velocityJitter = 0, posJitter = 0, accel = 0, l
         const rs = particle_node(init, "scale"); particle_wire(init, rs, "v", r); particle_wire(init, rs, "s", [velocityJitter]);
         const vv = particle_node(init, "add"); particle_wire(init, vv, "a", velN); particle_wire(init, vv, "b", rs); velN = vv;
     }
-    particle_wire(init, particle_node(init, "setAttribute", { name: "velocity" }), "value", velN);
-    particle_wire(init, particle_node(init, "setAttribute", { name: "age" }), "value", [0]);
+    particle_wire(init, particle_node(init, "setParticleField", { name: "velocity" }), "value", velN);
+    particle_wire(init, particle_node(init, "setParticleField", { name: "age" }), "value", [0]);
     const lr = particle_node(init, "random");
     const lm = particle_node(init, "mad"); particle_wire(init, lm, "a", lr); particle_wire(init, lm, "b", [life[1] - life[0]]); particle_wire(init, lm, "c", [life[0]]);
-    particle_wire(init, particle_node(init, "setAttribute", { name: "lifetime" }), "value", lm);
-    particle_wire(init, particle_node(init, "setAttribute", { name: "size" }), "value", [size]);
-    particle_wire(init, particle_node(init, "setAttribute", { name: "color" }), "value", color);
+    particle_wire(init, particle_node(init, "setParticleField", { name: "lifetime" }), "value", lm);
+    particle_wire(init, particle_node(init, "setParticleField", { name: "size" }), "value", [size]);
+    particle_wire(init, particle_node(init, "setParticleField", { name: "color" }), "value", color);
 
     const update = new NodeGraph();
     const dt = particle_node(update, "builtin", { id: VM_BUILTIN.DELTA_TIME });
-    const age = particle_node(update, "attribute", { name: "age" });
+    const age = particle_node(update, "particleField", { name: "age" });
     const nage = particle_node(update, "add"); particle_wire(update, nage, "a", age); particle_wire(update, nage, "b", dt);
-    particle_wire(update, particle_node(update, "setAttribute", { name: "age" }), "value", nage);
-    const lifeA = particle_node(update, "attribute", { name: "lifetime" });
+    particle_wire(update, particle_node(update, "setParticleField", { name: "age" }), "value", nage);
+    const lifeA = particle_node(update, "particleField", { name: "lifetime" });
     const na = particle_node(update, "div"); particle_wire(update, na, "a", nage); particle_wire(update, na, "b", lifeA);
     const dead = particle_node(update, "compare", { op: "ge" }); particle_wire(update, dead, "a", na); particle_wire(update, dead, "b", [1]);
     particle_wire(update, particle_node(update, "kill"), "condition", dead);
-    let velN2 = particle_node(update, "attribute", { name: "velocity" });
+    let velN2 = particle_node(update, "particleField", { name: "velocity" });
     if (accel !== 0) {
         const g = particle_node(update, "const", { value: [0, accel, 0, 0] });
         const gd = particle_node(update, "scale"); particle_wire(update, gd, "v", g); particle_wire(update, gd, "s", dt);
         const nv = particle_node(update, "add"); particle_wire(update, nv, "a", velN2); particle_wire(update, nv, "b", gd);
-        particle_wire(update, particle_node(update, "setAttribute", { name: "velocity" }), "value", nv); velN2 = nv;
+        particle_wire(update, particle_node(update, "setParticleField", { name: "velocity" }), "value", nv); velN2 = nv;
     }
-    const pos = particle_node(update, "attribute", { name: "position" });
+    const pos = particle_node(update, "particleField", { name: "position" });
     const pd = particle_node(update, "scale"); particle_wire(update, pd, "v", velN2); particle_wire(update, pd, "s", dt);
     const np = particle_node(update, "add"); particle_wire(update, np, "a", pos); particle_wire(update, np, "b", pd);
-    particle_wire(update, particle_node(update, "setAttribute", { name: "position" }), "value", np);
+    particle_wire(update, particle_node(update, "setParticleField", { name: "position" }), "value", np);
 
     return create_particle_effect({ layout, init, update });
 }

package/src/shade/playground/probe_clipmap/README.md

@@ -0,0 +1,42 @@
+# Probe clipmap GI
+
+A page to drive `ShadeIndirectLightingMode.ProbeClipmap` by hand on Sponza
+(`src/shade/renderer/global_illumination/probe_clipmap/PROBE_CLIPMAP_PROPOSAL_2026_10_27.md`): the mode
+against IBL, the mode's debug views, the sun moved, and point lights for the probes' hits to take.
+
+## Running it
+
+```bash
+npm install
+npm run dev
+```
+
+then open <http://localhost:5173/src/shade/playground/probe_clipmap/index.html>.
+
+The scene comes from `test_assets/Sponza/glTF/Sponza.gltf`, which is gitignored; `test_assets/README.md`
+has the two lines that put it there. Another scene loads with `?scene=/some/other/scene.gltf`.
+
+## The controls
+
+| control | what it does |
+|---|---|
+| Indirect light | the probe clipmap, or IBL to compare against |
+| Debug view | the brick clipmap as the probes' rays see it; the geometry caches' mesh SDF; the hits' albedo from the cards |
+| Path tracer (P) | the accumulating path tracer's image in place of the rasterized one, as ground truth; TAA is off while it is on and comes back after |
+| Sun height, Sun turn | where the sun stands |
+| Point lights | eight shadowed point lights along the scene's long axis, which the probes' hits take as local lights |
+| TAA | the resolve the probe pick's noise is meant for |
+| Bake budget | mesh SDF bricks baked a frame while the caches fill; the page starts above the engine's default so Sponza bakes in seconds |
+
+Drag to orbit, wheel to zoom, WASD to move. The stats line reads the frame time and the mesh SDF bake's
+progress; until every mesh is resident, what is missing from the caches is missing from the probes' world.
+
+The path tracer traces one tile a frame and reads out the least-converged tile's sample count. It keeps
+its accumulation while it is off, so P flips between the two images for free on a still camera; moving
+the camera, the sun or the point lights restarts it. It stops at three bounces.
+
+## What to expect
+
+Specular light still comes from the environment, unoccluded, until the probes' specular lands (the
+proposal's S6). Indoors, where the probes' diffuse is rightly darker than IBL's, that sky reflection shows
+as a bluish sheen over cloth and stone.

package/src/shade/playground/probe_clipmap/index.html

@@ -0,0 +1,190 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>meep — probe clipmap GI</title>
+    <style>
+        :root {
+            color-scheme: dark;
+            --panel: rgba(20, 22, 26, 0.88);
+            --line: #2b3038;
+            --text: #d6dae0;
+            --muted: #8b939f;
+            --pass: #55c46a;
+            --fail: #ff6b6b;
+            --warn: #e5b54a;
+        }
+
+        * { box-sizing: border-box; }
+
+        html, body { margin: 0; height: 100%; overflow: hidden; background: #0d0f12; }
+
+        /* body carries tabindex so the camera controller's keyboard device has something focusable
+           to listen on; the focus ring around the whole viewport is not wanted */
+        body:focus { outline: none; }
+
+        #view { display: block; width: 100vw; height: 100vh; }
+
+        #panel {
+            position: fixed;
+            top: 12px;
+            left: 12px;
+            width: 320px;
+            padding: 12px 14px;
+            background: var(--panel);
+            border: 1px solid var(--line);
+            border-radius: 8px;
+            backdrop-filter: blur(6px);
+            color: var(--text);
+            font: 13px/1.5 system-ui, -apple-system, Segoe UI, sans-serif;
+        }
+
+        #panel h1 { font-size: 13px; font-weight: 600; margin: 0 0 8px; }
+
+        label { display: flex; align-items: center; gap: 8px; padding: 3px 0; cursor: pointer; }
+        label input[type="checkbox"] { margin: 0; }
+        label .hint { color: var(--muted); font-size: 11.5px; }
+        label > span:first-child { flex: 0 0 96px; }
+
+        select, input[type="number"] {
+            flex: 1 1 auto;
+            min-width: 0;
+            font: 12px system-ui, -apple-system, Segoe UI, sans-serif;
+            padding: 3px 6px;
+            border-radius: 5px;
+            border: 1px solid var(--line);
+            background: #14161a;
+            color: var(--text);
+        }
+
+        input[type="range"] { flex: 1 1 auto; min-width: 0; }
+
+        output { flex: 0 0 34px; text-align: right; color: var(--muted); font: 12px ui-monospace, SFMono-Regular, Consolas, monospace; }
+
+        hr { border: 0; border-top: 1px solid var(--line); margin: 10px 0; }
+
+        #status { font-size: 12px; color: var(--muted); word-break: break-word; }
+        #status.pass { color: var(--pass); }
+        #status.fail { color: var(--fail); }
+        #status.warn { color: var(--warn); }
+
+        #stats {
+            margin-top: 6px;
+            font: 12px ui-monospace, SFMono-Regular, Consolas, monospace;
+            color: var(--text);
+            white-space: pre;
+        }
+
+        p.note { margin: 8px 0 0; font-size: 11.5px; color: var(--muted); }
+    </style>
+</head>
+<body tabindex="0">
+
+<canvas id="view"></canvas>
+
+<div id="panel">
+    <h1>Probe clipmap GI</h1>
+
+    <label>
+        <span>Indirect light</span>
+        <select id="indirect">
+            <option value="ProbeClipmap" selected>Probe clipmap</option>
+            <option value="IBL">IBL</option>
+        </select>
+    </label>
+
+    <label>
+        <span>Debug view</span>
+        <select id="debug_view">
+            <option value="None" selected>None</option>
+            <option value="BrickClipmap">Brick clipmap — what the rays see</option>
+            <option value="MeshSDF">Mesh SDF — the geometry caches</option>
+            <option value="MeshCards">Mesh cards — the hits' albedo</option>
+        </select>
+    </label>
+
+    <label>
+        <input type="checkbox" id="path_tracing">
+        <span>Path tracer <span class="hint">— ground truth; P flips it</span></span>
+    </label>
+
+    <hr>
+
+    <label>
+        <span>Sun height</span>
+        <input type="range" id="sun_elevation" min="2" max="88" value="62">
+        <output id="sun_elevation_value"></output>
+    </label>
+
+    <label>
+        <span>Sun turn</span>
+        <input type="range" id="sun_azimuth" min="0" max="359" value="80">
+        <output id="sun_azimuth_value"></output>
+    </label>
+
+    <label>
+        <input type="checkbox" id="point_lights">
+        <span>Point lights <span class="hint">— eight along the nave, shadowed</span></span>
+    </label>
+
+    <label>
+        <input type="checkbox" id="taa" checked>
+        <span>TAA <span class="hint">— resolves the probe pick's noise</span></span>
+    </label>
+
+    <hr>
+
+    <label>
+        <span>Bake budget</span>
+        <input type="number" id="bake_budget" min="1" max="8191" step="1">
+    </label>
+    <p class="note">
+        Mesh SDF bricks baked a frame while the geometry caches fill. The engine's default is a
+        frame-time knob; this page starts higher so Sponza is whole in seconds, not minutes.
+    </p>
+
+    <label>
+        <span>Card capture</span>
+        <select id="card_capture_mode">
+            <option value="Raster" selected>Raster — the material's own pass</option>
+            <option value="Trace">Trace — a ray a texel</option>
+        </select>
+    </label>
+    <p class="note">
+        How the cards take their albedo. A change captures every card set again; the Mesh cards view
+        shows what they hold.
+    </p>
+
+    <hr>
+
+    <div id="status"></div>
+    <div id="stats"></div>
+
+    <p class="note">
+        Drag to orbit, wheel to zoom, WASD to move. The probes follow the camera; turn it to watch
+        the ones it leaves keep their light for a second.
+    </p>
+    <p class="note">
+        The path tracer traces one tile a frame, so a sample over the whole view takes many frames;
+        the samples readout is the least-converged tile's. It keeps its accumulation while off, so
+        flipping back and forth on a still camera is free; moving the camera or a light restarts it.
+        It stops at three bounces; the clipmap's hits read the probes for theirs, so light that has
+        bounced more than three times is the clipmap's alone.
+    </p>
+</div>
+
+<script type="module">
+    import { start } from './main.js';
+
+    start().catch(error => {
+        const status = document.getElementById('status');
+
+        status.className = 'fail';
+        status.textContent = String(error?.message ?? error);
+
+        console.error(error);
+    });
+</script>
+
+</body>
+</html>

package/src/shade/playground/probe_clipmap/main.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Stand the page up. Called by the page rather than run on import, so that nothing here touches the DOM
+ * until there is one.
+ *
+ * @returns {Promise<void>}
+ */
+export function start(): Promise<void>;
+//# sourceMappingURL=main.d.ts.map

package/src/shade/playground/probe_clipmap/main.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../../../../src/shade/playground/probe_clipmap/main.js"],"names":[],"mappings":"AA0FA;;;;;GAKG;AACH,yBAFa,QAAQ,IAAI,CAAC,CA8QzB"}