@pascal-app/editor 0.8.0 → 0.9.2

package/src/components/editor/thumbnail-generator.tsx

@@ -1,7 +1,18 @@
 'use client'
 
 import { emitter, sceneRegistry } from '@pascal-app/core'
-import { SSGI_PARAMS, snapLevelsToTruePositions, useViewer } from '@pascal-app/viewer'
+import {
+  backdropGradient,
+  deepSkyColor,
+  GRID_LAYER,
+  getSceneTheme,
+  horizonHazeColor,
+  packNormalToRGB,
+  SSGI_PARAMS,
+  snapLevelsToTruePositions,
+  unpackRGBToNormal,
+  useViewer,
+} from '@pascal-app/viewer'
 import type { CameraControls } from '@react-three/drei'
 import { useThree } from '@react-three/fiber'
 import { useCallback, useEffect, useRef } from 'react'
@@ -11,16 +22,18 @@ 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 {
-  colorToDirection,
   convertToTexture,
   diffuseColor,
-  directionToColor,
   float,
+  mix,
   mrt,
   normalView,
   output,
   pass,
   sample,
+  screenUV,
+  smoothstep,
+  uniform,
   vec4,
 } from 'three/tsl'
 import { RenderPipeline, RenderTarget, type WebGPURenderer } from 'three/webgpu'
@@ -54,6 +67,18 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
   const pipelineRef = useRef<RenderPipeline | null>(null)
   const renderTargetRef = useRef<RenderTarget | null>(null)
 
+  // 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 = useRef(uniform(new THREE.Color('#ffffff')))
+  const bgSkyUniform = useRef(uniform(new THREE.Color('#ffffff')))
+  const bgSkyDeepUniform = useRef(uniform(new THREE.Color('#ffffff')))
+  const bgHazeUniform = useRef(uniform(new THREE.Color('#ffffff')))
+  const bgProjInvUniform = useRef(uniform(new THREE.Matrix4()))
+  const bgCamWorldUniform = useRef(uniform(new THREE.Matrix4()))
+  const bgMixUniform = useRef(uniform(1))
+
   useEffect(() => {
     onThumbnailCaptureRef.current = onThumbnailCapture
   }, [onThumbnailCapture])
