@woosh/meep-engine 3.38.0 → 3.40.0

package/src/shade/playground/ssr_reprojection/main.js

@@ -1,247 +1,256 @@
-import { SpatialFilterProbe } from "./SpatialFilterProbe.js";
-import Vector3 from "../../../core/geom/Vector3.js";
-import { PerspectiveCamera } from "../../renderer/camera/PerspectiveCamera.js";
-import { OrbitalCameraController } from "../../renderer/camera/OrbitalCameraController.js";
-import { create_frame_loop } from "../../renderer/create_frame_loop.js";
-import { Renderer } from "../../renderer/Renderer.js";
-import { ShadeIndirectLightingMode } from "../../renderer/ShadeIndirectLightingMode.js";
-import { ssr_trace_shader } from "../../renderer/postprocess/ssr/ssr_trace_shader.js";
-import { ssr_resolve_shader_IBL } from "../../renderer/postprocess/ssr/resolve/ssr_resolve_shader_IBL.js";
-import { ssr_resolve_shader_LPV } from "../../renderer/postprocess/ssr/resolve/ssr_resolve_shader_LPV.js";
-import { ssr_reproject_shader } from "../../renderer/postprocess/ssr/ssr_reproject_shader.js";
-import { ssr_spatial_denoise_shader, ssr_spatial_denoise_metadata_shader } from "../../renderer/postprocess/ssr/ssr_spatial_denoise_shader.js";
-import { create_scene } from "./scene.js";
-import { move_primitive } from "../../renderer/scene/rows/place_primitive.js";
-
-const element = id => document.getElementById(id);
-const hints = {
-    lateral: 'The camera translates sideways without turning. The solid reflection guides should move differently from the dashed points attached to the floor.',
-    forward: 'The camera moves towards and away from the mirror. Watch reflection size and trailing edges against the solid guides.',
-    orbit: 'The camera rotates around the scene. Inspect reflection edges at oblique angles and near the edge of the mirror.',
-    object: 'The camera and mirror stay still while C moves. This deliberately challenges the current algorithm: mirror geometry alone cannot identify reflected-object motion.',
-    occluder: 'A dark pillar crosses the view. Look for stale reflections on newly revealed floor; screen-space tracing also loses hidden source geometry.',
-    still: 'The camera stays still while sampling continues. Compare temporal modes for noise; pausing motion still renders new samples.',
-    free: 'Drag on the scene to orbit, right-drag to pan, or scroll to zoom. Restart path returns to the original camera.',
-};
-
-function report(text, error = false) {
-    element('status').textContent = text;
-    element('status').classList.toggle('error', error);
-}
-
-async function start() {
-    if (!navigator.gpu) { throw new Error('WebGPU is unavailable in this browser. Open this localhost page in a current WebGPU-enabled browser.'); }
-    const canvas = element('view'), overlay = element('overlay');
-    const context = canvas.getContext('webgpu');
-    if (!context) { throw new Error('Could not create a WebGPU canvas context.'); }
-    const renderer = new Renderer();
-    report("Acquiring GPU and loading engine textures…");
-    await renderer.initialize({ context, pixelRatio: 1 });
-    renderer.feature_ssr_enabled = true;
-    renderer.indirect_lighting_mode = ShadeIndirectLightingMode.IBL;
-    renderer.feature_taa_enabled = false;
-    renderer.feature_ssao_enabled = false;
-    renderer.feature_bloom_enabled = false;
-    renderer.feature_sharpening_enabled = false;
-    renderer.feature_motion_blur_enabled = false;
-    renderer.feature_automatic_exposure_enabled = false;
-    renderer.exposure_compensation = 1;
-    renderer.internal_resolution_scale = 1;
-    report("Building procedural scene…");
-    const world = await create_scene(renderer);
-    const scene_context = renderer.scenes.obtain(world.scene);
-    const camera = new PerspectiveCamera();
-    camera.near = 0.1;
-    camera.far = 80;
-    camera.fov = 50 * Math.PI / 180;
-    const controller = new OrbitalCameraController(camera, canvas);
-    controller.movement_speed_scale = 0.5;
-    let phase = 0, frame_count = 0, paused = false, cut_side = 0, stopped = false;
-    let stop_loop;
-    let check_busy = false;
-    let last_status = 0;
-    let anchors = [];
-
-    function pose(position, target) {
-        camera.transform.setTranslation(...position);
-        camera.transform.lookAt(new Vector3(...target));
-        camera.transform.updateMatrix();
-    }
-    function update_scene() {
-        const experiment = element('experiment').value;
-        const t = Math.sin(phase);
-        const offset = cut_side * 2;
-        if (experiment === 'free') { controller.update(); }
-        else if (experiment === 'lateral') { pose([2 * t + offset, 3.4, 8], [2 * t + offset, 0.3, -1.5]); }
-        else if (experiment === 'forward') { pose([offset, 3.4, 8 + 1.6 * t], [offset, 0.3, -1.5 + 1.6 * t]); }
-        else if (experiment === 'orbit') { pose([4 * t + offset, 3.4, 8 - 0.7 * t * t], [0, 0.3, -1.5]); }
-        else { pose([offset, 3.4, 8], [0, 0.3, -1.5]); }
-        const moving = world.targets[2];
-        const x = moving.position[0] + (experiment === 'object' ? 1.3 * t : 0);
-        moving.transform.setTranslation(x, moving.position[1], moving.position[2]);
-        move_primitive(scene_context, moving.entity, moving.transform);
-        world.occluder.transform.setTranslation(experiment === 'occluder' ? 3 * t : 20, 1, 1);
-        move_primitive(scene_context, world.occluder.entity, world.occluder.transform);
-    }
-    function reset_anchors() {
-        const c = camera.transform.translation;
-        // Independent oracle: mirror physical centres across y=0, then intersect C->V
-        // with the plane once. These anchors stay on the floor as the camera moves.
-        anchors = world.targets.map(({ transform }) => {
-            const p = transform.translation;
-            const v = [p[0], -p[1], p[2]];
-            const t = -c[1] / (v[1] - c[1]);
-            return [c[0] + (v[0] - c[0]) * t, 0, c[2] + (v[2] - c[2]) * t];
-        });
-    }
-    function restart() {
-        phase = 0; cut_side = 0;
-        pose([0, 3.4, 8], [0, 0.3, -1.5]);
-        controller.look(new Vector3(0, 3.4, 8), new Vector3(0, 0.3, -1.5));
-        update_scene(); reset_anchors();
-        renderer.indicate_view_change();
-        element('hint').textContent = hints[element('experiment').value];
-    }
-    function resize() {
-        const width = Number(element('resolution').value), height = width * 5 / 8;
-        canvas.width = overlay.width = width;
-        canvas.height = overlay.height = height;
-        camera.aspect = width / height;
-        renderer.resize(width, height);
-    }
-    function apply_mode() {
-        const mode = element('mode').value;
-        renderer.feature_ssr_enabled = mode !== 'off';
-        renderer.ssr.reprojection_mode = mode === 'off' ? 0 : Number(mode);
-        restart();
-    }
-    function draw_guides() {
-        const ctx = overlay.getContext('2d');
-        ctx.clearRect(0, 0, overlay.width, overlay.height);
-        if (!element('guides').checked) { return; }
-        const m = camera.view_projection_matrix;
-        const project = p => {
-            const w = m[3]*p[0] + m[7]*p[1] + m[11]*p[2] + m[15];
-            if (w <= 0) { return null; }
-            return [(0.5 + 0.5*(m[0]*p[0]+m[4]*p[1]+m[8]*p[2]+m[12])/w)*overlay.width,
-                (0.5 - 0.5*(m[1]*p[0]+m[5]*p[1]+m[9]*p[2]+m[13])/w)*overlay.height];
-        };
-        const cross = (p, dashed, color, label) => {
-            const xy = project(p);
-            if (!xy) { return; }
-            const [x,y] = xy;
-            ctx.strokeStyle = color; ctx.fillStyle = color; ctx.lineWidth = 1.5;
-            ctx.setLineDash(dashed ? [3,3] : []);
-            ctx.beginPath(); ctx.moveTo(x-8,y); ctx.lineTo(x+8,y); ctx.moveTo(x,y-8); ctx.lineTo(x,y+8); ctx.stroke();
-            if (label) { ctx.font = '12px system-ui'; ctx.fillText(label,x+11,y-5); }
-        };
-        world.targets.forEach(({transform,color,label},i) => {
-            const p = transform.translation;
-            cross([p[0],-p[1],p[2]],false,color,label);
-            cross(anchors[i],true,'#c2ccd9','');
-        });
-    }
-    function frame(dt, advance = true) {
-        if (stopped || check_busy) { return; }
-        try {
-            if (advance) { phase += dt * Number(element('speed').value) * 0.7; }
-            update_scene();
-            renderer.render(camera, world.scene, dt);
-            draw_guides(); frame_count++;
-            if (performance.now() - last_status > 500) {
-                report(`${canvas.width} × ${canvas.height} · frame ${frame_count}\n${paused ? 'Motion paused · sampling continues' : 'Running'} · ${element('mode').selectedOptions[0].textContent}`);
-                last_status = performance.now();
-            }
-        } catch (error) { fail(error); }
-    }
-    function fail(error) {
-        stopped = true; stop_loop?.();
-        report(error.message ?? String(error), true);
-        console.error(error);
-    }
-    const device = renderer.graphics.device;
-    const spatial_probe = new SpatialFilterProbe(device);
-    renderer.add_extension(spatial_probe);
-    element('measure').addEventListener('click', async () => {
-        if (check_busy || stopped) { return; }
-        if (!renderer.feature_ssr_enabled) { report('Enable SSR before measuring.'); return; }
-        check_busy = true;
-        const denoising_enabled = renderer.ssr.spatial_denoising_enabled;
-        element('measure').disabled = true;
-        try {
-            spatial_probe.enabled = true;
-            renderer.render(camera, world.scene, 0);
-            spatial_probe.enabled = false;
-            const r = await spatial_probe.read();
-            report(`Spatial pass 1 · same-frame GPU comparison
-Denoising ${denoising_enabled ? 'ON' : 'OFF'}
-Mirror pixels changed >0.001: ${r.changed_percent.toFixed(2)}%
-Mean / max RGB change: ${r.mean.toFixed(6)} / ${r.max.toFixed(4)}
-Input variance ≤1e-6: ${r.zero_variance_percent.toFixed(2)}%`);
-            last_status = performance.now()+30000;
-        } catch (error) { report(error.message,true); }
-        finally {
-            spatial_probe.enabled=false;
-            spatial_probe.texture?.destroy();
-            spatial_probe.texture=undefined;
-            check_busy=false;
-            element('measure').disabled=false;
-        }
-    });
-    device.addEventListener('uncapturederror', event => fail(event.error));
-    device.lost.then(info => fail(new Error(`GPU device lost: ${info.message}`)));
-    element('mode').addEventListener('change', apply_mode);
-    element('experiment').addEventListener('change', restart);
-    element('resolution').addEventListener('change', resize);
-    element('speed').addEventListener('input', () => { element('speed-value').textContent = `${Number(element('speed').value).toFixed(1)}×`; });
-    element('roughness').addEventListener('input', () => {
-        world.mirror_material.roughness_factor = Number(element('roughness').value);
-        element('roughness-value').textContent = world.mirror_material.roughness_factor.toFixed(2);
-        renderer.indicate_view_change();
-    });
-    element('denoising').addEventListener('change', () => {
-        renderer.ssr.spatial_denoising_enabled = element('denoising').checked;
-        last_status = 0;
-    });
-    element('taa').addEventListener('change', () => { renderer.feature_taa_enabled = element('taa').checked; });
-    element('play').addEventListener('click', () => {
-        paused = !paused; element('play').textContent = paused ? 'Play motion' : 'Pause motion';
-    });
-    element('step').addEventListener('click', () => { paused = true; element('play').textContent = 'Play motion'; frame(1/60); });
-    element('restart').addEventListener('click', restart);
-    element('cut').addEventListener('click', () => {
-        cut_side = cut_side === 1 ? -1 : 1;
-        if (element('experiment').value === 'free') { element('experiment').value = 'still'; }
-        renderer.indicate_view_change();
-    });
-    element('reset').addEventListener('click', () => { renderer.ssr.reset_history = true; });
-    element('compile').addEventListener('click', async () => {
-        if (check_busy) { return; }
-        check_busy = true; element('compile').disabled = true;
-        try {
-            const messages = [];
-            for (const shader of [ssr_trace_shader, ssr_resolve_shader_IBL, ssr_resolve_shader_LPV,
-                ssr_reproject_shader, ssr_spatial_denoise_shader, ssr_spatial_denoise_metadata_shader]) {
-                device.pushErrorScope('validation');
-                const module = device.createShaderModule({label:shader.descriptor.label,code:shader.descriptor.source});
-                const info = await module.getCompilationInfo();
-                const error = await device.popErrorScope();
-                const errors = info.messages.filter(m => m.type === 'error');
-                messages.push(`${shader.descriptor.label}: ${error || errors.length ? 'FAIL' : 'OK'}`);
-                if (error) { messages.push(error.message); }
-                messages.push(...errors.map(m => `${m.lineNum}:${m.linePos} ${m.message}`));
-            }
-            report(messages.join('\n'), messages.some(m => m.includes('FAIL')));
-            last_status = performance.now() + 12000;
-        } catch (error) { report(error.message, true); }
-        finally { check_busy = false; element('compile').disabled = false; }
-    });
-    resize(); restart();
-    // Explicit stepping is useful for reproducible runs in a background tab.
-    globalThis.ssr_lab = { renderer, camera, world, step: (n = 1) => { for (let i=0;i<n;i++) { frame(1/60); } return frame_count; } };
-    const manual = new URLSearchParams(location.search).has('manual');
-    if (!manual) { stop_loop = create_frame_loop(dt => frame(Math.min(dt, 0.05), !paused), 30); }
-    frame(0, false);
-}
-
-start().catch(error => { report(error.message, true); console.error(error); });
+import { SpatialFilterProbe } from "./SpatialFilterProbe.js";
+import Vector3 from "../../../core/geom/Vector3.js";
+import { PerspectiveCamera } from "../../renderer/camera/PerspectiveCamera.js";
+import { OrbitalCameraController } from "../../renderer/camera/OrbitalCameraController.js";
+import { create_frame_loop } from "../../renderer/create_frame_loop.js";
+import { Renderer } from "../../renderer/Renderer.js";
+import { ShadeIndirectLightingMode } from "../../renderer/ShadeIndirectLightingMode.js";
+import { ssr_trace_shader } from "../../renderer/postprocess/ssr/ssr_trace_shader.js";
+import { ssr_resolve_shader_IBL } from "../../renderer/postprocess/ssr/resolve/ssr_resolve_shader_IBL.js";
+import { ssr_resolve_shader_LPV } from "../../renderer/postprocess/ssr/resolve/ssr_resolve_shader_LPV.js";
+import { ssr_reproject_shader, ssr_reproject_tile_shader } from "../../renderer/postprocess/ssr/ssr_reproject_shader.js";
+import { ssr_spatial_denoise_shader, ssr_spatial_denoise_metadata_shader,
+    ssr_spatial_denoise_tile_shader, ssr_spatial_denoise_metadata_tile_shader } from "../../renderer/postprocess/ssr/ssr_spatial_denoise_shader.js";
+import { shader_ssr_denoise_tile_classify } from "../../renderer/postprocess/ssr/shader_ssr_denoise_tile_classify.js";
+import { shader_ssr_denoise_tile_dilate } from "../../renderer/postprocess/ssr/shader_ssr_denoise_tile_dilate.js";
+import { create_scene } from "./scene.js";
+import { move_primitive } from "../../renderer/scene/rows/place_primitive.js";
+
+const element = id => document.getElementById(id);
+const hints = {
+    lateral: 'The camera translates sideways without turning. The solid reflection guides should move differently from the dashed points attached to the floor.',
+    forward: 'The camera moves towards and away from the mirror. Watch reflection size and trailing edges against the solid guides.',
+    orbit: 'The camera rotates around the scene. Inspect reflection edges at oblique angles and near the edge of the mirror.',
+    object: 'The camera and mirror stay still while C moves. This deliberately challenges the current algorithm: mirror geometry alone cannot identify reflected-object motion.',
+    occluder: 'A dark pillar crosses the view. Look for stale reflections on newly revealed floor; screen-space tracing also loses hidden source geometry.',
+    still: 'The camera stays still while sampling continues. Compare temporal modes for noise; pausing motion still renders new samples.',
+    free: 'Drag on the scene to orbit, right-drag to pan, or scroll to zoom. Restart path returns to the original camera.',
+};
+
+function report(text, error = false) {
+    element('status').textContent = text;
+    element('status').classList.toggle('error', error);
+}
+
+async function start() {
+    if (!navigator.gpu) { throw new Error('WebGPU is unavailable in this browser. Open this localhost page in a current WebGPU-enabled browser.'); }
+    const canvas = element('view'), overlay = element('overlay');
+    const context = canvas.getContext('webgpu');
+    if (!context) { throw new Error('Could not create a WebGPU canvas context.'); }
+    const renderer = new Renderer();
+    report("Acquiring GPU and loading engine textures…");
+    await renderer.initialize({ context, pixelRatio: 1 });
+    renderer.feature_ssr_enabled = true;
+    renderer.indirect_lighting_mode = ShadeIndirectLightingMode.IBL;
+    renderer.feature_taa_enabled = false;
+    renderer.feature_ssao_enabled = false;
+    renderer.feature_bloom_enabled = false;
+    renderer.feature_sharpening_enabled = false;
+    renderer.feature_motion_blur_enabled = false;
+    renderer.feature_automatic_exposure_enabled = false;
+    renderer.exposure_compensation = 1;
+    renderer.internal_resolution_scale = 1;
+    report("Building procedural scene…");
+    const world = await create_scene(renderer);
+    const scene_context = renderer.scenes.obtain(world.scene);
+    const camera = new PerspectiveCamera();
+    camera.near = 0.1;
+    camera.far = 80;
+    camera.fov = 50 * Math.PI / 180;
+    const controller = new OrbitalCameraController(camera, canvas);
+    controller.movement_speed_scale = 0.5;
+    let phase = 0, frame_count = 0, paused = false, cut_side = 0, stopped = false;
+    let stop_loop;
+    let check_busy = false;
+    let last_status = 0;
+    let anchors = [];
+
+    function pose(position, target) {
+        camera.transform.setTranslation(...position);
+        camera.transform.lookAt(new Vector3(...target));
+        camera.transform.updateMatrix();
+    }
+    function update_scene() {
+        const experiment = element('experiment').value;
+        const t = Math.sin(phase);
+        const offset = cut_side * 2;
+        if (experiment === 'free') { controller.update(); }
+        else if (experiment === 'lateral') { pose([2 * t + offset, 3.4, 8], [2 * t + offset, 0.3, -1.5]); }
+        else if (experiment === 'forward') { pose([offset, 3.4, 8 + 1.6 * t], [offset, 0.3, -1.5 + 1.6 * t]); }
+        else if (experiment === 'orbit') { pose([4 * t + offset, 3.4, 8 - 0.7 * t * t], [0, 0.3, -1.5]); }
+        else { pose([offset, 3.4, 8], [0, 0.3, -1.5]); }
+        const moving = world.targets[2];
+        const x = moving.position[0] + (experiment === 'object' ? 1.3 * t : 0);
+        moving.transform.setTranslation(x, moving.position[1], moving.position[2]);
+        move_primitive(scene_context, moving.entity, moving.transform);
+        world.occluder.transform.setTranslation(experiment === 'occluder' ? 3 * t : 20, 1, 1);
+        move_primitive(scene_context, world.occluder.entity, world.occluder.transform);
+    }
+    function reset_anchors() {
+        const c = camera.transform.translation;
+        // Independent oracle: mirror physical centres across y=0, then intersect C->V
+        // with the plane once. These anchors stay on the floor as the camera moves.
+        anchors = world.targets.map(({ transform }) => {
+            const p = transform.translation;
+            const v = [p[0], -p[1], p[2]];
+            const t = -c[1] / (v[1] - c[1]);
+            return [c[0] + (v[0] - c[0]) * t, 0, c[2] + (v[2] - c[2]) * t];
+        });
+    }
+    function restart() {
+        phase = 0; cut_side = 0;
+        pose([0, 3.4, 8], [0, 0.3, -1.5]);
+        controller.look(new Vector3(0, 3.4, 8), new Vector3(0, 0.3, -1.5));
+        update_scene(); reset_anchors();
+        renderer.indicate_view_change();
+        element('hint').textContent = hints[element('experiment').value];
+    }
+    function resize() {
+        const width = Number(element('resolution').value), height = width * 5 / 8;
+        canvas.width = overlay.width = width;
+        canvas.height = overlay.height = height;
+        camera.aspect = width / height;
+        renderer.resize(width, height);
+    }
+    function apply_mode() {
+        const mode = element('mode').value;
+        renderer.feature_ssr_enabled = mode !== 'off';
+        renderer.ssr.reprojection_mode = mode === 'off' ? 0 : Number(mode);
+        restart();
+    }
+    function draw_guides() {
+        const ctx = overlay.getContext('2d');
+        ctx.clearRect(0, 0, overlay.width, overlay.height);
+        if (!element('guides').checked) { return; }
+        const m = camera.view_projection_matrix;
+        const project = p => {
+            const w = m[3]*p[0] + m[7]*p[1] + m[11]*p[2] + m[15];
+            if (w <= 0) { return null; }
+            return [(0.5 + 0.5*(m[0]*p[0]+m[4]*p[1]+m[8]*p[2]+m[12])/w)*overlay.width,
+                (0.5 - 0.5*(m[1]*p[0]+m[5]*p[1]+m[9]*p[2]+m[13])/w)*overlay.height];
+        };
+        const cross = (p, dashed, color, label) => {
+            const xy = project(p);
+            if (!xy) { return; }
+            const [x,y] = xy;
+            ctx.strokeStyle = color; ctx.fillStyle = color; ctx.lineWidth = 1.5;
+            ctx.setLineDash(dashed ? [3,3] : []);
+            ctx.beginPath(); ctx.moveTo(x-8,y); ctx.lineTo(x+8,y); ctx.moveTo(x,y-8); ctx.lineTo(x,y+8); ctx.stroke();
+            if (label) { ctx.font = '12px system-ui'; ctx.fillText(label,x+11,y-5); }
+        };
+        world.targets.forEach(({transform,color,label},i) => {
+            const p = transform.translation;
+            cross([p[0],-p[1],p[2]],false,color,label);
+            cross(anchors[i],true,'#c2ccd9','');
+        });
+    }
+    function frame(dt, advance = true) {
+        if (stopped || check_busy) { return; }
+        try {
+            if (advance) { phase += dt * Number(element('speed').value) * 0.7; }
+            update_scene();
+            renderer.render(camera, world.scene, dt);
+            draw_guides(); frame_count++;
+            if (performance.now() - last_status > 500) {
+                report(`${canvas.width} × ${canvas.height} · frame ${frame_count}\n${paused ? 'Motion paused · sampling continues' : 'Running'} · ${element('mode').selectedOptions[0].textContent}`);
+                last_status = performance.now();
+            }
+        } catch (error) { fail(error); }
+    }
+    function fail(error) {
+        stopped = true; stop_loop?.();
+        report(error.message ?? String(error), true);
+        console.error(error);
+    }
+    const device = renderer.graphics.device;
+    const spatial_probe = new SpatialFilterProbe(device);
+    renderer.add_extension(spatial_probe);
+    element('measure').addEventListener('click', async () => {
+        if (check_busy || stopped) { return; }
+        if (!renderer.feature_ssr_enabled) { report('Enable SSR before measuring.'); return; }
+        check_busy = true;
+        const denoising_enabled = renderer.ssr.spatial_denoising_enabled;
+        element('measure').disabled = true;
+        try {
+            spatial_probe.enabled = true;
+            renderer.render(camera, world.scene, 0);
+            spatial_probe.enabled = false;
+            const r = await spatial_probe.read();
+            report(`Spatial pass 1 · same-frame GPU comparison
+Denoising ${denoising_enabled ? 'ON' : 'OFF'}
+Mirror pixels changed >0.001: ${r.changed_percent.toFixed(2)}%
+Mean / max RGB change: ${r.mean.toFixed(6)} / ${r.max.toFixed(4)}
+Input variance ≤1e-6: ${r.zero_variance_percent.toFixed(2)}%`);
+            last_status = performance.now()+30000;
+        } catch (error) { report(error.message,true); }
+        finally {
+            spatial_probe.enabled=false;
+            spatial_probe.texture?.destroy();
+            spatial_probe.texture=undefined;
+            check_busy=false;
+            element('measure').disabled=false;
+        }
+    });
+    device.addEventListener('uncapturederror', event => fail(event.error));
+    device.lost.then(info => fail(new Error(`GPU device lost: ${info.message}`)));
+    element('mode').addEventListener('change', apply_mode);
+    element('experiment').addEventListener('change', restart);
+    element('resolution').addEventListener('change', resize);
+    element('speed').addEventListener('input', () => { element('speed-value').textContent = `${Number(element('speed').value).toFixed(1)}×`; });
+    element('roughness').addEventListener('input', () => {
+        world.mirror_material.roughness_factor = Number(element('roughness').value);
+        world.mirror_material.needsUpdate = true;
+        element('roughness-value').textContent = world.mirror_material.roughness_factor.toFixed(2);
+        renderer.indicate_view_change();
+    });
+    element('denoising').addEventListener('change', () => {
+        renderer.ssr.spatial_denoising_enabled = element('denoising').checked;
+        last_status = 0;
+    });
+    element('tile-denoising').addEventListener('change', () => {
+        renderer.ssr.tile_denoising_enabled = element('tile-denoising').checked;
+    });
+    element('taa').addEventListener('change', () => { renderer.feature_taa_enabled = element('taa').checked; });
+    element('play').addEventListener('click', () => {
+        paused = !paused; element('play').textContent = paused ? 'Play motion' : 'Pause motion';
+    });
+    element('step').addEventListener('click', () => { paused = true; element('play').textContent = 'Play motion'; frame(1/60); });
+    element('restart').addEventListener('click', restart);
+    element('cut').addEventListener('click', () => {
+        cut_side = cut_side === 1 ? -1 : 1;
+        if (element('experiment').value === 'free') { element('experiment').value = 'still'; }
+        renderer.indicate_view_change();
+    });
+    element('reset').addEventListener('click', () => { renderer.ssr.reset_history = true; });
+    element('compile').addEventListener('click', async () => {
+        if (check_busy) { return; }
+        check_busy = true; element('compile').disabled = true;
+        try {
+            const messages = [];
+            for (const shader of [ssr_trace_shader, ssr_resolve_shader_IBL, ssr_resolve_shader_LPV,
+                ssr_reproject_shader, ssr_spatial_denoise_shader, ssr_spatial_denoise_metadata_shader,
+                shader_ssr_denoise_tile_classify, shader_ssr_denoise_tile_dilate,
+                ssr_reproject_tile_shader, ssr_spatial_denoise_tile_shader, ssr_spatial_denoise_metadata_tile_shader]) {
+                device.pushErrorScope('validation');
+                const module = device.createShaderModule({label:shader.descriptor.label,code:shader.descriptor.source});
+                const info = await module.getCompilationInfo();
+                const error = await device.popErrorScope();
+                const errors = info.messages.filter(m => m.type === 'error');
+                messages.push(`${shader.descriptor.label}: ${error || errors.length ? 'FAIL' : 'OK'}`);
+                if (error) { messages.push(error.message); }
+                messages.push(...errors.map(m => `${m.lineNum}:${m.linePos} ${m.message}`));
+            }
+            report(messages.join('\n'), messages.some(m => m.includes('FAIL')));
+            last_status = performance.now() + 12000;
+        } catch (error) { report(error.message, true); }
+        finally { check_busy = false; element('compile').disabled = false; }
+    });
+    resize(); restart();
+    // Explicit stepping is useful for reproducible runs in a background tab.
+    globalThis.ssr_lab = { renderer, camera, world, step: (n = 1) => { for (let i=0;i<n;i++) { frame(1/60); } return frame_count; } };
+    const manual = new URLSearchParams(location.search).has('manual');
+    if (!manual) { stop_loop = create_frame_loop(dt => frame(Math.min(dt, 0.05), !paused), 30); }
+    frame(0, false);
+}
+
+start().catch(error => { report(error.message, true); console.error(error); });