@pascal-app/viewer 0.9.1 → 1.0.0-beta.1

package/dist/lib/scene-themes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scene-themes.d.ts","sourceRoot":"","sources":["../../src/lib/scene-themes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAEnD,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IAIZ,UAAU,EAAE,OAAO,GAAG,MAAM,CAAA;IAC5B,UAAU,EAAE,MAAM,CAAA;IAIlB,MAAM,EAAE,MAAM,CAAA;IACd,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAA;IAC7C,IAAI,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAA;IACzD,MAAM,EAAE,KAAK,CAAC;QACZ,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;QAClC,KAAK,EAAE,MAAM,CAAA;QACb,SAAS,EAAE,MAAM,CAAA;QACjB,UAAU,CAAC,EAAE,OAAO,CAAA;KACrB,CAAC,CAAA;IACF,mBAAmB,EAAE,MAAM,CAAA;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAA;CACjD,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,UAAU,EA2LpC,CAAA;AAED,eAAO,MAAM,eAAe,UAAwC,CAAA;AAIpE,wBAAgB,aAAa,CAAC,EAAE,EAAE,MAAM,GAAG,UAAU,CAEpD"}
+{"version":3,"file":"scene-themes.d.ts","sourceRoot":"","sources":["../../src/lib/scene-themes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAEnD,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IAIZ,UAAU,EAAE,OAAO,GAAG,MAAM,CAAA;IAC5B,UAAU,EAAE,MAAM,CAAA;IAIlB,aAAa,CAAC,EAAE,MAAM,CAAA;IAItB,MAAM,EAAE,MAAM,CAAA;IACd,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAA;IAC7C,IAAI,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAA;IACzD,MAAM,EAAE,KAAK,CAAC;QACZ,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;QAClC,KAAK,EAAE,MAAM,CAAA;QACb,SAAS,EAAE,MAAM,CAAA;QACjB,UAAU,CAAC,EAAE,OAAO,CAAA;KACrB,CAAC,CAAA;IACF,mBAAmB,EAAE,MAAM,CAAA;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAA;CACjD,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,UAAU,EAoMpC,CAAA;AAED,eAAO,MAAM,eAAe,UAAwC,CAAA;AAIpE,wBAAgB,aAAa,CAAC,EAAE,EAAE,MAAM,GAAG,UAAU,CAEpD"}

package/dist/lib/scene-themes.js

@@ -3,13 +3,14 @@ export const SCENE_THEMES = [
         id: 'studio',
         name: 'Studio',
         appearance: 'light',
-        background: '#ffffff',
-        ground: '#f4f4f2',
+        background: '#fbfbfa',
+        backgroundSky: '#b6cfe7',
+        ground: '#e9e7e2',
         ambient: { color: '#ffffff', intensity: 0.15 },
-        hemi: { sky: '#ffffff', ground: '#aaa49a', intensity: 0.6 },
+        hemi: { sky: '#ffffff', ground: '#aaa49a', intensity: 0.45 },
         lights: [
             { position: [10, 10, 10], color: '#ffffff', intensity: 4, castShadow: true },
-            { position: [-10, 10, -10], color: '#ffffff', intensity: 0.75 },
+            { position: [-10, 10, -10], color: '#ffffff', intensity: 0.6 },
         ],
         toneMappingExposure: 0.9,
         clayTints: {
@@ -25,6 +26,7 @@ export const SCENE_THEMES = [
         name: 'Paper',
         appearance: 'light',
         background: '#ede9df',
+        backgroundSky: '#c0d2e4',
         ground: '#e7e1d3',
         ambient: { color: '#fff9eb', intensity: 0.55 },
         hemi: { sky: '#fff5d9', ground: '#c2b89c', intensity: 0.35 },
@@ -46,6 +48,7 @@ export const SCENE_THEMES = [
         name: 'Sunset',
         appearance: 'light',
         background: '#f6e8d4',
+        backgroundSky: '#b5bede',
         ground: '#ecd9bf',
         ambient: { color: '#ffd9a8', intensity: 0.45 },
         hemi: { sky: '#ffd9a8', ground: '#5b4634', intensity: 0.4 },
@@ -67,11 +70,12 @@ export const SCENE_THEMES = [
         name: 'Overcast',
         appearance: 'light',
         background: '#e6e7e6',
+        backgroundSky: '#c3ccd6',
         ground: '#dadcd9',
         ambient: { color: '#eef0ef', intensity: 1.1 },
         hemi: { sky: '#f4f5f3', ground: '#bcbfbb', intensity: 0.9 },
         lights: [{ position: [12, 28, 10], color: '#f4f5f3', intensity: 0.8, castShadow: true }],
-        toneMappingExposure: 0.95,
+        toneMappingExposure: 0.9,
         clayTints: {
             wall: '#dedfdc',
             floor: '#cdcec9',
@@ -85,6 +89,7 @@ export const SCENE_THEMES = [
         name: 'Blueprint',
         appearance: 'light',
         background: '#dde6ef',
+        backgroundSky: '#a5c4e2',
         ground: '#c9d6e6',
         ambient: { color: '#cfdcec', intensity: 0.7 },
         hemi: { sky: '#dfeaf6', ground: '#5b6b80', intensity: 0.55 },
@@ -92,7 +97,7 @@ export const SCENE_THEMES = [
             { position: [16, 24, 12], color: '#e6efff', intensity: 1.8, castShadow: true },
             { position: [-12, 10, -8], color: '#9fb6d8', intensity: 0.4 },
         ],
-        toneMappingExposure: 0.95,
+        toneMappingExposure: 0.9,
         clayTints: {
             wall: '#9fb6d2',
             floor: '#8ba2c2',
@@ -106,6 +111,7 @@ export const SCENE_THEMES = [
         name: 'Mediterranean',
         appearance: 'light',
         background: '#bdd6e8',
+        backgroundSky: '#8ab4d6',
         ground: '#ddd2bb',
         ambient: { color: '#d6e6f3', intensity: 0.5 },
         hemi: { sky: '#a8c8e2', ground: '#d8c9a4', intensity: 0.6 },
@@ -127,14 +133,15 @@ export const SCENE_THEMES = [
         name: 'Twilight',
         appearance: 'dark',
         background: '#3a3550',
-        ground: '#4a4566',
-        ambient: { color: '#a89cc8', intensity: 0.35 },
-        hemi: { sky: '#d8a8c0', ground: '#1c1830', intensity: 0.5 },
+        backgroundSky: '#272338',
+        ground: '#67618a',
+        ambient: { color: '#a89cc8', intensity: 0.55 },
+        hemi: { sky: '#d8a8c0', ground: '#3a3450', intensity: 0.7 },
         lights: [
             { position: [-14, 22, -10], color: '#a4b6e8', intensity: 1.4, castShadow: true },
             { position: [14, 6, 8], color: '#ffb070', intensity: 0.9 },
         ],
-        toneMappingExposure: 1.1,
+        toneMappingExposure: 0.9,
         clayTints: {
             wall: '#c5b9cf',
             floor: '#ad9fbb',
@@ -148,12 +155,13 @@ export const SCENE_THEMES = [
         name: 'Night',
         appearance: 'dark',
         background: '#1f2433',
-        ground: '#2b3247',
-        ambient: { color: '#a0b0ff', intensity: 0.07 },
-        hemi: { sky: '#3a4666', ground: '#0e111c', intensity: 0.4 },
+        backgroundSky: '#12161f',
+        ground: '#4a5470',
+        ambient: { color: '#a0b0ff', intensity: 0.25 },
+        hemi: { sky: '#3a4666', ground: '#232a3d', intensity: 0.55 },
         lights: [
-            { position: [10, 10, 10], color: '#e0e5ff', intensity: 0.8, castShadow: true },
-            { position: [-10, 10, -10], color: '#8090ff', intensity: 0.2 },
+            { position: [10, 10, 10], color: '#e0e5ff', intensity: 1.2, castShadow: true },
+            { position: [-10, 10, -10], color: '#8090ff', intensity: 0.3 },
         ],
         toneMappingExposure: 0.9,
         clayTints: {
@@ -169,6 +177,7 @@ export const SCENE_THEMES = [
         name: 'Verdant',
         appearance: 'light',
         background: '#d6e4d2',
+        backgroundSky: '#aecde0',
         ground: '#c7d6b4',
         ambient: { color: '#e3efdd', intensity: 0.5 },
         hemi: { sky: '#cfe6cf', ground: '#8ea06f', intensity: 0.65 },
@@ -176,7 +185,7 @@ export const SCENE_THEMES = [
             { position: [16, 22, 12], color: '#fff6d8', intensity: 3, castShadow: true },
             { position: [-12, 10, -8], color: '#bfe0c2', intensity: 0.5 },
         ],
-        toneMappingExposure: 0.95,
+        toneMappingExposure: 0.9,
         clayTints: {
             wall: '#eef0e6',
             floor: '#d8ddc6',

package/dist/lib/shadow-only.d.ts

@@ -0,0 +1,4 @@
+import type { Object3D } from 'three';
+export declare function applyShadowOnly(root: Object3D): void;
+export declare function clearShadowOnly(root: Object3D): void;
+//# sourceMappingURL=shadow-only.d.ts.map

package/dist/lib/shadow-only.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shadow-only.d.ts","sourceRoot":"","sources":["../../src/lib/shadow-only.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAuBrC,wBAAgB,eAAe,CAAC,IAAI,EAAE,QAAQ,GAAG,IAAI,CASpD;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,QAAQ,GAAG,IAAI,CAOpD"}

package/dist/lib/shadow-only.js

@@ -0,0 +1,36 @@
+import { SCENE_LAYER, SHADOW_ONLY_LAYER } from './layers';
+/**
+ * Shadow-caster-only hiding: removes an object (and its descendants) from the
+ * color passes while keeping it in the shadow map, so a hidden roof or level
+ * still shadows the interior and sun enters through windows correctly.
+ *
+ * Uses layer masks instead of `visible = false` for two reasons: `visible`
+ * cascades (and, critically, prunes the object from the shadow pass too),
+ * while layers are tested per-object against the rendering camera — the main
+ * camera never enables {@link SHADOW_ONLY_LAYER}, but every shadow-casting
+ * light's shadow camera does (see `lights.tsx`).
+ *
+ * The original `layers.mask` is stashed under a private Symbol so
+ * {@link clearShadowOnly} restores the exact prior state. Both calls are
+ * idempotent and cheap to reapply.
+ */
+const ORIGINAL_LAYERS = Symbol('pascal:shadow-only:original-layers');
+export function applyShadowOnly(root) {
+    root.traverse((obj) => {
+        const carrier = obj;
+        if (carrier[ORIGINAL_LAYERS] === undefined) {
+            carrier[ORIGINAL_LAYERS] = obj.layers.mask;
+        }
+        obj.layers.disable(SCENE_LAYER);
+        obj.layers.enable(SHADOW_ONLY_LAYER);
+    });
+}
+export function clearShadowOnly(root) {
+    root.traverse((obj) => {
+        const carrier = obj;
+        if (carrier[ORIGINAL_LAYERS] === undefined)
+            return;
+        obj.layers.mask = carrier[ORIGINAL_LAYERS];
+        delete carrier[ORIGINAL_LAYERS];
+    });
+}

package/dist/lib/snapshot-pipeline.d.ts

@@ -0,0 +1,42 @@
+import { type Camera, type Scene } from 'three';
+import { type WebGPURenderer } from 'three/webgpu';
+import { type EdgeMode } from './edge-style';
+export declare const THUMBNAIL_WIDTH = 1920;
+export declare const THUMBNAIL_HEIGHT = 1080;
+export type SnapshotCaptureMode = 'standard' | 'viewport' | 'area';
+export type SnapshotCropRegion = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export type SnapshotSize = {
+    w: number;
+    h: number;
+};
+export type SnapshotCaptureResult = {
+    blob: Blob;
+    outW: number;
+    outH: number;
+};
+export type SnapshotPipeline = {
+    applyEnvironment: ({ theme, transparent, grade, edges, camera, }: {
+        theme: string;
+        transparent: boolean;
+        grade: boolean;
+        edges: EdgeMode;
+        camera: Camera;
+    }) => void;
+    capture: ({ captureMode, cropRegion, standardSize, }: {
+        captureMode?: SnapshotCaptureMode;
+        cropRegion?: SnapshotCropRegion;
+        standardSize?: SnapshotSize;
+    }) => Promise<SnapshotCaptureResult>;
+    dispose: () => void;
+};
+export declare function createSnapshotPipeline({ renderer, scene, camera, }: {
+    renderer: WebGPURenderer;
+    scene: Scene;
+    camera: Camera;
+}): Promise<SnapshotPipeline | null>;
+//# sourceMappingURL=snapshot-pipeline.d.ts.map

package/dist/lib/snapshot-pipeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"snapshot-pipeline.d.ts","sourceRoot":"","sources":["../../src/lib/snapshot-pipeline.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,MAAM,EAAkB,KAAK,KAAK,EAAoB,MAAM,OAAO,CAAA;AAqBjF,OAAO,EAAgC,KAAK,cAAc,EAAE,MAAM,cAAc,CAAA;AAGhF,OAAO,EAAE,KAAK,QAAQ,EAAqC,MAAM,cAAc,CAAA;AAK/E,eAAO,MAAM,eAAe,OAAO,CAAA;AACnC,eAAO,MAAM,gBAAgB,OAAO,CAAA;AAEpC,MAAM,MAAM,mBAAmB,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,CAAA;AAElE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV,CAAA;AAED,MAAM,MAAM,qBAAqB,GAAG;IAClC,IAAI,EAAE,IAAI,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,gBAAgB,EAAE,CAAC,EACjB,KAAK,EACL,WAAW,EACX,KAAK,EACL,KAAK,EACL,MAAM,GACP,EAAE;QACD,KAAK,EAAE,MAAM,CAAA;QACb,WAAW,EAAE,OAAO,CAAA;QACpB,KAAK,EAAE,OAAO,CAAA;QACd,KAAK,EAAE,QAAQ,CAAA;QACf,MAAM,EAAE,MAAM,CAAA;KACf,KAAK,IAAI,CAAA;IACV,OAAO,EAAE,CAAC,EACR,WAAW,EACX,UAAU,EACV,YAAY,GACb,EAAE;QACD,WAAW,CAAC,EAAE,mBAAmB,CAAA;QACjC,UAAU,CAAC,EAAE,kBAAkB,CAAA;QAC/B,YAAY,CAAC,EAAE,YAAY,CAAA;KAC5B,KAAK,OAAO,CAAC,qBAAqB,CAAC,CAAA;IACpC,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,CAAA;AAED,wBAAsB,sBAAsB,CAAC,EAC3C,QAAQ,EACR,KAAK,EACL,MAAM,GACP,EAAE;IACD,QAAQ,EAAE,cAAc,CAAA;IACxB,KAAK,EAAE,KAAK,CAAA;IACZ,MAAM,EAAE,MAAM,CAAA;CACf,GAAG,OAAO,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAoSnC"}

package/dist/lib/snapshot-pipeline.js

@@ -0,0 +1,254 @@
+import { Color, Matrix4, UnsignedByteType } from 'three';
+import { ssgi } from 'three/addons/tsl/display/SSGINode.js';
+import { denoise } from 'three/examples/jsm/tsl/display/DenoiseNode.js';
+import { fxaa } from 'three/examples/jsm/tsl/display/FXAANode.js';
+import { convertToTexture, diffuseColor, float, mix, mrt, normalView, output, pass, sample, saturation, screenUV, smoothstep, uniform, vec3, vec4, } from 'three/tsl';
+import { RenderPipeline, RenderTarget } from 'three/webgpu';
+import { GRADE_PARAMS, SSGI_PARAMS } from '../components/viewer/post-processing';
+import { backdropGradient, deepSkyColor, horizonHazeColor } from './backdrop';
+import { edgeColorFor, edgeOpacityScaleFor } from './edge-style';
+import { inkedEdges } from './ink-edges';
+import { getSceneTheme } from './scene-themes';
+import { packNormalToRGB, unpackRGBToNormal } from './tsl-compat';
+export const THUMBNAIL_WIDTH = 1920;
+export const THUMBNAIL_HEIGHT = 1080;
+export async function createSnapshotPipeline({ renderer, scene, camera, }) {
+    try {
+        if (renderer.init)
+            await renderer.init();
+        // Backdrop compositing for scene snapshots (studio renders, project
+        // thumbnails): theme background + sky gradient, same world-ray math as the
+        // viewport backdrop in viewer's post-processing. Uniform-driven so the one
+        // cached pipeline serves both opaque and transparent (preset/item) captures.
+        const bgColorUniform = uniform(new Color('#ffffff'));
+        const bgSkyUniform = uniform(new Color('#ffffff'));
+        const bgSkyDeepUniform = uniform(new Color('#ffffff'));
+        const bgHazeUniform = uniform(new Color('#ffffff'));
+        const bgProjInvUniform = uniform(new Matrix4());
+        const bgCamWorldUniform = uniform(new Matrix4());
+        const bgMixUniform = uniform(1);
+        const gradeMixUniform = uniform(0);
+        const inkMixUniform = uniform(0);
+        const inkColorUniform = uniform(new Color('#1a1d24'));
+        const inkOpacityUniform = uniform(0.5);
+        const inkOpacityScaleUniform = uniform(1);
+        // pass() handles MRT internally for all material types, including custom
+        // shaders — unlike renderer.setMRT() which crashes on non-NodeMaterials.
+        // pass() also respects camera.layers, so caller-disabled objects are filtered.
+        const scenePass = pass(scene, camera);
+        scenePass.setMRT(mrt({
+            output,
+            diffuseColor,
+            normal: packNormalToRGB(normalView),
+        }));
+        const scenePassColor = scenePass.getTextureNode('output');
+        const scenePassDepth = scenePass.getTextureNode('depth');
+        const scenePassNormal = scenePass.getTextureNode('normal');
+        scenePass.getTexture('diffuseColor').type = UnsignedByteType;
+        scenePass.getTexture('normal').type = UnsignedByteType;
+        const sceneNormal = sample((uv) => unpackRGBToNormal(scenePassNormal.sample(uv)));
+        const giPass = ssgi(scenePassColor, scenePassDepth, sceneNormal, camera);
+        giPass.sliceCount.value = SSGI_PARAMS.sliceCount;
+        giPass.stepCount.value = SSGI_PARAMS.stepCount;
+        giPass.radius.value = SSGI_PARAMS.radius;
+        giPass.expFactor.value = SSGI_PARAMS.expFactor;
+        giPass.thickness.value = SSGI_PARAMS.thickness;
+        giPass.backfaceLighting.value = SSGI_PARAMS.backfaceLighting;
+        giPass.aoIntensity.value = SSGI_PARAMS.aoIntensity;
+        giPass.giIntensity.value = SSGI_PARAMS.giIntensity;
+        giPass.useLinearThickness.value = SSGI_PARAMS.useLinearThickness;
+        giPass.useScreenSpaceSampling.value = SSGI_PARAMS.useScreenSpaceSampling;
+        giPass.useTemporalFiltering = SSGI_PARAMS.useTemporalFiltering;
+        // r185: SSGI's AO lives in its own single-channel texture (getAONode)
+        // rather than the alpha of one packed rgba texture.
+        const aoTexture = giPass.getAONode();
+        const aoAsRgb = vec4(aoTexture.r, aoTexture.r, aoTexture.r, float(1));
+        const denoisePass = denoise(aoAsRgb, scenePassDepth, sceneNormal, camera);
+        denoisePass.index.value = 0;
+        denoisePass.radius.value = 4;
+        // Same far-field AO fade as the viewport pipeline — without it the
+        // horizon picks up a visible AO line in captures.
+        const aoFarFade = smoothstep(float(0.9994), float(0.9998), scenePassDepth.sample(screenUV).r);
+        const ao = mix(denoisePass.r, float(1), aoFarFade);
+        const aoRgb = scenePassColor.rgb.mul(ao);
+        // Ink edges, mirroring the viewport pipeline (AO → ink → grade) so
+        // captures carry the same soft/strong edge look the canvas shows.
+        // Uniform-gated like grade/backdrop: one cached pipeline serves all modes.
+        // Radius scales with render height: a supersampled capture (4K → 1080p)
+        // would otherwise halve the apparent line weight vs the viewport's 1px.
+        const inkRadius = Math.max(1, Math.round(renderer.domElement.height / 1080));
+        const inkedRgb = inkedEdges({
+            sceneRgb: aoRgb,
+            depthTex: scenePassDepth,
+            normalTex: scenePassNormal,
+            inkColor: inkColorUniform,
+            radius: inkRadius,
+            opacity: float(inkOpacityUniform).mul(inkOpacityScaleUniform),
+        });
+        const ungradedSceneRgb = mix(aoRgb, inkedRgb, inkMixUniform);
+        const gradeRgb = (rgb) => saturation(rgb.div(0.18).pow(vec3(GRADE_PARAMS.contrast)).mul(0.18), GRADE_PARAMS.saturation);
+        const sceneRgb = mix(ungradedSceneRgb, gradeRgb(ungradedSceneRgb), gradeMixUniform);
+        // Per-pixel world ray from the capture camera → sky gradient above the
+        // horizon (dir.y = 0), flat background below — mirrors the viewport
+        // backdrop. bgMix 0 bypasses it and keeps the capture transparent.
+        const ndc = vec4(screenUV.x.mul(2).sub(1), float(1).sub(screenUV.y).mul(2).sub(1), 1, 1);
+        const viewRay = bgProjInvUniform.mul(ndc);
+        const worldDir = bgCamWorldUniform.mul(vec4(viewRay.xyz, 0)).xyz.normalize();
+        const ungradedBgGradient = backdropGradient({
+            dirY: worldDir.y,
+            background: bgColorUniform,
+            haze: bgHazeUniform,
+            sky: bgSkyUniform,
+            skyDeep: bgSkyDeepUniform,
+        });
+        const bgGradient = mix(ungradedBgGradient, gradeRgb(ungradedBgGradient), gradeMixUniform);
+        const alpha = scenePassColor.a;
+        const finalOutput = vec4(mix(sceneRgb, mix(bgGradient, sceneRgb, alpha), bgMixUniform), mix(alpha, float(1), bgMixUniform));
+        // FXAA requires a texture node as input; convertToTexture renders finalOutput
+        // into an intermediate RT so FXAA can sample it with neighbour UV offsets.
+        const aaOutput = fxaa(convertToTexture(finalOutput));
+        const pipeline = new RenderPipeline(renderer);
+        pipeline.outputNode = aaOutput;
+        // Dedicated render target — pipeline outputs here instead of the canvas,
+        // so R3F's main render loop can never overwrite our capture.
+        const { width, height } = renderer.domElement;
+        const renderTarget = new RenderTarget(width, height, { depthBuffer: true });
+        return {
+            applyEnvironment: ({ theme, transparent, grade, edges, camera: captureCamera }) => {
+                const sceneTheme = getSceneTheme(theme);
+                inkMixUniform.value = edges === 'off' ? 0 : 1;
+                inkOpacityUniform.value = edges === 'strong' ? 1 : 0.5;
+                inkColorUniform.value.set(edgeColorFor(sceneTheme.background));
+                inkOpacityScaleUniform.value = edgeOpacityScaleFor(sceneTheme.background);
+                bgColorUniform.value.set(sceneTheme.background);
+                bgSkyUniform.value.set(sceneTheme.backgroundSky ?? sceneTheme.background);
+                bgSkyDeepUniform.value.set(deepSkyColor(sceneTheme.backgroundSky ?? sceneTheme.background));
+                bgHazeUniform.value.set(horizonHazeColor(sceneTheme.backgroundSky ?? sceneTheme.background, sceneTheme.appearance));
+                bgMixUniform.value = transparent ? 0 : 1;
+                gradeMixUniform.value = grade ? 1 : 0;
+                // The capture camera never joins the scene graph, so its matrixWorld
+                // is only refreshed by the render itself — too late for the backdrop
+                // uniforms below.
+                captureCamera.updateMatrixWorld();
+                bgProjInvUniform.value.copy(captureCamera.projectionMatrixInverse);
+                bgCamWorldUniform.value.copy(captureCamera.matrixWorld);
+            },
+            capture: async ({ captureMode, cropRegion, standardSize }) => {
+                const standardW = standardSize?.w ?? THUMBNAIL_WIDTH;
+                const standardH = standardSize?.h ?? THUMBNAIL_HEIGHT;
+                const { width: captureWidth, height: captureHeight } = renderer.domElement;
+                // Resize RT if the canvas dimensions changed
+                if (renderTarget.width !== captureWidth || renderTarget.height !== captureHeight) {
+                    renderTarget.setSize(captureWidth, captureHeight);
+                }
+                try {
+                    ;
+                    renderer.setClearAlpha(0);
+                    renderer.setRenderTarget(renderTarget);
+                    pipeline.render();
+                }
+                finally {
+                    renderer.setRenderTarget(null);
+                }
+                // Let callers restore visibility and other capture policy immediately
+                // after the render, before the asynchronous GPU readback begins.
+                await Promise.resolve();
+                // Read pixels from the RT asynchronously.
+                // WebGPU copyTextureToBuffer aligns each row to 256 bytes, so we must
+                // depad the rows before constructing ImageData.
+                const pixels = (await renderer.readRenderTargetPixelsAsync(renderTarget, 0, 0, captureWidth, captureHeight));
+                const actualBytesPerRow = captureWidth * 4;
+                const tightTotal = actualBytesPerRow * captureHeight;
+                const paddedBytesPerRow = Math.ceil(actualBytesPerRow / 256) * 256;
+                // Two readback shapes to handle:
+                // - WebGPU (`copyTextureToBuffer`): top-down + 256-byte row padding
+                //   when width*4 isn't already a multiple of 256.
+                // - WebGL2 fallback (iOS Chrome, etc.): tightly-packed but bottom-up
+                //   (OpenGL framebuffer convention).
+                // `isWebGPURenderer` lies — it stays true even when the renderer
+                // falls back to the WebGL backend. Inspect the actual backend
+                // instead (presence of a GPU device, or backend constructor name).
+                const backend = renderer.backend;
+                const isWebGPU = !!backend?.device ||
+                    backend?.isWebGPUBackend === true ||
+                    backend?.constructor?.name === 'WebGPUBackend';
+                let tightPixels;
+                if (isWebGPU) {
+                    // WebGPU: depad rows if needed; orientation is already top-down.
+                    if (paddedBytesPerRow === actualBytesPerRow) {
+                        tightPixels = new Uint8ClampedArray(pixels.buffer, pixels.byteOffset, Math.min(pixels.byteLength, tightTotal));
+                    }
+                    else {
+                        tightPixels = new Uint8ClampedArray(tightTotal);
+                        for (let row = 0; row < captureHeight; row++) {
+                            tightPixels.set(pixels.subarray(row * paddedBytesPerRow, row * paddedBytesPerRow + actualBytesPerRow), row * actualBytesPerRow);
+                        }
+                    }
+                }
+                else {
+                    // WebGL2: tight buffer in bottom-up order — flip rows.
+                    tightPixels = new Uint8ClampedArray(tightTotal);
+                    for (let row = 0; row < captureHeight; row++) {
+                        const srcStart = (captureHeight - 1 - row) * actualBytesPerRow;
+                        tightPixels.set(pixels.subarray(srcStart, srcStart + actualBytesPerRow), row * actualBytesPerRow);
+                    }
+                }
+                const imageData = new ImageData(tightPixels, captureWidth, captureHeight);
+                const srcCanvas = new OffscreenCanvas(captureWidth, captureHeight);
+                srcCanvas.getContext('2d').putImageData(imageData, 0, 0);
+                let outW;
+                let outH;
+                let blob;
+                if (captureMode === 'viewport') {
+                    outW = captureWidth;
+                    outH = captureHeight;
+                    const offscreen = new OffscreenCanvas(outW, outH);
+                    offscreen.getContext('2d').drawImage(srcCanvas, 0, 0);
+                    blob = await offscreen.convertToBlob({ type: 'image/png' });
+                }
+                else if (captureMode === 'area' && cropRegion) {
+                    const sx = Math.round(cropRegion.x * captureWidth);
+                    const sy = Math.round(cropRegion.y * captureHeight);
+                    outW = Math.round(cropRegion.width * captureWidth);
+                    outH = Math.round(cropRegion.height * captureHeight);
+                    const offscreen = new OffscreenCanvas(outW, outH);
+                    offscreen.getContext('2d').drawImage(srcCanvas, sx, sy, outW, outH, 0, 0, outW, outH);
+                    blob = await offscreen.convertToBlob({ type: 'image/png' });
+                }
+                else {
+                    // Standard: center-crop to the requested aspect (default 1920×1080)
+                    const srcAspect = captureWidth / captureHeight;
+                    const dstAspect = standardW / standardH;
+                    let sx = 0;
+                    let sy = 0;
+                    let sWidth = captureWidth;
+                    let sHeight = captureHeight;
+                    if (srcAspect > dstAspect) {
+                        sWidth = Math.round(captureHeight * dstAspect);
+                        sx = Math.round((captureWidth - sWidth) / 2);
+                    }
+                    else if (srcAspect < dstAspect) {
+                        sHeight = Math.round(captureWidth / dstAspect);
+                        sy = Math.round((captureHeight - sHeight) / 2);
+                    }
+                    outW = standardW;
+                    outH = standardH;
+                    const offscreen = new OffscreenCanvas(outW, outH);
+                    offscreen
+                        .getContext('2d')
+                        .drawImage(srcCanvas, sx, sy, sWidth, sHeight, 0, 0, outW, outH);
+                    blob = await offscreen.convertToBlob({ type: 'image/png' });
+                }
+                return { blob, outW, outH };
+            },
+            dispose: () => {
+                pipeline.dispose();
+                renderTarget.dispose();
+            },
+        };
+    }
+    catch (error) {
+        console.error('[thumbnail] Failed to build post-processing pipeline, will use fallback render.', error);
+        return null;
+    }
+}

package/dist/lib/terrain-perimeter-fill.d.ts

@@ -0,0 +1,7 @@
+import { BufferGeometry } from 'three';
+export type TerrainPerimeterPoint = {
+    x: number;
+    z: number;
+};
+export declare function buildTerrainPerimeterFillGeometry(points: readonly TerrainPerimeterPoint[], bottomY: readonly number[], topY: number, epsilon?: number): BufferGeometry | null;
+//# sourceMappingURL=terrain-perimeter-fill.d.ts.map

package/dist/lib/terrain-perimeter-fill.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"terrain-perimeter-fill.d.ts","sourceRoot":"","sources":["../../src/lib/terrain-perimeter-fill.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAA+C,MAAM,OAAO,CAAA;AAGnF,MAAM,MAAM,qBAAqB,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAE5D,wBAAgB,iCAAiC,CAC/C,MAAM,EAAE,SAAS,qBAAqB,EAAE,EACxC,OAAO,EAAE,SAAS,MAAM,EAAE,EAC1B,IAAI,EAAE,MAAM,EACZ,OAAO,SAAO,GACb,cAAc,GAAG,IAAI,CA2EvB"}

package/dist/lib/terrain-perimeter-fill.js

@@ -0,0 +1,75 @@
+import { BufferGeometry, Float32BufferAttribute, ShapeUtils, Vector2 } from 'three';
+import { ensureRenderableGeometryAttributes } from './csg-utils';
+export function buildTerrainPerimeterFillGeometry(points, bottomY, topY, epsilon = 1e-6) {
+    if (points.length < 3 || bottomY.length !== points.length)
+        return null;
+    if (bottomY.every((y) => y >= topY - epsilon))
+        return null;
+    let signedArea = 0;
+    for (let index = 0; index < points.length; index += 1) {
+        const a = points[index];
+        const b = points[(index + 1) % points.length];
+        signedArea += a.x * b.z - b.x * a.z;
+    }
+    const counterClockwise = signedArea > 0;
+    const positions = [];
+    const push = (point, y) => {
+        positions.push(point.x, y, point.z);
+    };
+    for (let index = 0; index < points.length; index += 1) {
+        const next = (index + 1) % points.length;
+        const a = points[index];
+        const b = points[next];
+        const ay = bottomY[index];
+        const by = bottomY[next];
+        if (ay >= topY - epsilon && by >= topY - epsilon)
+            continue;
+        if (counterClockwise) {
+            push(a, topY);
+            push(b, by);
+            push(a, ay);
+            push(a, topY);
+            push(b, topY);
+            push(b, by);
+        }
+        else {
+            push(a, topY);
+            push(a, ay);
+            push(b, by);
+            push(a, topY);
+            push(b, by);
+            push(b, topY);
+        }
+    }
+    const faces = ShapeUtils.triangulateShape(points.map((point) => new Vector2(point.x, point.z)), []);
+    for (const face of faces) {
+        const [ia, ib, ic] = face;
+        if (ia == null || ib == null || ic == null)
+            continue;
+        if (bottomY[ia] >= topY - epsilon &&
+            bottomY[ib] >= topY - epsilon &&
+            bottomY[ic] >= topY - epsilon) {
+            continue;
+        }
+        const a = points[ia];
+        const b = points[ib];
+        const c = points[ic];
+        const cross = (b.x - a.x) * (c.z - a.z) - (b.z - a.z) * (c.x - a.x);
+        push(a, bottomY[ia]);
+        if (cross >= 0) {
+            push(b, bottomY[ib]);
+            push(c, bottomY[ic]);
+        }
+        else {
+            push(c, bottomY[ic]);
+            push(b, bottomY[ib]);
+        }
+    }
+    if (positions.length === 0)
+        return null;
+    const geometry = new BufferGeometry();
+    geometry.setAttribute('position', new Float32BufferAttribute(positions, 3));
+    geometry.computeVertexNormals();
+    ensureRenderableGeometryAttributes(geometry);
+    return geometry;
+}

package/dist/lib/texture-node-guard.d.ts

@@ -0,0 +1,13 @@
+/**
+ * three's node system pulls texture uniforms from materials each frame via
+ * reference nodes, and several override-material passes (shadow, depth/normal
+ * prepasses) copy per-object texture slots onto shared materials whose cached
+ * per-mesh node graphs can disagree about a slot's presence. When they do,
+ * `TextureNode.update` dereferences a null texture and the exception kills the
+ * whole render pass — the scene goes black. Substitute a 1×1 black fallback
+ * instead (skipping is not enough: the null would still reach the backend's
+ * texture-binding WeakMap). The slot renders black for a frame and recovers
+ * as soon as the reference pulls a real value again.
+ */
+export declare function installTextureNodeNullGuard(): void;
+//# sourceMappingURL=texture-node-guard.d.ts.map

package/dist/lib/texture-node-guard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"texture-node-guard.d.ts","sourceRoot":"","sources":["../../src/lib/texture-node-guard.ts"],"names":[],"mappings":"AAeA;;;;;;;;;;GAUG;AACH,wBAAgB,2BAA2B,IAAI,IAAI,CAiBlD"}

package/dist/lib/texture-node-guard.js

@@ -0,0 +1,39 @@
+import { DataTexture, TextureNode } from 'three/webgpu';
+let installed = false;
+let reported = 0;
+let fallbackTexture = null;
+function getFallbackTexture() {
+    if (!fallbackTexture) {
+        fallbackTexture = new DataTexture(new Uint8Array([0, 0, 0, 255]), 1, 1);
+        fallbackTexture.needsUpdate = true;
+    }
+    return fallbackTexture;
+}
+/**
+ * three's node system pulls texture uniforms from materials each frame via
+ * reference nodes, and several override-material passes (shadow, depth/normal
+ * prepasses) copy per-object texture slots onto shared materials whose cached
+ * per-mesh node graphs can disagree about a slot's presence. When they do,
+ * `TextureNode.update` dereferences a null texture and the exception kills the
+ * whole render pass — the scene goes black. Substitute a 1×1 black fallback
+ * instead (skipping is not enough: the null would still reach the backend's
+ * texture-binding WeakMap). The slot renders black for a frame and recovers
+ * as soon as the reference pulls a real value again.
+ */
+export function installTextureNodeNullGuard() {
+    if (installed)
+        return;
+    installed = true;
+    const prototype = TextureNode.prototype;
+    const originalUpdate = prototype.update;
+    prototype.update = function update() {
+        if (this.value == null) {
+            if (reported < 5) {
+                reported += 1;
+                console.warn(`[viewer] TextureNode ${this.uuid} has no texture — using fallback`);
+            }
+            this.value = getFallbackTexture();
+        }
+        originalUpdate.call(this);
+    };
+}