diff --git a/examples/webgl_reverse_depth_buffer.html b/examples/webgl_reverse_depth_buffer.html index ddba01b1df37dc..a892224fb172a9 100644 --- a/examples/webgl_reverse_depth_buffer.html +++ b/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(); diff --git a/examples/webgl_shadowmap.html b/examples/webgl_shadowmap.html index db155e7ca4082d..0acb3e5be4fe37 100644 --- a/examples/webgl_shadowmap.html +++ b/examples/webgl_shadowmap.html @@ -110,7 +110,7 @@ if ( renderer.capabilities.reverseDepthBuffer ) { - camera.coordinateSystem = THREE.ReversedCoordinateSystem; + camera.reversedDepth = true; camera.updateProjectionMatrix(); } diff --git a/src/cameras/Camera.js b/src/cameras/Camera.js index fd9ff20877aba0..a654a75c94c472 100644 --- a/src/cameras/Camera.js +++ b/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. * diff --git a/src/cameras/OrthographicCamera.js b/src/cameras/OrthographicCamera.js index 7e3d636c9fc066..a81fc591dd915f 100755 --- a/src/cameras/OrthographicCamera.js +++ b/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(); diff --git a/src/cameras/PerspectiveCamera.js b/src/cameras/PerspectiveCamera.js index 911c73996e896d..b42239a4b64387 100644 --- a/src/cameras/PerspectiveCamera.js +++ b/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(); diff --git a/src/constants.js b/src/constants.js index b373d39c20280e..1abb65e6348a25 100644 --- a/src/constants.js +++ b/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. * diff --git a/src/math/Matrix4.js b/src/math/Matrix4.js index fd562a5da3b5f4..faba1f8090fed4 100644 --- a/src/math/Matrix4.js +++ b/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 ); + + } } diff --git a/src/renderers/WebGLRenderer.js b/src/renderers/WebGLRenderer.js index 2d04991b294dad..31440522617400 100644 --- a/src/renderers/WebGLRenderer.js +++ b/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 ); diff --git a/src/renderers/webgl/WebGLShadowMap.js b/src/renderers/webgl/WebGLShadowMap.js index ae4bd4209cc1e5..49664a6d8195fb 100644 --- a/src/renderers/webgl/WebGLShadowMap.js +++ b/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; }