@pascal-app/viewer 0.8.0 → 0.9.1

package/dist/components/viewer/lights.js

@@ -1,74 +1,201 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { sceneRegistry } from '@pascal-app/core';
 import { useFrame } from '@react-three/fiber';
 import { useMemo, useRef } from 'react';
 import * as THREE from 'three/webgpu';
+import { getSceneTheme } from '../../lib/scene-themes';
 import useViewer from '../../store/use-viewer';
+// Diagnostic toggle: `?disable=shadows` skips the shadow-map render pass
+// (which doubles draw calls for every shadow-casting mesh) so you can
+// isolate how much of the baseline GPU cost is shadows vs. raw geometry.
+const SHADOWS_DISABLED = typeof window !== 'undefined' &&
+    new Set((new URLSearchParams(window.location.search).get('disable') ?? '')
+        .split(',')
+        .map((s) => s.trim())).has('shadows');
+// Shadow darkness for the bright key lights (themes drive most lights past
+// intensity 1). The aesthetic prototype runs these near-black (≈1.0); this is a
+// deliberate middle ground — present, but not the heavy contact shadow there.
+const MAX_SHADOW_INTENSITY = 0.55;
+// Shadow frustum framing. The frustum is fit to the BUILDING geometry (not the
+// camera): we union the bounds of all registered scene nodes, fit a sphere, and
+// size the directional light's ortho shadow camera to that sphere plus a margin.
+// This keeps shadows anchored to the building and a bit of surrounding ground no
+// matter how the user zooms or pans — fixing the previous camera-following
+// behaviour that fell apart when zoomed out (frustum too small) or zoomed into
+// an empty corner (frustum centred on nothing).
+//
+// `site` nodes (the ground/site plane, which can be arbitrarily large) are
+// excluded so they don't blow the frustum up to cover the whole lot.
+const SHADOW_EXCLUDED_TYPES = ['site'];
+// How often (seconds) to recompute building bounds. Bounds only change while
+// editing, so we throttle the (subtree-walking) union instead of doing it every
+// frame.
+const BOUNDS_REFRESH_INTERVAL = 0.4;
+// Extra coverage around the building bounds — the "and a bit nearby" margin so
+// shadows don't get clipped right at the walls. Scales with building size.
+const SHADOW_MARGIN_SCALE = 1.15;
+const SHADOW_MARGIN = 3;
+// Gap between the building bounds sphere and the light / near plane.
+const SHADOW_BACKOFF = 10;
+// Fallback radius when the scene has no building geometry yet (empty scene).
+const SHADOW_FALLBACK_RADIUS = 30;
 export function Lights() {
-    const theme = useViewer((state) => state.theme);
-    const isDark = theme === 'dark';
-    const light1Ref = useRef(null);
+    const sceneTheme = useViewer((state) => state.sceneTheme);
+    const theme = getSceneTheme(sceneTheme);
+    const shadows = useViewer((state) => state.shadows);
+    const lightRefs = useRef([]);
     const shadowCamera = useRef(null);
-    const shadowCameraSize = 50; // The "area" around the camera to shadow
-    const light2Ref = useRef(null);
-    const light3Ref = useRef(null);
+    // Initial ortho half-size; overridden each refresh to fit the building.
+    const shadowCameraSize = 50;
+    // Building bounds the shadow frustum is fit to, recomputed on an interval.
+    const shadowFocus = useRef(new THREE.Vector3()); // sphere centre
+    const shadowRadius = useRef(SHADOW_FALLBACK_RADIUS); // sphere radius
+    const shadowDir = useRef(new THREE.Vector3()); // scratch: per-light direction
+    const boundsBox = useRef(new THREE.Box3()); // scratch: union AABB
+    const boundsSphere = useRef(new THREE.Sphere()); // scratch: fitted sphere
+    const lastBoundsTime = useRef(-1); // last refresh timestamp (-1 = never)
+    const hemiRef = useRef(null);
     const ambientRef = useRef(null);
     const initialized = useRef(false);
+    const lightTargets = useRef([]);
     const targets = useMemo(() => ({
-        l1Color: new THREE.Color(),
-        l2Color: new THREE.Color(),
-        l3Color: new THREE.Color(),
+        hemiSky: new THREE.Color(),
+        hemiGround: new THREE.Color(),
         ambColor: new THREE.Color(),
     }), []);
-    useFrame((_, delta) => {
+    useFrame((state, delta) => {
         // clamp delta to avoid huge jumps on tab switch
         const dt = Math.min(delta, 0.1) * 4;
-        if (!initialized.current) {
-            if (light1Ref.current) {
-                light1Ref.current.intensity = isDark ? 0.8 : 4;
-                light1Ref.current.color.set(isDark ? '#e0e5ff' : '#ffffff');
-                if (light1Ref.current.shadow)
-                    light1Ref.current.shadow.intensity = isDark ? 0.8 : 0.4;
+        // Fit each shadow-casting light's frustum to the BUILDING geometry rather
+        // than the camera. We refresh the union bounds on an interval (cheap enough,
+        // and bounds only change while editing), fit a sphere, and size + place the
+        // ortho shadow camera so the building (plus a margin) is fully covered from
+        // the light's direction. The light DIRECTION stays exactly as the theme
+        // specifies; only its position/distance and the frustum extents change.
+        if (shadows) {
+            const now = state.clock.elapsedTime;
+            if (now - lastBoundsTime.current >= BOUNDS_REFRESH_INTERVAL) {
+                lastBoundsTime.current = now;
+                const box = boundsBox.current.makeEmpty();
+                for (const [id, obj] of sceneRegistry.nodes) {
+                    if (SHADOW_EXCLUDED_TYPES.some((t) => sceneRegistry.byType[t].has(id)))
+                        continue;
+                    box.expandByObject(obj);
+                }
+                box.getBoundingSphere(boundsSphere.current);
+                const center = boundsSphere.current.center;
+                const radius = boundsSphere.current.radius;
+                // Empty scene OR a node with a NaN position/geometry poisoning the union
+                // box: fall back to the origin with a default radius. The directional
+                // light's position is derived from `focus`, so a single non-finite mesh
+                // must NOT be allowed to make `focus`/`radius` NaN — that breaks every
+                // shadow-casting light's position and renders the whole scene black.
+                const finiteBounds = !box.isEmpty() &&
+                    Number.isFinite(center.x) &&
+                    Number.isFinite(center.y) &&
+                    Number.isFinite(center.z) &&
+                    Number.isFinite(radius);
+                if (finiteBounds) {
+                    shadowFocus.current.copy(center);
+                    shadowRadius.current = radius;
+                }
+                else {
+                    shadowFocus.current.set(0, 0, 0);
+                    shadowRadius.current = SHADOW_FALLBACK_RADIUS;
+                }
             }
-            if (light2Ref.current) {
-                light2Ref.current.intensity = isDark ? 0.2 : 0.75;
-                light2Ref.current.color.set(isDark ? '#8090ff' : '#ffffff');
+            const focus = shadowFocus.current;
+            // Ortho half-extent: the building sphere plus a proportional margin.
+            const size = shadowRadius.current * SHADOW_MARGIN_SCALE + SHADOW_MARGIN;
+            // Park the light just outside the sphere so the near plane stays positive
+            // and the whole building fits between near and far along the light axis.
+            const distance = size + SHADOW_BACKOFF;
+            const near = SHADOW_BACKOFF;
+            const far = distance + size;
+            for (let index = 0; index < theme.lights.length; index++) {
+                const config = theme.lights[index];
+                const light = lightRefs.current[index];
+                if (!(config?.castShadow && light))
+                    continue;
+                const [ox, oy, oz] = config.position;
+                const dir = shadowDir.current.set(ox, oy, oz);
+                if (dir.lengthSq() === 0)
+                    dir.set(0, 1, 0);
+                dir.normalize().multiplyScalar(distance);
+                light.position.set(focus.x + dir.x, focus.y + dir.y, focus.z + dir.z);
+                light.target.position.copy(focus);
+                light.target.updateMatrixWorld();
+                // Resize the ortho frustum to the fitted bounds. The shadow camera is
+                // the <orthographicCamera attach="shadow-camera"> below.
+                const cam = light.shadow?.camera;
+                if (cam) {
+                    cam.left = -size;
+                    cam.right = size;
+                    cam.top = size;
+                    cam.bottom = -size;
+                    cam.near = near;
+                    cam.far = far;
+                    cam.updateProjectionMatrix();
+                }
             }
-            if (light3Ref.current) {
-                light3Ref.current.intensity = isDark ? 0.3 : 1;
-                light3Ref.current.color.set(isDark ? '#a0b0ff' : '#ffffff');
+        }
+        if (!initialized.current) {
+            for (let index = 0; index < theme.lights.length; index++) {
+                const config = theme.lights[index];
+                const light = lightRefs.current[index];
+                if (!(config && light))
+                    continue;
+                light.intensity = config.intensity;
+                light.color.set(config.color);
+                if (config.castShadow && light.shadow) {
+                    light.shadow.intensity = config.intensity <= 1 ? config.intensity : MAX_SHADOW_INTENSITY;
+                }
+            }
+            if (hemiRef.current && theme.hemi) {
+                hemiRef.current.intensity = theme.hemi.intensity;
+                hemiRef.current.color.set(theme.hemi.sky);
+                hemiRef.current.groundColor.set(theme.hemi.ground);
             }
             if (ambientRef.current) {
-                ambientRef.current.intensity = isDark ? 0.15 : 0.5;
-                ambientRef.current.color.set(isDark ? '#a0b0ff' : '#ffffff');
+                ambientRef.current.intensity = theme.ambient.intensity;
+                ambientRef.current.color.set(theme.ambient.color);
             }
             initialized.current = true;
             return;
         }
-        if (light1Ref.current) {
-            light1Ref.current.intensity = THREE.MathUtils.lerp(light1Ref.current.intensity, isDark ? 0.8 : 4, dt);
-            targets.l1Color.set(isDark ? '#e0e5ff' : '#ffffff');
-            light1Ref.current.color.lerp(targets.l1Color, dt);
-            if (light1Ref.current.shadow) {
-                if (light1Ref.current.shadow.intensity !== undefined) {
-                    light1Ref.current.shadow.intensity = THREE.MathUtils.lerp(light1Ref.current.shadow.intensity, isDark ? 0.8 : 0.4, dt);
+        for (let index = 0; index < theme.lights.length; index++) {
+            const config = theme.lights[index];
+            const light = lightRefs.current[index];
+            if (!(config && light))
+                continue;
+            light.intensity = THREE.MathUtils.lerp(light.intensity, config.intensity, dt);
+            let target = lightTargets.current[index];
+            if (!target) {
+                target = new THREE.Color();
+                lightTargets.current[index] = target;
+            }
+            target.set(config.color);
+            light.color.lerp(target, dt);
+            if (config.castShadow && light.shadow) {
+                if (light.shadow.intensity !== undefined) {
+                    light.shadow.intensity = THREE.MathUtils.lerp(light.shadow.intensity, config.intensity <= 1 ? config.intensity : MAX_SHADOW_INTENSITY, dt);
                 }
             }
         }
-        if (light2Ref.current) {
-            light2Ref.current.intensity = THREE.MathUtils.lerp(light2Ref.current.intensity, isDark ? 0.2 : 0.75, dt);
-            targets.l2Color.set(isDark ? '#8090ff' : '#ffffff');
-            light2Ref.current.color.lerp(targets.l2Color, dt);
-        }
-        if (light3Ref.current) {
-            light3Ref.current.intensity = THREE.MathUtils.lerp(light3Ref.current.intensity, isDark ? 0.3 : 1, dt);
-            targets.l3Color.set(isDark ? '#a0b0ff' : '#ffffff');
-            light3Ref.current.color.lerp(targets.l3Color, dt);
+        if (hemiRef.current && theme.hemi) {
+            hemiRef.current.intensity = THREE.MathUtils.lerp(hemiRef.current.intensity, theme.hemi.intensity, dt);
+            targets.hemiSky.set(theme.hemi.sky);
+            hemiRef.current.color.lerp(targets.hemiSky, dt);
+            targets.hemiGround.set(theme.hemi.ground);
+            hemiRef.current.groundColor.lerp(targets.hemiGround, dt);
         }
         if (ambientRef.current) {
-            ambientRef.current.intensity = THREE.MathUtils.lerp(ambientRef.current.intensity, isDark ? 0.15 : 0.5, dt);
-            targets.ambColor.set(isDark ? '#a0b0ff' : '#ffffff');
+            ambientRef.current.intensity = THREE.MathUtils.lerp(ambientRef.current.intensity, theme.ambient.intensity, dt);
+            targets.ambColor.set(theme.ambient.color);
             ambientRef.current.color.lerp(targets.ambColor, dt);
         }
     });
-    return (_jsxs(_Fragment, { children: [_jsx("directionalLight", { castShadow: true, position: [10, 10, 10], ref: light1Ref, "shadow-bias": -0.002, "shadow-mapSize": [1024, 1024], "shadow-normalBias": 0.3, "shadow-radius": 3, children: _jsx("orthographicCamera", { attach: "shadow-camera", bottom: -shadowCameraSize, far: 100, left: -shadowCameraSize, near: 1, ref: shadowCamera, right: shadowCameraSize, top: shadowCameraSize }) }), _jsx("directionalLight", { position: [-10, 10, -10], ref: light2Ref }), _jsx("directionalLight", { position: [-10, 10, 10], ref: light3Ref }), _jsx("ambientLight", { ref: ambientRef })] }));
+    return (_jsxs(_Fragment, { children: [theme.lights.map((light, index) => (_jsx("directionalLight", { castShadow: Boolean(light.castShadow) && !SHADOWS_DISABLED && shadows, position: light.position, ref: (ref) => {
+                    lightRefs.current[index] = ref;
+                }, "shadow-bias": -0.002, "shadow-mapSize": [1024, 1024], "shadow-normalBias": 0.3, "shadow-radius": 1.5, children: light.castShadow && !SHADOWS_DISABLED && shadows ? (_jsx("orthographicCamera", { attach: "shadow-camera", bottom: -shadowCameraSize, far: 400, left: -shadowCameraSize, near: 1, ref: shadowCamera, right: shadowCameraSize, top: shadowCameraSize })) : null }, `${index}-${light.position.join(',')}`))), theme.hemi ? _jsx("hemisphereLight", { ref: hemiRef }) : null, _jsx("ambientLight", { ref: ambientRef })] }));
 }

package/dist/components/viewer/perf-monitor.d.ts

@@ -1,2 +1,2 @@
-export declare const PerfMonitor: () => import("react/jsx-runtime").JSX.Element;
+export declare const PerfMonitor: () => import("react").JSX.Element;
 //# sourceMappingURL=perf-monitor.d.ts.map

package/dist/components/viewer/perf-monitor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"perf-monitor.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/perf-monitor.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,WAAW,+CAoDvB,CAAA"}
+{"version":3,"file":"perf-monitor.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/perf-monitor.tsx"],"names":[],"mappings":"AAQA,eAAO,MAAM,WAAW,mCAuIvB,CAAA"}

package/dist/components/viewer/perf-monitor.js

@@ -1,15 +1,48 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useScene } from '@pascal-app/core';
 import { Html } from '@react-three/drei';
-import { useFrame } from '@react-three/fiber';
-import { useRef, useState } from 'react';
+import { useFrame, useThree } from '@react-three/fiber';
+import { useEffect, useRef, useState } from 'react';
+import { drainGpuSamples } from '../../lib/gpu-perf';
 const SAMPLE_INTERVAL = 0.5; // seconds between display updates
 export const PerfMonitor = () => {
-    const [stats, setStats] = useState({ fps: 0, frameMs: 0, drawCalls: 0, triangles: 0, dirty: 0 });
+    const [stats, setStats] = useState({
+        fps: 0,
+        frameMs: 0,
+        gpuMs: 0,
+        gpuMaxMs: 0,
+        drawCalls: 0,
+        triangles: 0,
+        dirty: 0,
+        meshes: 0,
+        lines: 0,
+        sprites: 0,
+        lights: 0,
+    });
     const frameCount = useRef(0);
     const elapsed = useRef(0);
     const lastMs = useRef(0);
-    useFrame(({ gl, clock }) => {
+    // Carry the previous tick's reading forward when no fresh samples arrive,
+    // so the display doesn't flicker to "—" on slow resolve windows.
+    const lastGpuMs = useRef(0);
+    const lastGpuMaxMs = useRef(0);
+    // Take ownership of info reset. The custom RenderPipeline.render() path
+    // we use in post-processing doesn't trigger three.js's automatic per-frame
+    // info reset, so calls/triangles accumulate across frames and the display
+    // shows lifetime totals. Disabling autoReset and explicitly resetting at
+    // each window gives true per-frame averages.
+    const gl = useThree((s) => s.gl);
+    useEffect(() => {
+        if (!gl?.info)
+            return;
+        const previousAutoReset = gl.info.autoReset;
+        gl.info.autoReset = false;
+        gl.info.reset();
+        return () => {
+            gl.info.autoReset = previousAutoReset;
+        };
+    }, [gl]);
+    useFrame(({ gl, scene, clock }) => {
         frameCount.current++;
         const now = clock.elapsedTime;
         const dt = now - elapsed.current;
@@ -17,10 +50,60 @@ export const PerfMonitor = () => {
             const fps = Math.round(frameCount.current / dt);
             const frameMs = lastMs.current;
             const info = gl.info;
-            const drawCalls = info.render?.calls ?? 0;
-            const triangles = info.render?.triangles ?? 0;
+            // calls/triangles have been accumulating since the last reset (start of
+            // window). Divide by frameCount to get a per-frame average.
+            const totalCalls = info.render?.calls ?? 0;
+            const totalTriangles = info.render?.triangles ?? 0;
+            const drawCalls = Math.round(totalCalls / Math.max(1, frameCount.current));
+            const triangles = totalTriangles / Math.max(1, frameCount.current);
+            info.reset();
             const dirty = useScene.getState().dirtyNodes.size;
-            setStats({ fps, frameMs, drawCalls, triangles, dirty });
+            // Count visible drawables by type so we can match scene contents
+            // against the renderer's draw count and find hidden contributors.
+            let meshes = 0;
+            let lines = 0;
+            let sprites = 0;
+            let lights = 0;
+            scene.traverse((obj) => {
+                if (!obj.visible)
+                    return;
+                if (obj.isMesh)
+                    meshes++;
+                else if (obj.isLine || obj.isLineSegments || obj.isLineLoop)
+                    lines++;
+                else if (obj.isSprite)
+                    sprites++;
+                else if (obj.isLight)
+                    lights++;
+            });
+            // GPU samples are pushed by post-processing.tsx after each pipeline
+            // render via device.queue.onSubmittedWorkDone(). We drain whatever
+            // has accumulated since the last tick.
+            const samples = drainGpuSamples();
+            if (samples.length > 0) {
+                let sum = 0;
+                let max = 0;
+                for (const s of samples) {
+                    sum += s;
+                    if (s > max)
+                        max = s;
+                }
+                lastGpuMs.current = sum / samples.length;
+                lastGpuMaxMs.current = max;
+            }
+            setStats({
+                fps,
+                frameMs,
+                gpuMs: lastGpuMs.current,
+                gpuMaxMs: lastGpuMaxMs.current,
+                drawCalls,
+                triangles,
+                dirty,
+                meshes,
+                lines,
+                sprites,
+                lights,
+            });
             frameCount.current = 0;
             elapsed.current = now;
         }
@@ -35,8 +118,13 @@ export const PerfMonitor = () => {
                 borderRadius: 6,
                 padding: '6px 10px',
                 whiteSpace: 'pre',
-            }, children: `FPS  ${stats.fps}
-DRAW ${stats.drawCalls}
-TRI  ${(stats.triangles / 1000).toFixed(1)}k
-DIRTY ${stats.dirty}` }) }));
+            }, children: `FPS    ${stats.fps}
+GPU    ${stats.gpuMs > 0 ? `${stats.gpuMs.toFixed(1)}ms (max ${stats.gpuMaxMs.toFixed(1)})` : '—'}
+DRAW   ${stats.drawCalls}
+TRI    ${(stats.triangles / 1000).toFixed(1)}k
+DIRTY  ${stats.dirty}
+MESH   ${stats.meshes}
+LINE   ${stats.lines}
+SPRITE ${stats.sprites}
+LIGHT  ${stats.lights}` }) }));
 };

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":"AA4BA,eAAO,MAAM,WAAW;;;;;;;;;;;;;CAavB,CAAA;AAQD,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,kBAE3B;IACD,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B,SAyTA,CAAA;AAED,eAAe,oBAAoB,CAAA"}
+{"version":3,"file":"post-processing.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/post-processing.tsx"],"names":[],"mappings":"AAgCA,eAAO,MAAM,WAAW;;;;;;;;;;;;;CAavB,CAAA;AA0CD,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,kBAE3B;IACD,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B,SAgdA,CAAA;AAED,eAAe,oBAAoB,CAAA"}