@pascal-app/viewer 1.0.3 → 1.0.4

package/dist/lib/snapshot-pipeline.js

@@ -1,13 +1,13 @@
-import { Color, Matrix4, UnsignedByteType } from 'three';
+import { Color, Matrix4, SRGBColorSpace, 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, sample, saturation, screenUV, smoothstep, uniform, vec3, vec4, } from 'three/tsl';
+import { clamp, convertToTexture, diffuseColor, float, mix, mrt, normalView, output, renderOutput, sample, saturation, screenUV, smoothstep, uniform, vec2, vec3, vec4, } from 'three/tsl';
 import { PassNode, 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 { createEdgeDepthSampler, inkedEdges } from './ink-edges';
 import { getSceneTheme } from './scene-themes';
 import { packNormalToRGB, unpackRGBToNormal } from './tsl-compat';
 export const THUMBNAIL_WIDTH = 1920;
@@ -29,6 +29,11 @@ function clampSnapshotSize(width, height) {
     const scale = SNAPSHOT_MAX_EDGE / maxEdge;
     return { w: Math.round(width * scale), h: Math.round(height * scale) };
 }
+function srgbHexToVec3(hex) {
+    const color = new Color(hex);
+    const { r, g, b } = color.getRGB({ r: 0, g: 0, b: 0 }, SRGBColorSpace);
+    return vec3(r, g, b);
+}
 class SnapshotScenePass extends PassNode {
     updateBefore(frame) {
         const renderer = frame.renderer;
@@ -44,7 +49,7 @@ class SnapshotScenePass extends PassNode {
         }
     }
 }
-export async function createSnapshotPipeline({ renderer, scene, camera, atmosphere = null, }) {
+export async function createSnapshotPipeline({ renderer, scene, camera, atmosphere = null, studioBackdrop, }) {
     try {
         if (renderer.init)
             await renderer.init();
@@ -74,6 +79,7 @@ export async function createSnapshotPipeline({ renderer, scene, camera, atmosphe
         }));
         const scenePassColor = scenePass.getTextureNode('output');
         const scenePassDepth = scenePass.getTextureNode('depth');
+        const sampleEdgeDepth = createEdgeDepthSampler(scenePassDepth, camera);
         const scenePassNormal = scenePass.getTextureNode('normal');
         scenePass.getTexture('diffuseColor').type = UnsignedByteType;
         scenePass.getTexture('normal').type = UnsignedByteType;
@@ -99,7 +105,7 @@ export async function createSnapshotPipeline({ renderer, scene, camera, atmosphe
         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 aoFarFade = smoothstep(float(0.9994), float(0.9998), sampleEdgeDepth(screenUV));
         const ao = mix(denoisePass.r, float(1), aoFarFade);
         const aoRgb = scenePassColor.rgb.mul(ao);
         // Ink edges, mirroring the viewport pipeline (AO → ink → grade) so
@@ -110,7 +116,7 @@ export async function createSnapshotPipeline({ renderer, scene, camera, atmosphe
         const inkRadius = Math.max(1, Math.round(renderer.domElement.height / 1080));
         const inkedRgb = inkedEdges({
             sceneRgb: aoRgb,
-            depthTex: scenePassDepth,
+            sampleDepth: sampleEdgeDepth,
             normalTex: scenePassNormal,
             inkColor: inkColorUniform,
             radius: inkRadius,
@@ -137,11 +143,32 @@ export async function createSnapshotPipeline({ renderer, scene, camera, atmosphe
         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;
+        if (studioBackdrop) {
+            // Composite in display space: the scene gets the renderer's own output
+            // transform (tone mapping + sRGB), the backdrop is already sRGB — so
+            // the pipeline's final transform is off.
+            const { width, height } = renderer.domElement;
+            const aspect = width / height;
+            const [cx, cy] = studioBackdrop.center;
+            const radius = Math.max(...[
+                [0, 0],
+                [1, 0],
+                [0, 1],
+                [1, 1],
+            ].map(([x, y]) => Math.hypot((x - cx) * aspect, y - cy)));
+            const offset = screenUV.sub(vec2(cx, cy)).mul(vec2(aspect, 1));
+            const t = smoothstep(float(0), float(1), clamp(offset.length().div(radius), 0, 1));
+            const backdrop = mix(srgbHexToVec3(studioBackdrop.inner), srgbHexToVec3(studioBackdrop.outer), t);
+            const sceneDisplay = renderOutput(vec4(sceneRgb, 1), renderer.toneMapping, renderer.outputColorSpace).rgb;
+            pipeline.outputColorTransform = false;
+            pipeline.outputNode = fxaa(convertToTexture(vec4(mix(backdrop, sceneDisplay, alpha), 1)));
+        }
+        else {
+            // FXAA requires a texture node as input; convertToTexture renders finalOutput
+            // into an intermediate RT so FXAA can sample it with neighbour UV offsets.
+            pipeline.outputNode = fxaa(convertToTexture(finalOutput));
+        }
         // 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;
@@ -166,7 +193,7 @@ export async function createSnapshotPipeline({ renderer, scene, camera, atmosphe
                 bgProjInvUniform.value.copy(captureCamera.projectionMatrixInverse);
                 bgCamWorldUniform.value.copy(captureCamera.matrixWorld);
             },
-            capture: async ({ captureMode, cropRegion, standardSize }) => {
+            capture: async ({ captureMode, cropRegion, standardSize, mime }) => {
                 const standardW = standardSize?.w ?? THUMBNAIL_WIDTH;
                 const standardH = standardSize?.h ?? THUMBNAIL_HEIGHT;
                 const { width: captureWidth, height: captureHeight } = renderer.domElement;
@@ -184,100 +211,13 @@ export async function createSnapshotPipeline({ renderer, scene, camera, atmosphe
                 // 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') {
-                    ;
-                    ({ w: outW, h: outH } = clampSnapshotSize(captureWidth, captureHeight));
-                    const offscreen = new OffscreenCanvas(outW, outH);
-                    const ctx = offscreen.getContext('2d');
-                    if (outW !== captureWidth || outH !== captureHeight)
-                        ctx.imageSmoothingQuality = 'high';
-                    ctx.drawImage(srcCanvas, 0, 0, captureWidth, captureHeight, 0, 0, outW, outH);
-                    blob = await offscreen.convertToBlob({ type: SNAPSHOT_MIME, quality: SNAPSHOT_QUALITY });
-                }
-                else if (captureMode === 'area' && cropRegion) {
-                    const sx = Math.round(cropRegion.x * captureWidth);
-                    const sy = Math.round(cropRegion.y * captureHeight);
-                    const sourceW = Math.round(cropRegion.width * captureWidth);
-                    const sourceH = Math.round(cropRegion.height * captureHeight);
-                    ({ w: outW, h: outH } = clampSnapshotSize(sourceW, sourceH));
-                    const offscreen = new OffscreenCanvas(outW, outH);
-                    const ctx = offscreen.getContext('2d');
-                    if (outW !== sourceW || outH !== sourceH)
-                        ctx.imageSmoothingQuality = 'high';
-                    ctx.drawImage(srcCanvas, sx, sy, sourceW, sourceH, 0, 0, outW, outH);
-                    blob = await offscreen.convertToBlob({ type: SNAPSHOT_MIME, quality: SNAPSHOT_QUALITY });
-                }
-                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: SNAPSHOT_MIME, quality: SNAPSHOT_QUALITY });
-                }
-                return { blob, outW, outH };
+                return encodeCapture(renderer, renderTarget, captureWidth, captureHeight, {
+                    captureMode,
+                    cropRegion,
+                    standardW,
+                    standardH,
+                    mime,
+                });
             },
             dispose: () => {
                 pipeline.dispose();
@@ -292,3 +232,173 @@ export async function createSnapshotPipeline({ renderer, scene, camera, atmosphe
         return null;
     }
 }
+/**
+ * The frame in `renderTarget`, read back and encoded: WebGPU's 256-byte row
+ * padding undone (the WebGL fallback's bottom-up rows flipped), then cut to
+ * the capture mode — the viewport as is, an area, or the standard aspect.
+ * Shared by the post-processed pipeline and the plain one.
+ */
+async function encodeCapture(renderer, renderTarget, captureWidth, captureHeight, { captureMode, cropRegion, standardW, standardH, mime, }) {
+    const encoding = mime ? { type: mime } : { type: SNAPSHOT_MIME, quality: SNAPSHOT_QUALITY };
+    // 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') {
+        ;
+        ({ w: outW, h: outH } = clampSnapshotSize(captureWidth, captureHeight));
+        const offscreen = new OffscreenCanvas(outW, outH);
+        const ctx = offscreen.getContext('2d');
+        if (outW !== captureWidth || outH !== captureHeight)
+            ctx.imageSmoothingQuality = 'high';
+        ctx.drawImage(srcCanvas, 0, 0, captureWidth, captureHeight, 0, 0, outW, outH);
+        blob = await offscreen.convertToBlob(encoding);
+    }
+    else if (captureMode === 'area' && cropRegion) {
+        const sx = Math.round(cropRegion.x * captureWidth);
+        const sy = Math.round(cropRegion.y * captureHeight);
+        const sourceW = Math.round(cropRegion.width * captureWidth);
+        const sourceH = Math.round(cropRegion.height * captureHeight);
+        ({ w: outW, h: outH } = clampSnapshotSize(sourceW, sourceH));
+        const offscreen = new OffscreenCanvas(outW, outH);
+        const ctx = offscreen.getContext('2d');
+        if (outW !== sourceW || outH !== sourceH)
+            ctx.imageSmoothingQuality = 'high';
+        ctx.drawImage(srcCanvas, sx, sy, sourceW, sourceH, 0, 0, outW, outH);
+        blob = await offscreen.convertToBlob(encoding);
+    }
+    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(encoding);
+    }
+    return { blob, outW, outH };
+}
+/**
+ * A capture WITHOUT the post-processing stack: the scene as the renderer
+ * draws it, into an offscreen target, read back and encoded like the
+ * post-processed frames. The sheets' orthographic elevation captures use
+ * it (2026-09-10): an SSGI pass built for a second, orthographic camera
+ * never delivered a frame and held the generator's guard forever.
+ */
+export async function createPlainSnapshotPipeline({ renderer, scene, camera, }) {
+    try {
+        if (renderer.init)
+            await renderer.init();
+        const { width, height } = renderer.domElement;
+        const renderTarget = new RenderTarget(width, height, { depthBuffer: true });
+        let transparent = true;
+        const background = new Color('#ffffff');
+        return {
+            applyEnvironment: ({ theme, transparent: alpha }) => {
+                transparent = alpha;
+                background.set(getSceneTheme(theme).background);
+            },
+            capture: async ({ captureMode, cropRegion, standardSize }) => {
+                const standardW = standardSize?.w ?? THUMBNAIL_WIDTH;
+                const standardH = standardSize?.h ?? THUMBNAIL_HEIGHT;
+                const { width: captureWidth, height: captureHeight } = renderer.domElement;
+                if (renderTarget.width !== captureWidth || renderTarget.height !== captureHeight) {
+                    renderTarget.setSize(captureWidth, captureHeight);
+                }
+                const previousBackground = scene.background;
+                const previousClear = renderer.getClearColor(new Color());
+                const previousAlpha = renderer.getClearAlpha();
+                try {
+                    scene.background = null;
+                    renderer.setClearColor(background, transparent ? 0 : 1);
+                    renderer.setRenderTarget(renderTarget);
+                    // outside the frame loop the async render is the one that submits
+                    // its work and settles once the GPU took it
+                    const asyncRender = renderer.renderAsync;
+                    if (asyncRender)
+                        await asyncRender.call(renderer, scene, camera);
+                    else
+                        renderer.render(scene, camera);
+                }
+                finally {
+                    renderer.setRenderTarget(null);
+                    scene.background = previousBackground;
+                    renderer.setClearColor(previousClear, previousAlpha);
+                }
+                await Promise.resolve();
+                // a readback that never returns must not hold a caller for the session
+                return Promise.race([
+                    encodeCapture(renderer, renderTarget, captureWidth, captureHeight, {
+                        captureMode,
+                        cropRegion,
+                        standardW,
+                        standardH,
+                    }),
+                    new Promise((_, reject) => setTimeout(() => reject(new Error('the plain capture readback did not return within 12 s')), 12000)),
+                ]);
+            },
+            dispose: () => {
+                renderTarget.dispose();
+            },
+        };
+    }
+    catch (error) {
+        console.error('[thumbnail] Failed to build the plain capture pipeline.', error);
+        return null;
+    }
+}

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

@@ -1 +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"}
+{"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,CAkFvB"}

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

@@ -13,32 +13,39 @@ export function buildTerrainPerimeterFillGeometry(points, bottomY, topY, epsilon
     }
     const counterClockwise = signedArea > 0;
     const positions = [];
-    const push = (point, y) => {
+    const uvs = [];
+    const push = (point, y, u = point.x, v = point.z) => {
         positions.push(point.x, y, point.z);
+        uvs.push(u, v);
     };
+    let perimeter = 0;
     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)
+        const length = Math.hypot(b.x - a.x, b.z - a.z);
+        const ua = perimeter;
+        perimeter += length;
+        const ub = perimeter;
+        if (length < epsilon || (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);
+            push(a, topY, ua, topY);
+            push(b, by, ub, by);
+            push(a, ay, ua, ay);
+            push(a, topY, ua, topY);
+            push(b, topY, ub, topY);
+            push(b, by, ub, by);
         }
         else {
-            push(a, topY);
-            push(a, ay);
-            push(b, by);
-            push(a, topY);
-            push(b, by);
-            push(b, topY);
+            push(a, topY, ua, topY);
+            push(a, ay, ua, ay);
+            push(b, by, ub, by);
+            push(a, topY, ua, topY);
+            push(b, by, ub, by);
+            push(b, topY, ub, topY);
         }
     }
     const faces = ShapeUtils.triangulateShape(points.map((point) => new Vector2(point.x, point.z)), []);
@@ -69,6 +76,7 @@ export function buildTerrainPerimeterFillGeometry(points, bottomY, topY, epsilon
         return null;
     const geometry = new BufferGeometry();
     geometry.setAttribute('position', new Float32BufferAttribute(positions, 3));
+    geometry.setAttribute('uv', new Float32BufferAttribute(uvs, 2));
     geometry.computeVertexNormals();
     ensureRenderableGeometryAttributes(geometry);
     return geometry;

package/dist/lib/zone-geometry.d.ts

@@ -0,0 +1,11 @@
+import type { Ring } from '@pascal-app/core';
+import * as THREE from 'three';
+type ZoneFootprint = {
+    polygon: Ring;
+    holes?: Ring[];
+};
+export declare function createZoneShape({ polygon, holes }: ZoneFootprint): THREE.Shape;
+/** Vertical quads along each polygon edge (UV.y 0 at the floor, 1 at the top). */
+export declare function createZoneWallGeometry(footprint: ZoneFootprint): THREE.BufferGeometry;
+export {};
+//# sourceMappingURL=zone-geometry.d.ts.map

package/dist/lib/zone-geometry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"zone-geometry.d.ts","sourceRoot":"","sources":["../../src/lib/zone-geometry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAA;AAC5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,KAAK,aAAa,GAAG;IAAE,OAAO,EAAE,IAAI,CAAC;IAAC,KAAK,CAAC,EAAE,IAAI,EAAE,CAAA;CAAE,CAAA;AAItD,wBAAgB,eAAe,CAAC,EAAE,OAAO,EAAE,KAAU,EAAE,EAAE,aAAa,GAAG,KAAK,CAAC,KAAK,CAiBnF;AAED,kFAAkF;AAClF,wBAAgB,sBAAsB,CAAC,SAAS,EAAE,aAAa,GAAG,KAAK,CAAC,cAAc,CAiCrF"}

package/dist/lib/zone-geometry.js

@@ -0,0 +1,46 @@
+import * as THREE from 'three';
+const Y_OFFSET = 0.01;
+const ZONE_WALL_HEIGHT = 2.3;
+export function createZoneShape({ polygon, holes = [] }) {
+    const shape = new THREE.Shape();
+    const draw = (path, ring) => {
+        ring.forEach(([x, z], i) => {
+            if (i === 0)
+                path.moveTo(x, -z);
+            else
+                path.lineTo(x, -z);
+        });
+        path.closePath();
+    };
+    draw(shape, polygon);
+    for (const ring of holes) {
+        if (ring.length < 3)
+            continue;
+        const path = new THREE.Path();
+        draw(path, ring);
+        shape.holes.push(path);
+    }
+    return shape;
+}
+/** Vertical quads along each polygon edge (UV.y 0 at the floor, 1 at the top). */
+export function createZoneWallGeometry(footprint) {
+    const positions = [];
+    const uvs = [];
+    const indices = [];
+    for (const polygon of [footprint.polygon, ...(footprint.holes ?? [])]) {
+        for (let i = 0; i < polygon.length; i++) {
+            const [cx, cz] = polygon[i];
+            const [nx, nz] = polygon[(i + 1) % polygon.length];
+            const base = positions.length / 3;
+            positions.push(cx, Y_OFFSET, cz, nx, Y_OFFSET, nz, nx, Y_OFFSET + ZONE_WALL_HEIGHT, nz, cx, Y_OFFSET + ZONE_WALL_HEIGHT, cz);
+            uvs.push(0, 0, 1, 0, 1, 1, 0, 1);
+            indices.push(base, base + 1, base + 2, base, base + 2, base + 3);
+        }
+    }
+    const geometry = new THREE.BufferGeometry();
+    geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
+    geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2));
+    geometry.setIndex(indices);
+    geometry.computeVertexNormals();
+    return geometry;
+}

package/dist/store/use-item-light-pool.d.ts

@@ -1,16 +1,20 @@
-import type { AnyNodeId, Interactive, LightEffect } from '@pascal-app/core';
-export type LightRegistration = {
+import { type AnyNodeId, type Interactive, type LightEffect } from '@pascal-app/core';
+import type { Object3D, Vector3 } from 'three';
+export type LightSource = {
+    key: string;
     nodeId: AnyNodeId;
-    effect: LightEffect;
-    toggleIndex: number;
-    sliderIndex: number;
-    sliderMin: number;
-    sliderMax: number;
-    hasSlider: boolean;
+    color: string;
+    distance: number;
+    getWorldPosition: (out: Vector3) => boolean;
+    getIntensity: () => number;
+    isEligible: () => boolean;
 };
+export declare function catalogLightSource(key: string, nodeId: AnyNodeId, effect: LightEffect, interactive: Interactive, localScale?: readonly [number, number, number]): LightSource;
 type ItemLightPoolStore = {
-    registrations: Map<string, LightRegistration>;
-    register: (key: string, nodeId: AnyNodeId, effect: LightEffect, interactive: Interactive) => void;
+    registrations: Map<string, LightSource>;
+    bakedCanvases: Set<Object3D>;
+    setBakedCanvas: (scene: Object3D, active: boolean) => void;
+    register: (source: LightSource) => void;
     unregister: (key: string) => void;
 };
 export declare const useItemLightPool: import("zustand").UseBoundStore<import("zustand").StoreApi<ItemLightPoolStore>>;

package/dist/store/use-item-light-pool.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-item-light-pool.d.ts","sourceRoot":"","sources":["../../src/store/use-item-light-pool.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAiB,MAAM,kBAAkB,CAAA;AAG1F,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE,SAAS,CAAA;IACjB,MAAM,EAAE,WAAW,CAAA;IACnB,WAAW,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,KAAK,kBAAkB,GAAG;IACxB,aAAa,EAAE,GAAG,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAA;IAC7C,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,KAAK,IAAI,CAAA;IACjG,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC,CAAA;AAED,eAAO,MAAM,gBAAgB,iFAiC1B,CAAA"}
+{"version":3,"file":"use-item-light-pool.d.ts","sourceRoot":"","sources":["../../src/store/use-item-light-pool.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,WAAW,EAChB,KAAK,WAAW,EAIjB,MAAM,kBAAkB,CAAA;AACzB,OAAO,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAG9C,MAAM,MAAM,WAAW,GAAG;IACxB,GAAG,EAAE,MAAM,CAAA;IACX,MAAM,EAAE,SAAS,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,CAAA;IAChB,gBAAgB,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,OAAO,CAAA;IAC3C,YAAY,EAAE,MAAM,MAAM,CAAA;IAC1B,UAAU,EAAE,MAAM,OAAO,CAAA;CAC1B,CAAA;AAED,wBAAgB,kBAAkB,CAChC,GAAG,EAAE,MAAM,EACX,MAAM,EAAE,SAAS,EACjB,MAAM,EAAE,WAAW,EACnB,WAAW,EAAE,WAAW,EACxB,UAAU,CAAC,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,GAC7C,WAAW,CAwCb;AAED,KAAK,kBAAkB,GAAG;IACxB,aAAa,EAAE,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,CAAA;IACvC,aAAa,EAAE,GAAG,CAAC,QAAQ,CAAC,CAAA;IAC5B,cAAc,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;IAC1D,QAAQ,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAA;IACvC,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC,CAAA;AAED,eAAO,MAAM,gBAAgB,iFAkB1B,CAAA"}

package/dist/store/use-item-light-pool.js

@@ -1,30 +1,56 @@
+import { sceneRegistry, useInteractive, } from '@pascal-app/core';
 import { create } from 'zustand';
+export function catalogLightSource(key, nodeId, effect, interactive, localScale) {
+    const toggleIndex = interactive.controls.findIndex((control) => control.kind === 'toggle');
+    const sliderIndex = interactive.controls.findIndex((control) => control.kind === 'slider');
+    const slider = sliderIndex >= 0 ? interactive.controls[sliderIndex] : null;
+    return {
+        key,
+        nodeId,
+        color: effect.color,
+        distance: effect.distance ?? 0,
+        getWorldPosition: (out) => {
+            const object = sceneRegistry.nodes.get(nodeId);
+            if (!object)
+                return false;
+            if (localScale) {
+                out.set(effect.offset[0] * localScale[0], effect.offset[1] * localScale[1], effect.offset[2] * localScale[2]);
+                object.localToWorld(out);
+                return true;
+            }
+            object.getWorldPosition(out);
+            out.set(out.x + effect.offset[0], out.y + effect.offset[1], out.z + effect.offset[2]);
+            return true;
+        },
+        getIntensity: () => {
+            const values = useInteractive.getState().items[nodeId]?.controlValues;
+            if (toggleIndex >= 0 && !values?.[toggleIndex])
+                return effect.intensityRange[0];
+            const raw = slider ? (values?.[sliderIndex] ?? slider.min) : 1;
+            const fraction = slider && slider.max > slider.min ? (raw - slider.min) / (slider.max - slider.min) : 1;
+            return (effect.intensityRange[0] + (effect.intensityRange[1] - effect.intensityRange[0]) * fraction);
+        },
+        isEligible: () => {
+            const values = useInteractive.getState().items[nodeId]?.controlValues;
+            return toggleIndex < 0 || Boolean(values?.[toggleIndex]);
+        },
+    };
+}
 export const useItemLightPool = create((set) => ({
     registrations: new Map(),
-    register: (key, nodeId, effect, interactive) => {
-        const toggleIndex = interactive.controls.findIndex((c) => c.kind === 'toggle');
-        const sliderIndex = interactive.controls.findIndex((c) => c.kind === 'slider');
-        const sliderControl = sliderIndex >= 0 ? interactive.controls[sliderIndex] : null;
-        const registration = {
-            nodeId,
-            effect,
-            toggleIndex,
-            sliderIndex,
-            hasSlider: sliderControl !== null,
-            sliderMin: sliderControl?.min ?? 0,
-            sliderMax: sliderControl?.max ?? 1,
-        };
-        set((s) => {
-            const next = new Map(s.registrations);
-            next.set(key, registration);
-            return { registrations: next };
-        });
-    },
-    unregister: (key) => {
-        set((s) => {
-            const next = new Map(s.registrations);
-            next.delete(key);
-            return { registrations: next };
-        });
-    },
+    bakedCanvases: new Set(),
+    setBakedCanvas: (scene, active) => set((state) => {
+        const bakedCanvases = new Set(state.bakedCanvases);
+        if (active)
+            bakedCanvases.add(scene);
+        else
+            bakedCanvases.delete(scene);
+        return { bakedCanvases };
+    }),
+    register: (source) => set((state) => ({ registrations: new Map(state.registrations).set(source.key, source) })),
+    unregister: (key) => set((state) => {
+        const registrations = new Map(state.registrations);
+        registrations.delete(key);
+        return { registrations };
+    }),
 }));