@pascal-app/viewer 1.0.0-beta.4 → 1.0.0

package/dist/components/viewer/pointer-raycast-layers.js

@@ -0,0 +1,28 @@
+'use client';
+import { useThree } from '@react-three/fiber';
+import { useLayoutEffect } from 'react';
+import { BATCHED_LAYER } from '../../lib/layers';
+/**
+ * Lets R3F's pointer raycaster see geometry a collective batch draws.
+ *
+ * R3F picks with one shared raycaster whose default mask is `SCENE_LAYER`
+ * alone. A wall sewn into its level's merged mesh is moved off that layer
+ * (`hideBatchedWall`) while staying in the graph with its pointer handlers
+ * intact — so without this the wall answers no hover, paint or click the
+ * moment it joins a batch, and a floor's walls go dead a fraction of a second
+ * after the last edit settles.
+ *
+ * Additive rather than `setSurfaceRaycastLayers`: that helper resets the mask
+ * for the private raycasters callers build per query, and this one is shared.
+ */
+export const PointerRaycastLayers = () => {
+    const raycaster = useThree((state) => state.raycaster);
+    useLayoutEffect(() => {
+        const mask = raycaster.layers.mask;
+        raycaster.layers.enable(BATCHED_LAYER);
+        return () => {
+            raycaster.layers.mask = mask;
+        };
+    }, [raycaster]);
+    return null;
+};

package/dist/components/viewer/post-processing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"post-processing.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/post-processing.tsx"],"names":[],"mappings":"AAwCA,eAAO,MAAM,YAAY;;;CAGxB,CAAA;AAGD,eAAO,MAAM,WAAW;;;;;;;;;;;;;CAavB,CAAA;AA0DD,MAAM,MAAM,UAAU,GAAG;IACvB,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,OAAO,CAAA;CACf,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,OAAO,EAAE,UAAU,CAAA;CACpB,GAAG,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;AAS9B,eAAO,MAAM,oBAAoB,EAAE,WAElC,CAAA;AAiBD,QAAA,MAAM,oBAAoB,GAAI,iCAG3B;IACD,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,6EAA6E;IAC7E,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB,SAgnBA,CAAA;AAED,eAAe,oBAAoB,CAAA"}
+{"version":3,"file":"post-processing.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/post-processing.tsx"],"names":[],"mappings":"AA6CA,eAAO,MAAM,YAAY;;;CAGxB,CAAA;AAGD,eAAO,MAAM,WAAW;;;;;;;;;;;;;CAavB,CAAA;AAgED,MAAM,MAAM,UAAU,GAAG;IACvB,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,OAAO,CAAA;CACf,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,OAAO,EAAE,UAAU,CAAA;CACpB,GAAG,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;AAS9B,eAAO,MAAM,oBAAoB,EAAE,WAElC,CAAA;AA+CD,QAAA,MAAM,oBAAoB,GAAI,iCAG3B;IACD,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,6EAA6E;IAC7E,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB,SA+mBA,CAAA;AAED,eAAe,oBAAoB,CAAA"}

package/dist/components/viewer/post-processing.js

@@ -3,17 +3,21 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Color, Layers, Matrix4, Scene, UnsignedByteType } from 'three';
 import { ssgi } from 'three/addons/tsl/display/SSGINode.js';
 import { denoise } from 'three/examples/jsm/tsl/display/DenoiseNode.js';
-import { add, diffuseColor, float, mix, mrt, normalView, oscSine, output, pass, premultiplyAlpha, renderOutput, sample, saturation, screenUV, smoothstep, time, uniform, vec3, vec4, } from 'three/tsl';
-import { RenderPipeline } from 'three/webgpu';
+import { add, diffuseColor, mix, mrt, normalView, normalWorldGeometry, oscSine, output, pass, premultiplyAlpha, renderOutput, sample, saturation, screenUV, smoothstep, time, float as tslFloat, uniform, vec3, vec4, } from 'three/tsl';
+import { RenderPipeline, TimestampQuery } from 'three/webgpu';
 import { backdropGradient, deepSkyColor, horizonHazeColor } from '../../lib/backdrop';
 import { edgeColorFor, edgeOpacityScaleFor } from '../../lib/edge-style';
-import { PERF_OVERLAY_ENABLED, pushGpuSample } from '../../lib/gpu-perf';
+import { PERF_OVERLAY_ENABLED } from '../../lib/gpu-perf';
 import { inkedEdges } from '../../lib/ink-edges';
