@pascal-app/viewer 1.0.6 → 1.1.0

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

@@ -1,11 +1,15 @@
 import { useFrame, useThree } from '@react-three/fiber';
 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, mix, normalView, normalWorldGeometry, oscSine, output, pass, premultiplyAlpha, renderOutput, sample, saturation, screenUV, smoothstep, time, color as tslColor, float as tslFloat, uniform, vec3, vec4, } from 'three/tsl';
+import { ACESFilmicToneMapping, Color, Layers, Matrix4, NeutralToneMapping, Scene, UnsignedByteType, Vector3, } from 'three';
+import { bloom } from 'three/addons/tsl/display/BloomNode.js';
+import { fxaa } from 'three/addons/tsl/display/FXAANode.js';
+import { ao as gtao } from 'three/addons/tsl/display/GTAONode.js';
+import { traa } from 'three/addons/tsl/display/TRAANode.js';
+import { add, diffuseColor, ivec2, mix, normalView, normalWorldGeometry, oscSine, output, pass, premultiplyAlpha, renderOutput, sample, saturation, screenUV, smoothstep, time, color as tslColor, float as tslFloat, length as tslLength, uniform, vec3, vec4, velocity, } from 'three/tsl';
 import { RenderPipeline, TimestampQuery } from 'three/webgpu';
 import { backdropColors, backdropGradient, flatBackdropOutput } from '../../lib/backdrop';
+import { DAYLIGHT_BLOOM, DAYLIGHT_GRADE, DAYLIGHT_INK_BACKDROP, daylightGradeRgb, isDaylightAtmosphere as isDaylight, } from '../../lib/daylight/look';
+import { daylightRoomContext } from '../../lib/daylight/room-context';
 import { edgeColorFor, edgeOpacityScaleFor } from '../../lib/edge-style';
 import { PERF_OVERLAY_ENABLED } from '../../lib/gpu-perf';
 import { createEdgeDepthSampler, inkedEdges } from '../../lib/ink-edges';
@@ -16,18 +20,31 @@ import { isLiveFrameHeld } from '../../lib/live-frame-hold';
 import { mergedOutline } from '../../lib/merged-outline-node';
 import { recordPerfSample, timeSpan } from '../../lib/perf-tracks';
 import { PostProcessingResources } from '../../lib/post-processing-resources';
+import { renderWithSceneMatrices } from '../../lib/scene-matrices';
 import { sceneLightingMask, scenePassMrt } from '../../lib/scene-pass-mrt';
 import { packNormalToRGB, unpackRGBToNormal } from '../../lib/tsl-compat';
 import { earthNow, UNDERGROUND_VIGNETTE, undergroundAmbianceNode, undergroundBackdrop, undergroundDissolve, undergroundDissolveGrain, undergroundEarthNode, undergroundFogAmount, undergroundVignette, worldPositionFromDepth, } from '../../lib/underground-ambiance';
 import useViewer from '../../store/use-viewer';
 import { useSceneAtmosphere } from './scene-atmosphere';
+/** GTAO over the whole image (enhanced viewer's `gtao-whole`: strength 0.6 × 0.8). */
+const AO_BLEND = 0.48;
+const NEIGHBOURS_3X3 = [
+    [-1, -1],
+    [0, -1],
+    [1, -1],
+    [-1, 0],
+    [1, 0],
+    [-1, 1],
+    [0, 1],
+    [1, 1],
+];
 // A mild mid-gray contrast and saturation lift separates surfaces before the
-// output transform. Saved project looks can turn it off. Rendered shading only.
+// output transform. Saved project looks can turn it off.
 export const GRADE_PARAMS = {
     contrast: 1.05,
     saturation: 1.1,
 };
