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'
@@ -26,38 +27,44 @@ interface ViewerProps {
 const Viewer: React.FC<ViewerProps> = ({ children, selectionManager = 'default' }) => {
   return (
     <Canvas
-        className={'bg-[#303035]'}
-        gl={async (props) => {
-          const renderer = new THREE.WebGPURenderer(props as any)
-          await renderer.init()
-          return renderer
-        }}
-        shadows
-        camera={{ position: [50, 50, 50], fov: 50 }}
-      >
-        <color attach="background" args={['#ececec']} />
-        <ViewerCamera />
+      className={'bg-[#303035]'}
+      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={{
+        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} />
-        <Bvh>
-          <SceneRenderer />
-        </Bvh>
+      {/* <directionalLight position={[10, 10, 5]} intensity={0.5} castShadow
+        /> */}
+      <Lights />
+      <Bvh>
+        <SceneRenderer />
+      </Bvh>
 
-        {/* Default Systems */}
-        <LevelSystem />
-        <GuideSystem />
-        <ScanSystem />
-        {/* Core systems */}
-        <CeilingSystem />
-        <ItemSystem />
-        <RoofSystem />
-        <SlabSystem />
-        <WallSystem />
-        <PostProcessing />
+      {/* Default Systems */}
+      <LevelSystem />
+      <GuideSystem />
+      <ScanSystem />
+      {/* Core systems */}
+      <CeilingSystem />
+      <ItemSystem />
+      <RoofSystem />
+      <SlabSystem />
+      <WallSystem />
+      <PostProcessing />
 
-        {selectionManager === 'default' && <SelectionManager />}
-        {children}
+      {selectionManager === 'default' && <SelectionManager />}
+      {children}
     </Canvas>
   )
 }

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} />
+    </>
+  )
+}