@pascal-app/viewer 1.0.3 → 1.0.5

package/dist/lib/snapshot-pipeline.js

@@ -1,14 +1,14 @@
-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, 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 { backdropColors, backdropGradient, flatBackdropOutput } from './backdrop';
 import { edgeColorFor, edgeOpacityScaleFor } from './edge-style';
-import { inkedEdges } from './ink-edges';
-import { getSceneTheme } from './scene-themes';
+import { createEdgeDepthSampler, inkedEdges } from './ink-edges';
+import { sceneLightingMask, scenePassMrt } from './scene-pass-mrt';
 import { packNormalToRGB, unpackRGBToNormal } from './tsl-compat';
 export const THUMBNAIL_WIDTH = 1920;
 export const THUMBNAIL_HEIGHT = 1080;
@@ -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();
@@ -59,7 +64,9 @@ export async function createSnapshotPipeline({ renderer, scene, camera, atmosphe
         const bgProjInvUniform = uniform(new Matrix4());
         const bgCamWorldUniform = uniform(new Matrix4());
         const bgMixUniform = uniform(1);
+        const flatBgMixUniform = uniform(0);
         const gradeMixUniform = uniform(0);
+        const aoMixUniform = uniform(1);
         const inkMixUniform = uniform(0);
         const inkColorUniform = uniform(new Color('#1a1d24'));
         const inkOpacityUniform = uniform(0.5);
@@ -67,20 +74,24 @@ export async function createSnapshotPipeline({ renderer, scene, camera, atmosphe
         // The scene pass owns MRT and its transparent clear, including when nested
         // inside FXAA's intermediate render target.
         const scenePass = new SnapshotScenePass('color', scene, camera);
-        scenePass.setMRT(mrt({
+        scenePass.setMRT(scenePassMrt({
             output,
             diffuseColor,
             normal: packNormalToRGB(normalView),
+            lighting: sceneLightingMask(),
         }));
         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;
+        scenePass.getTexture('lighting').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;
+        // A saved still has no later frames to hide the viewport's sampling noise.
+        giPass.sliceCount.value = 3;
+        giPass.stepCount.value = 8;
         giPass.radius.value = SSGI_PARAMS.radius;
         giPass.expFactor.value = SSGI_PARAMS.expFactor;
         giPass.thickness.value = SSGI_PARAMS.thickness;
@@ -99,18 +110,18 @@ 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);
+        const aoRgb = scenePassColor.rgb.mul(mix(float(1), ao, scenePass.getTextureNode('lighting').r.mul(aoMixUniform)));
         // 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 inkRadius = uniform(1);
         const inkedRgb = inkedEdges({
             sceneRgb: aoRgb,
-            depthTex: scenePassDepth,
+            sampleDepth: sampleEdgeDepth,
             normalTex: scenePassNormal,
             inkColor: inkColorUniform,
             radius: inkRadius,
@@ -137,28 +148,63 @@ 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.
+            const flatOutput = flatBackdropOutput({
+                background: bgColorUniform,
+                foreground: sceneRgb,
+                alpha,
+                toneMapping: renderer.toneMapping,
+                outputColorSpace: renderer.outputColorSpace,
+            });
+            const antialiased = fxaa(convertToTexture(mix(finalOutput, flatOutput, flatBgMixUniform)));
+            // One FXAA pass serves both inputs; transform only the linear input at output.
+            pipeline.outputColorTransform = false;
+            pipeline.outputNode = mix(renderOutput(antialiased, renderer.toneMapping, renderer.outputColorSpace), antialiased, flatBgMixUniform);
+        }
         // 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);
+                const sceneTheme = theme;
+                const backdrop = backdropColors(sceneTheme);
                 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));
+                bgSkyUniform.value.set(backdrop.sky);
+                bgSkyDeepUniform.value.set(backdrop.skyDeep);
+                bgHazeUniform.value.set(backdrop.haze);
                 bgMixUniform.value = transparent ? 0 : 1;
-                gradeMixUniform.value = grade ? 1 : 0;
+                flatBgMixUniform.value =
+                    !transparent && !atmosphere && sceneTheme.backgroundSky === null ? 1 : 0;
+                gradeMixUniform.value = grade && sceneTheme.postprocessing?.colorGrading !== false ? 1 : 0;
+                aoMixUniform.value = sceneTheme.postprocessing?.ambientOcclusion === false ? 0 : 1;
                 // 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.
@@ -166,10 +212,11 @@ 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;
+                inkRadius.value = Math.max(1, Math.round(captureHeight / 1080));
                 // Resize RT if the canvas dimensions changed
                 if (renderTarget.width !== captureWidth || renderTarget.height !== captureHeight) {
                     renderTarget.setSize(captureWidth, captureHeight);
@@ -184,100 +231,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 +252,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(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/tsl-compat.d.ts

@@ -7,6 +7,6 @@
  * @types/three pin) once tsgo handles the 0.185 types; the `typeof` references
  * to the removed old names will fail the build as a reminder.
  */
-export declare const packNormalToRGB: (node: import("three/webgpu").Node) => import("three/webgpu").Node<"vec3">;
-export declare const unpackRGBToNormal: (node: import("three/webgpu").Node) => import("three/webgpu").Node<"vec3">;
+export declare const packNormalToRGB: (node: import("three/webgpu").Node<"vec3"> | import("three").Vector3) => import("three/webgpu").Node<"vec3">;
+export declare const unpackRGBToNormal: (node: import("three/webgpu").Node<"vec3"> | import("three/webgpu").Node<"vec4"> | import("three").Vector3) => import("three/webgpu").Node<"vec3">;
 //# sourceMappingURL=tsl-compat.d.ts.map

package/dist/lib/tsl-compat.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tsl-compat.d.ts","sourceRoot":"","sources":["../../src/lib/tsl-compat.ts"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe,4EACV,CAAA;AAClB,eAAO,MAAM,iBAAiB,4EAEX,CAAA"}
+{"version":3,"file":"tsl-compat.d.ts","sourceRoot":"","sources":["../../src/lib/tsl-compat.ts"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe,8GACV,CAAA;AAClB,eAAO,MAAM,iBAAiB,oJAEX,CAAA"}