-// SSGI Parameters - adjust these to fine-tune global illumination and ambient occlusion
+// SSGI parameters for the snapshot pipeline's ambient occlusion.
 export const SSGI_PARAMS = {
     enabled: true,
     sliceCount: 1,
@@ -48,8 +65,8 @@ export const SSGI_PARAMS = {
 // allocation + per-frame work for that stage, so device temperature deltas
 // across combos isolate which pass is the actual culprit. Picked up once at
 // pipeline build; reload after changing the URL.
-//   - ao:      skip SSGI entirely (and denoise, since denoise has nothing to denoise)
-//   - denoise: keep SSGI but feed its raw noisy AO straight to the composite
+//   - ao:      skip ambient occlusion entirely
+//   - denoise: (snapshots) keep SSGI but feed its raw noisy AO straight to the composite
 //   - outline: skip the merged-outline node and its 14 internal RTs
 //   - postFx:  bypass the whole RenderPipeline and use renderer.render(scene, camera)
 //              directly — isolates raw scene-render cost from any post-FX overhead
@@ -218,13 +235,18 @@ const PostProcessingPasses = ({ hoverStyles = DEFAULT_HOVER_STYLES, disablePostF
     const hoverPulseMix = useMemo(() => uniform(DEFAULT_HOVER_STYLE.pulse ? 0 : 1), []);
     // Subscribe to projectId so the pipeline rebuilds on project switch
     const projectId = useViewer((s) => s.projectId);
-    const shading = useViewer((s) => s.shading);
     const ambientOcclusion = useViewer((s) => s.sceneAppearance.postprocessing?.ambientOcclusion !== false);
     const colorGrading = useViewer((s) => s.sceneAppearance.postprocessing?.colorGrading !== false);
     const flatBackground = useViewer((s) => s.sceneAppearance.backgroundSky === null);
     const edges = useViewer((s) => s.edges);
     const inkOpacityOverride = useViewer((s) => s.inkOpacity);
     const transparentBackground = useViewer((s) => s.transparentBackground);
+    const renderQuality = useViewer((s) => s.renderQuality);
+    // Daylight look uniforms, refreshed every frame from the atmosphere/exposure.
+    const whiteBalance = useMemo(() => uniform(new Vector3(1, 1, 1)), []);
+    // 1 / exposure: the bloom threshold (only display-white blooms) and the daylight look's
+    // compensation of unlit overlays (zones, editor overlays), which keep their designed brightness.
+    const exposureInverse = useMemo(() => uniform(1), []);
     const lastProjectIdRef = useRef(projectId);
     // Bump this to force a pipeline rebuild (used by retry logic)
     const [pipelineVersion, setPipelineVersion] = useState(0);
@@ -305,24 +327,33 @@ const PostProcessingPasses = ({ hoverStyles = DEFAULT_HOVER_STYLES, disablePostF
             disposePipeline();
             return;
         }
-        const ssgiEnabled = shading === 'rendered' && ambientOcclusion && SSGI_PARAMS.enabled && !perfDisable.ao;
-        const denoiseEnabled = ssgiEnabled && !perfDisable.denoise;
+        // Quality tiers (both appearances; the enhanced-viewer reference):
+        //  high   — full-res GTAO from the scene pass, soft whole-image blend, TRAA, bloom (daylight)
+        //  medium — ½-res GTAO from the scene pass, soft whole-image blend, TRAA
+        // (The reference's high tier fed GTAO from a depth/normal pre-pass, darkening indirect light
+        // only; a pre-pass draws the whole scene twice, which an editor scene of thousands of meshes
+        // can't afford.)
+        //  low    — no AO, FXAA
+        // The colored appearance adds the daylight look: Neutral tone mapping, white balance, grade
+        // and a display-space vignette. Ink edges belong to the monochrome appearance only.
+        const daylight = isDaylight(atmosphere);
+        renderer.toneMapping = daylight ? NeutralToneMapping : ACESFilmicToneMapping;
+        const aoTier = ambientOcclusion && !perfDisable.ao && renderQuality !== 'low' ? renderQuality : null;
+        const temporalAA = !transparentBackground && renderQuality !== 'low';
+        const fxaaEnabled = !transparentBackground && renderQuality === 'low';
+        const bloomEnabled = daylight && !transparentBackground && renderQuality === 'high';
         const outlineEnabled = !perfDisable.outline;
-        const inkEnabled = edges !== 'off';
-        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.
+        const inkEnabled = !daylight && edges !== 'off';
+        const needsNormalMRT = inkEnabled || aoTier !== null || temporalAA;
+        // Ink: thin (1px sample radius) and faint (50% opacity).
         const inkRadius = 1;
-        const inkOpacity = inkOpacityOverride ?? (edges === 'strong' ? 1 : 0.5);
+        const inkOpacity = inkOpacityOverride ?? 0.5;
         console.log('[viewer/post-processing] Building pipeline', {
             version: pipelineVersion,
-            ssgi: ssgiEnabled,
-            denoise: denoiseEnabled,
+            quality: renderQuality,
             outline: outlineEnabled,
             perfDisable,
             projectId,
-            shading,
             ambientOcclusion,
             colorGrading,
             transparentBackground,
@@ -331,7 +362,7 @@ const PostProcessingPasses = ({ hoverStyles = DEFAULT_HOVER_STYLES, disablePostF
             height,
         });
         hasPipelineErrorRef.current = false;
-        // WebGPU availability check: SSGI, denoise, and RenderPipeline are all
+        // WebGPU availability check: GTAO, TRAA, and RenderPipeline are all
         // WebGPU-only APIs. When the browser falls back to WebGL2 (no
         // `navigator.gpu`, or the device couldn't be created), building the
         // pipeline either throws silently or produces a broken output where
@@ -357,14 +388,17 @@ const PostProcessingPasses = ({ hoverStyles = DEFAULT_HOVER_STYLES, disablePostF
         try {
             const layerIndex = new LayerPassIndex(scene, [ZONE_LAYER, OVERLAY_LAYER]);
             resources.layerIndex = layerIndex;
-            const scenePass = pass(scene, camera);
+            // Temporal AA / FXAA replace MSAA, and the ½-res GTAO gathers from this depth (no multisampled
+            // `textureGather`): both want a single-sampled scene pass.
+            const singleSampled = temporalAA || fxaaEnabled || aoTier !== null;
+            const scenePass = pass(scene, camera, singleSampled ? { samples: 0 } : undefined);
             resources.passes.push(scenePass);
             scenePass.setLayers(sceneOnlyLayers);
             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
+            // layer, kept out of the depth/normal MRT above so the ink + AO ignore
             // them, then composited on top of the final image below.
             const overlayPass = new LayerPassNode(layerIndex, camera, OVERLAY_LAYER, scenePass);
             resources.passes.push(overlayPass);
@@ -378,11 +412,12 @@ const PostProcessingPasses = ({ hoverStyles = DEFAULT_HOVER_STYLES, disablePostF
             const hasGeometry = scenePassColor.a;
             const contentAlpha = hasGeometry.max(zonePass.a);
             // Composite the zone-pass tint into the base scene so rooms show whether or
-            // 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);
-            // Scene depth is shared by SSGI, ink, and outlines.
-            // The normal MRT is only built when SSGI or ink needs it.
+            // not AO is enabled. The AO branch below rebuilds this
+            // composite with the zone tint kept out of the AO (no double-add).
+            const zoneRgb = daylight ? zonePass.rgb.mul(exposureInverse) : zonePass.rgb;
+            let sceneColor = vec4(add(scenePassColor.rgb, zoneRgb), contentAlpha);
+            // Scene depth is shared by AO, ink, and outlines.
+            // The normal MRT is only built when the medium AO, TRAA or ink needs it.
             const scenePassDepth = scenePass.getTextureNode('depth');
             const sampleEdgeDepth = createEdgeDepthSampler(scenePassDepth, camera);
             let scenePassNormal = null;
@@ -392,6 +427,7 @@ const PostProcessingPasses = ({ hoverStyles = DEFAULT_HOVER_STYLES, disablePostF
                     diffuseColor,
                     normal: packNormalToRGB(normalView),
                     lighting: sceneLightingMask(),
+                    ...(temporalAA ? { velocity } : {}),
                 }));
                 scenePassNormal = scenePass.getTextureNode('normal');
             }
@@ -400,56 +436,32 @@ const PostProcessingPasses = ({ hoverStyles = DEFAULT_HOVER_STYLES, disablePostF
                 normalTexture.type = UnsignedByteType;
                 scenePass.getTexture('lighting').type = UnsignedByteType;
             }
-            // Extract normal from color-encoded texture (SSGI consumes the node form).
+            // Extract normal from color-encoded texture (GTAO 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;
-                const giPass = ssgi(scenePassColor, scenePassDepth, sceneNormal, camera);
-                giPass.sliceCount.value = SSGI_PARAMS.sliceCount;
-                giPass.stepCount.value = SSGI_PARAMS.stepCount;
-                giPass.radius.value = SSGI_PARAMS.radius;
-                giPass.expFactor.value = SSGI_PARAMS.expFactor;
-                giPass.thickness.value = SSGI_PARAMS.thickness;
-                giPass.backfaceLighting.value = SSGI_PARAMS.backfaceLighting;
-                giPass.aoIntensity.value = SSGI_PARAMS.aoIntensity;
-                giPass.giIntensity.value = SSGI_PARAMS.giIntensity;
-                giPass.useLinearThickness.value = SSGI_PARAMS.useLinearThickness;
-                giPass.useScreenSpaceSampling.value = SSGI_PARAMS.useScreenSpaceSampling;
-                giPass.useTemporalFiltering = SSGI_PARAMS.useTemporalFiltering;
-                // r185: SSGI renders AO and GI into two separate textures (R8 + RG11B10)
-                // exposed via getAONode()/getGINode() instead of one rgba texture.
-                const aoTexture = giPass.getAONode();
-                const gi = giPass.getGINode().rgb;
-                let ao;
-                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, tslFloat(1));
-                    const denoisePass = denoise(aoAsRgb, scenePassDepth, sceneNormal, camera);
-                    denoisePass.index.value = 0;
-                    denoisePass.radius.value = 4;
-                    ao = denoisePass.r;
-                }
-                else {
-                    // Diagnostic path: feed raw noisy SSGI AO straight through. Will
-                    // look grainy — that's the point, it isolates denoise cost.
-                    ao = aoTexture.r;
-                }
-                // AO is a near/mid-field cue like the ink: fade it out with raw depth
-                // (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(tslFloat(0.9994), tslFloat(0.9998), sampleEdgeDepth(screenUV));
-                ao = mix(ao, tslFloat(1), aoFarFade);
-                const lightingWeight = scenePass.getTextureNode('lighting').r;
-                ao = mix(tslFloat(1), ao, lightingWeight);
-                // Composite: scene * AO + diffuse * GI
-                sceneColor = vec4(add(scenePassColor.rgb.mul(ao), add(zonePass.rgb, scenePassDiffuse.rgb.mul(gi).mul(lightingWeight))), contentAlpha);
+            // AO: GTAO from the scene pass's depth and normals, blended softly over the whole image
+            // (full resolution on high, ½ on medium).
+            let temporalDepth = null;
+            let temporalVelocity = null;
+            if (aoTier && sceneNormal && scenePassDepth) {
+                const aoNode = gtao(scenePassDepth, sceneNormal, camera);
+                aoNode.radius.value = 0.6;
+                aoNode.thickness.value = 1.2;
+                aoNode.distanceExponent.value = 1.4;
+                aoNode.samples.value = 16;
+                aoNode.resolutionScale = aoTier === 'high' ? 1 : 0.5;
+                resources.effects.push(aoNode);
+                const aoBlend = mix(tslFloat(1), aoNode.getTextureNode().sample(screenUV).r, AO_BLEND);
+                sceneColor = vec4(add(scenePassColor.rgb.mul(aoBlend), zoneRgb), contentAlpha);
+            }
+            // The daylight look's room light (windows, lamps, bounce, night spill).
+            if (daylight)
+                scenePass.contextNode = daylightRoomContext();
+            if (temporalAA && !temporalVelocity && scenePassNormal) {
+                temporalDepth = scenePassDepth;
+                temporalVelocity = scenePass.getTextureNode('velocity');
             }
             // Screen-space ink outline (SketchUp look) — depth/normal edge detection
             // over the composited scene. Topology-agnostic, so it handles CSG-cut
@@ -464,13 +476,25 @@ const PostProcessingPasses = ({ hoverStyles = DEFAULT_HOVER_STYLES, disablePostF
                     opacity: tslFloat(inkOpacity).mul(inkOpacityScaleUniform.current),
                 }), sceneColor.a);
             }
+            // Bloom on the HDR image; the threshold follows exposure so only display-white blooms.
+            if (bloomEnabled) {
+                // Editor highlights stay out of it (`markHighlight`): they must not haze over the object.
+                const bloomWeight = scenePassNormal ? scenePass.getTextureNode('lighting').g : tslFloat(1);
+                const glow = bloom(vec4(sceneColor.rgb.mul(bloomWeight), sceneColor.a), DAYLIGHT_BLOOM.strength, DAYLIGHT_BLOOM.radius, exposureInverse);
+                glow.smoothWidth.value = DAYLIGHT_BLOOM.softKnee;
+                resources.effects.push(glow);
+                sceneColor = vec4(sceneColor.rgb.add(glow.rgb), sceneColor.a);
+            }
             // Scene-referred grade (contrast around mid-gray + saturation) before the
-            // pipeline's output tone mapping. Kept out of solid/schematic shading so
-            // the flat presets stay exact. The same transform is applied to the
+            // pipeline's output tone mapping. The same transform is applied to the
             // backdrop below so geometry that fades to the background colour (the
-            // horizon disc) matches it exactly.
-            const gradeRgb = (rgb) => saturation(rgb.div(0.18).pow(vec3(GRADE_PARAMS.contrast)).mul(0.18), GRADE_PARAMS.saturation);
-            if (shading === 'rendered' && colorGrading) {
+            // horizon disc) matches it exactly. The daylight look adds eye-like white
+            // balance (sky and scene alike).
+            const gradeRgb = (rgb) => daylight
+                ? daylightGradeRgb(rgb, whiteBalance)
+                : saturation(rgb.div(0.18).pow(vec3(GRADE_PARAMS.contrast)).mul(0.18), GRADE_PARAMS.saturation);
+            const graded = colorGrading;
+            if (graded) {
                 sceneColor = vec4(gradeRgb(sceneColor.rgb), sceneColor.a);
             }
             // Reused scene depth lets outlined groups occlude each other; materials
@@ -509,7 +533,9 @@ const PostProcessingPasses = ({ hoverStyles = DEFAULT_HOVER_STYLES, disablePostF
                     .max(outlineNode.secondaryVisibleEdge)
                     .max(outlineNode.secondaryHiddenEdge);
                 visualAlpha = visualAlpha.max(outlineAlpha);
-                compositeWithOutlines = vec4(add(sceneColor.rgb, selectedOutline.add(hoverOutline)), sceneColor.a);
+                compositeWithOutlines = vec4(add(sceneColor.rgb, daylight
+                    ? selectedOutline.add(hoverOutline).mul(exposureInverse)
+                    : selectedOutline.add(hoverOutline)), sceneColor.a);
             }
             // Backdrop: world-space view ray per pixel → background / horizon haze /
             // sky gradient (shared formula in lib/backdrop.ts). The horizon disc
@@ -527,7 +553,7 @@ const PostProcessingPasses = ({ hoverStyles = DEFAULT_HOVER_STYLES, disablePostF
                     sky: bgSkyUniform.current,
                     skyDeep: bgSkyDeepUniform.current,
                 });
-            if (shading === 'rendered' && colorGrading) {
+            if (graded) {
                 bgGradient = gradeRgb(bgGradient);
             }
             let sceneComposite = compositeWithOutlines.rgb;
@@ -554,14 +580,35 @@ const PostProcessingPasses = ({ hoverStyles = DEFAULT_HOVER_STYLES, disablePostF
                 sceneComposite = mix(sceneComposite, dark, undergroundFogAmount(worldPosition).mul(dive));
             }
             let composited = mix(bgGradient, sceneComposite, contentAlpha);
+            // Temporal AA resolves the whole picture, so silhouettes against the sky are smoothed too.
+            // Its history is only valid where the 3×3 neighbourhood holds geometry (open sky, at the far
+            // plane, resolves to black), so the sky away from geometry keeps the direct backdrop.
+            if (temporalAA && temporalVelocity && temporalDepth) {
+                const temporal = traa(vec4(composited, 1), temporalDepth, temporalVelocity, camera);
+                resources.effects.push(temporal);
+                let nearGeometry = contentAlpha;
+                for (const [x, y] of NEIGHBOURS_3X3) {
+                    nearGeometry = nearGeometry.max(scenePassColor.offset(ivec2(x, y)).a);
+                }
+                composited = mix(composited, temporal.rgb, nearGeometry.greaterThan(0).select(1, 0));
+            }
             // The screen's edges close in with it.
             if (dive) {
                 composited = mix(composited, tslColor(UNDERGROUND_VIGNETTE), undergroundVignette().mul(dive));
             }
-            // 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, tslFloat(1));
+            // Display-space picture: tone mapping + colour space, then the daylight vignette (after the
+            // tone mapping, as in the reference). Editor overlays are painted on top by their own alpha —
+            // they never get inked, AO'd, outlined or vignetted, and always read crisp.
+            const toDisplay = (rgb) => renderOutput(vec4(rgb, 1), renderer.toneMapping, renderer.outputColorSpace);
+            let displayScene = toDisplay(composited);
+            if (daylight) {
+                const vignette = tslLength(screenUV.sub(0.5))
+                    .mul(1.35)
+                    .pow(2.5)
+                    .mul(DAYLIGHT_GRADE.vignette);
+                displayScene = vec4(displayScene.rgb.mul(tslFloat(1).sub(vignette)), 1);
+            }
+            let finalOutput = vec4(mix(displayScene.rgb, toDisplay(daylight ? overlayColor.rgb.mul(exposureInverse) : overlayColor.rgb).rgb, overlayColor.a), tslFloat(1));
             if (transparentBackground) {
                 const overlayAlpha = overlayColor.a;
                 const alpha = overlayAlpha.add(visualAlpha.mul(overlayAlpha.oneMinus()));
@@ -582,10 +629,13 @@ const PostProcessingPasses = ({ hoverStyles = DEFAULT_HOVER_STYLES, disablePostF
                 const overlay = renderOutput(vec4(overlayColor.rgb, 1), renderer.toneMapping, renderer.outputColorSpace);
                 finalOutput = vec4(mix(backdrop.rgb, overlay.rgb, overlayColor.a), 1);
             }
+            // Low tier: FXAA on the display image (no temporal AA, no MSAA).
+            if (fxaaEnabled)
+                finalOutput = fxaa(finalOutput);
             const renderPipeline = new RenderPipeline(renderer);
             resources.pipeline = renderPipeline;
-            renderPipeline.outputColorTransform =
-                !transparentBackground && !(flatBackground && !atmosphere);
+            // Every branch above ends in display space.
+            renderPipeline.outputColorTransform = false;
             renderPipeline.outputNode = finalOutput;
             retryCountRef.current = 0;
         }
@@ -593,7 +643,6 @@ const PostProcessingPasses = ({ hoverStyles = DEFAULT_HOVER_STYLES, disablePostF
             hasPipelineErrorRef.current = true;
             console.error('[viewer/post-processing] Failed to set up post-processing pipeline. Rendering without post FX.', {
                 version: pipelineVersion,
-                ssgi: SSGI_PARAMS.enabled,
                 rendererCtor: renderer.constructor?.name,
             }, error);
             disposePipeline();
@@ -618,11 +667,13 @@ const PostProcessingPasses = ({ hoverStyles = DEFAULT_HOVER_STYLES, disablePostF
         projectId,
         renderer,
         scene,
-        shading,
         ambientOcclusion,
         colorGrading,
         flatBackground,
         transparentBackground,
+        renderQuality,
+        whiteBalance,
+        exposureInverse,
         size.height,
         size.width,
         zoneLayers,
@@ -669,10 +720,16 @@ const PostProcessingPasses = ({ hoverStyles = DEFAULT_HOVER_STYLES, disablePostF
         bgSkyDeepTarget.current.set(backdrop.skyDeep);
         bgSkyDeepCurrent.current.lerp(bgSkyDeepTarget.current, Math.min(delta, 0.1) * 4);
         bgSkyDeepUniform.current.value.copy(bgSkyDeepCurrent.current);
+        if (isDaylight(atmosphere))
+            whiteBalance.value.copy(atmosphere.whiteBalance);
+        exposureInverse.value = 1 / Math.max(renderer.toneMappingExposure, 1e-3);
         camProjInvUniform.current.value.copy(camera.projectionMatrixInverse);
         camWorldUniform.current.value.copy(camera.matrixWorld);
-        // Ink colour follows the (lerping) background luminance — snaps dark↔light.
-        const bgHex = `#${bgCurrent.current.getHexString()}`;
+        // Ink colour follows the (lerping) background luminance — snaps dark↔light. The daylight
+        // look ignores the scene theme: its edges are always the light-backdrop ink.
+        const bgHex = isDaylight(atmosphere)
+            ? DAYLIGHT_INK_BACKDROP
+            : `#${bgCurrent.current.getHexString()}`;
         inkColorUniform.current.value.set(edgeColorFor(bgHex));
         inkOpacityScaleUniform.current.value = edgeOpacityScaleFor(bgHex);
         const outliner = useViewer.getState().outliner;
@@ -703,8 +760,7 @@ const PostProcessingPasses = ({ hoverStyles = DEFAULT_HOVER_STYLES, disablePostF
                 }
                 const submittedAt = PERF_OVERLAY_ENABLED ? performance.now() : 0;
                 timeSpan('render-encode', () => {
-                    ;
-                    renderer.render(scene, camera);
+                    renderWithSceneMatrices(scene, () => renderer.render(scene, camera));
                 });
                 if (PERF_OVERLAY_ENABLED)
                     recordFrameGpuTiming(renderer, submittedAt);
@@ -726,7 +782,7 @@ const PostProcessingPasses = ({ hoverStyles = DEFAULT_HOVER_STYLES, disablePostF
             renderer.setClearAlpha(0);
             const submittedAt = PERF_OVERLAY_ENABLED ? performance.now() : 0;
             timeSpan('render-encode', () => {
-                pipeline.render();
+                renderWithSceneMatrices(scene, () => pipeline.render());
             });
             if (PERF_OVERLAY_ENABLED)
                 recordFrameGpuTiming(renderer, submittedAt);

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":"AAoDA;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,iBAAiB,uCAkChC"}
+{"version":3,"file":"registered-systems.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/registered-systems.tsx"],"names":[],"mappings":"AAqDA;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,iBAAiB,uCAkChC"}

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

@@ -1,6 +1,6 @@
 'use client';
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { createSceneApi, isNodeKindEnabled, nodeRegistry, useRegistryVersion, useScene, } from '@pascal-app/core';
+import { createSceneApi, isDevelopmentBuild, isNodeKindEnabled, nodeRegistry, useRegistryVersion, useScene, } from '@pascal-app/core';
 import { Component, lazy, Suspense, useMemo } from 'react';
 const DEFAULT_PRIORITY = 5;
 const lazyCache = new WeakMap();
@@ -20,7 +20,7 @@ class SystemErrorBoundary extends Component {
         return { failed: true };
     }
     componentDidCatch(error) {
-        if (process.env.NODE_ENV !== 'production') {
+        if (isDevelopmentBuild()) {
             console.error(`[viewer] Disabled system ${this.props.systemId}`, error);
         }
     }

package/dist/components/viewer/scene-environment.js

@@ -1,6 +1,6 @@
 'use client';
 import { useThree } from '@react-three/fiber';
-import { useEffect, useRef } from 'react';
+import { useEffect } from 'react';
 import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
 import * as THREE from 'three/webgpu';
 import useViewer from '../../store/use-viewer';
@@ -68,8 +68,6 @@ export function SceneEnvironment() {
     const environment = useViewer((state) => state.sceneAppearance.environment);
     const source = environment?.source ?? 'gradient';
     const atmosphere = useSceneAtmosphere();
-    const atmosphereRef = useRef(atmosphere);
-    atmosphereRef.current = atmosphere;
     useEffect(() => {
         const prevEnvironment = scene.environment;
         let target;
@@ -104,9 +102,10 @@ export function SceneEnvironment() {
         const previous = scene.environmentIntensity;
         scene.environmentIntensity =
             environment?.intensity ?? (appearance === 'dark' ? ENV_INTENSITY_DARK : ENV_INTENSITY);
+        // Always hand back what was there: when an atmosphere arrives after this ran (its owner
+        // installs in a layout effect, before this component sees it), that is the atmosphere's 1.
         return () => {
-            if (!atmosphereRef.current)
-                scene.environmentIntensity = previous;
+            scene.environmentIntensity = previous;
         };
     }, [appearance, atmosphere, scene, environment?.intensity]);
     return null;

package/dist/components/viewer/selection-callout.d.ts

@@ -0,0 +1,51 @@
+import { type InteractionSound, type MessageDescriptor } from '@pascal-app/core';
+import { type Object3D, Vector3 } from 'three';
+export type CalloutIcon = 'door' | 'window' | 'shutters' | 'light' | 'fan' | 'power';
+export type CalloutSound = {
+    on: InteractionSound;
+    off: InteractionSound;
+    swing?: InteractionSound;
+};
+/** Scene data (a name, a part's label) as written, or UI copy to translate. */
+export type CalloutText = string | MessageDescriptor;
+/** One control on the callout: a pill that flips something, or a pill holding a range. */
+export type CalloutAction = {
+    kind: 'toggle';
+    key: string;
+    icon: CalloutIcon;
+    on: boolean;
+    /** The element or part it acts on, for the spoken label. */
+    name: string;
+    /** A part's own name on the pill; without it the pill shows its state word. */
+    text?: CalloutText;
+    /** `swing` sounds as a closing run starts, `off` as it lands. */
+    sound: CalloutSound;
+    /** When closing returns a promise for the end of the run, the closing sound waits for it. */
+    toggle: () => void | Promise<void>;
+} | {
+    kind: 'range';
+    key: string;
+    label: string;
+    value: number;
+    min: number;
+    max: number;
+    step: number;
+    unit?: string;
+    onChange: (value: number) => void;
+};
+/**
+ * The selected element's label: a dot on it, a hairline rising from the dot,
+ * then its name, a detail line, its controls and a close button. It follows
+ * the element's world point each frame rather than living inside its object:
+ * kinds that rebuild their children (a window opening) would drop it.
+ */
+export declare function SelectionCallout({ object, anchor: anchorProp, title, subtitle, actions, onDismiss, }: {
+    object: Object3D;
+    /** Where the dot sits, in the object's space; the centre of its bounds by default. */
+    anchor?: Vector3;
+    title: string;
+    subtitle?: CalloutText | null;
+    actions: CalloutAction[];
+    onDismiss: () => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=selection-callout.d.ts.map

package/dist/components/viewer/selection-callout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection-callout.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/selection-callout.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,EAGvB,MAAM,kBAAkB,CAAA;AAYzB,OAAO,EAAqB,KAAK,QAAQ,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAEjE,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,GAAG,KAAK,GAAG,OAAO,CAAA;AAEpF,MAAM,MAAM,YAAY,GAAG;IAAE,EAAE,EAAE,gBAAgB,CAAC;IAAC,GAAG,EAAE,gBAAgB,CAAC;IAAC,KAAK,CAAC,EAAE,gBAAgB,CAAA;CAAE,CAAA;AAEpG,+EAA+E;AAC/E,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,iBAAiB,CAAA;AAEpD,0FAA0F;AAC1F,MAAM,MAAM,aAAa,GACrB;IACE,IAAI,EAAE,QAAQ,CAAA;IACd,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,WAAW,CAAA;IACjB,EAAE,EAAE,OAAO,CAAA;IACX,4DAA4D;IAC5D,IAAI,EAAE,MAAM,CAAA;IACZ,+EAA+E;IAC/E,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,iEAAiE;IACjE,KAAK,EAAE,YAAY,CAAA;IACnB,6FAA6F;IAC7F,MAAM,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;CACnC,GACD;IACE,IAAI,EAAE,OAAO,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC,CAAA;AAgBL;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,MAAM,EAAE,UAAU,EAClB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,SAAS,GACV,EAAE;IACD,MAAM,EAAE,QAAQ,CAAA;IAChB,sFAAsF;IACtF,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IAC7B,OAAO,EAAE,aAAa,EAAE,CAAA;IACxB,SAAS,EAAE,MAAM,IAAI,CAAA;CACtB,+BAkHA"}