@treasuryspatial/viewer-kit 0.2.45 → 0.2.50

package/dist/systems/environmentSystem.js

@@ -8,10 +8,9 @@ export class EnvironmentSystem {
     currentObjects = [];
     currentBackground = null;
     currentEnvironment = null;
-    gradientSky = null;
-    gradientBaseRadius = 300;
     objectUrls = [];
     loadToken = 0;
+    appliedSkySignature = null;
     state = { mode: "none", backgroundEnabled: false, lightingEnabled: false };
     fallbackGradient = {
         topColor: "#f8fafc",
@@ -28,21 +27,16 @@ export class EnvironmentSystem {
     getState() {
         return { ...this.state };
     }
-    update(camera) {
-        if (!this.gradientSky || !camera)
-            return;
-        const cam = camera;
-        if (!cam || typeof cam.near !== "number")
-            return;
-        const targetRadius = Math.max(this.gradientBaseRadius, cam.near * 4);
-        const scale = targetRadius / this.gradientBaseRadius;
-        if (Number.isFinite(scale) && scale > 0) {
-            this.gradientSky.scale.setScalar(scale);
-        }
-        this.gradientSky.position.copy(cam.position);
-    }
+    update(_camera) { }
     async apply(preset) {
         const sky = preset.sky;
+        // The runtime preset is rebuilt on every lighting/debug/postfx tweak, but the env
+        // texture only depends on `sky`. Skip the dispose+reload cycle when sky is unchanged
+        // so HDR/cube envs survive unrelated preset edits instead of flickering on each one.
+        const nextSignature = EnvironmentSystem.skySignature(sky);
+        if (nextSignature === this.appliedSkySignature)
+            return;
+        this.appliedSkySignature = nextSignature;
         this.disposeCurrent();
         if (!sky || sky.mode === "none") {
             this.scene.background = null;
@@ -61,6 +55,19 @@ export class EnvironmentSystem {
             }
             catch (error) {
                 console.warn("[viewer-kit] HDR sky failed, falling back to gradient.", error);
+                this.appliedSkySignature = null;
+                this.applyGradientSky(this.fallbackGradient);
+                this.state = { mode: "gradient", backgroundEnabled: true, lightingEnabled: false };
+            }
+            return;
+        }
+        if (sky.mode === "image") {
+            try {
+                await this.applyImageSky(sky.image);
+            }
+            catch (error) {
+                console.warn("[viewer-kit] LDR image sky failed, falling back to gradient.", error);
+                this.appliedSkySignature = null;
                 this.applyGradientSky(this.fallbackGradient);
                 this.state = { mode: "gradient", backgroundEnabled: true, lightingEnabled: false };
             }
@@ -72,18 +79,30 @@ export class EnvironmentSystem {
             }
             catch (error) {
                 console.warn("[viewer-kit] Cube sky failed, falling back to gradient.", error);
+                this.appliedSkySignature = null;
                 this.applyGradientSky(this.fallbackGradient);
                 this.state = { mode: "gradient", backgroundEnabled: true, lightingEnabled: false };
             }
         }
     }
     dispose() {
+        this.appliedSkySignature = null;
         this.disposeCurrent();
         if (this.pmremGenerator) {
             this.pmremGenerator.dispose();
             this.pmremGenerator = null;
         }
     }
+    static skySignature(sky) {
+        if (!sky)
+            return "none";
+        try {
+            return JSON.stringify(sky);
+        }
+        catch {
+            return `${sky.mode}:unstable`;
+        }
+    }
     disposeCurrent() {
         this.currentObjects.forEach((obj) => {
             if (obj.parent)
@@ -118,55 +137,48 @@ export class EnvironmentSystem {
         }
         this.currentBackground = null;
         this.currentEnvironment = null;
-        this.gradientSky = null;
         this.objectUrls.forEach((url) => URL.revokeObjectURL(url));
         this.objectUrls = [];
     }
     applyGradientSky(gradient) {
-        const skyGeometry = new THREE.SphereGeometry(this.gradientBaseRadius, 64, 64);
-        const skyMaterial = new THREE.ShaderMaterial({
-            uniforms: {
-                topColor: { value: new THREE.Color(gradient.topColor) },
-                horizonColor: { value: new THREE.Color(gradient.horizonColor) },
-                sunPosition: { value: new THREE.Vector3(...gradient.sunPosition) },
-                sunIntensity: { value: gradient.sunIntensity },
-                sunSize: { value: gradient.sunSize },
-            },
-            vertexShader: `
-        varying vec3 vPosition;
-        void main() {
-          vPosition = position;
-          gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-        }
-      `,
-            fragmentShader: `
-        uniform vec3 topColor;
-        uniform vec3 horizonColor;
-        uniform vec3 sunPosition;
-        uniform float sunIntensity;
-        uniform float sunSize;
-        varying vec3 vPosition;
-        void main() {
-          vec3 direction = normalize(vPosition);
-          float h = direction.y;
-          float gradientFactor = smoothstep(-0.1, 0.4, h);
-          vec3 color = mix(horizonColor, topColor, gradientFactor);
-          vec3 sunDir = normalize(sunPosition);
-          float sunDist = distance(direction, sunDir);
-          float sun = smoothstep(sunSize, 0.0, sunDist) * sunIntensity;
-          color = mix(color, topColor, sun);
-          gl_FragColor = vec4(color, 1.0);
-        }
-      `,
-            side: THREE.BackSide,
-            depthWrite: false,
-        });
-        const sky = new THREE.Mesh(skyGeometry, skyMaterial);
-        sky.renderOrder = -1;
-        sky.frustumCulled = false;
-        this.scene.add(sky);
-        this.currentObjects.push(sky);
-        this.gradientSky = sky;
+        const canvas = typeof document !== "undefined"
+            ? document.createElement("canvas")
+            : typeof OffscreenCanvas !== "undefined"
+                ? new OffscreenCanvas(1024, 512)
+                : null;
+        if (!canvas) {
+            this.scene.background = new THREE.Color(gradient.horizonColor);
+            return;
+        }
+        canvas.width = 1024;
+        canvas.height = 512;
+        const context = canvas.getContext("2d");
+        if (!context) {
+            this.scene.background = new THREE.Color(gradient.horizonColor);
+            return;
+        }
+        const baseGradient = context.createLinearGradient(0, 0, 0, canvas.height);
+        baseGradient.addColorStop(0, gradient.topColor);
+        baseGradient.addColorStop(0.55, gradient.topColor);
+        baseGradient.addColorStop(1, gradient.horizonColor);
+        context.fillStyle = baseGradient;
+        context.fillRect(0, 0, canvas.width, canvas.height);
+        const normalizedSunIntensity = THREE.MathUtils.clamp(gradient.sunIntensity, 0, 0.24);
+        const normalizedSunSize = THREE.MathUtils.clamp(gradient.sunSize, 0.005, 0.08);
+        const sunX = canvas.width * (0.5 + THREE.MathUtils.clamp(gradient.sunPosition[0], -1, 1) * 0.32);
+        const sunY = canvas.height * (0.5 - THREE.MathUtils.clamp(gradient.sunPosition[1], -1, 1) * 0.28);
+        const sunRadius = canvas.height * (0.18 + normalizedSunSize * 2.8);
+        const sunGradient = context.createRadialGradient(sunX, sunY, 0, sunX, sunY, sunRadius);
+        sunGradient.addColorStop(0, `rgba(255,255,255,${0.08 + normalizedSunIntensity * 2.8})`);
+        sunGradient.addColorStop(0.32, `rgba(255,255,255,${0.05 + normalizedSunIntensity * 1.9})`);
+        sunGradient.addColorStop(1, "rgba(255,255,255,0)");
+        context.fillStyle = sunGradient;
+        context.fillRect(0, 0, canvas.width, canvas.height);
+        const texture = new THREE.CanvasTexture(canvas);
+        texture.colorSpace = THREE.SRGBColorSpace;
+        texture.needsUpdate = true;
+        this.scene.background = texture;
+        this.currentBackground = texture;
     }
     async resolveAsset(src, kind) {
         if (!this.assetResolver)
@@ -186,7 +198,9 @@ export class EnvironmentSystem {
         const token = ++this.loadToken;
         const backgroundEnabled = hdr.showBackground !== false;
         const lightingEnabled = hdr.showLighting !== false;
-        const usePmrem = hdr.usePmrem ?? false;
+        // When the env feeds PBR sampling (lightingEnabled), it must be PMREM-filtered.
+        // Without prefiltering Three.js samples a flat low-mip env and the scene loses the IBL look.
+        const usePmrem = hdr.usePmrem ?? lightingEnabled;
         const resolved = await this.resolveAsset(hdr.src, "hdr");
         if (token !== this.loadToken)
             return;
@@ -232,11 +246,73 @@ export class EnvironmentSystem {
         }
         this.state = { mode: "hdr", backgroundEnabled, lightingEnabled };
     }
+    async applyImageSky(image) {
+        const token = ++this.loadToken;
+        const backgroundEnabled = image.showBackground !== false;
+        const lightingEnabled = image.showLighting === true;
+        const usePmrem = image.usePmrem ?? false;
+        const resolved = await this.resolveAsset(image.src, "texture");
+        if (token !== this.loadToken)
+            return;
+        const loader = new THREE.TextureLoader();
+        const texture = await loader.loadAsync(resolved);
+        if (token !== this.loadToken) {
+            texture.dispose();
+            return;
+        }
+        const projection = image.projection ?? "equirectangular";
+        if (projection !== "equirectangular" && projection !== "backplate") {
+            texture.dispose();
+            throw new Error(`Unsupported LDR image sky projection: ${projection}`);
+        }
+        if (projection === "backplate" && lightingEnabled) {
+            texture.dispose();
+            throw new Error("LDR image backplates cannot drive scene.environment lighting. Use a real HDR/equirectangular sky.");
+        }
+        texture.mapping = projection === "backplate" ? THREE.UVMapping : THREE.EquirectangularReflectionMapping;
+        texture.colorSpace = THREE.SRGBColorSpace;
+        texture.magFilter = THREE.LinearFilter;
+        texture.minFilter = THREE.LinearFilter;
+        texture.wrapS = THREE.ClampToEdgeWrapping;
+        texture.wrapT = THREE.ClampToEdgeWrapping;
+        texture.needsUpdate = true;
+        texture.center = new THREE.Vector2(0.5, 0.5);
+        if (projection === "equirectangular" && typeof image.rotationY === "number") {
+            texture.rotation = image.rotationY;
+        }
+        if (projection === "equirectangular") {
+            this.applyRotationToScene(image.rotation, image.rotationY);
+        }
+        let environmentTexture = null;
+        if (lightingEnabled) {
+            if (usePmrem) {
+                if (!this.pmremGenerator) {
+                    this.pmremGenerator = new THREE.PMREMGenerator(this.renderer);
+                    this.pmremGenerator.compileEquirectangularShader();
+                }
+                environmentTexture = this.pmremGenerator.fromEquirectangular(texture).texture;
+            }
+            else {
+                environmentTexture = texture;
+            }
+        }
+        if (backgroundEnabled) {
+            this.scene.background = texture;
+            this.currentBackground = texture;
+        }
+        if (environmentTexture) {
+            this.scene.environment = environmentTexture;
+            this.currentEnvironment = environmentTexture;
+        }
+        this.state = { mode: "image", backgroundEnabled, lightingEnabled };
+    }
     async applyCubeSky(cube) {
         const token = ++this.loadToken;
         const backgroundEnabled = cube.showBackground !== false;
         const lightingEnabled = cube.showLighting !== false;
-        const usePmrem = cube.usePmrem ?? false;
+        // When the env feeds PBR sampling (lightingEnabled), it must be PMREM-filtered.
+        // The debug cubemap previously rendered as a flat sRGB env because this defaulted to false.
+        const usePmrem = cube.usePmrem ?? lightingEnabled;
         const faces = await Promise.all([
             this.resolveAsset(cube.px, "cubeface"),
             this.resolveAsset(cube.nx, "cubeface"),

package/dist/systems/lightingSystem.d.ts

@@ -1,15 +1,24 @@
 import * as THREE from "three";
 import type { RenderPresetDefinition } from "../engine/types";
+export type LightingSystemState = {
+    keyPosition: [number, number, number] | null;
+    keyTarget: [number, number, number] | null;
+    fillPosition: [number, number, number] | null;
+    fillTarget: [number, number, number] | null;
+};
 export declare class LightingSystem {
     private scene;
     private lights;
     private targets;
+    private state;
     constructor(scene: THREE.Scene);
-    apply(preset: RenderPresetDefinition): void;
+    apply(preset: RenderPresetDefinition, bounds?: THREE.Box3 | null): void;
     dispose(): void;
+    getState(): LightingSystemState;
     private add;
     private addTarget;
     private clear;
+    private resolveDirectionalPosition;
     private configureShadow;
 }
 //# sourceMappingURL=lightingSystem.d.ts.map

package/dist/systems/lightingSystem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lightingSystem.d.ts","sourceRoot":"","sources":["../../src/systems/lightingSystem.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAqB,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAUjF,qBAAa,cAAc;IACzB,OAAO,CAAC,KAAK,CAAc;IAC3B,OAAO,CAAC,MAAM,CAAqB;IACnC,OAAO,CAAC,OAAO,CAAwB;gBAE3B,KAAK,EAAE,KAAK,CAAC,KAAK;IAI9B,KAAK,CAAC,MAAM,EAAE,sBAAsB,GAAG,IAAI;IAuD3C,OAAO,IAAI,IAAI;IAIf,OAAO,CAAC,GAAG;IAKX,OAAO,CAAC,SAAS;IAKjB,OAAO,CAAC,KAAK;IAWb,OAAO,CAAC,eAAe;CAcxB"}
+{"version":3,"file":"lightingSystem.d.ts","sourceRoot":"","sources":["../../src/systems/lightingSystem.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAqB,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAUjF,MAAM,MAAM,mBAAmB,GAAG;IAChC,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC;IAC7C,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC;IAC3C,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC;IAC9C,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC;CAC7C,CAAC;AAoBF,qBAAa,cAAc;IACzB,OAAO,CAAC,KAAK,CAAc;IAC3B,OAAO,CAAC,MAAM,CAAqB;IACnC,OAAO,CAAC,OAAO,CAAwB;IACvC,OAAO,CAAC,KAAK,CAKX;gBAEU,KAAK,EAAE,KAAK,CAAC,KAAK;IAI9B,KAAK,CAAC,MAAM,EAAE,sBAAsB,EAAE,MAAM,CAAC,EAAE,KAAK,CAAC,IAAI,GAAG,IAAI,GAAG,IAAI;IAiEvE,OAAO,IAAI,IAAI;IAIf,QAAQ,IAAI,mBAAmB;IAS/B,OAAO,CAAC,GAAG;IAKX,OAAO,CAAC,SAAS;IAKjB,OAAO,CAAC,KAAK;IAiBb,OAAO,CAAC,0BAA0B;IASlC,OAAO,CAAC,eAAe;CAwExB"}

package/dist/systems/lightingSystem.js

@@ -6,17 +6,43 @@ const DEFAULT_LIGHTING = {
     key: { color: "#ffffff", intensity: 1.4, position: [10, 15, 5], castShadow: true },
     fill: { color: "#ffffff", intensity: 0.5, position: [-10, 10, -5] },
 };
+const vectorToTuple = (value) => [value.x, value.y, value.z];
+const cloneTuple = (value) => value ? [value[0], value[1], value[2]] : null;
+const DEFAULT_SHADOW_MARGIN = 0.18;
+const DEFAULT_SHADOW_DEPTH_MARGIN = 0.35;
+const getBoxCorners = (box) => [
+    new THREE.Vector3(box.min.x, box.min.y, box.min.z),
+    new THREE.Vector3(box.min.x, box.min.y, box.max.z),
+    new THREE.Vector3(box.min.x, box.max.y, box.min.z),
+    new THREE.Vector3(box.min.x, box.max.y, box.max.z),
+    new THREE.Vector3(box.max.x, box.min.y, box.min.z),
+    new THREE.Vector3(box.max.x, box.min.y, box.max.z),
+    new THREE.Vector3(box.max.x, box.max.y, box.min.z),
+    new THREE.Vector3(box.max.x, box.max.y, box.max.z),
+];
 export class LightingSystem {
     scene;
     lights = [];
     targets = [];
+    state = {
+        keyPosition: null,
+        keyTarget: null,
+        fillPosition: null,
+        fillTarget: null,
+    };
     constructor(scene) {
         this.scene = scene;
     }
-    apply(preset) {
+    apply(preset, bounds) {
         this.clear();
         const config = preset.lighting ?? DEFAULT_LIGHTING;
-        const lightTarget = preset.sceneExtras?.lightTarget ?? [0, 1.5, 0];
+        const boundsCenter = bounds && !bounds.isEmpty() ? bounds.getCenter(new THREE.Vector3()) : null;
+        const lightTargetArray = preset.sceneExtras?.lightTarget ?? [
+            boundsCenter?.x ?? 0,
+            boundsCenter?.y ?? 1.5,
+            boundsCenter?.z ?? 0,
+        ];
+        const lightTarget = new THREE.Vector3(...lightTargetArray);
         if (config.rig === "none")
             return;
         const ambient = config.ambient ?? DEFAULT_LIGHTING.ambient;
@@ -32,22 +58,26 @@ export class LightingSystem {
         const key = config.key ?? DEFAULT_LIGHTING.key;
         if (key && key.intensity > 0) {
             const light = new THREE.DirectionalLight(new THREE.Color(key.color), key.intensity);
-            light.position.set(...key.position);
+            light.position.copy(this.resolveDirectionalPosition(key.position, lightTarget, key.positionMode));
             light.castShadow = key.castShadow ?? false;
+            light.target.position.copy(lightTarget);
+            this.addTarget(light.target);
             if (light.castShadow) {
-                this.configureShadow(light, config.shadow);
+                this.configureShadow(light, config.shadow, bounds, lightTarget);
             }
-            light.target.position.set(lightTarget[0], lightTarget[1], lightTarget[2]);
-            this.addTarget(light.target);
             this.add(light);
+            this.state.keyPosition = vectorToTuple(light.position);
+            this.state.keyTarget = vectorToTuple(light.target.position);
         }
         const fill = config.fill ?? DEFAULT_LIGHTING.fill;
         if (fill && fill.intensity > 0) {
             const light = new THREE.DirectionalLight(new THREE.Color(fill.color), fill.intensity);
-            light.position.set(...fill.position);
-            light.target.position.set(lightTarget[0], lightTarget[1], lightTarget[2]);
+            light.position.copy(this.resolveDirectionalPosition(fill.position, lightTarget, fill.positionMode));
+            light.target.position.copy(lightTarget);
             this.addTarget(light.target);
             this.add(light);
+            this.state.fillPosition = vectorToTuple(light.position);
+            this.state.fillTarget = vectorToTuple(light.target.position);
         }
         if (preset.interiorLights?.length) {
             preset.interiorLights.forEach((interior) => {
@@ -62,6 +92,14 @@ export class LightingSystem {
     dispose() {
         this.clear();
     }
+    getState() {
+        return {
+            keyPosition: cloneTuple(this.state.keyPosition),
+            keyTarget: cloneTuple(this.state.keyTarget),
+            fillPosition: cloneTuple(this.state.fillPosition),
+            fillTarget: cloneTuple(this.state.fillTarget),
+        };
+    }
     add(light) {
         this.scene.add(light);
         this.lights.push(light);
@@ -81,20 +119,83 @@ export class LightingSystem {
                 target.parent.remove(target);
         });
         this.targets = [];
+        this.state = {
+            keyPosition: null,
+            keyTarget: null,
+            fillPosition: null,
+            fillTarget: null,
+        };
     }
-    configureShadow(light, config) {
+    resolveDirectionalPosition(position, target, mode = "target-offset") {
+        const configured = new THREE.Vector3(...position);
+        return mode === "world" ? configured : target.clone().add(configured);
+    }
+    configureShadow(light, config, bounds, target) {
         if (!light.shadow)
             return;
-        const cameraSize = config?.cameraSize ?? 25;
-        light.shadow.camera.left = -cameraSize;
-        light.shadow.camera.right = cameraSize;
-        light.shadow.camera.top = cameraSize;
-        light.shadow.camera.bottom = -cameraSize;
-        light.shadow.camera.near = config?.near ?? 0.1;
-        light.shadow.camera.far = config?.far ?? 60;
-        const mapSize = config?.mapSize ?? 2048;
+        const boundsSize = bounds && !bounds.isEmpty() ? bounds.getSize(new THREE.Vector3()) : null;
+        const boundsSphere = bounds && !bounds.isEmpty() ? bounds.getBoundingSphere(new THREE.Sphere()) : null;
+        const boundsSpan = boundsSize ? Math.max(boundsSize.x, boundsSize.y, boundsSize.z) : 0;
+        const radius = boundsSphere?.radius ?? (boundsSpan > 0 ? boundsSpan * 0.5 : 25);
+        const autoFit = config?.autoFit !== false;
+        const configuredSize = config?.cameraSize;
+        const targetPoint = target ?? new THREE.Vector3();
+        const distance = light.position.distanceTo(targetPoint);
+        if (autoFit && bounds && !bounds.isEmpty()) {
+            const up = new THREE.Vector3(0, 1, 0);
+            const lightDir = targetPoint.clone().sub(light.position).normalize();
+            if (Math.abs(lightDir.dot(up)) > 0.98) {
+                up.set(0, 0, 1);
+            }
+            const shadowCamera = light.shadow.camera;
+            shadowCamera.position.copy(light.position);
+            shadowCamera.up.copy(up);
+            shadowCamera.lookAt(targetPoint);
+            shadowCamera.updateMatrixWorld(true);
+            const viewMatrix = shadowCamera.matrixWorldInverse.clone();
+            const corners = getBoxCorners(bounds).map((corner) => corner.applyMatrix4(viewMatrix));
+            const min = new THREE.Vector3(Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY);
+            const max = new THREE.Vector3(Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY);
+            corners.forEach((corner) => {
+                min.min(corner);
+                max.max(corner);
+            });
+            const fitWidth = Math.max(max.x - min.x, 1);
+            const fitHeight = Math.max(max.y - min.y, 1);
+            const baseMargin = Math.max(config?.margin ?? 0, Math.max(fitWidth, fitHeight, radius) * DEFAULT_SHADOW_MARGIN);
+            const configuredHalfSize = configuredSize && configuredSize > 0 ? configuredSize : 0;
+            const halfWidth = Math.max(fitWidth * 0.5 + baseMargin, configuredHalfSize);
+            const halfHeight = Math.max(fitHeight * 0.5 + baseMargin, configuredHalfSize);
+            light.shadow.camera.left = -halfWidth;
+            light.shadow.camera.right = halfWidth;
+            light.shadow.camera.top = halfHeight;
+            light.shadow.camera.bottom = -halfHeight;
+            const depthPadding = Math.max(config?.depthMargin ?? 0, Math.max(0.5, radius * DEFAULT_SHADOW_DEPTH_MARGIN));
+            const fittedNear = Math.max(0.1, -max.z - depthPadding);
+            const fittedFar = Math.max(fittedNear + 1, -min.z + depthPadding);
+            light.shadow.camera.near = Math.max(config?.near ?? 0.1, Math.min(fittedNear, fittedFar - 0.5));
+            light.shadow.camera.far = Math.max(config?.far ?? 0, fittedFar, light.shadow.camera.near + 1);
+        }
+        else {
+            const cameraSize = configuredSize ?? (boundsSpan > 0 ? Math.max(8, radius * 1.35, boundsSpan * 0.5) : 25);
+            light.shadow.camera.left = -cameraSize;
+            light.shadow.camera.right = cameraSize;
+            light.shadow.camera.top = cameraSize;
+            light.shadow.camera.bottom = -cameraSize;
+            const depthPadding = Math.max(0.5, radius * 0.35);
+            const fittedNear = Math.max(0.1, distance - radius - depthPadding);
+            const fittedFar = Math.max(fittedNear + 1, distance + radius + depthPadding);
+            light.shadow.camera.near = config?.near ?? fittedNear;
+            light.shadow.camera.far = config?.far ?? Math.max(fittedFar, light.shadow.camera.near + 1);
+        }
+        const mapSize = THREE.MathUtils.clamp(config?.mapSize ?? 2048, 512, 4096);
         light.shadow.mapSize.set(mapSize, mapSize);
         light.shadow.bias = config?.bias ?? -0.0001;
+        light.shadow.normalBias = config?.normalBias ?? 0.035;
         light.shadow.radius = config?.radius ?? 3;
+        if (typeof light.shadow.camera.updateProjectionMatrix === "function") {
+            light.shadow.camera.updateProjectionMatrix();
+        }
+        light.shadow.camera.updateMatrixWorld(true);
     }
 }

package/dist/systems/postfxSystem.d.ts

@@ -15,11 +15,15 @@ export declare class PostFxSystem {
     private lastHeight;
     private pendingConfig;
     private currentConfig;
-    constructor(renderer: THREE.WebGLRenderer, scene: THREE.Scene, camera: THREE.PerspectiveCamera);
+    private contextAttributesWarningIssued;
+    constructor(renderer: THREE.WebGLRenderer, scene: THREE.Scene, camera: THREE.Camera);
+    setCamera(camera: THREE.Camera): void;
     apply(config?: PostFxConfig): void;
     render(): void;
     resize(width: number, height: number): void;
     private getDrawingBufferSize;
+    private ensureRendererContextAttributes;
+    private withAoDepthProxiesVisible;
     dispose(): void;
     invalidate(): void;
     getState(): {

package/dist/systems/postfxSystem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"postfxSystem.d.ts","sourceRoot":"","sources":["../../src/systems/postfxSystem.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD,qBAAa,YAAY;IACvB,OAAO,CAAC,QAAQ,CAAsB;IACtC,OAAO,CAAC,KAAK,CAAc;IAC3B,OAAO,CAAC,MAAM,CAA0B;IACxC,OAAO,CAAC,QAAQ,CAA+B;IAC/C,OAAO,CAAC,UAAU,CAA2B;IAC7C,OAAO,CAAC,MAAM,CAA6B;IAC3C,OAAO,CAAC,UAAU,CAA2B;IAC7C,OAAO,CAAC,WAAW,CAA4B;IAC/C,OAAO,CAAC,cAAc,CAA+B;IACrD,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,SAAS,CAAK;IACtB,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,aAAa,CAA6B;IAClD,OAAO,CAAC,aAAa,CAA6B;gBAEtC,QAAQ,EAAE,KAAK,CAAC,aAAa,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,iBAAiB;IAM9F,KAAK,CAAC,MAAM,CAAC,EAAE,YAAY,GAAG,IAAI;IAiHlC,MAAM,IAAI,IAAI;IAoBd,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI;IAwB3C,OAAO,CAAC,oBAAoB;IAS5B,OAAO,IAAI,IAAI;IAaf,UAAU,IAAI,IAAI;IAqBlB,QAAQ,IAAI;QAAE,SAAS,EAAE,OAAO,CAAC;QAAC,YAAY,EAAE,OAAO,CAAC;QAAC,eAAe,EAAE,OAAO,CAAA;KAAE;CAOpF"}
+{"version":3,"file":"postfxSystem.d.ts","sourceRoot":"","sources":["../../src/systems/postfxSystem.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGpD,qBAAa,YAAY;IACvB,OAAO,CAAC,QAAQ,CAAsB;IACtC,OAAO,CAAC,KAAK,CAAc;IAC3B,OAAO,CAAC,MAAM,CAAe;IAC7B,OAAO,CAAC,QAAQ,CAA+B;IAC/C,OAAO,CAAC,UAAU,CAA2B;IAC7C,OAAO,CAAC,MAAM,CAA6B;IAC3C,OAAO,CAAC,UAAU,CAA2B;IAC7C,OAAO,CAAC,WAAW,CAA4B;IAC/C,OAAO,CAAC,cAAc,CAA+B;IACrD,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,SAAS,CAAK;IACtB,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,aAAa,CAA6B;IAClD,OAAO,CAAC,aAAa,CAA6B;IAClD,OAAO,CAAC,8BAA8B,CAAS;gBAEnC,QAAQ,EAAE,KAAK,CAAC,aAAa,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM;IAMnF,SAAS,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,GAAG,IAAI;IAiBrC,KAAK,CAAC,MAAM,CAAC,EAAE,YAAY,GAAG,IAAI;IAsHlC,MAAM,IAAI,IAAI;IAsBd,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI;IAwB3C,OAAO,CAAC,oBAAoB;IAS5B,OAAO,CAAC,+BAA+B;IA8CvC,OAAO,CAAC,yBAAyB;IAiBjC,OAAO,IAAI,IAAI;IAaf,UAAU,IAAI,IAAI;IAqBlB,QAAQ,IAAI;QAAE,SAAS,EAAE,OAAO,CAAC;QAAC,YAAY,EAAE,OAAO,CAAC;QAAC,eAAe,EAAE,OAAO,CAAA;KAAE;CAOpF"}

package/dist/systems/postfxSystem.js

@@ -1,6 +1,7 @@
 import * as THREE from "three";
 import { BloomEffect, EffectComposer, EffectPass, RenderPass, VignetteEffect } from "postprocessing";
 import { N8AOPostPass } from "n8ao";
+import { AO_DEPTH_PROXY_USER_DATA_KEY } from "./debugSystem";
 export class PostFxSystem {
     renderer;
     scene;
@@ -16,11 +17,28 @@ export class PostFxSystem {
     lastHeight = 0;
     pendingConfig = null;
     currentConfig = null;
+    contextAttributesWarningIssued = false;
     constructor(renderer, scene, camera) {
         this.renderer = renderer;
         this.scene = scene;
         this.camera = camera;
     }
+    setCamera(camera) {
+        this.camera = camera;
+        if (this.composer) {
+            this.composer.dispose();
+            this.composer = null;
+            this.renderPass = null;
+            this.aoPass = null;
+            this.effectPass = null;
+            this.enabled = false;
+        }
+        if (this.currentConfig) {
+            const config = this.currentConfig;
+            this.currentConfig = null;
+            this.apply(config);
+        }
+    }
     apply(config) {
         const ao = config?.ao;
         const bloom = config?.bloom;
@@ -41,6 +59,10 @@ export class PostFxSystem {
             this.enabled = false;
             return;
         }
+        if (!this.ensureRendererContextAttributes()) {
+            this.enabled = false;
+            return;
+        }
         if (!this.composer) {
             this.composer = new EffectComposer(this.renderer);
             this.renderPass = new RenderPass(this.scene, this.camera);
@@ -142,7 +164,9 @@ export class PostFxSystem {
                     this.renderer.setRenderTarget(prevTarget);
                 }
             }
-            this.composer.render();
+            this.withAoDepthProxiesVisible(Boolean(this.aoPass?.enabled), () => {
+                this.composer?.render();
+            });
             return;
         }
         this.renderer.render(this.scene, this.camera);
@@ -178,6 +202,65 @@ export class PostFxSystem {
             height: Math.max(1, Math.round(size.y)),
         };
     }
+    ensureRendererContextAttributes() {
+        const context = this.renderer.getContext();
+        if (context.isContextLost?.()) {
+            if (!this.contextAttributesWarningIssued) {
+                console.warn("[PostFxSystem] post-processing disabled while WebGL context is lost.");
+                this.contextAttributesWarningIssued = true;
+            }
+            return false;
+        }
+        const getContextAttributes = context.getContextAttributes?.bind(context);
+        const attributes = getContextAttributes?.() ?? null;
+        const fallbackAttributes = {
+            alpha: attributes?.alpha ?? this.renderer.getClearAlpha() < 1,
+            antialias: attributes?.antialias ?? false,
+            depth: attributes?.depth ?? true,
+            failIfMajorPerformanceCaveat: attributes?.failIfMajorPerformanceCaveat ?? false,
+            powerPreference: attributes?.powerPreference ?? "default",
+            premultipliedAlpha: attributes?.premultipliedAlpha ?? true,
+            preserveDrawingBuffer: attributes?.preserveDrawingBuffer ?? false,
+            stencil: attributes?.stencil ?? false,
+        };
+        try {
+            Object.defineProperty(context, "getContextAttributes", {
+                configurable: true,
+                value: () => getContextAttributes?.() ?? fallbackAttributes,
+            });
+            if (!attributes && !this.contextAttributesWarningIssued) {
+                console.warn("[PostFxSystem] using fallback WebGL context attributes for post-processing.");
+                this.contextAttributesWarningIssued = true;
+            }
+            return true;
+        }
+        catch {
+            if (!this.contextAttributesWarningIssued) {
+                console.warn("[PostFxSystem] post-processing disabled because WebGL context attributes are unavailable.");
+                this.contextAttributesWarningIssued = true;
+            }
+            return false;
+        }
+    }
+    withAoDepthProxiesVisible(enabled, renderFn) {
+        if (!enabled)
+            return renderFn();
+        const visibility = new Map();
+        this.scene.traverse((object) => {
+            if (object.userData?.[AO_DEPTH_PROXY_USER_DATA_KEY] !== true)
+                return;
+            visibility.set(object, object.visible);
+            object.visible = true;
+        });
+        try {
+            return renderFn();
+        }
+        finally {
+            visibility.forEach((visible, object) => {
+                object.visible = visible;
+            });
+        }
+    }
     dispose() {
         if (this.composer) {
             this.composer.dispose();

package/dist/systems/rendererSystem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rendererSystem.d.ts","sourceRoot":"","sources":["../../src/systems/rendererSystem.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,cAAc,EAAmB,MAAM,iBAAiB,CAAC;AAsBvE,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,KAAK,CAAC,aAAa,EAAE,MAAM,CAAC,EAAE,cAAc,GAAG,IAAI,CAuBhG"}
+{"version":3,"file":"rendererSystem.d.ts","sourceRoot":"","sources":["../../src/systems/rendererSystem.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,cAAc,EAAmB,MAAM,iBAAiB,CAAC;AAuBvE,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,KAAK,CAAC,aAAa,EAAE,MAAM,CAAC,EAAE,cAAc,GAAG,IAAI,CAuBhG"}

package/dist/systems/rendererSystem.js

@@ -4,6 +4,7 @@ const DEFAULT_CONFIG = {
     toneMappingExposure: 1.0,
     outputColorSpace: "srgb",
     maxPixelRatio: 1.75,
+    powerPreference: "high-performance",
     antialias: true,
     alpha: false,
     preserveDrawingBuffer: false,