+import { LayerPassIndex, LayerPassNode } from '../../lib/layer-pass';
 import { GRID_LAYER, OVERLAY_LAYER, SCENE_LAYER, ZONE_LAYER } from '../../lib/layers';
 import { mergedOutline } from '../../lib/merged-outline-node';
+import { recordPerfSample, timeSpan } from '../../lib/perf-tracks';
+import { PostProcessingResources } from '../../lib/post-processing-resources';
 import { getSceneTheme } from '../../lib/scene-themes';
 import { packNormalToRGB, unpackRGBToNormal } from '../../lib/tsl-compat';
 import useViewer from '../../store/use-viewer';
+import { useSceneAtmosphere } from './scene-atmosphere';
 // Scene-referred grade applied before the output tone mapping (AgX). AgX rolls
 // highlights off gently but reads flat on its own; a mild mid-gray-pivot
 // contrast + saturation lift restores the punch. Rendered shading only.
@@ -36,7 +40,8 @@ export const SSGI_PARAMS = {
     useScreenSpaceSampling: true,
     useTemporalFiltering: false,
 };
-// Diagnostic toggles for thermal A/B testing. Add `?disable=ao,denoise,outline,postFx`
+// Diagnostic toggles for thermal A/B testing. Add
+// `?disable=ao,denoise,outline,postFx`
 // to the URL (any subset) and reload to skip those passes. Each flag prevents
 // allocation + per-frame work for that stage, so device temperature deltas
 // across combos isolate which pass is the actual culprit. Picked up once at
