@pascal-app/viewer 0.9.1 → 0.9.2

package/dist/components/viewer/glb-walkthrough-controller.d.ts

@@ -0,0 +1,12 @@
+/**
+ * First-person walkthrough controller for the baked GLB. Reuses the editor's
+ * `BVHEcctrl` capsule character controller (gravity, jump, sprint, ground-float,
+ * mesh collision) fed a collider built from the artifact's own geometry — so the
+ * baked viewer walks the building with the same physics as the editor, without
+ * the parametric scene. Pointer-lock drives look; WASD moves; Space jumps; Shift
+ * sprints. Door/window interaction stays in `GlbScene` (its centre-ray HUD).
+ */
+export declare function GlbWalkthroughController({ url }: {
+    url: string;
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=glb-walkthrough-controller.d.ts.map

package/dist/components/viewer/glb-walkthrough-controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"glb-walkthrough-controller.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/glb-walkthrough-controller.tsx"],"names":[],"mappings":"AAgOA;;;;;;;GAOG;AACH,wBAAgB,wBAAwB,CAAC,EAAE,GAAG,EAAE,EAAE;IAAE,GAAG,EAAE,MAAM,CAAA;CAAE,sCAyLhE"}

package/dist/components/viewer/glb-walkthrough-controller.js

@@ -0,0 +1,357 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { KeyboardControls } from '@react-three/drei';
+import { useFrame, useThree } from '@react-three/fiber';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Box3, BoxGeometry, BufferGeometry, Euler, Float32BufferAttribute, Matrix4, Mesh, MeshBasicMaterial, Quaternion, Vector3, } from 'three';
+import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js';
+import { acceleratedRaycast, computeBoundsTree, disposeBoundsTree } from 'three-mesh-bvh';
+import { useGLTFKTX2 } from '../../hooks/use-gltf-ktx2';
+import { SCENE_LAYER } from '../../lib/layers';
+import useViewer from '../../store/use-viewer';
+import BVHEcctrl, {} from './bvh-ecctrl';
+import { WALKTHROUGH_FOV } from './walkthrough-controls';
+// Eye/capsule geometry mirrors the editor's first-person controller so the
+// baked walkthrough feels identical. The capsule centre sits below the eye; the
+// camera rides the capsule with a small offset and the controller floats it to
+// the ground.
+const CAMERA_EYE_OFFSET = 0.45;
+const CONTROLLER_CENTER_FROM_EYE = 0.85;
+const SPAWN_EYE_HEIGHT = 1.65;
+const LOOK_SENSITIVITY = 0.002;
+const VOID_FALL_RESPAWN_DEPTH = 12;
+// Kinds that must not block the player: room helpers, the spawn marker, the
+// ceiling/roof shell (you walk under them), and door/window leaves — excluding
+// the latter lets you pass any doorway whether the leaf is open or shut (the
+// wall already has the opening cut into its baked geometry).
+const COLLIDER_EXCLUDED_KINDS = new Set(['zone', 'spawn', 'ceiling', 'roof', 'door', 'window']);
+const colliderMaterial = new MeshBasicMaterial({ visible: false });
+const keyboardMap = [
+    { name: 'forward', keys: ['ArrowUp', 'KeyW'] },
+    { name: 'backward', keys: ['ArrowDown', 'KeyS'] },
+    { name: 'leftward', keys: ['ArrowLeft', 'KeyA'] },
+    { name: 'rightward', keys: ['ArrowRight', 'KeyD'] },
+    { name: 'jump', keys: ['Space'] },
+    { name: 'run', keys: ['ShiftLeft', 'ShiftRight'] },
+];
+const cameraOffset = new Vector3(0, CAMERA_EYE_OFFSET, 0);
+const cameraEuler = new Euler(0, 0, 0, 'YXZ');
+const spawnQuat = new Quaternion();
+const spawnEuler = new Euler(0, 0, 0, 'YXZ');
+const spawnPos = new Vector3();
+/** Effective visibility — an invisible ancestor hides the whole subtree. */
+function isEffectivelyVisible(object) {
+    let current = object;
+    while (current) {
+        if (!current.visible)
+            return false;
+        current = current.parent;
+    }
+    return true;
+}
+function kindOf(object) {
+    let current = object;
+    while (current) {
+        const kind = current.userData.kind;
+        if (kind)
+            return kind;
+        current = current.parent;
+    }
+    return undefined;
+}
+// Coerce any position attribute (quantized/interleaved) to a plain Float32 one
+// so mergeGeometries can combine geometries that don't share an array type.
+function toFloat32Position(source) {
+    const array = new Float32Array(source.count * 3);
+    for (let i = 0; i < source.count; i++) {
+        array[i * 3] = source.getX(i);
+        array[i * 3 + 1] = source.getY(i);
+        array[i * 3 + 2] = source.getZ(i);
+    }
+    return new Float32BufferAttribute(array, 3);
+}
+const FALLBACK_THICKNESS = 0.08;
+const GROUND_MIN = 2000;
+/** A thin position-only floor box whose top face sits at `topY`. */
+function boxFloorGeometry(cx, topY, cz, width, depth) {
+    const box = new BoxGeometry(width, FALLBACK_THICKNESS, depth).toNonIndexed();
+    const geometry = new BufferGeometry();
+    geometry.setAttribute('position', box.getAttribute('position').clone());
+    box.dispose();
+    geometry.applyMatrix4(new Matrix4().makeTranslation(cx, topY - FALLBACK_THICKNESS / 2, cz));
+    return geometry;
+}
+// Fallback ground so the player never falls into the void: a single large
+// ground plane at the lowest level (level 0). Upper levels rely on their own
+// baked slabs — a slab-less upper floor lets you fall down to the ground, which
+// the ground plane catches. (Mirrors the editor walkthrough's site ground.)
+function addFallbackFloors(scene, geometries) {
+    const sceneBounds = new Box3();
+    for (const geometry of geometries) {
+        geometry.computeBoundingBox();
+        if (geometry.boundingBox)
+            sceneBounds.union(geometry.boundingBox);
+    }
+    const center = new Vector3();
+    const levelPos = new Vector3();
+    let lowestLevelY = Number.POSITIVE_INFINITY;
+    scene.traverse((object) => {
+        if (object.userData.kind !== 'level')
+            return;
+        object.updateWorldMatrix(true, false);
+        object.getWorldPosition(levelPos);
+        lowestLevelY = Math.min(lowestLevelY, levelPos.y);
+    });
+    if (sceneBounds.isEmpty())
+        return;
+    sceneBounds.getCenter(center);
+    const groundY = Number.isFinite(lowestLevelY) ? lowestLevelY : sceneBounds.min.y;
+    geometries.push(boxFloorGeometry(center.x, groundY, center.z, GROUND_MIN, GROUND_MIN));
+}
+/** Merge the baked GLB's walkable/blocking meshes into one BVH collider. */
+function buildGlbColliderWorld(scene) {
+    scene.updateWorldMatrix(true, true);
+    const geometries = [];
+    scene.traverse((object) => {
+        const mesh = object;
+        if (!mesh.isMesh)
+            return;
+        // Zone fills live on a separate layer (and never collide).
+        if (!mesh.layers.isEnabled(SCENE_LAYER))
+            return;
+        if (!isEffectivelyVisible(mesh))
+            return;
+        const kind = kindOf(mesh);
+        if (kind && COLLIDER_EXCLUDED_KINDS.has(kind))
+            return;
+        const position = mesh.geometry?.getAttribute('position');
+        if (!position || position.count < 3)
+            return;
+        const geometry = new BufferGeometry();
+        const source = mesh.geometry.index ? mesh.geometry.toNonIndexed() : mesh.geometry;
+        geometry.setAttribute('position', toFloat32Position(source.getAttribute('position')));
+        if (mesh.geometry.index)
+            source.dispose();
+        geometry.applyMatrix4(mesh.matrixWorld);
+        geometries.push(geometry);
+    });
+    if (geometries.length === 0)
+        return null;
+    addFallbackFloors(scene, geometries);
+    const merged = mergeGeometries(geometries, false);
+    for (const geometry of geometries)
+        geometry.dispose();
+    if (!merged || merged.getAttribute('position') == null) {
+        merged?.dispose();
+        return null;
+    }
+    ;
+    merged.computeBoundsTree = computeBoundsTree;
+    merged.disposeBoundsTree = disposeBoundsTree;
+    merged.computeBoundsTree({ maxLeafSize: 12, strategy: 0 });
+    merged.computeBoundingBox();
+    const mesh = new Mesh(merged, colliderMaterial);
+    mesh.raycast = acceleratedRaycast;
+    mesh.visible = true;
+    mesh.userData = {
+        type: 'STATIC',
+        friction: 0.8,
+        restitution: 0.05,
+        excludeFloatHit: false,
+        excludeCollisionCheck: false,
+    };
+    mesh.updateMatrixWorld(true);
+    return {
+        mesh,
+        minY: merged.boundingBox?.min.y ?? 0,
+        dispose: () => {
+            ;
+            merged.disposeBoundsTree?.();
+            merged.dispose();
+        },
+    };
+}
+/** The baked spawn marker's eye position + yaw, if the artifact carries one. */
+function resolveGlbSpawn(scene) {
+    let spawn = null;
+    scene.traverse((object) => {
+        if (object.userData.kind === 'spawn')
+            spawn = object;
+    });
+    if (!spawn)
+        return null;
+    const node = spawn;
+    node.updateWorldMatrix(true, false);
+    node.getWorldPosition(spawnPos);
+    node.getWorldQuaternion(spawnQuat);
+    spawnEuler.setFromQuaternion(spawnQuat, 'YXZ');
+    return {
+        position: [spawnPos.x, spawnPos.y + SPAWN_EYE_HEIGHT, spawnPos.z],
+        yaw: spawnEuler.y,
+    };
+}
+/**
+ * First-person walkthrough controller for the baked GLB. Reuses the editor's
+ * `BVHEcctrl` capsule character controller (gravity, jump, sprint, ground-float,
+ * mesh collision) fed a collider built from the artifact's own geometry — so the
+ * baked viewer walks the building with the same physics as the editor, without
+ * the parametric scene. Pointer-lock drives look; WASD moves; Space jumps; Shift
+ * sprints. Door/window interaction stays in `GlbScene` (its centre-ray HUD).
+ */
+export function GlbWalkthroughController({ url }) {
+    const { camera, gl } = useThree();
+    const gltf = useGLTFKTX2(url);
+    const worldRef = useRef(null);
+    const controllerRef = useRef(null);
+    const yawRef = useRef(0);
+    const pitchRef = useRef(0);
+    const [start, setStart] = useState(null);
+    const [world, setWorld] = useState(null);
+    // Build the collider on the first frame (priority after GlbScene's level loop,
+    // which snaps the floors to their stacked world positions in walkthrough) so it
+    // matches the rendered building rather than a mid-lerp / exploded layout.
+    const builtRef = useRef(false);
+    useFrame(() => {
+        if (builtRef.current)
+            return;
+        builtRef.current = true;
+        setWorld(buildGlbColliderWorld(gltf.scene));
+    }, 6);
+    // First-person needs a perspective camera — an orthographic projection has no
+    // foreshortening and makes the walkthrough unusable. Force perspective while
+    // walking and restore the prior projection on exit.
+    useEffect(() => {
+        const prevMode = useViewer.getState().cameraMode;
+        if (prevMode === 'orthographic')
+            useViewer.getState().setCameraMode('perspective');
+        return () => {
+            if (prevMode === 'orthographic')
+                useViewer.getState().setCameraMode('orthographic');
+        };
+    }, []);
+    // Widen FOV while walking; the baked walkthrough rides the default 50° orbit
+    // camera, which feels cramped on foot. Keyed on `camera` so it re-applies if
+    // the instance swaps (e.g. the ortho→perspective switch above), restoring the
+    // prior FOV on exit.
+    useEffect(() => {
+        const cam = camera;
+        if (!cam.isPerspectiveCamera)
+            return;
+        const prevFov = cam.fov;
+        cam.fov = WALKTHROUGH_FOV;
+        cam.updateProjectionMatrix();
+        return () => {
+            cam.fov = prevFov;
+            cam.updateProjectionMatrix();
+        };
+    }, [camera]);
+    useEffect(() => {
+        worldRef.current = world;
+        if (world) {
+            const triangles = world.mesh.geometry.getAttribute('position').count / 3;
+            console.warn('[glb-walkthrough] collider built', {
+                triangles,
+                minY: world.minY,
+                hasBoundsTree: !!world.mesh.geometry.boundsTree,
+                spawn: resolveGlbSpawn(gltf.scene),
+            });
+        }
+        else {
+            console.warn('[glb-walkthrough] NO collider world (no eligible meshes)');
+        }
+        return () => {
+            world?.dispose();
+            worldRef.current = null;
+        };
+    }, [world, gltf.scene]);
+    // Resolve the spawn once the collider exists; the capsule centre sits below
+    // the eye, then the controller floats it onto the ground.
+    useEffect(() => {
+        if (!world || start)
+            return;
+        const spawn = resolveGlbSpawn(gltf.scene);
+        const eye = spawn?.position ?? [0, SPAWN_EYE_HEIGHT, 0];
+        yawRef.current = spawn?.yaw ?? 0;
+        pitchRef.current = 0;
+        setStart({ position: [eye[0], eye[1] - CONTROLLER_CENTER_FROM_EYE, eye[2]] });
+    }, [world, start, gltf.scene]);
+    // Pointer-lock look + click-to-lock fallback + Esc/unlock to exit. Once the
+    // pointer has been locked, releasing it (Esc — the browser swallows that
+    // keydown, so we can't rely on it; or any other unlock) leaves the walkthrough
+    // in a single press rather than just freeing the cursor.
+    useEffect(() => {
+        const canvas = gl.domElement;
+        let wasLocked = false;
+        const onMouseMove = (event) => {
+            if (document.pointerLockElement !== canvas)
+                return;
+            yawRef.current -= event.movementX * LOOK_SENSITIVITY;
+            pitchRef.current = Math.max(-(Math.PI / 2 - 0.05), Math.min(Math.PI / 2 - 0.05, pitchRef.current - event.movementY * LOOK_SENSITIVITY));
+        };
+        const onClick = () => {
+            if (document.pointerLockElement !== canvas)
+                canvas.requestPointerLock?.();
+        };
+        const onKeyDown = (event) => {
+            // When locked, the browser intercepts Esc to release the pointer and the
+            // pointerlockchange handler below exits; this only covers Esc while the
+            // pointer is already free (e.g. lock never engaged).
+            if (event.code === 'Escape' && document.pointerLockElement !== canvas) {
+                useViewer.getState().setWalkthroughMode(false);
+            }
+        };
+        const onPointerLockChange = () => {
+            if (document.pointerLockElement === canvas)
+                wasLocked = true;
+            else if (wasLocked)
+                useViewer.getState().setWalkthroughMode(false);
+        };
+        document.addEventListener('mousemove', onMouseMove);
+        canvas.addEventListener('click', onClick);
+        document.addEventListener('keydown', onKeyDown);
+        document.addEventListener('pointerlockchange', onPointerLockChange);
+        return () => {
+            document.removeEventListener('mousemove', onMouseMove);
+            canvas.removeEventListener('click', onClick);
+            document.removeEventListener('keydown', onKeyDown);
+            document.removeEventListener('pointerlockchange', onPointerLockChange);
+            if (document.pointerLockElement === canvas)
+                document.exitPointerLock();
+        };
+    }, [gl]);
+    // Lock the pointer the moment the walkthrough is ready, so the user doesn't
+    // have to click the canvas first. The walkthrough toggle is itself a user
+    // gesture; if the browser still rejects the request (no transient activation
+    // left), the click-to-lock fallback above covers it.
+    useEffect(() => {
+        if (!(world && start))
+            return;
+        const canvas = gl.domElement;
+        if (document.pointerLockElement === canvas)
+            return;
+        const result = canvas.requestPointerLock?.();
+        if (result && typeof result.catch === 'function')
+            result.catch(() => { });
+    }, [gl, world, start]);
+    const setControllerApi = useCallback((api) => {
+        controllerRef.current = api;
+    }, []);
+    // Drive the camera from the capsule each frame + respawn if it falls into void.
+    useFrame(() => {
+        const group = controllerRef.current?.group;
+        if (!group)
+            return;
+        if (start && world && group.position.y < world.minY - VOID_FALL_RESPAWN_DEPTH) {
+            group.position.set(start.position[0], start.position[1], start.position[2]);
+            controllerRef.current?.resetLinVel();
+        }
+        group.rotation.y = 0;
+        camera.position.copy(group.position).add(cameraOffset);
+        cameraEuler.set(pitchRef.current, yawRef.current, 0, 'YXZ');
+        camera.quaternion.setFromEuler(cameraEuler);
+        camera.updateMatrixWorld(true);
+    }, 2.5);
+    if (!(world && start))
+        return null;
+    return (_jsx(KeyboardControls, { map: keyboardMap, children: _jsx(BVHEcctrl, { acceleration: 26, airDragFactor: 0.3, colliderCapsuleArgs: [0.25, 0.8, 4, 8], colliderMeshes: [world.mesh], collisionCheckIteration: 3, collisionPushBackDamping: 0.1, collisionPushBackThreshold: 0.001, deceleration: 30, delay: 0, fallGravityFactor: 4, floatCheckType: "BOTH", floatDampingC: 36, floatHeight: 0.5, floatPullBackHeight: 0.35, floatSensorRadius: 0.15, floatSpringK: 1200, gravity: 9.81, jumpVel: 5, maxRunSpeed: 5, maxSlope: 1.2, maxWalkSpeed: 2, position: start.position, ref: setControllerApi }) }));
+}

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

