Skip to content

Commit b1430df

Browse files
Mugen87Mugen87
authored
Anaglyph: Rename screenDistance to planeDistance. (#32943)
1 parent 129c238 commit b1430df

File tree

4 files changed

+53
-53
lines changed

4 files changed

+53
-53
lines changed

‎examples/jsm/effects/AnaglyphEffect.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const _forward = /*@__PURE__*/ new Vector3();
3232
*
3333
* This implementation uses CameraUtils.frameCorners() to align stereo
3434
* camera frustums to a virtual screen plane, providing accurate depth
35-
* perception with zero parallax at the screen distance.
35+
* perception with zero parallax at the plane distance.
3636
*
3737
* Note that this class can only be used with {@link WebGLRenderer}.
3838
* When using {@link WebGPURenderer}, use {@link AnaglyphPassNode}.
@@ -74,8 +74,8 @@ class AnaglyphEffect {
7474
this.eyeSep = 0.064;
7575

7676
/**
77-
* The distance from the viewer to the virtual screen plane
78-
* where zero parallax (screen depth) occurs.
77+
* The distance in world units from the viewer to the virtual
78+
* screen plane where zero parallax (screen depth) occurs.
7979
* Objects at this distance appear at the screen surface.
8080
* Objects closer appear in front of the screen (negative parallax).
8181
* Objects further appear behind the screen (positive parallax).
@@ -86,7 +86,7 @@ class AnaglyphEffect {
8686
* @type {number}
8787
* @default 0.5
8888
*/
89-
this.screenDistance = 0.5;
89+
this.planeDistance = 0.5;
9090

9191
const _params = { minFilter: LinearFilter, magFilter: NearestFilter, format: RGBAFormat };
9292

@@ -199,11 +199,11 @@ class AnaglyphEffect {
199199
_eyeL.copy( camera.position ).addScaledVector( _right, - halfSep );
200200
_eyeR.copy( camera.position ).addScaledVector( _right, halfSep );
201201

202-
// Calculate screen center (at screenDistance in front of the camera center)
203-
_screenCenter.copy( camera.position ).addScaledVector( _forward, - this.screenDistance );
202+
// Calculate screen center (at planeDistance in front of the camera center)
203+
_screenCenter.copy( camera.position ).addScaledVector( _forward, - this.planeDistance );
204204

205205
// Calculate screen dimensions from camera FOV and aspect ratio
206-
const halfHeight = this.screenDistance * Math.tan( MathUtils.DEG2RAD * camera.fov / 2 );
206+
const halfHeight = this.planeDistance * Math.tan( MathUtils.DEG2RAD * camera.fov / 2 );
207207
const halfWidth = halfHeight * camera.aspect;
208208

209209
// Calculate screen corners

‎examples/jsm/tsl/display/AnaglyphPassNode.js‎

Lines changed: 40 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ function createMatrixPair( leftSpec, rightSpec ) {
8181
return [
8282
r[ 0 ], g[ 0 ], b[ 0 ], // Column 0: coefficients for input R
8383
r[ 1 ], g[ 1 ], b[ 1 ], // Column 1: coefficients for input G
84-
r[ 2 ], g[ 2 ], b[ 2 ] // Column 2: coefficients for input B
84+
r[ 2 ], g[ 2 ], b[ 2 ] // Column 2: coefficients for input B
8585
];
8686

8787
}
@@ -117,67 +117,67 @@ const ANAGLYPH_MATRICES = {
117117
// Paper: Left=[R,0,0], Right=[0,0,Lum]
118118
[ AnaglyphAlgorithm.TRUE ]: {
119119
[ AnaglyphColorMode.RED_CYAN ]: createMatrixPair(
120-
{ r: [ 1, 0, 0 ] }, // Left: R -> outR
121-
{ g: LUM, b: LUM } // Right: Lum -> outG, Lum -> outB
120+
{ r: [ 1, 0, 0 ] }, // Left: R -> outR
121+
{ g: LUM, b: LUM } // Right: Lum -> outG, Lum -> outB
122122
),
123123
[ AnaglyphColorMode.MAGENTA_CYAN ]: createMatrixPair(
124-
{ r: [ 1, 0, 0 ], b: [ 0, 0, 0.5 ] }, // Left: R -> outR, partial B -> outB
125-
{ g: LUM, b: [ 0, 0, 0.5 ] } // Right: Lum -> outG, partial B
124+
{ r: [ 1, 0, 0 ], b: [ 0, 0, 0.5 ] }, // Left: R -> outR, partial B -> outB
125+
{ g: LUM, b: [ 0, 0, 0.5 ] } // Right: Lum -> outG, partial B
126126
),
127127
[ AnaglyphColorMode.MAGENTA_GREEN ]: createMatrixPair(
128-
{ r: [ 1, 0, 0 ], b: LUM }, // Left: R -> outR, Lum -> outB
129-
{ g: LUM } // Right: Lum -> outG
128+
{ r: [ 1, 0, 0 ], b: LUM }, // Left: R -> outR, Lum -> outB
129+
{ g: LUM } // Right: Lum -> outG
130130
)
131131
},
132132

133133
// Grey Anaglyph - Luminance-based, no color, minimal ghosting
134134
// Paper: Left=[Lum,0,0], Right=[0,0,Lum]
135135
[ AnaglyphAlgorithm.GREY ]: {
136136
[ AnaglyphColorMode.RED_CYAN ]: createMatrixPair(
137-
{ r: LUM }, // Left: Lum -> outR
138-
{ g: LUM, b: LUM } // Right: Lum -> outG, Lum -> outB
137+
{ r: LUM }, // Left: Lum -> outR
138+
{ g: LUM, b: LUM } // Right: Lum -> outG, Lum -> outB
139139
),
140140
[ AnaglyphColorMode.MAGENTA_CYAN ]: createMatrixPair(
141-
{ r: LUM, b: [ 0.15, 0.29, 0.06 ] }, // Left: Lum -> outR, half-Lum -> outB
142-
{ g: LUM, b: [ 0.15, 0.29, 0.06 ] } // Right: Lum -> outG, half-Lum -> outB
141+
{ r: LUM, b: [ 0.15, 0.29, 0.06 ] }, // Left: Lum -> outR, half-Lum -> outB
142+
{ g: LUM, b: [ 0.15, 0.29, 0.06 ] } // Right: Lum -> outG, half-Lum -> outB
143143
),
144144
[ AnaglyphColorMode.MAGENTA_GREEN ]: createMatrixPair(
145-
{ r: LUM, b: LUM }, // Left: Lum -> outR, Lum -> outB
146-
{ g: LUM } // Right: Lum -> outG
145+
{ r: LUM, b: LUM }, // Left: Lum -> outR, Lum -> outB
146+
{ g: LUM } // Right: Lum -> outG
147147
)
148148
},
149149

150150
// Colour Anaglyph - Full color, high retinal rivalry
151151
// Paper: Left=[R,0,0], Right=[0,G,B]
152152
[ AnaglyphAlgorithm.COLOUR ]: {
153153
[ AnaglyphColorMode.RED_CYAN ]: createMatrixPair(
154-
{ r: [ 1, 0, 0 ] }, // Left: R -> outR
155-
{ g: [ 0, 1, 0 ], b: [ 0, 0, 1 ] } // Right: G -> outG, B -> outB
154+
{ r: [ 1, 0, 0 ] }, // Left: R -> outR
155+
{ g: [ 0, 1, 0 ], b: [ 0, 0, 1 ] } // Right: G -> outG, B -> outB
156156
),
157157
[ AnaglyphColorMode.MAGENTA_CYAN ]: createMatrixPair(
158-
{ r: [ 1, 0, 0 ], b: [ 0, 0, 0.5 ] }, // Left: R -> outR, partial B -> outB
159-
{ g: [ 0, 1, 0 ], b: [ 0, 0, 0.5 ] } // Right: G -> outG, partial B -> outB
158+
{ r: [ 1, 0, 0 ], b: [ 0, 0, 0.5 ] }, // Left: R -> outR, partial B -> outB
159+
{ g: [ 0, 1, 0 ], b: [ 0, 0, 0.5 ] } // Right: G -> outG, partial B -> outB
160160
),
161161
[ AnaglyphColorMode.MAGENTA_GREEN ]: createMatrixPair(
162-
{ r: [ 1, 0, 0 ], b: [ 0, 0, 1 ] }, // Left: R -> outR, B -> outB
163-
{ g: [ 0, 1, 0 ] } // Right: G -> outG
162+
{ r: [ 1, 0, 0 ], b: [ 0, 0, 1 ] }, // Left: R -> outR, B -> outB
163+
{ g: [ 0, 1, 0 ] } // Right: G -> outG
164164
)
165165
},
166166

167167
// Half-Colour Anaglyph - Luminance for left red, full color for right cyan
168168
// Paper: Left=[Lum,0,0], Right=[0,G,B]
169169
[ AnaglyphAlgorithm.HALF_COLOUR ]: {
170170
[ AnaglyphColorMode.RED_CYAN ]: createMatrixPair(
171-
{ r: LUM }, // Left: Lum -> outR
172-
{ g: [ 0, 1, 0 ], b: [ 0, 0, 1 ] } // Right: G -> outG, B -> outB
171+
{ r: LUM }, // Left: Lum -> outR
172+
{ g: [ 0, 1, 0 ], b: [ 0, 0, 1 ] } // Right: G -> outG, B -> outB
173173
),
174174
[ AnaglyphColorMode.MAGENTA_CYAN ]: createMatrixPair(
175-
{ r: LUM, b: [ 0.15, 0.29, 0.06 ] }, // Left: Lum -> outR, half-Lum -> outB
175+
{ r: LUM, b: [ 0.15, 0.29, 0.06 ] }, // Left: Lum -> outR, half-Lum -> outB
176176
{ g: [ 0, 1, 0 ], b: [ 0.15, 0.29, 0.06 ] } // Right: G -> outG, half-Lum -> outB
177177
),
178178
[ AnaglyphColorMode.MAGENTA_GREEN ]: createMatrixPair(
179-
{ r: LUM, b: LUM }, // Left: Lum -> outR, Lum -> outB
180-
{ g: [ 0, 1, 0 ] } // Right: G -> outG
179+
{ r: LUM, b: LUM }, // Left: Lum -> outR, Lum -> outB
180+
{ g: [ 0, 1, 0 ] } // Right: G -> outG
181181
)
182182
},
183183

@@ -223,16 +223,16 @@ const ANAGLYPH_MATRICES = {
223223
// Paper: Left=[0,0.7G+0.3B,0,0], Right=[0,G,B]
224224
[ AnaglyphAlgorithm.OPTIMISED ]: {
225225
[ AnaglyphColorMode.RED_CYAN ]: createMatrixPair(
226-
{ r: [ 0, 0.7, 0.3 ] }, // Left: 0.7G+0.3B -> outR
227-
{ g: [ 0, 1, 0 ], b: [ 0, 0, 1 ] } // Right: G -> outG, B -> outB
226+
{ r: [ 0, 0.7, 0.3 ] }, // Left: 0.7G+0.3B -> outR
227+
{ g: [ 0, 1, 0 ], b: [ 0, 0, 1 ] } // Right: G -> outG, B -> outB
228228
),
229229
[ AnaglyphColorMode.MAGENTA_CYAN ]: createMatrixPair(
230230
{ r: [ 0, 0.7, 0.3 ], b: [ 0, 0, 0.5 ] }, // Left: 0.7G+0.3B -> outR, partial B
231-
{ g: [ 0, 1, 0 ], b: [ 0, 0, 0.5 ] } // Right: G -> outG, partial B
231+
{ g: [ 0, 1, 0 ], b: [ 0, 0, 0.5 ] } // Right: G -> outG, partial B
232232
),
233233
[ AnaglyphColorMode.MAGENTA_GREEN ]: createMatrixPair(
234234
{ r: [ 0, 0.7, 0.3 ], b: [ 0, 0, 1 ] }, // Left: 0.7G+0.3B -> outR, B -> outB
235-
{ g: [ 0, 1, 0 ] } // Right: G -> outG
235+
{ g: [ 0, 1, 0 ] } // Right: G -> outG
236236
)
237237
},
238238

@@ -241,20 +241,20 @@ const ANAGLYPH_MATRICES = {
241241
// Paper matrix [8]: Left=[0.439R+0.447G+0.148B, 0, 0], Right=[0, 0.095R+0.934G+0.005B, 0.018R+0.028G+1.057B]
242242
[ AnaglyphAlgorithm.COMPROMISE ]: {
243243
[ AnaglyphColorMode.RED_CYAN ]: createMatrixPair(
244-
{ r: [ 0.439, 0.447, 0.148 ] }, // Left: weighted RGB -> outR
244+
{ r: [ 0.439, 0.447, 0.148 ] }, // Left: weighted RGB -> outR
245245
{
246-
g: [ 0.095, 0.934, 0.005 ], // Right: weighted RGB -> outG
247-
b: [ 0.018, 0.028, 1.057 ] // Right: weighted RGB -> outB
246+
g: [ 0.095, 0.934, 0.005 ], // Right: weighted RGB -> outG
247+
b: [ 0.018, 0.028, 1.057 ] // Right: weighted RGB -> outB
248248
}
249249
),
250250
[ AnaglyphColorMode.MAGENTA_CYAN ]: createMatrixPair(
251251
{
252252
r: [ 0.439, 0.447, 0.148 ],
253-
b: [ 0.009, 0.014, 0.074 ] // Partial blue from left
253+
b: [ 0.009, 0.014, 0.074 ] // Partial blue from left
254254
},
255255
{
256256
g: [ 0.095, 0.934, 0.005 ],
257-
b: [ 0.009, 0.014, 0.528 ] // Partial blue from right
257+
b: [ 0.009, 0.014, 0.528 ] // Partial blue from right
258258
}
259259
),
260260
[ AnaglyphColorMode.MAGENTA_GREEN ]: createMatrixPair(
@@ -275,7 +275,7 @@ const ANAGLYPH_MATRICES = {
275275
*
276276
* This implementation uses CameraUtils.frameCorners() to align stereo
277277
* camera frustums to a virtual screen plane, providing accurate depth
278-
* perception with zero parallax at the screen distance.
278+
* perception with zero parallax at the plane distance.
279279
*
280280
* @augments StereoCompositePassNode
281281
* @three_import import { anaglyphPass, AnaglyphAlgorithm, AnaglyphColorMode } from 'three/addons/tsl/display/AnaglyphPassNode.js';
@@ -317,8 +317,8 @@ class AnaglyphPassNode extends StereoCompositePassNode {
317317
this.eyeSep = 0.064;
318318

319319
/**
320-
* The distance from the viewer to the virtual screen plane
321-
* where zero parallax (screen depth) occurs.
320+
* The distance in world units from the viewer to the virtual
321+
* screen plane where zero parallax (screen depth) occurs.
322322
* Objects at this distance appear at the screen surface.
323323
* Objects closer appear in front of the screen (negative parallax).
324324
* Objects further appear behind the screen (positive parallax).
@@ -329,7 +329,7 @@ class AnaglyphPassNode extends StereoCompositePassNode {
329329
* @type {number}
330330
* @default 0.5
331331
*/
332-
this.screenDistance = 0.5;
332+
this.planeDistance = 0.5;
333333

334334
/**
335335
* The current anaglyph algorithm.
@@ -462,12 +462,12 @@ class AnaglyphPassNode extends StereoCompositePassNode {
462462
_eyeL.copy( camera.position ).addScaledVector( _right, - halfSep );
463463
_eyeR.copy( camera.position ).addScaledVector( _right, halfSep );
464464

465-
// Calculate screen center (at screenDistance in front of the camera center)
466-
_screenCenter.copy( camera.position ).addScaledVector( _forward, - this.screenDistance );
465+
// Calculate screen center (at planeDistance in front of the camera center)
466+
_screenCenter.copy( camera.position ).addScaledVector( _forward, - this.planeDistance );
467467

468468
// Calculate screen dimensions from camera FOV and aspect ratio
469469
const DEG2RAD = Math.PI / 180;
470-
const halfHeight = this.screenDistance * Math.tan( DEG2RAD * camera.fov / 2 );
470+
const halfHeight = this.planeDistance * Math.tan( DEG2RAD * camera.fov / 2 );
471471
const halfWidth = halfHeight * camera.aspect;
472472

473473
// Calculate screen corners

‎examples/webgl_effects_anaglyph.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -96,9 +96,9 @@
9696

9797
// Configure stereo parameters for physically-correct rendering
9898
// eyeSep: interpupillary distance (default 0.064m / 64mm for humans)
99-
// screenDistance: distance to the zero-parallax plane (objects here appear at screen depth)
99+
// planeDistance: distance to the zero-parallax plane (objects here appear at screen depth)
100100
effect.eyeSep = 0.064;
101-
effect.screenDistance = 3; // Match camera distance to origin for zero parallax at scene center
101+
effect.planeDistance = 3; // Match camera distance to origin for zero parallax at scene center
102102

103103
//
104104

‎examples/webgpu_display_stereo.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
const params = {
5555
effect: 'stereo',
5656
eyeSep: 0.064,
57-
screenDistance: 3,
57+
planeDistance: 3,
5858
anaglyphAlgorithm: 'dubois',
5959
anaglyphColorMode: 'redCyan'
6060
};
@@ -136,7 +136,7 @@
136136

137137
// Configure anaglyph for physically-correct stereo with zero parallax at scene center
138138
anaglyph.eyeSep = params.eyeSep;
139-
anaglyph.screenDistance = params.screenDistance;
139+
anaglyph.planeDistance = params.planeDistance;
140140

141141
renderPipeline.outputNode = stereo;
142142

@@ -162,9 +162,9 @@
162162
anaglyph.colorMode = value;
163163

164164
} );
165-
anaglyphFolder.add( params, 'screenDistance', 0.5, 10, 0.1 ).name( 'Screen Distance' ).onChange( function ( value ) {
165+
anaglyphFolder.add( params, 'planeDistance', 0.5, 10, 0.1 ).name( 'Plane Distance' ).onChange( function ( value ) {
166166

167-
anaglyph.screenDistance = value;
167+
anaglyph.planeDistance = value;
168168

169169
} );
170170
anaglyphFolder.paramList.domElement.style.display = 'none';

0 commit comments

Comments
 (0)