@@ -53,7 +58,12 @@ export const SSGI_PARAMS = {
 //              per-frame vertex/draw cost dominates the whole capture.
 function readPerfDisableFlags() {
     if (typeof window === 'undefined') {
-        return { ao: false, denoise: false, outline: false, postFx: false };
+        return {
+            ao: false,
+            denoise: false,
+            outline: false,
+            postFx: false,
+        };
     }
     const raw = new URLSearchParams(window.location.search).get('disable') ?? '';
     const set = new Set(raw
@@ -99,9 +109,39 @@ function sanitizeOutlineObjects(objects) {
     }
     objects.length = nextIndex;
 }
+// Two independent GPU readings per frame, both `?perf`-only:
+//  - `gpu-render`: three's WebGPU timestamp queries — the summed GPU duration of
+//    the frame's render passes, measured on the device. The only honest "GPU ms".
+//  - `gpu-queue`: submit → `onSubmittedWorkDone()` wall time. That covers queue
+//    backlog and CPU work that ran before the microtask got to resume, so it is
+//    a backpressure signal, not GPU time.
+// `resolveTimestampsAsync` returns the previous resolve's value while one is in
+// flight, so calling it every frame is safe (and required — the query pool warns
+// once it fills).
+function recordFrameGpuTiming(renderer, submittedAt) {
+    const queue = renderer.backend?.device?.queue;
+    queue?.onSubmittedWorkDone?.().then(() => {
+        recordPerfSample('gpu-queue', performance.now() - submittedAt);
+    });
+    // Off unless the device advertised 'timestamp-query' at init — the backend
+    // clears its own flag when the feature is missing, so this is the truth.
+    if (renderer.backend?.trackTimestamp !== true)
+        return;
+    renderer
+        .resolveTimestampsAsync?.(TimestampQuery.RENDER)
+        ?.then((ms) => {
+        if (typeof ms === 'number' && ms > 0)
+            recordPerfSample('gpu-render', ms);
+    })
+        .catch(() => {
+        // Pool disposed mid-flight (pipeline rebuild / unmount) — nothing to report.
+    });
+}
 const PostProcessingPasses = ({ hoverStyles = DEFAULT_HOVER_STYLES, disablePostFx = false, }) => {
     const { gl: renderer, invalidate, scene, camera, size } = useThree();
-    const renderPipelineRef = useRef(null);
+    const resourcesRef = useRef(null);
+    const atmosphere = useSceneAtmosphere();
+    const directSkyNode = useMemo(() => (atmosphere ? atmosphere.skyRadiance(normalWorldGeometry) : null), [atmosphere]);
     const hasPipelineErrorRef = useRef(false);
     const retryCountRef = useRef(0);
     const rebuildTimeoutRef = useRef(null);
@@ -183,6 +223,10 @@ const PostProcessingPasses = ({ hoverStyles = DEFAULT_HOVER_STYLES, disablePostF
         }
         setPipelineVersion((v) => v + 1);
     }, []);
+    const disposePipeline = useCallback(() => {
+        resourcesRef.current?.dispose();
+        resourcesRef.current = null;
+    }, []);
     // Reset retry state when project changes
     useEffect(() => {
         if (lastProjectIdRef.current === projectId)
@@ -233,10 +277,7 @@ const PostProcessingPasses = ({ hoverStyles = DEFAULT_HOVER_STYLES, disablePostF
         if (width < 1 || height < 1) {
             skippedZeroSizeRef.current = true;
             hasPipelineErrorRef.current = false;
-            if (renderPipelineRef.current) {
-                renderPipelineRef.current.dispose();
-            }
-            renderPipelineRef.current = null;
+            disposePipeline();
             return;
         }
         if (skippedZeroSizeRef.current) {
@@ -249,23 +290,17 @@ const PostProcessingPasses = ({ hoverStyles = DEFAULT_HOVER_STYLES, disablePostF
         // allocated every pass.
         if (disablePostFx || perfDisable.postFx) {
             hasPipelineErrorRef.current = false;
-            if (renderPipelineRef.current) {
-                renderPipelineRef.current.dispose();
-            }
-            renderPipelineRef.current = null;
+            disposePipeline();
             return;
         }
         const ssgiEnabled = shading === 'rendered' && SSGI_PARAMS.enabled && !perfDisable.ao;
         const denoiseEnabled = ssgiEnabled && !perfDisable.denoise;
         const outlineEnabled = !perfDisable.outline;
         const inkEnabled = edges !== 'off';
-        // The depth+normal MRT feeds both SSGI and the screen-space ink pass.
         const needsNormalMRT = ssgiEnabled || inkEnabled;
         // Soft = thin (1px sample radius) + faint (50% opacity); strong = thick
         // (2px, ~2× wider detected band) + solid (100%). The edge masks saturate,
-        // so radius+opacity are what actually separate the two modes — gain wouldn't.
-        // Same 1px line thickness for both (soft's thickness is the nice one);
-        // strong reads heavier purely by being fully solid vs soft's lighter 50%.
+        // so radius+opacity are what actually separate the two modes.
         const inkRadius = 1;
         const inkOpacity = inkOpacityOverride ?? (edges === 'strong' ? 1 : 0.5);
         console.log('[viewer/post-processing] Building pipeline', {
@@ -293,7 +328,7 @@ const PostProcessingPasses = ({ hoverStyles = DEFAULT_HOVER_STYLES, disablePostF
         const hasWebGPU = typeof navigator !== 'undefined' && 'gpu' in navigator;
         if (!hasWebGPU) {
             hasPipelineErrorRef.current = true;
-            renderPipelineRef.current = null;
+            resourcesRef.current = null;
             return;
         }
         // Clear outliner arrays synchronously to prevent stale Object3D refs
@@ -303,15 +338,22 @@ const PostProcessingPasses = ({ hoverStyles = DEFAULT_HOVER_STYLES, disablePostF
         sanitizeOutlineObjects(outliner.hoveredObjects);
         outliner.selectedObjects.length = 0;
         outliner.hoveredObjects.length = 0;
+        const resources = new PostProcessingResources();
+        resourcesRef.current = resources;
         try {
+            const layerIndex = new LayerPassIndex(scene, [ZONE_LAYER, OVERLAY_LAYER]);
+            resources.layerIndex = layerIndex;
             const scenePass = pass(scene, camera);
+            resources.passes.push(scenePass);
             scenePass.setLayers(sceneOnlyLayers);
-            const zonePass = pass(scene, camera);
+            const zonePass = new LayerPassNode(layerIndex, camera, ZONE_LAYER, scenePass);
+            resources.passes.push(zonePass);
             zonePass.setLayers(zoneLayers);
             // Editor overlays (gizmos, move handles, tool previews, grid) on their own
             // layer, kept out of the depth/normal MRT above so the ink + SSGI ignore
             // them, then composited on top of the final image below.
-            const overlayPass = pass(scene, camera);
+            const overlayPass = new LayerPassNode(layerIndex, camera, OVERLAY_LAYER, scenePass);
+            resources.passes.push(overlayPass);
             overlayPass.setLayers(overlayLayers);
             const overlayColor = overlayPass.getTextureNode('output');
             const scenePassColor = scenePass.getTextureNode('output');
@@ -325,25 +367,28 @@ const PostProcessingPasses = ({ hoverStyles = DEFAULT_HOVER_STYLES, disablePostF
             // not SSGI is enabled. When SSGI is on, the branch below overwrites this
             // with its own zone-inclusive composite (no double-add).
             let sceneColor = vec4(add(scenePassColor.rgb, zonePass.rgb), contentAlpha);
-            // Depth + normal MRT — shared by SSGI (diffuse/normal) and the ink pass
-            // (depth/normal). Built whenever either is active.
-            let scenePassDepth = null;
+            // Scene depth is shared by SSGI, ink, and outlines.
+            // The normal MRT is only built when SSGI or ink needs it.
+            const scenePassDepth = scenePass.getTextureNode('depth');
             let scenePassNormal = null;
-            let sceneNormal = null;
             if (needsNormalMRT) {
                 scenePass.setMRT(mrt({
                     output,
                     diffuseColor,
                     normal: packNormalToRGB(normalView),
                 }));
-                scenePassDepth = scenePass.getTextureNode('depth');
                 scenePassNormal = scenePass.getTextureNode('normal');
+            }
+            if (scenePassNormal) {
                 const normalTexture = scenePass.getTexture('normal');
                 normalTexture.type = UnsignedByteType;
-                // Extract normal from color-encoded texture (SSGI consumes the node form)
-                sceneNormal = sample((uv) => unpackRGBToNormal(scenePassNormal.sample(uv)));
             }
-            if (ssgiEnabled) {
+            // Extract normal from color-encoded texture (SSGI consumes the node form).
+            const normalNode = scenePassNormal;
+            const sceneNormal = normalNode
+                ? sample((uv) => unpackRGBToNormal(normalNode.sample(uv)))
+                : null;
+            if (ssgiEnabled && scenePassDepth && sceneNormal) {
                 const scenePassDiffuse = scenePass.getTextureNode('diffuseColor');
                 const diffuseTexture = scenePass.getTexture('diffuseColor');
                 diffuseTexture.type = UnsignedByteType;
@@ -367,7 +412,7 @@ const PostProcessingPasses = ({ hoverStyles = DEFAULT_HOVER_STYLES, disablePostF
                 if (denoiseEnabled) {
                     // DenoiseNode only denoises RGB — alpha is passed through unchanged.
                     // SSGI's AO is a single red channel, so we remap it into RGB before denoising.
-                    const aoAsRgb = vec4(aoTexture.r, aoTexture.r, aoTexture.r, float(1));
+                    const aoAsRgb = vec4(aoTexture.r, aoTexture.r, aoTexture.r, tslFloat(1));
                     const denoisePass = denoise(aoAsRgb, scenePassDepth, sceneNormal, camera);
                     denoisePass.index.value = 0;
                     denoisePass.radius.value = 4;
@@ -382,22 +427,22 @@ const PostProcessingPasses = ({ hoverStyles = DEFAULT_HOVER_STYLES, disablePostF
                 // (same ≈150→350 m window as ink-edges' distanceFade) so the horizon
                 // disc and the geometry↔sky depth cliff never grow an AO band — that
                 // band read as a visible line along the horizon.
-                const aoFarFade = smoothstep(float(0.9994), float(0.9998), scenePassDepth.sample(screenUV).r);
-                ao = mix(ao, float(1), aoFarFade);
+                const aoFarFade = smoothstep(tslFloat(0.9994), tslFloat(0.9998), scenePassDepth.sample(screenUV).r);
+                ao = mix(ao, tslFloat(1), aoFarFade);
                 // Composite: scene * AO + diffuse * GI
                 sceneColor = vec4(add(scenePassColor.rgb.mul(ao), add(zonePass.rgb, scenePassDiffuse.rgb.mul(gi))), contentAlpha);
             }
             // Screen-space ink outline (SketchUp look) — depth/normal edge detection
             // over the composited scene. Topology-agnostic, so it handles CSG-cut
             // walls cleanly. Applied before the selection outline + background mix.
-            if (inkEnabled) {
+            if (inkEnabled && scenePassDepth && scenePassNormal) {
                 sceneColor = vec4(inkedEdges({
                     sceneRgb: sceneColor.rgb,
                     depthTex: scenePassDepth,
                     normalTex: scenePassNormal,
                     inkColor: inkColorUniform.current,
                     radius: inkRadius,
-                    opacity: float(inkOpacity).mul(inkOpacityScaleUniform.current),
+                    opacity: tslFloat(inkOpacity).mul(inkOpacityScaleUniform.current),
                 }), sceneColor.a);
             }
             // Scene-referred grade (contrast around mid-gray + saturation) before the
@@ -409,17 +454,20 @@ const PostProcessingPasses = ({ hoverStyles = DEFAULT_HOVER_STYLES, disablePostF
             if (shading === 'rendered') {
                 sceneColor = vec4(gradeRgb(sceneColor.rgb), sceneColor.a);
             }
-            // Single merged outline node: one shared depth pass for both selected + hovered groups.
+            // Reused scene depth lets outlined groups occlude each other; materials
+            // with depthWrite=false (including glazing) no longer occlude outlines.
             const outliner = useViewer.getState().outliner;
             let compositeWithOutlines = sceneColor;
             let visualAlpha = contentAlpha;
             if (outlineEnabled) {
                 const outlineNode = mergedOutline(scene, camera, {
+                    sceneDepthNode: scenePassDepth,
                     primaryObjects: outliner.selectedObjects,
                     secondaryObjects: outliner.hoveredObjects,
                     primaryEdgeThickness: uniform(1),
                     secondaryEdgeThickness: uniform(1.5),
                 });
+                resources.outline = outlineNode;
                 // Selected: white visible, yellow hidden
                 const selectedVisibleColor = uniform(new Color(0xff_ff_ff));
                 const selectedHiddenColor = uniform(new Color(0xf3_ff_47));
@@ -431,7 +479,7 @@ const PostProcessingPasses = ({ hoverStyles = DEFAULT_HOVER_STYLES, disablePostF
                 // Hovered: blue visible, yellow hidden, pulsing
                 const pulsePeriod = uniform(3);
                 const oscillating = oscSine(time.div(pulsePeriod).mul(2)).mul(0.5).add(0.5);
-                const osc = mix(oscillating, float(1), hoverPulseMix);
+                const osc = mix(oscillating, tslFloat(1), hoverPulseMix);
                 const hoverOutline = outlineNode.secondaryVisibleEdge
                     .mul(hoverVisibleColor)
                     .add(outlineNode.secondaryHiddenEdge.mul(hoverHiddenColor))
@@ -448,37 +496,40 @@ const PostProcessingPasses = ({ hoverStyles = DEFAULT_HOVER_STYLES, disablePostF
             // sky gradient (shared formula in lib/backdrop.ts). The horizon disc
             // dissolves into the same formula, so backdrop and ground meet
             // seamlessly exactly where the disc vanishes.
-            const ndc = vec4(screenUV.x.mul(2).sub(1), float(1).sub(screenUV.y).mul(2).sub(1), 1, 1);
+            const ndc = vec4(screenUV.x.mul(2).sub(1), tslFloat(1).sub(screenUV.y).mul(2).sub(1), 1, 1);
             const viewRay = camProjInvUniform.current.mul(ndc);
             const worldDir = camWorldUniform.current.mul(vec4(viewRay.xyz, 0)).xyz.normalize();
-            let bgGradient = backdropGradient({
-                dirY: worldDir.y,
-                background: bgUniform.current,
-                haze: bgHazeUniform.current,
-                sky: bgSkyUniform.current,
-                skyDeep: bgSkyDeepUniform.current,
-            });
+            let bgGradient = atmosphere
+                ? atmosphere.skyRadiance(worldDir)
+                : backdropGradient({
+                    dirY: worldDir.y,
+                    background: bgUniform.current,
+                    haze: bgHazeUniform.current,
+                    sky: bgSkyUniform.current,
+                    skyDeep: bgSkyDeepUniform.current,
+                });
             if (shading === 'rendered') {
                 bgGradient = gradeRgb(bgGradient);
             }
-            const composited = mix(bgGradient, compositeWithOutlines.rgb, contentAlpha);
+            const sceneComposite = compositeWithOutlines.rgb;
+            const composited = mix(bgGradient, sceneComposite, contentAlpha);
             // Editor overlays painted on top by their own alpha — they never get inked,
             // AO'd, or outlined, and always read crisp regardless of scene depth.
             const withOverlay = mix(composited, overlayColor.rgb, overlayColor.a);
-            let finalOutput = vec4(withOverlay, float(1));
+            let finalOutput = vec4(withOverlay, tslFloat(1));
             if (transparentBackground) {
                 const overlayAlpha = overlayColor.a;
                 const alpha = overlayAlpha.add(visualAlpha.mul(overlayAlpha.oneMinus()));
                 const straightRgb = overlayColor.rgb
                     .mul(overlayAlpha)
-                    .add(compositeWithOutlines.rgb.mul(visualAlpha).mul(overlayAlpha.oneMinus()))
-                    .div(alpha.max(float(0.00001)));
+                    .add(sceneComposite.mul(visualAlpha).mul(overlayAlpha.oneMinus()))
+                    .div(alpha.max(tslFloat(0.00001)));
                 finalOutput = premultiplyAlpha(renderOutput(vec4(straightRgb, alpha)));
             }
             const renderPipeline = new RenderPipeline(renderer);
+            resources.pipeline = renderPipeline;
             renderPipeline.outputColorTransform = !transparentBackground;
             renderPipeline.outputNode = finalOutput;
-            renderPipelineRef.current = renderPipeline;
             retryCountRef.current = 0;
         }
         catch (error) {
@@ -488,24 +539,18 @@ const PostProcessingPasses = ({ hoverStyles = DEFAULT_HOVER_STYLES, disablePostF
                 ssgi: SSGI_PARAMS.enabled,
                 rendererCtor: renderer.constructor?.name,
             }, error);
-            if (renderPipelineRef.current) {
-                renderPipelineRef.current.dispose();
-            }
-            renderPipelineRef.current = null;
+            disposePipeline();
         }
-        return () => {
-            if (renderPipelineRef.current) {
-                renderPipelineRef.current.dispose();
-            }
-            renderPipelineRef.current = null;
-        };
+        return disposePipeline;
     }, [
         // NOTE: hoverHighlightMode intentionally excluded — the hover style is
         // pushed to uniforms in a separate effect, so a hover must NOT rebuild the
         // whole pipeline. The uniform refs below are stable (useMemo), so they
         // never trigger a rebuild either.
+        atmosphere,
         camera,
         disablePostFx,
+        disposePipeline,
         hoverHiddenColor,
         hoverPulseMix,
         hoverStrength,
@@ -572,7 +617,10 @@ const PostProcessingPasses = ({ hoverStyles = DEFAULT_HOVER_STYLES, disablePostF
         if (disablePostFx ||
             PERF_POST_FX_DISABLED ||
             hasPipelineErrorRef.current ||
-            !renderPipelineRef.current) {
+            !resourcesRef.current?.pipeline) {
+            const previousBackgroundNode = scene.backgroundNode;
+            if (directSkyNode && !transparentBackground)
+                scene.backgroundNode = directSkyNode;
             try {
                 const clearAlpha = transparentBackground ? 0 : 1;
                 if (renderer.setClearColor) {
@@ -584,37 +632,33 @@ const PostProcessingPasses = ({ hoverStyles = DEFAULT_HOVER_STYLES, disablePostF
                     renderer.setClearAlpha(clearAlpha);
                 }
                 const submittedAt = PERF_OVERLAY_ENABLED ? performance.now() : 0;
-                renderer.render(scene, camera);
-                if (PERF_OVERLAY_ENABLED) {
-                    const queue = renderer.backend?.device?.queue;
-                    queue?.onSubmittedWorkDone?.().then(() => {
-                        pushGpuSample(performance.now() - submittedAt);
-                    });
-                }
+                timeSpan('render-encode', () => {
+                    ;
+                    renderer.render(scene, camera);
+                });
+                if (PERF_OVERLAY_ENABLED)
+                    recordFrameGpuTiming(renderer, submittedAt);
             }
             catch (fallbackError) {
                 console.error('[viewer/post-processing] Fallback render failed.', fallbackError);
             }
+            finally {
+                scene.backgroundNode = previousBackgroundNode;
+            }
             return;
         }
+        const pipeline = resourcesRef.current.pipeline;
         try {
             // Clear alpha=0 so background pixels in the output MRT attachment (index 0) get a=0,
             // making scenePassColor.a a reliable geometry mask (geometry pixels write a=1 via output node).
             ;
             renderer.setClearAlpha(0);
             const submittedAt = PERF_OVERLAY_ENABLED ? performance.now() : 0;
-            renderPipelineRef.current.render();
-            if (PERF_OVERLAY_ENABLED) {
-                // device.queue.onSubmittedWorkDone() resolves once the GPU has
-                // finished the work we just submitted — the delta from our submit
-                // timestamp is a clean per-frame GPU duration. Doesn't block CPU
-                // (no await) and works for the custom RenderPipeline path that
-                // bypasses three.js's timestamp-query infrastructure.
-                const queue = renderer.backend?.device?.queue;
-                queue?.onSubmittedWorkDone?.().then(() => {
-                    pushGpuSample(performance.now() - submittedAt);
-                });
-            }
+            timeSpan('render-encode', () => {
+                pipeline.render();
+            });
+            if (PERF_OVERLAY_ENABLED)
+                recordFrameGpuTiming(renderer, submittedAt);
         }
         catch (error) {
             hasPipelineErrorRef.current = true;
@@ -624,10 +668,7 @@ const PostProcessingPasses = ({ hoverStyles = DEFAULT_HOVER_STYLES, disablePostF
                 rendererCtor: renderer.constructor?.name,
                 error,
             });
-            if (renderPipelineRef.current) {
-                renderPipelineRef.current.dispose();
-            }
-            renderPipelineRef.current = null;
+            disposePipeline();
             if (retryCountRef.current < MAX_PIPELINE_RETRIES) {
                 // Auto-retry: schedule a pipeline rebuild if we haven't exceeded the retry limit
                 retryCountRef.current++;

package/dist/components/viewer/registered-systems.d.ts

@@ -2,11 +2,20 @@
  * Mounts every registered node kind's system component, ordered by
  * `system.priority` (default {@link DEFAULT_PRIORITY}).
  *
- * Today the registry is empty so this component mounts nothing — coexists
- * with legacy `*-System` components in `<Viewer>`. Once kinds register via
- * `@pascal-app/nodes`, each kind's registry-driven system takes over and
- * its legacy counterpart short-circuits via the `nodeRegistry.has(kind)`
- * guard added to each legacy system.
+ * Two resilience rules, both learned from a live session in which the wall
+ * systems bundle (geometry rebuild + cutout stamps + batching) never ran
+ * while everything else did (QA f2 probe6: 24 walls stuck on placeholder
+ * geometry, no `wallHidden` stamps, base materials untouched):
+ *
+ * 1. `entries` re-derives on `useRegistryVersion()` — kinds register
+ *    asynchronously (plugin discovery, HMR), and a list snapshotted once at
+ *    mount permanently drops any system whose kind registers later. Same
+ *    staleness class SelectionManager already guards against ("plugin
+ *    nodes select-but-never-hover").
+ * 2. Each system gets its OWN Suspense boundary. With one shared boundary,
+ *    ANY lazily-loading (or load-failing) system chunk unmounts every
+ *    other system while it is pending — one bad chunk must not take the
+ *    wall pipeline down with it.
  */
 export declare function RegisteredSystems(): import("react").JSX.Element | null;
 //# sourceMappingURL=registered-systems.d.ts.map

package/dist/components/viewer/registered-systems.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"registered-systems.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/registered-systems.tsx"],"names":[],"mappings":"AA8BA;;;;;;;;;GASG;AACH,wBAAgB,iBAAiB,uCAyBhC"}
+{"version":3,"file":"registered-systems.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/registered-systems.tsx"],"names":[],"mappings":"AA+BA;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,iBAAiB,uCAgChC"}

package/dist/components/viewer/registered-systems.js

@@ -1,6 +1,6 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createSceneApi, isNodeKindEnabled, nodeRegistry, useScene, } from '@pascal-app/core';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { createSceneApi, isNodeKindEnabled, nodeRegistry, useRegistryVersion, useScene, } from '@pascal-app/core';
 import { lazy, Suspense, useMemo } from 'react';
 const DEFAULT_PRIORITY = 5;
 const lazyCache = new WeakMap();
@@ -18,16 +18,28 @@ function loadSystem(def) {
  * Mounts every registered node kind's system component, ordered by
  * `system.priority` (default {@link DEFAULT_PRIORITY}).
  *
- * Today the registry is empty so this component mounts nothing — coexists
- * with legacy `*-System` components in `<Viewer>`. Once kinds register via
- * `@pascal-app/nodes`, each kind's registry-driven system takes over and
- * its legacy counterpart short-circuits via the `nodeRegistry.has(kind)`
- * guard added to each legacy system.
+ * Two resilience rules, both learned from a live session in which the wall
+ * systems bundle (geometry rebuild + cutout stamps + batching) never ran
+ * while everything else did (QA f2 probe6: 24 walls stuck on placeholder
+ * geometry, no `wallHidden` stamps, base materials untouched):
+ *
+ * 1. `entries` re-derives on `useRegistryVersion()` — kinds register
+ *    asynchronously (plugin discovery, HMR), and a list snapshotted once at
+ *    mount permanently drops any system whose kind registers later. Same
+ *    staleness class SelectionManager already guards against ("plugin
+ *    nodes select-but-never-hover").
+ * 2. Each system gets its OWN Suspense boundary. With one shared boundary,
+ *    ANY lazily-loading (or load-failing) system chunk unmounts every
+ *    other system while it is pending — one bad chunk must not take the
+ *    wall pipeline down with it.
  */
 export function RegisteredSystems() {
     const sceneApi = useMemo(() => createSceneApi(useScene), []);
     const installedPlugins = useScene((state) => state.installedPlugins);
+    const registryVersion = useRegistryVersion();
     const entries = useMemo(() => {
+        // re-derive when kinds register after mount (async plugin load)
+        void registryVersion;
         return Array.from(nodeRegistry.entries())
             .filter(([, def]) => def.system != null)
             .sort(([, a], [, b]) => {
@@ -35,15 +47,15 @@ export function RegisteredSystems() {
             const pb = b.system?.priority ?? DEFAULT_PRIORITY;
             return pa - pb;
         });
-    }, []);
+    }, [registryVersion]);
     if (entries.length === 0)
         return null;
-    return (_jsx(Suspense, { fallback: null, children: entries.map(([kind, def]) => {
+    return (_jsx(_Fragment, { children: entries.map(([kind, def]) => {
             if (!isNodeKindEnabled(kind, installedPlugins))
                 return null;
             const Comp = loadSystem(def);
             if (!Comp)
                 return null;
-            return _jsx(Comp, { sceneApi: sceneApi }, `registered-system:${kind}`);
+            return (_jsx(Suspense, { fallback: null, children: _jsx(Comp, { sceneApi: sceneApi }) }, `registered-system:${kind}`));
         }) }));
 }

package/dist/components/viewer/scene-atmosphere.d.ts

@@ -0,0 +1,30 @@
+import type { Color, Node, Vector3 } from 'three/webgpu';
+export type SceneAtmosphereSource = {
+    skyRadiance(direction: Node<'vec3'>): Node<'vec3'>;
+    reflectionRadiance(direction: Node<'vec3'>): Node<'vec3'>;
+    fogRadiance(direction: Node<'vec3'>): Node<'vec3'>;
+    environmentNode: Node<'vec3'>;
+    sunDirection: Vector3;
+    sunColor: Color;
+    sunIntensity: number;
+    moonDirection: Vector3;
+    moonColor: Color;
+    moonIntensity: number;
+    skyColor: Color;
+    groundColor: Color;
+    hemisphereIntensity: number;
+    ambientIntensity: number;
+    exposure: number;
+    fogStart: number;
+    fogEnd: number;
+};
+/** Returns the atmosphere currently owning this React Three Fiber scene. */
+export declare function useSceneAtmosphere(): SceneAtmosphereSource | null;
+/**
+ * Installs a generic radiance source into the current scene. The source object is
+ * expected to remain stable while its colors, vectors, and numbers mutate.
+ */
+export declare function SceneAtmosphere({ source }: {
+    source: SceneAtmosphereSource;
+}): null;
+//# sourceMappingURL=scene-atmosphere.d.ts.map

package/dist/components/viewer/scene-atmosphere.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scene-atmosphere.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/scene-atmosphere.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,KAAK,EAAE,IAAI,EAAS,OAAO,EAAE,MAAM,cAAc,CAAA;AAI/D,MAAM,MAAM,qBAAqB,GAAG;IAClC,WAAW,CAAC,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAA;IAClD,kBAAkB,CAAC,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAA;IACzD,WAAW,CAAC,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAA;IAClD,eAAe,EAAE,IAAI,CAAC,MAAM,CAAC,CAAA;IAC7B,YAAY,EAAE,OAAO,CAAA;IACrB,QAAQ,EAAE,KAAK,CAAA;IACf,YAAY,EAAE,MAAM,CAAA;IACpB,aAAa,EAAE,OAAO,CAAA;IACtB,SAAS,EAAE,KAAK,CAAA;IAChB,aAAa,EAAE,MAAM,CAAA;IACrB,QAAQ,EAAE,KAAK,CAAA;IACf,WAAW,EAAE,KAAK,CAAA;IAClB,mBAAmB,EAAE,MAAM,CAAA;IAC3B,gBAAgB,EAAE,MAAM,CAAA;IACxB,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;CACf,CAAA;AA6DD,4EAA4E;AAC5E,wBAAgB,kBAAkB,IAAI,qBAAqB,GAAG,IAAI,CAIjE;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,qBAAqB,CAAA;CAAE,QA8C5E"}