@@ -62,6 +87,7 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
   useEffect(() => {
     const cam = new THREE.PerspectiveCamera(60, THUMBNAIL_WIDTH / THUMBNAIL_HEIGHT, 0.1, 1000)
     cam.layers.disable(EDITOR_LAYER)
+    cam.layers.disable(GRID_LAYER)
     thumbnailCameraRef.current = cam
 
     let mounted = true
@@ -73,13 +99,13 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
 
         // 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 EDITOR_LAYER objects are filtered.
+        // pass() also respects camera.layers, so EDITOR_LAYER + GRID_LAYER objects are filtered.
         const scenePass = pass(scene, cam)
         scenePass.setMRT(
           mrt({
             output,
             diffuseColor,
-            normal: directionToColor(normalView),
+            normal: packNormalToRGB(normalView),
           }),
         )
 
@@ -90,7 +116,7 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
         scenePass.getTexture('diffuseColor').type = UnsignedByteType
         scenePass.getTexture('normal').type = UnsignedByteType
 
-        const sceneNormal = sample((uv) => colorToDirection(scenePassNormal.sample(uv)))
+        const sceneNormal = sample((uv) => unpackRGBToNormal(scenePassNormal.sample(uv)))
 
         const giPass = ssgi(scenePassColor, scenePassDepth, sceneNormal, cam as any)
         giPass.sliceCount.value = SSGI_PARAMS.sliceCount
@@ -105,14 +131,49 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
         giPass.useScreenSpaceSampling.value = SSGI_PARAMS.useScreenSpaceSampling
         giPass.useTemporalFiltering = SSGI_PARAMS.useTemporalFiltering
 
-        const giTexture = (giPass as any).getTextureNode()
-        const aoAsRgb = vec4(giTexture.a, giTexture.a, giTexture.a, float(1))
+        // r185: SSGI's AO lives in its own single-channel texture (getAONode)
+        // rather than the alpha of one packed rgba texture.
+        const aoTexture = (giPass as any).getAONode()
+        const aoAsRgb = vec4(aoTexture.r, aoTexture.r, aoTexture.r, float(1))
         const denoisePass = denoise(aoAsRgb, scenePassDepth, sceneNormal, cam)
         denoisePass.index.value = 0
         denoisePass.radius.value = 4
 
-        const ao = (denoisePass as any).r
-        const finalOutput = vec4(scenePassColor.rgb.mul(ao), scenePassColor.a)
+        // 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 as any).r, float(1), aoFarFade)
+        const sceneRgb = scenePassColor.rgb.mul(ao)
+
+        // 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,
+        ) as any
+        const viewRay = (bgProjInvUniform.current as any).mul(ndc)
+        const worldDir = (bgCamWorldUniform.current as any)
+          .mul(vec4(viewRay.xyz, 0))
+          .xyz.normalize()
+        const bgGradient = backdropGradient({
+          dirY: worldDir.y,
+          background: bgColorUniform.current,
+          haze: bgHazeUniform.current,
+          sky: bgSkyUniform.current,
+          skyDeep: bgSkyDeepUniform.current,
+        })
+        const alpha = scenePassColor.a
+        const finalOutput = vec4(
+          mix(sceneRgb, mix(bgGradient, sceneRgb, alpha), bgMixUniform.current),
+          mix(alpha, float(1), bgMixUniform.current),
+        )
 
         // FXAA requires a texture node as input; convertToTexture renders finalOutput
         // into an intermediate RT so FXAA can sample it with neighbour UV offsets.
@@ -150,7 +211,11 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
       snapLevels: boolean,
       captureMode?: 'standard' | 'viewport' | 'area',
       cropRegion?: { x: number; y: number; width: number; height: number },
+      standardSize?: { w: number; h: number },
+      transparent = false,
     ) => {
+      const standardW = standardSize?.w ?? THUMBNAIL_WIDTH
+      const standardH = standardSize?.h ?? THUMBNAIL_HEIGHT
       if (isGenerating.current) return
       if (!onThumbnailCaptureRef.current) return
 
@@ -172,6 +237,21 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
         const { width, height } = gl.domElement
         thumbnailCamera.aspect = width / height
         thumbnailCamera.updateProjectionMatrix()
+        // 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.
+        thumbnailCamera.updateMatrixWorld()
+
+        const theme = getSceneTheme(useViewer.getState().sceneTheme)
+        bgColorUniform.current.value.set(theme.background)
+        bgSkyUniform.current.value.set(theme.backgroundSky ?? theme.background)
+        bgSkyDeepUniform.current.value.set(deepSkyColor(theme.backgroundSky ?? theme.background))
+        bgHazeUniform.current.value.set(
+          horizonHazeColor(theme.backgroundSky ?? theme.background, theme.appearance),
+        )
+        bgProjInvUniform.current.value.copy(thumbnailCamera.projectionMatrixInverse)
+        bgCamWorldUniform.current.value.copy(thumbnailCamera.matrixWorld)
+        bgMixUniform.current.value = transparent ? 0 : 1
 
         // Capture camera data for snapshot storage
         const pos = mainCamera.position
@@ -201,13 +281,15 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
           restoreLevels = snapLevelsToTruePositions()
         }
 
