fix: harden viewer/editor renderer init and error handling (#133)

packages/viewer/src/components/viewer/index.tsx

@@ -64,20 +64,18 @@ interface ViewerProps {
   selectionManager?: 'default' | 'custom'
 }
 
-const Viewer: React.FC<ViewerProps> = ({
-  children,
-  selectionManager = 'default',
-}) => {
+const Viewer: React.FC<ViewerProps> = ({ children, selectionManager = 'default' }) => {
   const theme = useViewer((state) => state.theme)
 
   return (
     <Canvas
       dpr={[1, 1.5]}
       className={`transition-colors duration-700 ${theme === 'dark' ? 'bg-[#1f2433]' : 'bg-[#fafafa]'}`}
-      gl={(props) => {
+      gl={async (props) => {
         const renderer = new THREE.WebGPURenderer(props as any)
         renderer.toneMapping = THREE.ACESFilmicToneMapping
         renderer.toneMappingExposure = 0.9
+        await renderer.init()
         return renderer
       }}
       shadows={{

packages/viewer/src/components/viewer/post-processing.tsx

@@ -27,7 +27,7 @@ import useViewer from '../../store/use-viewer'
 // SSGI Parameters - adjust these to fine-tune global illumination and ambient occlusion
 export const SSGI_PARAMS = {
   enabled: true,
-  sliceCount: 2, 
+  sliceCount: 2,
   stepCount: 8,
   radius: 1,
   expFactor: 1.5,
@@ -43,19 +43,31 @@ export const SSGI_PARAMS = {
 const PostProcessingPasses = () => {
   const { gl: renderer, scene, camera } = useThree()
   const renderPipelineRef = useRef<RenderPipeline | null>(null)
+  const hasPipelineErrorRef = useRef(false)
   const [isInitialized, setIsInitialized] = useState(false)
 
   useEffect(() => {
     let mounted = true
+
     const initRenderer = async () => {
-      if (renderer && (renderer as any).init) {
-        await (renderer as any).init()
-      }
-      if (mounted) {
-        setIsInitialized(true)
+      try {
+        if (renderer && (renderer as any).init) {
+          await (renderer as any).init()
+        }
+
+        if (mounted) {
+          setIsInitialized(true)
+        }
+      } catch (error) {
+        console.error('[viewer] Failed to initialize renderer for post-processing.', error)
+        if (mounted) {
+          setIsInitialized(false)
+        }
       }
     }
+
     initRenderer()
+
     return () => {
       mounted = false
     }
@@ -66,123 +78,138 @@ const PostProcessingPasses = () => {
       return
     }
 
-    // Scene pass with MRT for SSGI
-    const scenePass = pass(scene, camera)
-    scenePass.setMRT(
-      mrt({
-        output: output,
-        diffuseColor: diffuseColor,
-        normal: directionToColor(normalView),
-        velocity: velocity,
-      }),
-    )
+    hasPipelineErrorRef.current = false
 
-    // Get texture outputs
-    const scenePassColor = scenePass.getTextureNode('output')
-    const scenePassDiffuse = scenePass.getTextureNode('diffuseColor')
-    const scenePassDepth = scenePass.getTextureNode('depth')
-    const scenePassNormal = scenePass.getTextureNode('normal')
-    const scenePassVelocity = scenePass.getTextureNode('velocity')
+    try {
+      // Scene pass with MRT for SSGI
+      const scenePass = pass(scene, camera)
+      scenePass.setMRT(
+        mrt({
+          output: output,
+          diffuseColor: diffuseColor,
+          normal: directionToColor(normalView),
+          velocity: velocity,
+        }),
+      )
 
-    // Optimize texture bandwidth
-    const diffuseTexture = scenePass.getTexture('diffuseColor')
-    diffuseTexture.type = UnsignedByteType
+      // Get texture outputs
+      const scenePassColor = scenePass.getTextureNode('output')
+      const scenePassDiffuse = scenePass.getTextureNode('diffuseColor')
+      const scenePassDepth = scenePass.getTextureNode('depth')
+      const scenePassNormal = scenePass.getTextureNode('normal')
+      const scenePassVelocity = scenePass.getTextureNode('velocity')
 
-    const normalTexture = scenePass.getTexture('normal')
-    normalTexture.type = UnsignedByteType
+      // Optimize texture bandwidth
+      const diffuseTexture = scenePass.getTexture('diffuseColor')
+      diffuseTexture.type = UnsignedByteType
 
-    // Extract normal from color-encoded texture
-    const sceneNormal = sample((uv) => {
-      return colorToDirection(scenePassNormal.sample(uv))
-    })
+      const normalTexture = scenePass.getTexture('normal')
+      normalTexture.type = UnsignedByteType
 
-    // SSGI Pass (cast to PerspectiveCamera for SSGI)
-    const giPass = ssgi(scenePassColor, scenePassDepth, sceneNormal, camera as any)
-    
-    
-    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
-
-    // Extract GI and AO from SSGI pass
-    const gi = giPass.rgb
-    const ao = giPass.a
-
-    // Composite: scene * AO + diffuse * GI
-    const compositePass = vec4(
-      add(scenePassColor.rgb.mul(ao), scenePassDiffuse.rgb.mul(gi)),
-      scenePassColor.a,
-    )
-
-    function generateSelectedOutlinePass() {
-      const edgeStrength = uniform(3)
-      const edgeGlow = uniform(0)
-      const edgeThickness = uniform(1)
-      const visibleEdgeColor = uniform(new Color(0xffffff))
-      const hiddenEdgeColor = uniform(new Color(0xf3ff47))
-
-      const outlinePass = outline(scene, camera, {
-        selectedObjects: useViewer.getState().outliner.selectedObjects,
-        edgeGlow,
-        edgeThickness,
+      // Extract normal from color-encoded texture
+      const sceneNormal = sample((uv) => {
+        return colorToDirection(scenePassNormal.sample(uv))
       })
-      const { visibleEdge, hiddenEdge } = outlinePass
 
-      const outlineColor = visibleEdge
-        .mul(visibleEdgeColor)
-        .add(hiddenEdge.mul(hiddenEdgeColor))
-        .mul(edgeStrength)
+      // SSGI Pass (cast to PerspectiveCamera for SSGI)
+      const giPass = ssgi(scenePassColor, scenePassDepth, sceneNormal, camera as any)
 
-      return outlineColor
+      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
+
+      // Extract GI and AO from SSGI pass
+      const gi = giPass.rgb
+      const ao = giPass.a
+
+      // Composite: scene * AO + diffuse * GI
+      const compositePass = vec4(
+        add(scenePassColor.rgb.mul(ao), scenePassDiffuse.rgb.mul(gi)),
+        scenePassColor.a,
+      )
+
+      function generateSelectedOutlinePass() {
+        const edgeStrength = uniform(3)
+        const edgeGlow = uniform(0)
+        const edgeThickness = uniform(1)
+        const visibleEdgeColor = uniform(new Color(0xffffff))
+        const hiddenEdgeColor = uniform(new Color(0xf3ff47))
+
+        const outlinePass = outline(scene, camera, {
+          selectedObjects: useViewer.getState().outliner.selectedObjects,
+          edgeGlow,
+          edgeThickness,
+        })
+        const { visibleEdge, hiddenEdge } = outlinePass
+
+        const outlineColor = visibleEdge
+          .mul(visibleEdgeColor)
+          .add(hiddenEdge.mul(hiddenEdgeColor))
+          .mul(edgeStrength)
+
+        return outlineColor
+      }
+
+      function generateHoverOutlinePass() {
+        const edgeStrength = uniform(5)
+        const edgeGlow = uniform(0.5)
+        const edgeThickness = uniform(1.5)
+        const pulsePeriod = uniform(3)
+        const visibleEdgeColor = uniform(new Color(0x00aaff))
+        const hiddenEdgeColor = uniform(new Color(0xf3ff47))
+
+        const outlinePass = outline(scene, camera, {
+          selectedObjects: useViewer.getState().outliner.hoveredObjects,
+          edgeGlow,
+          edgeThickness,
+        })
+        const { visibleEdge, hiddenEdge } = outlinePass
+
+        const period = time.div(pulsePeriod).mul(2)
+        const osc = oscSine(period).mul(0.5).add(0.5) // osc [ 0.5, 1.0 ]
+
+        const outlineColor = visibleEdge
+          .mul(visibleEdgeColor)
+          .add(hiddenEdge.mul(hiddenEdgeColor))
+          .mul(edgeStrength)
+        const outlinePulse = pulsePeriod.greaterThan(0).select(outlineColor.mul(osc), outlineColor)
+
+        return outlinePulse
+      }
+
+      const selectedOutlinePass = generateSelectedOutlinePass()
+      const hoverOutlinePass = generateHoverOutlinePass()
+
+      // Combine composite with outlines BEFORE applying TRAA
+      const compositeWithOutlines = SSGI_PARAMS.enabled
+        ? vec4(add(compositePass.rgb, selectedOutlinePass.add(hoverOutlinePass)), compositePass.a)
+        : vec4(add(scenePassColor.rgb, selectedOutlinePass.add(hoverOutlinePass)), scenePassColor.a)
+
+      // TRAA (Temporal Reprojection Anti-Aliasing) - applied AFTER combining everything
+      const finalOutput = traa(compositeWithOutlines, scenePassDepth, scenePassVelocity, camera)
+
+      const renderPipeline = new RenderPipeline(renderer as unknown as WebGPURenderer)
+      renderPipeline.outputNode = finalOutput
+      renderPipelineRef.current = renderPipeline
+    } catch (error) {
+      hasPipelineErrorRef.current = true
+      console.error(
+        '[viewer] Failed to set up post-processing pipeline. Rendering without post FX.',
+        error,
+      )
+      if (renderPipelineRef.current) {
+        renderPipelineRef.current.dispose()
+      }
+      renderPipelineRef.current = null
     }
-    function generateHoverOutlinePass() {
-      const edgeStrength = uniform(5)
-      const edgeGlow = uniform(0.5)
-      const edgeThickness = uniform(1.5)
-      const pulsePeriod = uniform(3)
-      const visibleEdgeColor = uniform(new Color(0x00aaff))
-      const hiddenEdgeColor = uniform(new Color(0xf3ff47))
-
-      const outlinePass = outline(scene, camera, {
-        selectedObjects: useViewer.getState().outliner.hoveredObjects,
-        edgeGlow,
-        edgeThickness,
-      })
-      const { visibleEdge, hiddenEdge } = outlinePass
-
-      const period = time.div(pulsePeriod).mul(2)
-      const osc = oscSine(period).mul(0.5).add(0.5) // osc [ 0.5, 1.0 ]
-
-      const outlineColor = visibleEdge
-        .mul(visibleEdgeColor)
-        .add(hiddenEdge.mul(hiddenEdgeColor))
-        .mul(edgeStrength)
-      const outlinePulse = pulsePeriod.greaterThan(0).select(outlineColor.mul(osc), outlineColor)
-      return outlinePulse
-    }
-
-    const selectedOutlinePass = generateSelectedOutlinePass()
-    const hoverOutlinePass = generateHoverOutlinePass()
-
-    // Combine composite with outlines BEFORE applying TRAA
-    const compositeWithOutlines = SSGI_PARAMS.enabled
-      ? vec4(add(compositePass.rgb, selectedOutlinePass.add(hoverOutlinePass)), compositePass.a)
-      : vec4(add(scenePassColor.rgb, selectedOutlinePass.add(hoverOutlinePass)), scenePassColor.a)
-
-    // TRAA (Temporal Reprojection Anti-Aliasing) - applied AFTER combining everything
-    const finalOutput = traa(compositeWithOutlines, scenePassDepth, scenePassVelocity, camera)
-
-    const renderPipeline = new RenderPipeline(renderer as unknown as WebGPURenderer)
-    renderPipeline.outputNode = finalOutput
-    renderPipelineRef.current = renderPipeline
 
     return () => {
       if (renderPipelineRef.current) {
@@ -193,8 +220,20 @@ const PostProcessingPasses = () => {
   }, [renderer, scene, camera, isInitialized])
 
   useFrame(() => {
-    if (renderPipelineRef.current) {
+    if (hasPipelineErrorRef.current || !renderPipelineRef.current) {
+      return
+    }
+
+    try {
       renderPipelineRef.current.render()
+    } catch (error) {
+      hasPipelineErrorRef.current = true
+      console.error(
+        '[viewer] Post-processing render pass failed. Disabling post FX for this session.',
+        error,
+      )
+      renderPipelineRef.current.dispose()
+      renderPipelineRef.current = null
     }
   }, 1)
 

packages/viewer/src/hooks/use-gltf-ktx2.tsx

@@ -1,19 +1,39 @@
-import { useGLTF } from "@react-three/drei"
-import { useThree } from "@react-three/fiber"
-import { KTX2Loader } from "three/examples/jsm/Addons.js"
-import { MeshoptDecoder } from "three/examples/jsm/libs/meshopt_decoder.module.js"
+import { useGLTF } from '@react-three/drei'
+import { useThree } from '@react-three/fiber'
+import { KTX2Loader } from 'three/examples/jsm/Addons.js'
+import { MeshoptDecoder } from 'three/examples/jsm/libs/meshopt_decoder.module.js'
 
 const ktx2LoaderInstance = new KTX2Loader()
 ktx2LoaderInstance.setTranscoderPath('https://cdn.jsdelivr.net/gh/pmndrs/drei-assets@master/basis/')
+const ktx2ConfiguredRenderers = new WeakSet<object>()
+const ktx2WarningLoggedRenderers = new WeakSet<object>()
 
 const useGLTFKTX2 = (path: string): ReturnType<typeof useGLTF> => {
   const gl = useThree((state) => state.gl)
 
   return useGLTF(path, true, true, (loader) => {
-    ktx2LoaderInstance.detectSupport(gl)
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    loader.setKTX2Loader(ktx2LoaderInstance as any)
+    const renderer = gl as unknown as object
+
+    if (!ktx2ConfiguredRenderers.has(renderer)) {
+      try {
+        ktx2LoaderInstance.detectSupport(gl)
+        ktx2ConfiguredRenderers.add(renderer)
+      } catch (error) {
+        // Some WebGPU flows can transiently call this before backend init.
+        // Avoid crashing the whole scene; scans may render without KTX2 on this pass.
+        if (!ktx2WarningLoggedRenderers.has(renderer)) {
+          console.warn('[viewer] Skipping KTX2 support detection for now.', error)
+          ktx2WarningLoggedRenderers.add(renderer)
+        }
+      }
+    }
+
+    if (ktx2ConfiguredRenderers.has(renderer)) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      loader.setKTX2Loader(ktx2LoaderInstance as any)
+    }
+
     loader.setMeshoptDecoder(MeshoptDecoder)
   })
 }
-export { useGLTFKTX2 }
+export { useGLTFKTX2 }