Skip to content

Commit d334468

Browse files
sunagsunag
authored
WebGLRenderer: Move ReversedCoordinateSystem to camera.reversedDepth (#31391)
* move `ReversedCoordinateSystem` to `camera.reversedDepth` * update
1 parent 5ecefe0 commit d334468

File tree

9 files changed

+56
-49
lines changed

9 files changed

+56
-49
lines changed

‎examples/webgl_reverse_depth_buffer.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@
130130
camera.position.z = 12;
131131

132132
reversedCamera = camera.clone();
133-
reversedCamera.coordinateSystem = THREE.ReversedCoordinateSystem;
133+
reversedCamera.reversedDepth = true;
134134

135135
scene = new THREE.Scene();
136136

‎examples/webgl_shadowmap.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@
110110

111111
if ( renderer.capabilities.reverseDepthBuffer ) {
112112

113-
camera.coordinateSystem = THREE.ReversedCoordinateSystem;
113+
camera.reversedDepth = true;
114114
camera.updateProjectionMatrix();
115115

116116
}

‎src/cameras/Camera.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,14 @@ class Camera extends Object3D {
2929

3030
this.type = 'Camera';
3131

32+
/**
33+
* The flag that indicates whether the camera uses a reversed depth buffer.
34+
*
35+
* @type {boolean}
36+
* @default false
37+
*/
38+
this.reversedDepth = false;
39+
3240
/**
3341
* The inverse of the camera's world matrix.
3442
*

‎src/cameras/OrthographicCamera.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -216,7 +216,7 @@ class OrthographicCamera extends Camera {
216216

217217
}
218218

219-
this.projectionMatrix.makeOrthographic( left, right, top, bottom, this.near, this.far, this.coordinateSystem );
219+
this.projectionMatrix.makeOrthographic( left, right, top, bottom, this.near, this.far, this.coordinateSystem, this.reversedDepth );
220220

221221
this.projectionMatrixInverse.copy( this.projectionMatrix ).invert();
222222

‎src/cameras/PerspectiveCamera.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -374,7 +374,7 @@ class PerspectiveCamera extends Camera {
374374
const skew = this.filmOffset;
375375
if ( skew !== 0 ) left += near * skew / this.getFilmWidth();
376376

377-
this.projectionMatrix.makePerspective( left, left + width, top, top - height, near, this.far, this.coordinateSystem );
377+
this.projectionMatrix.makePerspective( left, left + width, top, top - height, near, this.far, this.coordinateSystem, this.reversedDepth );
378378

379379
this.projectionMatrixInverse.copy( this.projectionMatrix ).invert();
380380

‎src/constants.js

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1564,31 +1564,21 @@ export const GLSL1 = '100';
15641564
export const GLSL3 = '300 es';
15651565

15661566
/**
1567-
* WebGL coordinate system [-1, 1].
1567+
* WebGL coordinate system.
15681568
*
15691569
* @type {number}
15701570
* @constant
15711571
*/
15721572
export const WebGLCoordinateSystem = 2000;
15731573

15741574
/**
1575-
* WebGPU coordinate system [0, 1].
1575+
* WebGPU coordinate system.
15761576
*
15771577
* @type {number}
15781578
* @constant
15791579
*/
15801580
export const WebGPUCoordinateSystem = 2001;
15811581

1582-
/**
1583-
* Reversed coordinate system [1, 0].
1584-
*
1585-
* Used for reverse depth buffer.
1586-
*
1587-
* @type {number}
1588-
* @constant
1589-
*/
1590-
export const ReversedCoordinateSystem = 2002;
1591-
15921582
/**
15931583
* Represents the different timestamp query types.
15941584
*

‎src/math/Matrix4.js

Lines changed: 35 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { WebGLCoordinateSystem, WebGPUCoordinateSystem, ReversedCoordinateSystem } from '../constants.js';
1+
import { WebGLCoordinateSystem, WebGPUCoordinateSystem } from '../constants.js';
22
import { Vector3 } from './Vector3.js';
33

44
/**
@@ -1103,9 +1103,10 @@ class Matrix4 {
11031103
* @param {number} near - The distance from the camera to the near plane.
11041104
* @param {number} far - The distance from the camera to the far plane.
11051105
* @param {(WebGLCoordinateSystem|WebGPUCoordinateSystem)} [coordinateSystem=WebGLCoordinateSystem] - The coordinate system.
1106+
* @param {boolean} [reversedDepth=false] - Whether to use a reversed depth.
11061107
* @return {Matrix4} A reference to this matrix.
11071108
*/
1108-
makePerspective( left, right, top, bottom, near, far, coordinateSystem = WebGLCoordinateSystem ) {
1109+
makePerspective( left, right, top, bottom, near, far, coordinateSystem = WebGLCoordinateSystem, reversedDepth = false ) {
11091110

11101111
const te = this.elements;
11111112
const x = 2 * near / ( right - left );
@@ -1116,24 +1117,28 @@ class Matrix4 {
11161117

11171118
let c, d;
11181119

1119-
if ( coordinateSystem === WebGLCoordinateSystem ) {
1120+
if ( reversedDepth ) {
11201121

1121-
c = - ( far + near ) / ( far - near );
1122-
d = ( - 2 * far * near ) / ( far - near );
1122+
c = far / ( far - near ) - 1;
1123+
d = ( far * near ) / ( far - near );
11231124

1124-
} else if ( coordinateSystem === WebGPUCoordinateSystem ) {
1125+
} else {
11251126

1126-
c = - far / ( far - near );
1127-
d = ( - far * near ) / ( far - near );
1127+
if ( coordinateSystem === WebGLCoordinateSystem ) {
11281128

1129-
} else if ( coordinateSystem === ReversedCoordinateSystem ) {
1129+
c = - ( far + near ) / ( far - near );
1130+
d = ( - 2 * far * near ) / ( far - near );
11301131

1131-
c = far / ( far - near ) - 1;
1132-
d = ( far * near ) / ( far - near );
1132+
} else if ( coordinateSystem === WebGPUCoordinateSystem ) {
11331133

1134-
} else {
1134+
c = - far / ( far - near );
1135+
d = ( - far * near ) / ( far - near );
1136+
1137+
} else {
11351138

1136-
throw new Error( 'THREE.Matrix4.makePerspective(): Invalid coordinate system: ' + coordinateSystem );
1139+
throw new Error( 'THREE.Matrix4.makePerspective(): Invalid coordinate system: ' + coordinateSystem );
1140+
1141+
}
11371142

11381143
}
11391144

@@ -1157,9 +1162,10 @@ class Matrix4 {
11571162
* @param {number} near - The distance from the camera to the near plane.
11581163
* @param {number} far - The distance from the camera to the far plane.
11591164
* @param {(WebGLCoordinateSystem|WebGPUCoordinateSystem)} [coordinateSystem=WebGLCoordinateSystem] - The coordinate system.
1165+
* @param {boolean} [reversedDepth=false] - Whether to use a reversed depth.
11601166
* @return {Matrix4} A reference to this matrix.
11611167
*/
1162-
makeOrthographic( left, right, top, bottom, near, far, coordinateSystem = WebGLCoordinateSystem ) {
1168+
makeOrthographic( left, right, top, bottom, near, far, coordinateSystem = WebGLCoordinateSystem, reversedDepth = false ) {
11631169

11641170
const te = this.elements;
11651171
const w = 1.0 / ( right - left );
@@ -1171,24 +1177,28 @@ class Matrix4 {
11711177

11721178
let z, zInv;
11731179

1174-
if ( coordinateSystem === WebGLCoordinateSystem ) {
1180+
if ( reversedDepth ) {
11751181

1176-
z = ( far + near ) * p;
1177-
zInv = - 2 * p;
1182+
z = - near * p - 1;
1183+
zInv = 1 * p;
11781184

1179-
} else if ( coordinateSystem === WebGPUCoordinateSystem ) {
1185+
} else {
11801186

1181-
z = near * p;
1182-
zInv = - 1 * p;
1187+
if ( coordinateSystem === WebGLCoordinateSystem ) {
11831188

1184-
} else if ( coordinateSystem === ReversedCoordinateSystem ) {
1189+
z = ( far + near ) * p;
1190+
zInv = - 2 * p;
11851191

1186-
z = - near * p - 1;
1187-
zInv = 1 * p;
1192+
} else if ( coordinateSystem === WebGPUCoordinateSystem ) {
11881193

1189-
} else {
1194+
z = near * p;
1195+
zInv = - 1 * p;
1196+
1197+
} else {
11901198

1191-
throw new Error( 'THREE.Matrix4.makeOrthographic(): Invalid coordinate system: ' + coordinateSystem );
1199+
throw new Error( 'THREE.Matrix4.makeOrthographic(): Invalid coordinate system: ' + coordinateSystem );
1200+
1201+
}
11921202

11931203
}
11941204

‎src/renderers/WebGLRenderer.js

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,7 @@ import {
1717
UnsignedInt248Type,
1818
UnsignedShort4444Type,
1919
UnsignedShort5551Type,
20-
WebGLCoordinateSystem,
21-
ReversedCoordinateSystem
20+
WebGLCoordinateSystem
2221
} from '../constants.js';
2322
import { Color } from '../math/Color.js';
2423
import { Frustum } from '../math/Frustum.js';
@@ -2383,10 +2382,10 @@ class WebGLRenderer {
23832382

23842383
const reverseDepthBuffer = state.buffers.depth.getReversed();
23852384

2386-
if ( reverseDepthBuffer && camera.coordinateSystem !== ReversedCoordinateSystem ) {
2385+
if ( reverseDepthBuffer && camera.reversedDepth === false ) {
23872386

23882387
// @deprecated, r179
2389-
warnOnce( 'THREE.WebGLRenderer: reverseDepthBuffer must be used with camera.coordinateSystem = THREE.ReversedCoordinateSystem for correct results. Automatic conversion will be removed in r189.' );
2388+
warnOnce( 'THREE.WebGLRenderer: reverseDepthBuffer must be used with `camera.reversedDepth = false` for correct results. Automatic conversion will be removed in r189.' );
23902389

23912390
_currentProjectionMatrix.copy( camera.projectionMatrix );
23922391

‎src/renderers/webgl/WebGLShadowMap.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { FrontSide, BackSide, DoubleSide, NearestFilter, PCFShadowMap, VSMShadowMap, RGBADepthPacking, NoBlending, ReversedCoordinateSystem } from '../../constants.js';
1+
import { FrontSide, BackSide, DoubleSide, NearestFilter, PCFShadowMap, VSMShadowMap, RGBADepthPacking, NoBlending } from '../../constants.js';
22
import { WebGLRenderTarget } from '../WebGLRenderTarget.js';
33
import { MeshDepthMaterial } from '../../materials/MeshDepthMaterial.js';
44
import { MeshDistanceMaterial } from '../../materials/MeshDistanceMaterial.js';
@@ -151,13 +151,13 @@ function WebGLShadowMap( renderer, objects, capabilities ) {
151151
shadow.map.texture.name = light.name + '.shadowMap';
152152

153153
// @deprecated, r179
154-
if ( capabilities.reverseDepthBuffer === true && camera.coordinateSystem !== ReversedCoordinateSystem ) {
154+
if ( capabilities.reverseDepthBuffer === true && camera.reversedDepth === false ) {
155155

156-
shadow.camera.coordinateSystem = ReversedCoordinateSystem;
156+
shadow.camera.reversedDepth = true;
157157

158158
} else {
159159

160-
shadow.camera.coordinateSystem = camera.coordinateSystem;
160+
shadow.camera.reversedDepth = camera.reversedDepth;
161161

162162
}
163163

0 commit comments

Comments
 (0)