From 398ff4ea139adc09838c91139d9da8483246a535 Mon Sep 17 00:00:00 2001
From: TheCodeTherapy <me@mgz.me>
Date: Mon, 14 Aug 2023 11:58:39 +0100
Subject: [PATCH] fixes shadow acne issue caused by the lack of normalBias
 adjustments on the scene

---
 example/web-client/src/Sun.ts   | 22 ++++++++++++++++------
 example/web-client/src/index.ts |  2 +-
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/example/web-client/src/Sun.ts b/example/web-client/src/Sun.ts
index 2a2b3506..11d0514c 100644
--- a/example/web-client/src/Sun.ts
+++ b/example/web-client/src/Sun.ts
@@ -1,9 +1,11 @@
-import { DirectionalLight, Group, OrthographicCamera, Vector3 } from "three";
+import { CameraHelper, DirectionalLight, Group, OrthographicCamera, Vector3 } from "three";
 
 export class Sun extends Group {
+  private readonly debug: boolean = false;
   private readonly sunOffset: Vector3 = new Vector3(50, 80, 35);
-  private readonly shadowResolution: number = 16384;
-  private readonly shadowCamFrustum: number = 150;
+  private readonly shadowResolution: number = 8192;
+  private readonly shadowCamFrustum: number = 50;
+  private readonly camHelper: CameraHelper | null = null;
 
   private readonly shadowCamera: OrthographicCamera;
   private readonly directionalLight: DirectionalLight;
@@ -17,10 +19,15 @@ export class Sun extends Group {
       this.shadowCamFrustum,
       this.shadowCamFrustum,
       -this.shadowCamFrustum,
-      0.5,
-      500,
+      0.1,
+      200,
     );
-    this.directionalLight = new DirectionalLight(0xffffff, 0.8);
+    if (this.debug === true) {
+      this.camHelper = new CameraHelper(this.shadowCamera);
+    }
+    this.directionalLight = new DirectionalLight(0xffffff, 0.5);
+    this.directionalLight.shadow.normalBias = 0.05;
+    this.directionalLight.shadow.radius = 1.5;
     this.directionalLight.shadow.camera = this.shadowCamera;
     this.directionalLight.shadow.mapSize.set(this.shadowResolution, this.shadowResolution);
     this.directionalLight.castShadow = true;
@@ -28,6 +35,9 @@ export class Sun extends Group {
     this.updateCharacterPosition(new Vector3(0, 0, 0));
 
     this.add(this.directionalLight);
+    if (this.debug === true && this.camHelper instanceof CameraHelper) {
+      this.add(this.camHelper);
+    }
   }
 
   public updateCharacterPosition(position: Vector3 | undefined) {
diff --git a/example/web-client/src/index.ts b/example/web-client/src/index.ts
index 63d82e51..6bce0a15 100644
--- a/example/web-client/src/index.ts
+++ b/example/web-client/src/index.ts
@@ -40,7 +40,7 @@ export class App {
 
   constructor() {
     this.scene = new Scene();
-    this.scene.fog = new Fog(0xc7cad0, 30, 150);
+    this.scene.fog = new Fog(0xc7cad0, 30, 210);
     this.collisionsManager = new CollisionsManager(this.scene);
 
     this.audioListener = new AudioListener();