feat: Add the ability to visualize shadow camera for debug

hiloteam · May 5, 2023 · a327a69 · a327a69
1 parent fc1749d
commit a327a69
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 14 deletions.
diff --git a/src/helper/CameraHelper.js b/src/helper/CameraHelper.js
@@ -7,12 +7,14 @@ import Vector3 from '../math/Vector3';
 import Color from '../math/Color';
 
 import constants from '../constants';
+import Matrix4 from '../math/Matrix4';
 
 const {
     LINES
 } = constants;
 
 const tempVector3 = new Vector3();
+const tempMatrix4 = new Matrix4();
 /**
  * 摄像机帮助类
  * @class
@@ -52,7 +54,8 @@ const CameraHelper = Class.create(/** @lends CameraHelper.prototype */ {
 
         this.material = new BasicMaterial({
             lightType: 'NONE',
-            diffuse: this.color || new Color(0.5, 0.5, 0.5, 1)
+            diffuse: this.color || new Color(0.5, 0.5, 0.5, 1),
+            castShadows: false
         });
 
         this.geometry = new Geometry({
@@ -80,16 +83,17 @@ const CameraHelper = Class.create(/** @lends CameraHelper.prototype */ {
         const height = 1;
         const depth = 1;
 
-        geometry.vertices.set(0, camera.unprojectVector(tempVector3.set(-width, -height, depth)));
-        geometry.vertices.set(1, camera.unprojectVector(tempVector3.set(-width, height, depth)));
-        geometry.vertices.set(2, camera.unprojectVector(tempVector3.set(width, height, depth)));
-        geometry.vertices.set(3, camera.unprojectVector(tempVector3.set(width, -height, depth)));
-        geometry.vertices.set(4, camera.unprojectVector(tempVector3.set(-width, -height, -depth)));
-        geometry.vertices.set(5, camera.unprojectVector(tempVector3.set(-width, height, -depth)));
-        geometry.vertices.set(6, camera.unprojectVector(tempVector3.set(width, height, -depth)));
-        geometry.vertices.set(7, camera.unprojectVector(tempVector3.set(width, -height, -depth)));
-
-        geometry.vertices.set(8, camera.worldMatrix.getTranslation(tempVector3));
+        tempMatrix4.multiply(camera.viewProjectionMatrix, this.worldMatrix);
+        tempMatrix4.invert();
+        geometry.vertices.set(0, tempVector3.set(-width, -height, depth).transformMat4(tempMatrix4));
+        geometry.vertices.set(1, tempVector3.set(-width, height, depth).transformMat4(tempMatrix4));
+        geometry.vertices.set(2, tempVector3.set(width, height, depth).transformMat4(tempMatrix4));
+        geometry.vertices.set(3, tempVector3.set(width, -height, depth).transformMat4(tempMatrix4));
+        geometry.vertices.set(4, tempVector3.set(-width, -height, -depth).transformMat4(tempMatrix4));
+        geometry.vertices.set(5, tempVector3.set(-width, height, -depth).transformMat4(tempMatrix4));
+        geometry.vertices.set(6, tempVector3.set(width, height, -depth).transformMat4(tempMatrix4));
+        geometry.vertices.set(7, tempVector3.set(width, -height, -depth).transformMat4(tempMatrix4));
+        geometry.vertices.set(8, tempVector3.set(0, 0, -depth).transformMat4(tempMatrix4));
     }
 });
 

diff --git a/src/light/LightShadow.js b/src/light/LightShadow.js
@@ -8,6 +8,7 @@ import GeometryMaterial from '../material/GeometryMaterial';
 import Color from '../math/Color';
 import Matrix4 from '../math/Matrix4';
 import constants from '../constants';
+import CameraHelper from '../helper/CameraHelper';
 
 const {
     DEPTH,
@@ -71,7 +72,7 @@ const LightShadow = Class.create(/** @lends LightShadow.prototype */{
         this.camera.lookAt(light.direction);
 
         if (this.cameraInfo) {
-            this.updateCustumCamera(this.cameraInfo);
+            this.updateCustomCamera(this.cameraInfo, currentCamera);
         } else {
             const geometry = currentCamera.getGeometry();
             if (geometry) {
@@ -90,17 +91,25 @@ const LightShadow = Class.create(/** @lends LightShadow.prototype */{
 
         this.camera.updateViewMatrix();
     },
-    updateCustumCamera(cameraInfo) {
+    updateCustomCamera(cameraInfo, currentCamera) {
         for (let name in cameraInfo) {
             this.camera[name] = cameraInfo[name];
         }
+
+        if (!cameraInfo.far) {
+            this.camera.far = currentCamera.far;
+        }
+
+        if (!cameraInfo.near) {
+            this.camera.near = currentCamera.near;
+        }
     },
     updateSpotLightCamera(currentCamera) {
         const light = this.light;
         this.camera.lookAt(light.direction);
 
         if (this.cameraInfo) {
-            this.updateCustumCamera(this.cameraInfo);
+            this.updateCustomCamera(this.cameraInfo, currentCamera);
         } else {
             this.camera.fov = light.outerCutoff * 2;
             this.camera.near = 0.01;
@@ -118,6 +127,7 @@ const LightShadow = Class.create(/** @lends LightShadow.prototype */{
                 this.camera = new PerspectiveCamera();
             }
             this.camera.addTo(this.light);
+            this._createCameraHelper();
         }
 
         if (this.light.isDirty || this._cameraMatrixVersion !== currentCamera.matrixVersion) {
@@ -170,6 +180,25 @@ const LightShadow = Class.create(/** @lends LightShadow.prototype */{
         this.renderer.on('afterRender', () => {
             this.framebuffer.render(0, 0.7, 0.3, 0.3);
         });
+    },
+    _createCameraHelper() {
+        if (!this.debug) {
+            return;
+        }
+
+        const {
+            light,
+            camera,
+        } = this;
+
+        if (!this._cameraHelper) {
+            this._cameraHelper = new CameraHelper({
+                camera,
+                color: new Color(0, 1, 0),
+            });
+
+            light.addChild(this._cameraHelper);
+        }
     }
 });