@woosh/meep-engine 3.2.0 → 3.4.0

package/src/shade/playground/skinned_blas_refit/flat_environment.d.ts

@@ -0,0 +1,30 @@
+/**
+ * An environment map of one colour.
+ *
+ * Separating "this pixel is background" from "this pixel is geometry" by colour is only possible
+ * when the two are separable by colour, and under a photographed sky they are not: the background is
+ * a gradient, a path-traced image of it is noisy, and a surface in shadow lit by that sky lands in
+ * the middle of both. Every version of that classifier has been wrong in a different direction.
+ *
+ * A constant environment removes the problem rather than tightening the threshold against it. The
+ * background becomes one exact value across the whole image — no gradient to model, and no variance
+ * to accumulate away, because a constant radiance has none. What remains is a comparison of
+ * coverage, which is the only thing a geometry check ever wanted from the picture.
+ *
+ * It still *lights* the scene, so surfaces are shaded rather than flat. That is deliberate: a check
+ * that only works on unlit geometry is not a check of the renderer anyone runs.
+ *
+ * @param {number[]} [colour] linear RGB
+ * @returns {ShadeTexture}
+ */
+export function make_flat_environment(colour?: number[]): ShadeTexture;
+/**
+ * Swap the scene onto a flat environment, returning a function that puts back what was there.
+ *
+ * @param {Scene} scene
+ * @param {number[]} [colour]
+ * @returns {function(): void}
+ */
+export function use_flat_environment(scene: Scene, colour?: number[]): () => void;
+import { ShadeTexture } from "../../renderer/texture/ShadeTexture.js";
+//# sourceMappingURL=flat_environment.d.ts.map

package/src/shade/playground/skinned_blas_refit/flat_environment.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flat_environment.d.ts","sourceRoot":"","sources":["../../../../../src/shade/playground/skinned_blas_refit/flat_environment.js"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;;;;;GAkBG;AACH,+CAHW,MAAM,EAAE,GACN,YAAY,CA0BxB;AAED;;;;;;GAMG;AACH,4DAHW,MAAM,EAAE,SACM,IAAI,CAU5B;6BA9D4B,wCAAwC"}

package/src/shade/playground/skinned_blas_refit/flat_environment.js

@@ -0,0 +1,67 @@
+import { Sampler2D } from "../../../engine/graphics/texture/sampler/Sampler2D.js";
+import { sampler2d_to_f16 } from "../../../engine/graphics/texture/sampler/sampler2d_to_f16.js";
+import { ColorSpace } from "../../renderer/texture/ColorSpace.js";
+import { ShadeImage } from "../../renderer/texture/source/ShadeImage.js";
+import { ShadeTexture } from "../../renderer/texture/ShadeTexture.js";
+
+/**
+ * An environment map of one colour.
+ *
+ * Separating "this pixel is background" from "this pixel is geometry" by colour is only possible
+ * when the two are separable by colour, and under a photographed sky they are not: the background is
+ * a gradient, a path-traced image of it is noisy, and a surface in shadow lit by that sky lands in
+ * the middle of both. Every version of that classifier has been wrong in a different direction.
+ *
+ * A constant environment removes the problem rather than tightening the threshold against it. The
+ * background becomes one exact value across the whole image — no gradient to model, and no variance
+ * to accumulate away, because a constant radiance has none. What remains is a comparison of
+ * coverage, which is the only thing a geometry check ever wanted from the picture.
+ *
+ * It still *lights* the scene, so surfaces are shaded rather than flat. That is deliberate: a check
+ * that only works on unlit geometry is not a check of the renderer anyone runs.
+ *
+ * @param {number[]} [colour] linear RGB
+ * @returns {ShadeTexture}
+ */
+export function make_flat_environment(colour = [0.25, 0.3, 0.4]) {
+    // Octahedral maps are sampled by direction, and every texel holding the same value makes the
+    // mapping irrelevant — but the filtering chain still builds mips off this, so it gets a size
+    // worth mipping rather than the smallest thing a sampler will take.
+    const size = 64;
+
+    const data = new Float32Array(size * size * 4);
+
+    for (let i = 0; i < size * size; i++) {
+        data[i * 4] = colour[0];
+        data[i * 4 + 1] = colour[1];
+        data[i * 4 + 2] = colour[2];
+        data[i * 4 + 3] = 1;
+    }
+
+    // Half floats, which is what `load_environment_map` hands the same pipeline. Passing f32 through
+    // instead gets the bytes reinterpreted as f16 downstream — the background comes out saturated
+    // green under the tracer and saturated red under the rasterizer, which is a vivid reminder that
+    // a diagnostic can be broken in ways that still produce confident numbers.
+    const image = ShadeImage.fromSampler2D(sampler2d_to_f16(new Sampler2D(data, 4, size, size)));
+
+    image.color_space = ColorSpace.LinearSRGB;
+
+    return ShadeTexture.from(image);
+}
+
+/**
+ * Swap the scene onto a flat environment, returning a function that puts back what was there.
+ *
+ * @param {Scene} scene
+ * @param {number[]} [colour]
+ * @returns {function(): void}
+ */
+export function use_flat_environment(scene, colour) {
+    const previous = scene.lights.environment;
+
+    scene.lights.environment = make_flat_environment(colour);
+
+    return () => {
+        scene.lights.environment = previous;
+    };
+}

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

