soft shadows & lighting

packages/viewer/src/components/renderers/item/item-renderer.tsx

@@ -68,15 +68,18 @@ const ModelRenderer = ({ node }: { node: ItemNode }) => {
           return
         }
 
-        mesh.castShadow = true
-        mesh.receiveShadow = true
+        let hasGlass = false;
 
         // Handle both single material and material array cases
         if (Array.isArray(mesh.material)) {
           mesh.material = mesh.material.map((mat) => getMaterialForOriginal(mat))
+          hasGlass = mesh.material.some(mat => mat.name === 'glass');
         } else {
           mesh.material = getMaterialForOriginal(mesh.material)
+          hasGlass = mesh.material.name === 'glass';
         }
+        mesh.castShadow = !hasGlass
+        mesh.receiveShadow = !hasGlass
       }
     })
   }, [scene])

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

@@ -1,13 +1,14 @@
 'use client'
 
 import { CeilingSystem, ItemSystem, RoofSystem, SlabSystem, WallSystem } from '@pascal-app/core'
-import { Bvh, Environment } from '@react-three/drei'
+import { Bvh } from '@react-three/drei'
 import { Canvas, extend, type ThreeToJSXElements } from '@react-three/fiber'
 import * as THREE from 'three/webgpu'
 import { GuideSystem } from '../../systems/guide/guide-system'
 import { LevelSystem } from '../../systems/level/level-system'
 import { ScanSystem } from '../../systems/scan/scan-system'
 import { SceneRenderer } from '../renderers/scene-renderer'
+import { Lights } from './lights'
 import PostProcessing from './post-processing'
 import { SelectionManager } from './selection-manager'
 import { ViewerCamera } from './viewer-camera'
@@ -30,16 +31,22 @@ const Viewer: React.FC<ViewerProps> = ({ children, selectionManager = 'default'
       gl={async (props) => {
         const renderer = new THREE.WebGPURenderer(props as any)
         await renderer.init()
+        renderer.toneMapping = THREE.ACESFilmicToneMapping
+        renderer.toneMappingExposure = 1.2
         return renderer
       }}
-        shadows
+      shadows={{
+        type: THREE.PCFShadowMap,
+        enabled: true,
+      }}
       camera={{ position: [50, 50, 50], fov: 50 }}
     >
       <color attach="background" args={['#ececec']} />
       <ViewerCamera />
 
-        <directionalLight position={[10, 10, 5]} intensity={0.5} castShadow />
-        <Environment preset="sunset" environmentIntensity={0.3} />
+      {/* <directionalLight position={[10, 10, 5]} intensity={0.5} castShadow
+        /> */}
+      <Lights />
       <Bvh>
         <SceneRenderer />
       </Bvh>

packages/viewer/src/components/viewer/lights.tsx

@@ -0,0 +1,41 @@
+import { Environment } from '@react-three/drei'
+import { useRef } from 'react'
+import type { DirectionalLight, OrthographicCamera } from 'three/webgpu'
+
+export function Lights() {
+  const lightRef = useRef<DirectionalLight>(null)
+  const shadowCamera = useRef<OrthographicCamera>(null)
+  const shadowCameraSize = 50 // The "area" around the camera to shadow
+
+  // useHelper(lightRef, DirectionalLightHelper, 1, 'red')
+  // useHelper(shadowCamera, CameraHelper)
+
+  return (
+    <>
+    <directionalLight
+      ref={lightRef}
+      position={[10, 10, 10]}
+      castShadow
+      intensity={1}
+      shadow-bias={-0.002}
+      shadow-normalBias={0.3}
+      shadow-mapSize={[1024, 1024]}
+      shadow-radius={3}
+    >
+      <orthographicCamera
+        ref={shadowCamera}
+        attach="shadow-camera"
+        near={1}
+        far={100}
+        left={-shadowCameraSize}
+        right={shadowCameraSize}
+        top={shadowCameraSize}
+        bottom={-shadowCameraSize}
+      />
+    </directionalLight>
+
+          <ambientLight intensity={0.2} />
+          <Environment preset="sunset" environmentIntensity={0.4} />
+    </>
+  )
+}