@pascal-app/viewer 0.8.0 → 0.9.2

package/dist/components/viewer/index.js

@@ -1,56 +1,27 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Bvh } from '@react-three/drei';
+import { nodeRegistry, StairOpeningSystem, sceneRegistry, useScene, } from '@pascal-app/core';
 import { Canvas, extend, useFrame, useThree } from '@react-three/fiber';
-import { useEffect, useMemo, useRef } from 'react';
+import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, } from 'react';
 import * as THREE from 'three/webgpu';
-import useViewer from '../../store/use-viewer';
-import { CeilingSystem } from '../../systems/ceiling/ceiling-system';
-import { DoorAnimationSystem } from '../../systems/door/door-animation-system';
-import { DoorSystem } from '../../systems/door/door-system';
-import { FenceSystem } from '../../systems/fence/fence-system';
-import { GuideSystem } from '../../systems/guide/guide-system';
-import { ItemSystem } from '../../systems/item/item-system';
-import { ItemLightSystem } from '../../systems/item-light/item-light-system';
-import { LevelSystem } from '../../systems/level/level-system';
-import { RoofSystem } from '../../systems/roof/roof-system';
-import { ScanSystem } from '../../systems/scan/scan-system';
-import { SlabSystem } from '../../systems/slab/slab-system';
-import { StairSystem } from '../../systems/stair/stair-system';
-import { WallCutout } from '../../systems/wall/wall-cutout';
-import { WallSystem } from '../../systems/wall/wall-system';
-import { WindowAnimationSystem } from '../../systems/window/window-animation-system';
-import { WindowSystem } from '../../systems/window/window-system';
-import { ZoneSystem } from '../../systems/zone/zone-system';
+import { hasDrawableGeometry } from '../../lib/drawable-geometry';
+import { PERF_OVERLAY_ENABLED, pushGpuSample } from '../../lib/gpu-perf';
+import { applyIsolation, clearIsolation } from '../../lib/isolation';
+import { ensureKtx2Support } from '../../lib/ktx2-loader';
+import { getSceneTheme } from '../../lib/scene-themes';
+import useViewer, {} from '../../store/use-viewer';
+import { FloorElevationSystem } from '../../systems/floor-elevation/floor-elevation-system';
+import { GeometrySystem } from '../../systems/geometry/geometry-system';
 import { ErrorBoundary } from '../error-boundary';
 import { SceneRenderer } from '../renderers/scene-renderer';
 import FrameLimiter from './frame-limiter';
 import { Lights } from './lights';
 import { PerfMonitor } from './perf-monitor';
 import PostProcessing, { DEFAULT_HOVER_STYLES } from './post-processing';
+import { RegisteredSystems } from './registered-systems';
+import { SceneBvh } from './scene-bvh';
 import { SelectionManager } from './selection-manager';
 import { ViewerCamera } from './viewer-camera';
-function AnimatedBackground({ isDark }) {
-    const targetColor = useMemo(() => new THREE.Color(), []);
-    const initialized = useRef(false);
-    useFrame(({ scene }, delta) => {
-        const dt = Math.min(delta, 0.1) * 4;
-        const targetHex = isDark ? '#1f2433' : '#ffffff';
-        if (!(scene.background && scene.background instanceof THREE.Color)) {
-            scene.background = new THREE.Color(targetHex);
-            initialized.current = true;
-            return;
-        }
-        if (!initialized.current) {
-            scene.background.set(targetHex);
-            initialized.current = true;
-            return;
-        }
-        targetColor.set(targetHex);
-        scene.background.lerp(targetColor, dt);
-    });
-    return null;
-}
 extend(THREE);
 // R3F's <Canvas> useLayoutEffect has no deps, so any re-render (theme switch,
 // parent re-render, StrictMode double-mount) re-invokes `configure()`. With a
@@ -67,9 +38,77 @@ extend(THREE);
 // concurrent configure() calls await the same init instead of creating two
 // renderers in parallel and only caching the second.
 const WEBGPU_RENDERER_CACHE = new WeakMap();
