@woosh/meep-engine 3.38.0 → 3.40.0

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

@@ -1,79 +1,80 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Meep — SSR reflection lab</title>
-    <style>
-        :root { color-scheme: dark; font: 14px/1.5 system-ui, sans-serif; background: #11151c; color: #e4eaf2; }
-        * { box-sizing: border-box; }
-        body { margin: 0; padding: 24px; }
-        header { display: flex; align-items: baseline; gap: 16px; margin-bottom: 18px; }
-        h1 { font-size: 24px; margin: 0; font-weight: 600; }
-        header span, .hint, small { color: #a2afc1; }
-        main { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 20px; align-items: start; }
-        .stage { position: relative; background: #090c11; border: 1px solid #344153; border-radius: 8px; overflow: hidden; }
-        /* Renderer writes inline presentation dimensions; both layers must scale together. */
-        canvas { display: block; width: 100% !important; height: auto !important; }
-        #overlay { position: absolute; inset: 0; pointer-events: none; }
-        aside { background: #1a212c; border: 1px solid #344153; border-radius: 8px; padding: 18px; }
-        label { display: block; margin-bottom: 13px; }
-        label > span { display: block; font-size: 12px; color: #a2afc1; margin-bottom: 4px; }
-        select, button { width: 100%; background: #252f3e; border: 1px solid #45556a; color: inherit; border-radius: 5px; padding: 8px; font: inherit; }
-        button { cursor: pointer; }
-        button:hover { background: #344359; }
-        button:disabled { opacity: .4; cursor: default; }
-        .buttons { display: flex; gap: 8px; margin-bottom: 10px; }
-        .check { display: flex; gap: 8px; align-items: center; }
-        input[type=range] { width: 100%; accent-color: #74c8ff; }
-        hr { border: 0; border-top: 1px solid #344153; margin: 18px 0; }
-        #status { font: 12px/1.5 ui-monospace, Consolas, monospace; white-space: pre-wrap; color: #95d6b4; }
-        #status.error { color: #ff9a9a; }
-        #hint { min-height: 3em; margin: 14px 0 0; }
-        .legend { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 12px; color: #a2afc1; font-size: 12px; }
-        .legend b { color: #dce9ff; }
-        details { margin-top: 18px; max-width: 85ch; color: #a2afc1; }
-        summary { color: #dce9ff; cursor: pointer; }
-        @media (max-width: 850px) { main { grid-template-columns: 1fr; } aside { width: 100%; } header { display: block; } }
-    </style>
-</head>
-<body tabindex="0">
-<header><h1>SSR reflection lab</h1><span>Camera parallax · temporal stability · rejection</span></header>
-<main>
-    <section>
-        <div class="stage"><canvas id="view" width="960" height="600" tabindex="0" aria-label="Interactive WebGPU reflection scene"></canvas><canvas id="overlay" width="960" height="600" aria-hidden="true"></canvas></div>
-        <div class="legend"><span><b>Solid cross</b> — ideal reflected centre</span><span><b>Dashed cross</b> — point fixed to the floor</span></div>
-        <p id="hint" class="hint"></p>
-        <details open><summary>A quick visual check</summary>
-            <ol>
-                <li>Run <b>Lateral camera</b> with <b>Parallax</b>. Reflections should follow the solid crosses as the floor moves underneath.</li>
-                <li>Restart the same motion with <b>Surface only</b>, then <b>No temporal history</b>. Look for trails, delayed edges, and changes in noise.</li>
-                <li>Try <b>Moving object</b> and <b>Occluder</b>. Inspect the magenta object’s trail and newly revealed floor. Use <b>Camera cut</b> to check reset.</li>
-            </ol>
-            <p><b>Spatial denoising</b> smooths neighbouring reflection pixels in three passes. It is on by default and independent of reprojection. Turn it off and select <b>No temporal history</b> to inspect the resolve output; resolve still reuses neighbouring ray hits and filters radiance for roughness.</p>
-            <p>The crosses are geometric guides for object centres, not a pixel-perfect lighting reference. SSR loses information when reflected objects are hidden or off-screen. Surface only retains the new validation and blending fixes; it is not the old shader.</p>
-        </details>
-    </section>
-    <aside>
-        <label><span>Reprojection</span><select id="mode"><option value="0">Parallax</option><option value="1">Surface only</option><option value="2">No temporal history</option><option value="off">SSR off</option></select></label>
-        <label><span>Experiment</span><select id="experiment"><option value="lateral">Lateral camera</option><option value="forward">Forward camera</option><option value="orbit">Orbit camera</option><option value="object">Moving object</option><option value="occluder">Occluder</option><option value="still">Still camera / noise</option><option value="free">Free camera</option></select></label>
-        <label><span>Motion speed <output id="speed-value">1.0×</output></span><input id="speed" aria-label="Motion speed" type="range" min="0.2" max="2" value="1" step="0.1"></label>
-        <label><span>Mirror roughness <output id="roughness-value">0.03</output></span><input id="roughness" aria-label="Mirror roughness" type="range" min="0.01" max="0.7" value="0.03" step="0.01"></label>
-        <label><span>Render resolution</span><select id="resolution"><option value="640">640 × 400</option><option value="960" selected>960 × 600</option><option value="1280">1280 × 800</option></select></label>
-        <label class="check"><input id="guides" type="checkbox" checked>Show geometric guides</label>
-        <label class="check"><input id="denoising" type="checkbox" checked>Spatial denoising</label>
-        <label class="check"><input id="taa" type="checkbox">Final-image TAA</label>
-        <hr>
-        <div class="buttons"><button id="play">Pause motion</button><button id="step">Step frame</button></div>
-        <div class="buttons"><button id="restart">Restart path</button><button id="cut">Camera cut</button></div>
-        <button id="reset">Reset reflection history</button>
-        <hr>
-        <button id="measure">Measure spatial filter</button>
-        <button id="compile">Validate GPU shaders</button>
-        <p id="status" role="status">Starting WebGPU…</p>
-        <small>Fixed exposure. Bloom, sharpening, and motion blur are off. Free camera: drag to orbit, right-drag to pan, wheel to zoom.</small>
-    </aside>
-</main>
-<script type="module" src="./main.js"></script>
-</body>
-</html>
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Meep — SSR reflection lab</title>
+    <style>
+        :root { color-scheme: dark; font: 14px/1.5 system-ui, sans-serif; background: #11151c; color: #e4eaf2; }
+        * { box-sizing: border-box; }
+        body { margin: 0; padding: 24px; }
+        header { display: flex; align-items: baseline; gap: 16px; margin-bottom: 18px; }
+        h1 { font-size: 24px; margin: 0; font-weight: 600; }
+        header span, .hint, small { color: #a2afc1; }
+        main { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 20px; align-items: start; }
+        .stage { position: relative; background: #090c11; border: 1px solid #344153; border-radius: 8px; overflow: hidden; }
+        /* Renderer writes inline presentation dimensions; both layers must scale together. */
+        canvas { display: block; width: 100% !important; height: auto !important; }
+        #overlay { position: absolute; inset: 0; pointer-events: none; }
+        aside { background: #1a212c; border: 1px solid #344153; border-radius: 8px; padding: 18px; }
+        label { display: block; margin-bottom: 13px; }
+        label > span { display: block; font-size: 12px; color: #a2afc1; margin-bottom: 4px; }
+        select, button { width: 100%; background: #252f3e; border: 1px solid #45556a; color: inherit; border-radius: 5px; padding: 8px; font: inherit; }
+        button { cursor: pointer; }
+        button:hover { background: #344359; }
+        button:disabled { opacity: .4; cursor: default; }
+        .buttons { display: flex; gap: 8px; margin-bottom: 10px; }
+        .check { display: flex; gap: 8px; align-items: center; }
+        input[type=range] { width: 100%; accent-color: #74c8ff; }
+        hr { border: 0; border-top: 1px solid #344153; margin: 18px 0; }
+        #status { font: 12px/1.5 ui-monospace, Consolas, monospace; white-space: pre-wrap; color: #95d6b4; }
+        #status.error { color: #ff9a9a; }
+        #hint { min-height: 3em; margin: 14px 0 0; }
+        .legend { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 12px; color: #a2afc1; font-size: 12px; }
+        .legend b { color: #dce9ff; }
+        details { margin-top: 18px; max-width: 85ch; color: #a2afc1; }
+        summary { color: #dce9ff; cursor: pointer; }
+        @media (max-width: 850px) { main { grid-template-columns: 1fr; } aside { width: 100%; } header { display: block; } }
+    </style>
+</head>
+<body tabindex="0">
+<header><h1>SSR reflection lab</h1><span>Camera parallax · temporal stability · rejection</span></header>
+<main>
+    <section>
+        <div class="stage"><canvas id="view" width="960" height="600" tabindex="0" aria-label="Interactive WebGPU reflection scene"></canvas><canvas id="overlay" width="960" height="600" aria-hidden="true"></canvas></div>
+        <div class="legend"><span><b>Solid cross</b> — ideal reflected centre</span><span><b>Dashed cross</b> — point fixed to the floor</span></div>
+        <p id="hint" class="hint"></p>
+        <details open><summary>A quick visual check</summary>
+            <ol>
+                <li>Run <b>Lateral camera</b> with <b>Parallax</b>. Reflections should follow the solid crosses as the floor moves underneath.</li>
+                <li>Restart the same motion with <b>Surface only</b>, then <b>No temporal history</b>. Look for trails, delayed edges, and changes in noise.</li>
+                <li>Try <b>Moving object</b> and <b>Occluder</b>. Inspect the magenta object’s trail and newly revealed floor. Use <b>Camera cut</b> to check reset.</li>
+            </ol>
+            <p><b>Spatial denoising</b> smooths neighbouring reflection pixels in three passes. It is on by default and independent of reprojection. Turn it off and select <b>No temporal history</b> to inspect the resolve output; resolve still reuses neighbouring ray hits and filters radiance for roughness.</p>
+            <p>The crosses are geometric guides for object centres, not a pixel-perfect lighting reference. SSR loses information when reflected objects are hidden or off-screen. Surface only retains the new validation and blending fixes; it is not the old shader.</p>
+        </details>
+    </section>
+    <aside>
+        <label><span>Reprojection</span><select id="mode"><option value="0">Parallax</option><option value="1">Surface only</option><option value="2">No temporal history</option><option value="off">SSR off</option></select></label>
+        <label><span>Experiment</span><select id="experiment"><option value="lateral">Lateral camera</option><option value="forward">Forward camera</option><option value="orbit">Orbit camera</option><option value="object">Moving object</option><option value="occluder">Occluder</option><option value="still">Still camera / noise</option><option value="free">Free camera</option></select></label>
+        <label><span>Motion speed <output id="speed-value">1.0×</output></span><input id="speed" aria-label="Motion speed" type="range" min="0.2" max="2" value="1" step="0.1"></label>
+        <label><span>Mirror roughness <output id="roughness-value">0.03</output></span><input id="roughness" aria-label="Mirror roughness" type="range" min="0.01" max="0.7" value="0.03" step="0.01"></label>
+        <label><span>Render resolution</span><select id="resolution"><option value="640">640 × 400</option><option value="960" selected>960 × 600</option><option value="1280">1280 × 800</option></select></label>
+        <label class="check"><input id="guides" type="checkbox" checked>Show geometric guides</label>
+        <label class="check"><input id="denoising" type="checkbox" checked>Spatial denoising</label>
+        <label class="check"><input id="tile-denoising" type="checkbox">Coverage tile denoising</label>
+        <label class="check"><input id="taa" type="checkbox">Final-image TAA</label>
+        <hr>
+        <div class="buttons"><button id="play">Pause motion</button><button id="step">Step frame</button></div>
+        <div class="buttons"><button id="restart">Restart path</button><button id="cut">Camera cut</button></div>
+        <button id="reset">Reset reflection history</button>
+        <hr>
+        <button id="measure">Measure spatial filter</button>
+        <button id="compile">Validate GPU shaders</button>
+        <p id="status" role="status">Starting WebGPU…</p>
+        <small>Fixed exposure. Bloom, sharpening, and motion blur are off. Free camera: drag to orbit, right-drag to pan, wheel to zoom.</small>
+    </aside>
+</main>
+<script type="module" src="./main.js"></script>
+</body>
+</html>