Cascading Shadows

fission/src/mirabuf/MirabufInstance.ts

@@ -149,8 +149,10 @@ class MirabufInstance {
                         opacity: opacity,
                         transparent: opacity < 1.0,
                     })
+                    World.SceneRenderer.SetupMaterial(material)
                 } else if (materialStyle == MaterialStyle.Normals) {
                     material = new THREE.MeshNormalMaterial()
+                    World.SceneRenderer.SetupMaterial(material)
                 } else if (materialStyle == MaterialStyle.Toon) {
                     material = World.SceneRenderer.CreateToonMaterial(hex, 5)
                     console.debug("Toon Material")

fission/src/systems/scene/SceneRenderer.ts

@@ -12,8 +12,9 @@
 import InputSystem from "../input/InputSystem"
 
 import { PixelSpaceCoord, SceneOverlayEvent, SceneOverlayEventKey } from "@/ui/components/SceneOverlayEvents"
-import {} from "@/ui/components/SceneOverlayEvents"
 import PreferencesSystem from "../preferences/PreferencesSystem"
+import { CSM } from "three/examples/jsm/csm/CSM.js"
+import { CSMHelper } from "three/examples/jsm/csm/CSMHelper.js"
 
 const CLEAR_COLOR = 0x121212
 const GROUND_COLOR = 0x4066c7
@@ -34,6 +35,9 @@
     private _orbitControls: OrbitControls
     private _transformControls: Map<TransformControls, number> // maps all rendered transform controls to their size
 
+    private _csm: CSM
+    // private _csmHelper: CSMHelper
+
     public get sceneObjects() {
         return this._sceneObjects
     }
@@ -74,31 +78,43 @@
         this._renderer.shadowMap.type = THREE.PCFSoftShadowMap
         this._renderer.setSize(window.innerWidth, window.innerHeight)
 
-        const directionalLight = new THREE.DirectionalLight(0xffffff, 3.0)
-        directionalLight.position.set(-1.0, 3.0, 2.0)
-        directionalLight.castShadow = true
-        this._scene.add(directionalLight)
-
+        // this._light = new CascadingShadows(this._mainCamera, this._scene, this._renderer)
         const shadowMapSize = Math.min(4096, this._renderer.capabilities.maxTextureSize)
-        const shadowCamSize = 15
-        console.debug(`Shadow Map Size: ${shadowMapSize}`)
-
-        directionalLight.shadow.camera.top = shadowCamSize
-        directionalLight.shadow.camera.bottom = -shadowCamSize
-        directionalLight.shadow.camera.left = -shadowCamSize
-        directionalLight.shadow.camera.right = shadowCamSize
-        directionalLight.shadow.mapSize = new THREE.Vector2(shadowMapSize, shadowMapSize)
-        directionalLight.shadow.blurSamples = 16
-        directionalLight.shadow.normalBias = 0.01
-        directionalLight.shadow.bias = 0.0
+        this._csm = new CSM({
+            maxFar: 30,
+            cascades: 3,
+            mode: 'custom',
+            parent: this._scene,
+            shadowMapSize: shadowMapSize,
+            lightDirection: new THREE.Vector3( 0.5, -0.5, 0.5 ).normalize(),
+            lightIntensity: 3,
+            camera: this._mainCamera,
+            customSplitsCallback: (cascades: number, near: number, far: number, breaks: number[]) => {
+                const blend = 0.4;
+                for (let i = 1; i < cascades; i++) {
+                    const uniformFactor = (near + (far - near) * i / cascades) / far;
+                    const logarithmicFactor = (near * (far / near) ** (i / cascades)) / far;
+                    const combinedFactor = uniformFactor * (1 - blend) + logarithmicFactor * blend;
+
+                    breaks.push(combinedFactor);
+                }
+
+                breaks.push(1);
+            }
+        })
+        this._csm.fade = true
+
+        // this._csmHelper = new CSMHelper(this._csm)
+        // this._csmHelper.visible = true
+        // this._scene.add(this._csmHelper)
 
         const ambientLight = new THREE.AmbientLight(0xffffff, 0.1)
         this._scene.add(ambientLight)
 
         const ground = new THREE.Mesh(new THREE.BoxGeometry(10, 1, 10), this.CreateToonMaterial(GROUND_COLOR))
         ground.position.set(0.0, -2.0, 0.0)
         ground.receiveShadow = true
-        ground.castShadow = true
+        ground.castShadow = false
         this._scene.add(ground)
 
         // Adding spherical skybox mesh
@@ -130,6 +146,11 @@
         // Orbit controls
         this._orbitControls = new OrbitControls(this._mainCamera, this._renderer.domElement)
         this._orbitControls.update()
+
+        const cube = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), this.CreateToonMaterial())
+        cube.castShadow = true
+        cube.receiveShadow = true
+        this._scene.add(cube)
     }
 
     public UpdateCanvasSize() {
@@ -144,6 +165,11 @@
             obj.Update()
         })
 
+        this._mainCamera.updateMatrixWorld()
+
+        this._csm.update()
+        // this._csmHelper.update()
+
         this._skybox.position.copy(this._mainCamera.position)
 
         const mainCameraFovRadians = (Math.PI * (this._mainCamera.fov * 0.5)) / 180
@@ -189,6 +215,7 @@
     public CreateSphere(radius: number, material?: THREE.Material | undefined): THREE.Mesh {
         const geo = new THREE.SphereGeometry(radius)
         if (material) {
+            this._csm.setupMaterial(material)
             return new THREE.Mesh(geo, material)
         } else {
             return new THREE.Mesh(geo, this.CreateToonMaterial())
@@ -203,10 +230,12 @@
         }
         const gradientMap = new THREE.DataTexture(colors, colors.length, 1, format)
         gradientMap.needsUpdate = true
-        return new THREE.MeshToonMaterial({
+        const material = new THREE.MeshToonMaterial({
             color: color,
             gradientMap: gradientMap,
         })
+        this._csm.setupMaterial(material)
+        return material
     }
 
     /**
@@ -349,6 +378,10 @@
     public RemoveObject(obj: THREE.Object3D) {
         this._scene.remove(obj)
     }
+
+    public SetupMaterial(material: THREE.Material) {
+        this._csm.setupMaterial(material)
+    }
 }
 
 export default SceneRenderer