@@ -1,11 +1,12 @@
 import { type AnyNodeId } from '@pascal-app/core';
-import { type ThreeToJSXElements } from '@react-three/fiber';
+import { type ThreeElement } from '@react-three/fiber';
 import * as THREE from 'three/webgpu';
 import type { ColorPreset, RenderShading } from '../../lib/materials';
 import { type RenderContext } from '../../store/use-viewer';
 import { type HoverStyles } from './post-processing';
 declare module '@react-three/fiber' {
-    interface ThreeElements extends ThreeToJSXElements<typeof THREE> {
+    interface ThreeElements {
+        lineBasicNodeMaterial: ThreeElement<typeof THREE.LineBasicNodeMaterial>;
     }
 }
 interface ViewerProps {
@@ -15,6 +16,7 @@ interface ViewerProps {
     perf?: boolean;
     useBvh?: boolean;
     renderContext?: RenderContext;
+    transparent?: boolean;
     defaultRender?: {
         shading?: RenderShading;
         textures?: boolean;
@@ -37,6 +39,21 @@ interface ViewerProps {
      */
     sceneReadyKey?: string | number | null;
     onSceneReadyChange?: (ready: boolean) => void;
+    /**
+     * Wall-clock give-up cap for scene readiness, replacing the default
+     * frame-count cap. Set it on hosts whose frame cadence is decoupled from
+     * real time (the headless bake page's timer-driven loop runs the default
+     * 180-frame cap in ~3.6s — shorter than a cold item-model download).
+     */
+    sceneReadyMaxWaitMs?: number;
+    /**
+     * Skip the TSL post-processing pipeline (SSGI/denoise/ink/outline) and render
+     * the scene directly. For headless/capture surfaces (the bake page) where
+     * frame quality is irrelevant: on a software-rasterised worker the pipeline
+     * consumes the whole CPU budget and bakes time out. Equivalent to the
+     * `?disable=postFx` diagnostic URL flag, but host-controlled.
+     */
+    disablePostFx?: boolean;
 }
 /** Imperative handle exposed via `ref` on `<Viewer>`. */
 export type ViewerHandle = {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,SAAS,EAKf,MAAM,kBAAkB,CAAA;AACzB,OAAO,EAAkB,KAAK,kBAAkB,EAAsB,MAAM,oBAAoB,CAAA;AAEhG,OAAO,KAAK,KAAK,MAAM,cAAc,CAAA;AAIrC,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAErE,OAAkB,EAAE,KAAK,aAAa,EAAE,MAAM,wBAAwB,CAAA;AAQtE,OAAuB,EAAwB,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAM1F,OAAO,QAAQ,oBAAoB,CAAC;IAClC,UAAU,aAAc,SAAQ,kBAAkB,CAAC,OAAO,KAAK,CAAC;KAAG;CACpE;AAuOD,UAAU,WAAW;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,gBAAgB,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IACvC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,aAAa,CAAC,EAAE,aAAa,CAAA;IAC7B,aAAa,CAAC,EAAE;QACd,OAAO,CAAC,EAAE,aAAa,CAAA;QACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;QAClB,WAAW,CAAC,EAAE,WAAW,CAAA;KAC1B,CAAA;IACD;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,CAAA;IAC5B;;;;;OAKG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAA;IACtC,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;CAC9C;AAED,yDAAyD;AACzD,MAAM,MAAM,YAAY,GAAG;IACzB;;;;;OAKG;IACH,WAAW,CAAC,GAAG,EAAE,SAAS,EAAE,GAAG,IAAI,GAAG,IAAI,CAAA;CAC3C,CAAA;AAED,QAAA,MAAM,MAAM,sGAmKV,CAAA;AAkBF,eAAe,MAAM,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,SAAS,EAKf,MAAM,kBAAkB,CAAA;AACzB,OAAO,EAAkB,KAAK,YAAY,EAAsB,MAAM,oBAAoB,CAAA;AAS1F,OAAO,KAAK,KAAK,MAAM,cAAc,CAAA;AAKrC,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAErE,OAAkB,EAAE,KAAK,aAAa,EAAE,MAAM,wBAAwB,CAAA;AAQtE,OAAuB,EAAwB,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAM1F,OAAO,QAAQ,oBAAoB,CAAC;IAOlC,UAAU,aAAa;QACrB,qBAAqB,EAAE,YAAY,CAAC,OAAO,KAAK,CAAC,qBAAqB,CAAC,CAAA;KACxE;CACF;AAuSD,UAAU,WAAW;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,gBAAgB,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IACvC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,aAAa,CAAC,EAAE,aAAa,CAAA;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,aAAa,CAAC,EAAE;QACd,OAAO,CAAC,EAAE,aAAa,CAAA;QACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;QAClB,WAAW,CAAC,EAAE,WAAW,CAAA;KAC1B,CAAA;IACD;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,CAAA;IAC5B;;;;;OAKG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAA;IACtC,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IAC7C;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AAED,yDAAyD;AACzD,MAAM,MAAM,YAAY,GAAG;IACzB;;;;;OAKG;IACH,WAAW,CAAC,GAAG,EAAE,SAAS,EAAE,GAAG,IAAI,GAAG,IAAI,CAAA;CAC3C,CAAA;AAED,QAAA,MAAM,MAAM,sGAoNV,CAAA;AAkBF,eAAe,MAAM,CAAA"}

package/dist/components/viewer/index.js

@@ -2,11 +2,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { nodeRegistry, StairOpeningSystem, sceneRegistry, useScene, } from '@pascal-app/core';
 import { Canvas, extend, useFrame, useThree } from '@react-three/fiber';
-import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, } from 'react';
 import * as THREE from 'three/webgpu';
 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';
@@ -51,6 +52,27 @@ const DIRTY_BUILD_KINDS = new Set([
     '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.
  *
@@ -83,6 +105,10 @@ function installEmptyDrawGuard(renderer) {
 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) {
@@ -123,11 +149,23 @@ function ToneMappingExposure() {
     return null;
 }
 function hasPendingSceneBuildWork() {
-    const { dirtyNodes, nodes } = useScene.getState();
+    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;
@@ -141,10 +179,12 @@ function hasCommittedSceneRoot() {
         return Object.keys(nodes).length === 0;
     return rootNodeIds.some((id) => sceneRegistry.nodes.has(id));
 }
-function SceneReadyTracker({ onSceneReadyChange, sceneReadyKey, }) {
+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;
@@ -154,26 +194,39 @@ function SceneReadyTracker({ onSceneReadyChange, sceneReadyKey, }) {
         readyRef.current = false;
         settledFramesRef.current = 0;
         waitedFramesRef.current = 0;
+        waitStartRef.current = null;
         onSceneReadyChangeRef.current?.(false);
-    }, [sceneReadyKey]);
+        invalidate();
+    }, [invalidate, sceneReadyKey]);
     useFrame(() => {
         if (!(onSceneReadyChangeRef.current && !readyRef.current))
             return;
         waitedFramesRef.current += 1;
-        if (waitedFramesRef.current < SCENE_READY_MAX_WAIT_FRAMES &&
-            (!hasCommittedSceneRoot() || hasPendingSceneBuildWork())) {
+        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)
+        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', defaultRender, isolate, sceneReadyKey, onSceneReadyChange, }, ref) {
+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),
     }), []);
@@ -191,7 +244,34 @@ const Viewer = forwardRef(function Viewer({ children, hoverStyles = DEFAULT_HOVE
                 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;
@@ -228,14 +308,25 @@ const Viewer = forwardRef(function Viewer({ children, hoverStyles = DEFAULT_HOVE
     // 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;
-    return (_jsxs(Canvas, { camera: { position: [50, 50, 50], fov: 50 }, className: `transition-colors duration-700 ${isDark ? 'bg-[#1f2433]' : 'bg-[#fafafa]'}`, dpr: [1, maxDpr], frameloop: "never", gl: ((props) => {
+    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;
             const promise = (async () => {
                 try {
-                    const renderer = new THREE.WebGPURenderer(props);
+                    const renderer = new THREE.WebGPURenderer({ ...props, alpha: true });
                     renderer.toneMapping = THREE.ACESFilmicToneMapping;
                     renderer.toneMappingExposure = getSceneTheme(useViewer.getState().sceneTheme).toneMappingExposure;
                     await renderer.init();
@@ -249,6 +340,7 @@ const Viewer = forwardRef(function Viewer({ children, hoverStyles = DEFAULT_HOVE
                     if (canvas)
                         WEBGPU_RENDERER_CACHE.delete(canvas);
                     console.error('[viewer] WebGPURenderer init failed', err);
+                    setRendererInitFailed(true);
                     throw err;
                 }
             })();
@@ -259,8 +351,8 @@ const Viewer = forwardRef(function Viewer({ children, hoverStyles = DEFAULT_HOVE
             debounce: 100,
         }, shadows: {
             type: THREE.PCFShadowMap,
-            enabled: true,
-        }, children: [_jsx(FrameLimiter, { fps: 50 }), _jsx(ViewerCamera, {}), _jsx(GPUDeviceWatcher, {}), _jsx(ToneMappingExposure, {}), _jsx(SceneReadyTracker, { onSceneReadyChange: onSceneReadyChange, sceneReadyKey: sceneReadyKey }), _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, { hoverStyles: hoverStyles }), selectionManager === 'default' && _jsx(SelectionManager, {}), (perf || PERF_OVERLAY_ENABLED) && _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 }) => {

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":"AAqDA,wBAAgB,MAAM,gCA2NrB"}
+{"version":3,"file":"lights.d.ts","sourceRoot":"","sources":["../../../src/components/viewer/lights.tsx"],"names":[],"mappings":"AA4EA,wBAAgB,MAAM,gCAgPrB"}