+const SCENE_READY_SETTLED_FRAMES = 2;
+const SCENE_READY_MAX_WAIT_FRAMES = 180;
+const DIRTY_BUILD_KINDS = new Set([
+    'ceiling',
+    'door',
+    'item',
+    'roof',
+    'roof-segment',
+    'stair',
+    'stair-segment',
+    'wall',
+    'window',
+]);
+const warnedEmptyDraw = process.env.NODE_ENV === 'production' ? null : new WeakSet();
+function canCreateWebGLContext() {
+    if (typeof document === 'undefined')
+        return false;
+    const canvas = document.createElement('canvas');
+    try {
+        return Boolean(canvas.getContext('webgl2') ?? canvas.getContext('webgl'));
+    }
+    catch {
+        return false;
+    }
+}
+function canMountGpuViewer() {
+    if (typeof window === 'undefined')
+        return false;
+    if (!('gpu' in navigator) && !canCreateWebGLContext())
+        return false;
+    return true;
+}
+function UnsupportedGpuViewerFallback() {
+    return (_jsx("div", { className: "flex h-full min-h-64 w-full items-center justify-center bg-[#fafafa] p-6 text-center text-neutral-900", children: _jsxs("div", { className: "max-w-md rounded-2xl border border-neutral-200 bg-white p-6 shadow-sm", children: [_jsx("h2", { className: "font-semibold text-lg", children: "3D viewer unavailable" }), _jsx("p", { className: "mt-2 text-neutral-600 text-sm", children: "This browser or environment does not expose WebGPU or WebGL, so Pascal cannot render the 3D scene here. Try opening the editor in a browser with hardware acceleration enabled." })] }) }));
+}
+/**
+ * Renderer-level safety net against the empty-vertex-buffer crash.
+ *
+ * Wraps the per-object render function so any draw whose geometry has a count-0
+ * `position` attribute is skipped instead of submitted. One such draw leaves
+ * WebGPU vertex buffer slot 0 unbound, which the validator rejects and which
+ * poisons the *whole* command encoder — so a single stray empty mesh (e.g. a
+ * transient placeholder, or a derived edge/outline geometry) flickers the entire
+ * canvas, not just itself. See `hasDrawableGeometry`.
+ *
+ * The custom render-object function is the documented three.js hook for this
+ * (`Renderer.setRenderObjectFunction`); it must call `renderObject()` for
+ * everything it keeps. `MergedOutlineNode` captures and restores this function
+ * around its passes, so the guard survives outline rendering (its own passes
+ * carry the same check inline).
+ */
+function installEmptyDrawGuard(renderer) {
+    renderer.setRenderObjectFunction((object, scene, camera, geometry, material, group, lightsNode, clippingContext, passId) => {
+        if (!hasDrawableGeometry(geometry)) {
+            if (warnedEmptyDraw && !warnedEmptyDraw.has(geometry ?? object)) {
+                warnedEmptyDraw.add(geometry ?? object);
+                console.warn('[viewer] skipped a draw with an empty position buffer (would poison the WebGPU command encoder)', { name: object?.name, type: object?.type, material: material?.name });
+            }
+            return;
+        }
+        ;
+        renderer.renderObject(object, scene, camera, geometry, material, group, lightsNode, clippingContext, passId);
+    });
+}
 function GPUDeviceWatcher() {
     const gl = useThree((s) => s.gl);
     useEffect(() => {
+        // Detect KTX2 transcode support as soon as the renderer exists, so catalog
+        // `.ktx2` finish textures load even in scenes with no GLB items (whose
+        // loader would otherwise be the only thing to call this).
+        ensureKtx2Support(gl);
         const backend = gl.backend;
         const device = backend?.device;
         if (!device) {
@@ -84,46 +123,214 @@ function GPUDeviceWatcher() {
             features: Array.from(device.features ?? []),
         });
         device.lost.then((info) => {
-            console.error(`[viewer] WebGPU device lost: reason="${info.reason}", message="${info.message}". ` +
+            console.error(`[viewer] WebGPU device lost: reason="${info.reason ?? 'unknown'}", message="${info.message ?? ''}". ` +
                 'The page must be reloaded to recover the GPU context.');
         });
         // Uncaptured errors are normally silent (only console-warned by Chrome at
         // best). Pipe them to console.error so silent mobile crashes show up.
         const onUncapturedError = (event) => {
-            console.error('[viewer] WebGPU uncaptured error:', event.error.message, event.error);
+            console.error('[viewer] WebGPU uncaptured error:', event?.error?.message, event?.error);
         };
-        device.addEventListener('uncapturederror', onUncapturedError);
+        device.addEventListener?.('uncapturederror', onUncapturedError);
         return () => {
-            device.removeEventListener('uncapturederror', onUncapturedError);
+            device.removeEventListener?.('uncapturederror', onUncapturedError);
         };
     }, [gl]);
     return null;
 }
-const Viewer = ({ children, hoverStyles = DEFAULT_HOVER_STYLES, selectionManager = 'default', perf = false, useBvh = true, }) => {
-    const theme = useViewer((state) => state.theme);
-    return (_jsxs(Canvas, { camera: { position: [50, 50, 50], fov: 50 }, className: `transition-colors duration-700 ${theme === 'dark' ? 'bg-[#1f2433]' : 'bg-[#fafafa]'}`, dpr: [1, 1.5], frameloop: "never", gl: ((props) => {
+function ToneMappingExposure() {
+    const sceneTheme = useViewer((state) => state.sceneTheme);
+    const gl = useThree((state) => state.gl);
+    const invalidate = useThree((state) => state.invalidate);
+    useEffect(() => {
+        gl.toneMappingExposure = getSceneTheme(sceneTheme).toneMappingExposure;
+        invalidate();
+    }, [gl, invalidate, sceneTheme]);
+    return null;
+}
+function hasPendingSceneBuildWork() {
+    const { dirtyNodes, nodes, rootNodeIds } = useScene.getState();
+    for (const id of dirtyNodes) {
+        const node = nodes[id];
+        if (!node)
+            continue;
+        // Unreachable nodes (orphaned by a broken detach: the parent doesn't list
+        // them in `children`, or no parent and not a root) never render — every
+        // renderer enumerates the parent's `children` array — so no system will
+        // ever build them or clear their mark. They must not hold scene-ready
+        // hostage (observed in prod scene data: two dangling windows kept every
+        // bake of that scene waiting out the full readiness cap).
+        const parent = node.parentId ? nodes[node.parentId] : undefined;
+        const reachable = parent
+            ? parent.children?.includes(id) === true
+            : rootNodeIds.includes(id);
+        if (!reachable)
+            continue;
+        const def = nodeRegistry.get(node.type);
+        if (def?.geometry || def?.capabilities?.floorPlaced || DIRTY_BUILD_KINDS.has(node.type)) {
+            return true;
+        }
+    }
+    return false;
+}
+function hasCommittedSceneRoot() {
+    const { nodes, rootNodeIds } = useScene.getState();
+    if (rootNodeIds.length === 0)
+        return Object.keys(nodes).length === 0;
+    return rootNodeIds.some((id) => sceneRegistry.nodes.has(id));
+}
+function SceneReadyTracker({ onSceneReadyChange, sceneReadyKey, sceneReadyMaxWaitMs, }) {
+    const invalidate = useThree((state) => state.invalidate);
+    const readyRef = useRef(false);
+    const settledFramesRef = useRef(0);
+    const waitedFramesRef = useRef(0);
+    const waitStartRef = useRef(null);
+    const onSceneReadyChangeRef = useRef(onSceneReadyChange);
+    useEffect(() => {
+        onSceneReadyChangeRef.current = onSceneReadyChange;
+    }, [onSceneReadyChange]);
+    useEffect(() => {
+        void sceneReadyKey;
+        readyRef.current = false;
+        settledFramesRef.current = 0;
+        waitedFramesRef.current = 0;
+        waitStartRef.current = null;
+        onSceneReadyChangeRef.current?.(false);
+        invalidate();
+    }, [invalidate, sceneReadyKey]);
+    useFrame(() => {
+        if (!(onSceneReadyChangeRef.current && !readyRef.current))
+            return;
+        waitedFramesRef.current += 1;
+        waitStartRef.current ??= performance.now();
+        // Give-up cap so a permanently-dirty node can't block readiness forever.
+        // The frame-count default assumes display-rate frames; a host whose frame
+        // cadence is decoupled from wall time (the headless bake page's timer-driven
+        // loop runs 180 frames in 3.6s — faster than a cold item download) passes
+        // `sceneReadyMaxWaitMs` to make the cap wall-clock instead.
+        const capReached = sceneReadyMaxWaitMs
+            ? performance.now() - waitStartRef.current >= sceneReadyMaxWaitMs
+            : waitedFramesRef.current >= SCENE_READY_MAX_WAIT_FRAMES;
+        if (!capReached && (!hasCommittedSceneRoot() || hasPendingSceneBuildWork())) {
+            settledFramesRef.current = 0;
+            invalidate();
+            return;
+        }
+        settledFramesRef.current += 1;
+        if (settledFramesRef.current < SCENE_READY_SETTLED_FRAMES) {
+            invalidate();
+            return;
+        }
+        readyRef.current = true;
+        onSceneReadyChangeRef.current(true);
+    }, 10);
+    return null;
+}
+const Viewer = forwardRef(function Viewer({ children, hoverStyles = DEFAULT_HOVER_STYLES, selectionManager = 'default', perf = false, useBvh = true, renderContext = 'editor', transparent, defaultRender, isolate, sceneReadyKey, onSceneReadyChange, sceneReadyMaxWaitMs, disablePostFx = false, }, ref) {
+    useImperativeHandle(ref, () => ({
+        setIsolated: (ids) => applyIsolation(ids),
+    }), []);
+    // Track the most recently-applied isolation so the cleanup path can
+    // restore visibility even if the prop is removed while the component is
+    // still mounted. `clearIsolation()` is a no-op when nothing was applied.
+    const isolateRef = useRef(undefined);
+    useEffect(() => {
+        isolateRef.current = isolate ?? null;
+        applyIsolation(isolate ?? null);
+        return () => {
+            // Only clear if this effect was the one that applied — protects
+            // against a parent unmount racing with a setIsolated() consumer.
+            if (isolateRef.current === isolate)
+                clearIsolation();
+        };
+    }, [isolate]);
+    const [rendererInitFailed, setRendererInitFailed] = useState(false);
+    // Capability detection runs after mount. We start optimistic (true) so the
+    // server-rendered markup and the first client render agree (no hydration
+    // mismatch); the effect flips it to false only on environments that expose
+    // neither WebGPU nor WebGL.
+    const [canMountViewer, setCanMountViewer] = useState(true);
+    useEffect(() => {
+        if (!canMountGpuViewer())
+            setCanMountViewer(false);
+    }, []);
+    const isDark = useViewer((state) => getSceneTheme(state.sceneTheme).appearance === 'dark');
+    const transparentBackground = useViewer((state) => state.transparentBackground);
+    // The shadows toggle drives `renderer.shadowMap.enabled` (via the Canvas
+    // `shadows` prop) rather than the lights' `castShadow`: toggling castShadow
+    // off disposes the shadow map's GPU texture but three r184's WebGPU node
+    // cache keeps the shadows-on builder state that references it, so toggling
+    // back on reuses destroyed resources and every frame submit fails with a
+    // GPUValidationError. Disabling at the renderer level rebuilds materials
+    // without disposing anything, so the round-trip is safe.
+    const shadowsEnabled = useViewer((state) => state.shadows);
+    useLayoutEffect(() => {
+        if (transparent === undefined)
+            return;
+        useViewer.getState().setTransparentBackground(transparent);
+        return () => {
+            useViewer.getState().setTransparentBackground(false);
+        };
+    }, [transparent]);
+    const defaultShading = defaultRender?.shading;
+    const defaultTextures = defaultRender?.textures;
+    const defaultColorPreset = defaultRender?.colorPreset;
+    const hasDefaultRender = defaultRender != null;
+    useEffect(() => {
+        const ctx = renderContext;
+        useViewer.getState().setRenderContext(ctx);
+        const { shading, shadingByContext, setShading } = useViewer.getState();
+        setShading(shadingByContext[ctx] ?? defaultShading ?? shading);
+        if (!hasDefaultRender || typeof window === 'undefined')
+            return;
+        let persistedState = {};
+        const rawPreferences = window.localStorage.getItem('viewer-preferences');
+        if (rawPreferences) {
+            try {
+                const parsed = JSON.parse(rawPreferences);
+                if (parsed &&
+                    typeof parsed === 'object' &&
+                    parsed.state &&
+                    typeof parsed.state === 'object') {
+                    persistedState = parsed.state;
+                }
+            }
+            catch { }
+        }
+        if (defaultTextures !== undefined && !('textures' in persistedState)) {
+            useViewer.getState().setTextures(defaultTextures);
+        }
+        if (defaultColorPreset && !('colorPreset' in persistedState)) {
+            useViewer.getState().setColorPreset(defaultColorPreset);
+        }
+    }, [defaultColorPreset, defaultShading, defaultTextures, hasDefaultRender, renderContext]);
+    // Coarse-pointer devices (phones/tablets) get a tighter DPR ceiling to keep
+    // fragment-shader cost down — saves another ~30% over 1.5x on high-DPI mobile.
+    // Desktops (fine pointer) keep the original 1.5 cap.
+    const maxDpr = typeof window !== 'undefined' && window.matchMedia('(pointer: coarse)').matches ? 1.25 : 1.5;
+    const showGpuFallback = !canMountViewer || rendererInitFailed;
+    // When we can't mount the GPU canvas, the SceneReadyTracker never mounts and
+    // the host editor would otherwise wait on its scene-readiness timeout. Signal
+    // readiness explicitly so the host can drop its loader immediately.
+    useEffect(() => {
+        if (showGpuFallback)
+            onSceneReadyChange?.(true);
+    }, [showGpuFallback, onSceneReadyChange]);
+    if (showGpuFallback) {
+        return _jsx(UnsupportedGpuViewerFallback, {});
+    }
+    return (_jsxs(Canvas, { camera: { position: [50, 50, 50], fov: 50 }, className: `transition-colors duration-700 ${transparentBackground ? 'bg-transparent' : isDark ? 'bg-[#1f2433]' : 'bg-[#fafafa]'}`, dpr: [1, maxDpr], frameloop: "never", gl: ((props) => {
             const canvas = props.canvas;
             const cached = canvas ? WEBGPU_RENDERER_CACHE.get(canvas) : undefined;
             if (cached)
                 return cached;
-            // Surface the env we're about to ask WebGPU for — catches "no
-            // navigator.gpu" / "adapter request failed" silently failing in
-            // mobile WebViews where WebGPU is gated behind flags.
-            const hasGpu = typeof navigator !== 'undefined' && 'gpu' in navigator;
-            console.log('[viewer] Creating WebGPURenderer', {
-                hasNavigatorGPU: hasGpu,
-                ua: typeof navigator !== 'undefined' ? navigator.userAgent : 'n/a',
-            });
             const promise = (async () => {
                 try {
-                    const renderer = new THREE.WebGPURenderer(props);
+                    const renderer = new THREE.WebGPURenderer({ ...props, alpha: true });
                     renderer.toneMapping = THREE.ACESFilmicToneMapping;
-                    renderer.toneMappingExposure = 0.9;
+                    renderer.toneMappingExposure = getSceneTheme(useViewer.getState().sceneTheme).toneMappingExposure;
                     await renderer.init();
-                    console.log('[viewer] WebGPURenderer ready', {
-                        backend: renderer.backend?.constructor?.name,
-                        isWebGPU: renderer.isWebGPURenderer === true,
-                    });
+                    installEmptyDrawGuard(renderer);
                     return renderer;
                 }
                 catch (err) {
@@ -133,6 +340,7 @@ const Viewer = ({ children, hoverStyles = DEFAULT_HOVER_STYLES, selectionManager
                     if (canvas)
                         WEBGPU_RENDERER_CACHE.delete(canvas);
                     console.error('[viewer] WebGPURenderer init failed', err);
+                    setRendererInitFailed(true);
                     throw err;
                 }
             })();
@@ -143,12 +351,19 @@ const Viewer = ({ children, hoverStyles = DEFAULT_HOVER_STYLES, selectionManager
             debounce: 100,
         }, shadows: {
             type: THREE.PCFShadowMap,
-            enabled: true,
-        }, children: [_jsx(FrameLimiter, { fps: 50 }), _jsx(ViewerCamera, {}), _jsx(GPUDeviceWatcher, {}), _jsxs(ErrorBoundary, { fallback: null, scope: "viewer-scene", children: [_jsx(Lights, {}), useBvh ? (_jsx(Bvh, { children: _jsx(SceneRenderer, {}) })) : (_jsx(SceneRenderer, {})), _jsx(LevelSystem, {}), _jsx(GuideSystem, {}), _jsx(ScanSystem, {}), _jsx(WallCutout, {}), _jsx(CeilingSystem, {}), _jsx(DoorAnimationSystem, {}), _jsx(WindowAnimationSystem, {}), _jsx(DoorSystem, {}), _jsx(FenceSystem, {}), _jsx(ItemSystem, {}), _jsx(RoofSystem, {}), _jsx(SlabSystem, {}), _jsx(StairSystem, {}), _jsx(WallSystem, {}), _jsx(WindowSystem, {}), _jsx(ZoneSystem, {}), _jsx(PostProcessing, { hoverStyles: hoverStyles }), _jsx(ItemLightSystem, {}), selectionManager === 'default' && _jsx(SelectionManager, {}), perf && _jsx(PerfMonitor, {}), children] })] }));
-};
+            enabled: shadowsEnabled,
+        }, children: [_jsx(FrameLimiter, { fps: 50 }), _jsx(ViewerCamera, {}), _jsx(GPUDeviceWatcher, {}), _jsx(ToneMappingExposure, {}), _jsx(SceneReadyTracker, { onSceneReadyChange: onSceneReadyChange, sceneReadyKey: sceneReadyKey, sceneReadyMaxWaitMs: sceneReadyMaxWaitMs }), _jsxs(ErrorBoundary, { fallback: null, scope: "viewer-scene", children: [_jsx(Lights, {}), useBvh ? (_jsx(SceneBvh, { children: _jsx(SceneRenderer, {}) })) : (_jsx(SceneRenderer, {})), _jsx(FloorElevationSystem, {}), _jsx(GeometrySystem, {}), _jsx(StairOpeningSystem, {}), _jsx(RegisteredSystems, {}), _jsx(PostProcessing, { disablePostFx: disablePostFx, hoverStyles: hoverStyles }), selectionManager === 'default' && _jsx(SelectionManager, {}), (perf || PERF_OVERLAY_ENABLED) && _jsx(PerfMonitor, {}), children] })] }));
+});
 const DebugRenderer = () => {
     useFrame(({ gl, scene, camera }) => {
+        const submittedAt = PERF_OVERLAY_ENABLED ? performance.now() : 0;
         gl.render(scene, camera);
+        if (PERF_OVERLAY_ENABLED) {
+            const queue = gl.backend?.device?.queue;
+            queue?.onSubmittedWorkDone?.().then(() => {
+                pushGpuSample(performance.now() - submittedAt);
+            });
+        }
     });
     return null;
 };

package/dist/components/viewer/lights.d.ts

@@ -1,2 +1,2 @@
-export declare function Lights(): import("react/jsx-runtime").JSX.Element;
+export declare function Lights(): import("react").JSX.Element;
 //# sourceMappingURL=lights.d.ts.map

package/dist/components/viewer/lights.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lights.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/lights.tsx"],"names":[],"mappings":"AAMA,wBAAgB,MAAM,4CAoIrB"}
+{"version":3,"file":"lights.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/lights.tsx"],"names":[],"mappings":"AA4EA,wBAAgB,MAAM,gCAgPrB"}