WebGLRenderer: Move `ReversedCoordinateSystem` to `camera.reversedDepth` (#31391)

* move `ReversedCoordinateSystem` to `camera.reversedDepth`

* update

examples/webgl_reverse_depth_buffer.html

@@ -130,7 +130,7 @@
 				camera.position.z = 12;
 
 				reversedCamera = camera.clone();
-				reversedCamera.coordinateSystem = THREE.ReversedCoordinateSystem;
+				reversedCamera.reversedDepth = true;
 
 				scene = new THREE.Scene();
 

examples/webgl_shadowmap.html

@@ -110,7 +110,7 @@
 
 				if ( renderer.capabilities.reverseDepthBuffer ) {
 
-					camera.coordinateSystem = THREE.ReversedCoordinateSystem;
+					camera.reversedDepth = true;
 					camera.updateProjectionMatrix();
 
 				}

src/cameras/Camera.js

@@ -29,6 +29,14 @@ class Camera extends Object3D {
 
 		this.type = 'Camera';
 
+		/**
+		 * The flag that indicates whether the camera uses a reversed depth buffer.
+		 *
+		 * @type {boolean}
+		 * @default false
+		 */
+		this.reversedDepth = false;
+
 		/**
 		 * The inverse of the camera's world matrix.
 		 *

src/cameras/OrthographicCamera.js

@@ -216,7 +216,7 @@ class OrthographicCamera extends Camera {
 
 		}
 
-		this.projectionMatrix.makeOrthographic( left, right, top, bottom, this.near, this.far, this.coordinateSystem );
+		this.projectionMatrix.makeOrthographic( left, right, top, bottom, this.near, this.far, this.coordinateSystem, this.reversedDepth );
 
 		this.projectionMatrixInverse.copy( this.projectionMatrix ).invert();
 

src/cameras/PerspectiveCamera.js

@@ -374,7 +374,7 @@ class PerspectiveCamera extends Camera {
 		const skew = this.filmOffset;
 		if ( skew !== 0 ) left += near * skew / this.getFilmWidth();
 
-		this.projectionMatrix.makePerspective( left, left + width, top, top - height, near, this.far, this.coordinateSystem );
+		this.projectionMatrix.makePerspective( left, left + width, top, top - height, near, this.far, this.coordinateSystem, this.reversedDepth );
 
 		this.projectionMatrixInverse.copy( this.projectionMatrix ).invert();
 

src/constants.js

@@ -1564,7 +1564,7 @@ export const GLSL1 = '100';
 export const GLSL3 = '300 es';
 
 /**
- * WebGL coordinate system [-1, 1].
+ * WebGL coordinate system.
  *
  * @type {number}
  * @constant
@@ -1572,23 +1572,13 @@ export const GLSL3 = '300 es';
 export const WebGLCoordinateSystem = 2000;
 
 /**
- * WebGPU coordinate system [0, 1].
+ * WebGPU coordinate system.
  *
  * @type {number}
  * @constant
  */
 export const WebGPUCoordinateSystem = 2001;
 
-/**
- * Reversed coordinate system [1, 0].
- *
- * Used for reverse depth buffer.
- *
- * @type {number}
- * @constant
- */
-export const ReversedCoordinateSystem = 2002;
-
 /**
  * Represents the different timestamp query types.
  *

src/math/Matrix4.js

@@ -1,4 +1,4 @@
-import { WebGLCoordinateSystem, WebGPUCoordinateSystem, ReversedCoordinateSystem } from '../constants.js';
+import { WebGLCoordinateSystem, WebGPUCoordinateSystem } from '../constants.js';
 import { Vector3 } from './Vector3.js';
 
 /**
@@ -1103,9 +1103,10 @@ class Matrix4 {
 	 * @param {number} near - The distance from the camera to the near plane.
 	 * @param {number} far - The distance from the camera to the far plane.
 	 * @param {(WebGLCoordinateSystem|WebGPUCoordinateSystem)} [coordinateSystem=WebGLCoordinateSystem] - The coordinate system.
+	 * @param {boolean} [reversedDepth=false] - Whether to use a reversed depth.
 	 * @return {Matrix4} A reference to this matrix.
 	 */
-	makePerspective( left, right, top, bottom, near, far, coordinateSystem = WebGLCoordinateSystem ) {
+	makePerspective( left, right, top, bottom, near, far, coordinateSystem = WebGLCoordinateSystem, reversedDepth = false ) {
 
 		const te = this.elements;
 		const x = 2 * near / ( right - left );
@@ -1116,24 +1117,28 @@ class Matrix4 {
 
 		let c, d;
 
-		if ( coordinateSystem === WebGLCoordinateSystem ) {
+		if ( reversedDepth ) {
 
-			c = - ( far + near ) / ( far - near );
-			d = ( - 2 * far * near ) / ( far - near );
+			c = far / ( far - near ) - 1;
+			d = ( far * near ) / ( far - near );
 
-		} else if ( coordinateSystem === WebGPUCoordinateSystem ) {
+		} else {
 
-			c = - far / ( far - near );
-			d = ( - far * near ) / ( far - near );
+			if ( coordinateSystem === WebGLCoordinateSystem ) {
 
-		} else if ( coordinateSystem === ReversedCoordinateSystem ) {
+				c = - ( far + near ) / ( far - near );
+				d = ( - 2 * far * near ) / ( far - near );
 
-			c = far / ( far - near ) - 1;
-			d = ( far * near ) / ( far - near );
+			} else if ( coordinateSystem === WebGPUCoordinateSystem ) {
 
-		} else {
+				c = - far / ( far - near );
+				d = ( - far * near ) / ( far - near );
+
+			} else {
 
-			throw new Error( 'THREE.Matrix4.makePerspective(): Invalid coordinate system: ' + coordinateSystem );
+				throw new Error( 'THREE.Matrix4.makePerspective(): Invalid coordinate system: ' + coordinateSystem );
+
+			}
 
 		}
 
@@ -1157,9 +1162,10 @@ class Matrix4 {
 	 * @param {number} near - The distance from the camera to the near plane.
 	 * @param {number} far - The distance from the camera to the far plane.
 	 * @param {(WebGLCoordinateSystem|WebGPUCoordinateSystem)} [coordinateSystem=WebGLCoordinateSystem] - The coordinate system.
+	 * @param {boolean} [reversedDepth=false] - Whether to use a reversed depth.
 	 * @return {Matrix4} A reference to this matrix.
 	 */
-	makeOrthographic( left, right, top, bottom, near, far, coordinateSystem = WebGLCoordinateSystem ) {
+	makeOrthographic( left, right, top, bottom, near, far, coordinateSystem = WebGLCoordinateSystem, reversedDepth = false ) {
 
 		const te = this.elements;
 		const w = 1.0 / ( right - left );
@@ -1171,24 +1177,28 @@ class Matrix4 {
 
 		let z, zInv;
 
-		if ( coordinateSystem === WebGLCoordinateSystem ) {
+		if ( reversedDepth ) {
 
-			z = ( far + near ) * p;
-			zInv = - 2 * p;
+			z = - near * p - 1;
+			zInv = 1 * p;
 
-		} else if ( coordinateSystem === WebGPUCoordinateSystem ) {
+		} else {
 
-			z = near * p;
-			zInv = - 1 * p;
+			if ( coordinateSystem === WebGLCoordinateSystem ) {
 
-		} else if ( coordinateSystem === ReversedCoordinateSystem ) {
+				z = ( far + near ) * p;
+				zInv = - 2 * p;
 
-			z = - near * p - 1;
-			zInv = 1 * p;
+			} else if ( coordinateSystem === WebGPUCoordinateSystem ) {
 
-		} else {
+				z = near * p;
+				zInv = - 1 * p;
+
+			} else {
 
-			throw new Error( 'THREE.Matrix4.makeOrthographic(): Invalid coordinate system: ' + coordinateSystem );
+				throw new Error( 'THREE.Matrix4.makeOrthographic(): Invalid coordinate system: ' + coordinateSystem );
+
+			}
 
 		}
 

src/renderers/WebGLRenderer.js

@@ -17,8 +17,7 @@ import {
 	UnsignedInt248Type,
 	UnsignedShort4444Type,
 	UnsignedShort5551Type,
-	WebGLCoordinateSystem,
-	ReversedCoordinateSystem
+	WebGLCoordinateSystem
 } from '../constants.js';
 import { Color } from '../math/Color.js';
 import { Frustum } from '../math/Frustum.js';
@@ -2383,10 +2382,10 @@ class WebGLRenderer {
 
 				const reverseDepthBuffer = state.buffers.depth.getReversed();
 
-				if ( reverseDepthBuffer && camera.coordinateSystem !== ReversedCoordinateSystem ) {
+				if ( reverseDepthBuffer && camera.reversedDepth === false ) {
 
 					// @deprecated, r179
-					warnOnce( 'THREE.WebGLRenderer: reverseDepthBuffer must be used with camera.coordinateSystem = THREE.ReversedCoordinateSystem for correct results. Automatic conversion will be removed in r189.' );
+					warnOnce( 'THREE.WebGLRenderer: reverseDepthBuffer must be used with `camera.reversedDepth = false` for correct results. Automatic conversion will be removed in r189.' );
 
 					_currentProjectionMatrix.copy( camera.projectionMatrix );
 

src/renderers/webgl/WebGLShadowMap.js

@@ -1,4 +1,4 @@
-import { FrontSide, BackSide, DoubleSide, NearestFilter, PCFShadowMap, VSMShadowMap, RGBADepthPacking, NoBlending, ReversedCoordinateSystem } from '../../constants.js';
+import { FrontSide, BackSide, DoubleSide, NearestFilter, PCFShadowMap, VSMShadowMap, RGBADepthPacking, NoBlending } from '../../constants.js';
 import { WebGLRenderTarget } from '../WebGLRenderTarget.js';
 import { MeshDepthMaterial } from '../../materials/MeshDepthMaterial.js';
 import { MeshDistanceMaterial } from '../../materials/MeshDistanceMaterial.js';
@@ -151,13 +151,13 @@ function WebGLShadowMap( renderer, objects, capabilities ) {
 				shadow.map.texture.name = light.name + '.shadowMap';
 
 				// @deprecated, r179
-				if ( capabilities.reverseDepthBuffer === true && camera.coordinateSystem !== ReversedCoordinateSystem ) {
+				if ( capabilities.reverseDepthBuffer === true && camera.reversedDepth === false ) {
 
-					shadow.camera.coordinateSystem = ReversedCoordinateSystem;
+					shadow.camera.reversedDepth = true;
 
 				} else {
 
-					shadow.camera.coordinateSystem = camera.coordinateSystem;
+					shadow.camera.reversedDepth = camera.reversedDepth;
 
 				}