-        // Hide scan and guide nodes directly so they are excluded from the
-        // thumbnail regardless of whether ScanSystem/GuideSystem listeners are
-        // registered. Returns a function that restores the original visibility.
+        // Hide scan, guide, and spawn nodes directly so they are excluded from
+        // the thumbnail regardless of whether ScanSystem/GuideSystem listeners
+        // are registered. Spawn renders on SCENE_LAYER for occlusion, so the
+        // thumbnail camera's layer mask can't filter it either. Returns a
+        // function that restores the original visibility.
         const restoreNodeVisibility = (() => {
           const saved = new Map<THREE.Object3D, boolean>()
-          for (const type of ['scan', 'guide'] as const) {
-            const ids = sceneRegistry.byType[type]
+          for (const type of ['scan', 'guide', 'spawn'] as const) {
+            const ids = sceneRegistry.byType[type]!
             ids.forEach((id) => {
               const node = sceneRegistry.nodes.get(id)
               if (node) {
@@ -237,18 +319,21 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
 
           // Notify other systems (wall cutouts, selection manager) to restore
           // their overrides before capture and re-apply them after.
-          emitter.emit('thumbnail:before-capture', undefined)
-          ;(renderer as any).setClearAlpha(0)
-          renderer.setRenderTarget(rt)
-          pipelineRef.current.render()
-          renderer.setRenderTarget(null)
-          emitter.emit('thumbnail:after-capture', undefined)
-
-          // Restore level positions, levelMode, and node visibility immediately after the
-          // render — before the async GPU readback.
-          restoreLevels()
-          restoreLevelMode?.()
-          restoreNodeVisibility()
+          try {
+            emitter.emit('thumbnail:before-capture', undefined)
+            ;(renderer as any).setClearAlpha(0)
+            renderer.setRenderTarget(rt)
+            pipelineRef.current.render()
+          } finally {
+            // Restore level positions, levelMode, and node visibility immediately
+            // after the render — before the async GPU readback. Runs in `finally`
+            // so a render failure can't leave helpers permanently hidden.
+            renderer.setRenderTarget(null)
+            emitter.emit('thumbnail:after-capture', undefined)
+            restoreLevels()
+            restoreLevelMode?.()
+            restoreNodeVisibility()
+          }
 
           // Read pixels from the RT asynchronously.
           // WebGPU copyTextureToBuffer aligns each row to 256 bytes, so we must
@@ -336,9 +421,9 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
             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 1920×1080 aspect ratio
+            // Standard: center-crop to the requested aspect (default 1920×1080)
             const srcAspect = width / height
-            const dstAspect = THUMBNAIL_WIDTH / THUMBNAIL_HEIGHT
+            const dstAspect = standardW / standardH
             let sx = 0,
               sy = 0,
               sWidth = width,
@@ -350,8 +435,8 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
               sHeight = Math.round(width / dstAspect)
               sy = Math.round((height - sHeight) / 2)
             }
-            outW = THUMBNAIL_WIDTH
-            outH = THUMBNAIL_HEIGHT
+            outW = standardW
+            outH = standardH
             const offscreen = new OffscreenCanvas(outW, outH)
             offscreen
               .getContext('2d')!
@@ -363,12 +448,15 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
           cameraData.resolution = { w: outW, h: outH }
         } else {
           // Fallback: plain render directly to the canvas
-          emitter.emit('thumbnail:before-capture', undefined)
-          gl.render(scene, thumbnailCamera)
-          emitter.emit('thumbnail:after-capture', undefined)
-          restoreLevels()
-          restoreLevelMode?.()
-          restoreNodeVisibility()
+          try {
+            emitter.emit('thumbnail:before-capture', undefined)
+            gl.render(scene, thumbnailCamera)
+          } finally {
+            emitter.emit('thumbnail:after-capture', undefined)
+            restoreLevels()
+            restoreLevelMode?.()
+            restoreNodeVisibility()
+          }
 
           let outW: number
           let outH: number
@@ -405,7 +493,7 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
             )
           } else {
             const srcAspect = width / height
-            const dstAspect = THUMBNAIL_WIDTH / THUMBNAIL_HEIGHT
+            const dstAspect = standardW / standardH
             let sx = 0,
               sy = 0,
               sWidth = width,
@@ -417,8 +505,8 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
               sHeight = Math.round(width / dstAspect)
               sy = Math.round((height - sHeight) / 2)
             }
-            outW = THUMBNAIL_WIDTH
-            outH = THUMBNAIL_HEIGHT
+            outW = standardW
+            outH = standardH
             const offscreen = document.createElement('canvas')
             offscreen.width = outW
             offscreen.height = outH
@@ -459,9 +547,20 @@ export const ThumbnailGenerator = ({ onThumbnailCapture }: ThumbnailGeneratorPro
     const handleGenerateThumbnail = async (event: {
       captureMode?: 'standard' | 'viewport' | 'area'
       cropRegion?: { x: number; y: number; width: number; height: number }
+      standardSize?: { w: number; h: number }
       snapLevels?: boolean
+      // Preset/item captures keep the alpha channel (their thumbnails compose
+      // onto arbitrary palette backgrounds); scene snapshots — studio renders
+      // and project thumbnails — composite the theme backdrop + sky.
+      transparent?: boolean
     }) => {
-      await generate(event.snapLevels === true, event.captureMode, event.cropRegion)
+      await generate(
+        event.snapLevels === true,
+        event.captureMode,
+        event.cropRegion,
+        event.standardSize,
+        event.transparent === true,
+      )
     }
 
     emitter.on('camera-controls:generate-thumbnail', handleGenerateThumbnail)