@@ -0,0 +1,168 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>meep — skinned BLAS refit</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: 330px;
+            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 { margin: 0; }
+        label .hint { color: var(--muted); font-size: 11.5px; }
+
+        hr { border: 0; border-top: 1px solid var(--line); margin: 10px 0; }
+
+        button {
+            font: inherit;
+            padding: 5px 11px;
+            margin-right: 6px;
+            border-radius: 6px;
+            border: 1px solid var(--line);
+            background: #1c1f25;
+            color: var(--text);
+            cursor: pointer;
+        }
+
+        button:hover { border-color: #3d4552; }
+
+        .row { display: flex; gap: 6px; align-items: center; }
+        .row button { margin-right: 0; flex: 0 0 auto; }
+
+        #character_count {
+            flex: 1 1 auto;
+            min-width: 0;
+            font: 12px ui-monospace, SFMono-Regular, Consolas, monospace;
+            padding: 4px 6px;
+            border-radius: 5px;
+            border: 1px solid var(--line);
+            background: #14161a;
+            color: var(--text);
+        }
+
+        #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);
+        }
+
+        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>Skinned BLAS refit</h1>
+
+    <label>
+        <input type="checkbox" id="path_tracing" checked>
+        <span>Path tracer <span class="hint">— traverses the BLAS</span></span>
+    </label>
+
+    <label>
+        <input type="checkbox" id="taa">
+        <span>TAA <span class="hint">— off while tracing</span></span>
+    </label>
+
+    <hr>
+
+    <button id="animation">Freeze pose</button>
+    <button id="reset_accumulation">Reset accumulation</button>
+
+    <div class="row" style="margin-top:6px">
+        <button id="diff">Diff traced vs rasterized</button>
+    </div>
+    <p class="note">
+        Renders this exact view both ways and paints where they disagree — <span style="color:#ff5a5a">red</span>
+        the rasterizer has and the tracer does not, <span style="color:#5aa0ff">blue</span> the reverse. Judge the
+        <em>shape</em>: a rim of one-pixel specks along every silhouette is antialiasing, and a mesh of
+        thin slivers has a lot of it. One large blob, mostly red, is geometry the tracer never reached.
+        Click again to clear.
+    </p>
+
+    <hr>
+
+    <div class="row">
+        <input type="number" id="character_count" value="1" min="1" max="64" step="1">
+        <button id="respawn">Dancers</button>
+    </div>
+    <p class="note">
+        Each dancer is a clone with a vertex region and a BLAS of its own, refit every frame. More
+        of them is more refits, not a bigger one.
+    </p>
+
+    <hr>
+
+    <div id="status"></div>
+    <div id="stats"></div>
+
+    <p class="note">
+        <strong>What to look for.</strong> Rasterization reads the deformed vertices directly; the
+        path tracer reads the BLAS. Toggle the tracer while she dances — if the two silhouettes
+        agree, the tree is keeping up. A stale BLAS shows as a traced figure frozen in bind pose
+        while the rasterized one moves, and as shadows and reflections cast by a body that is not
+        there.
+    </p>
+
+    <p class="note">
+        Freeze the pose to let the tracer settle into a clean image; the accumulator resets on
+        every frame the animation advances.
+    </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/skinned_blas_refit/main.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Stand the prototype 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/skinned_blas_refit/main.d.ts.map

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