Nodes: StereoCompositePassNode.js (#29201)

* Make anaglyph pass and parallax barrier pass extensions ofStereoCompositePassNode class to reuse shared functionality

* remove uniformNode import

* fix superfluous argument

* add node classes and update backdrop screenshot

* cleanup

* implement mugen suggestions

examples/webgpu_display_stereo.html

@@ -40,7 +40,8 @@
 			const position = new THREE.Vector3();
 
 			const params = {
-				effect: 'stereo'
+				effect: 'stereo',
+				eyeSep: 0.064,
 			};
 
 			const effects = { Stereo: 'stereo', Anaglyph: 'anaglyph', ParallaxBarrier: 'parallaxBarrier' };
@@ -102,12 +103,16 @@
 
 				postProcessing.outputNode = stereo;
 
-				//
-
 				const gui = new GUI();
 				gui.add( params, 'effect', effects ).onChange( update );
+				gui.add( params, 'eyeSep', 0.001, 0.15, 0.001 ).onChange( function ( value ) {
 
-				//
+					stereo.stereo.eyeSep = value;
+
+					anaglyph.stereo.eyeSep = value;
+					parallaxBarrier.stereo.eyeSep = value;
+
+				} );
 
 				window.addEventListener( 'resize', onWindowResize );
 
@@ -154,8 +159,6 @@
 
 			}
 
-			//
-
 			function animate() {
 
 				timer.update();

src/nodes/display/AnaglyphPassNode.js

@@ -1,34 +1,19 @@
 import { Fn, nodeObject, vec4 } from '../shadernode/ShaderNode.js';
-import PassNode from './PassNode.js';
-import { Vector2 } from '../../math/Vector2.js';
-import { StereoCamera } from '../../cameras/StereoCamera.js';
-import { HalfFloatType, LinearFilter, NearestFilter } from '../../constants.js';
-import { RenderTarget } from '../../core/RenderTarget.js';
 import { Matrix3 } from '../../math/Matrix3.js';
 import { uniform } from '../core/UniformNode.js';
-import QuadMesh from '../../renderers/common/QuadMesh.js';
 import { uv } from '../accessors/UVNode.js';
 import { clamp, max } from '../math/MathNode.js';
-import { texture } from '../accessors/TextureNode.js';
+import StereoCompositePassNode from './StereoCompositePassNode.js';
+import { addNodeClass } from '../core/Node.js';
 
-const _size = /*@__PURE__*/ new Vector2();
-const _quadMesh = /*@__PURE__*/ new QuadMesh();
-
-class AnaglyphPassNode extends PassNode {
+class AnaglyphPassNode extends StereoCompositePassNode {
 
 	constructor( scene, camera ) {
 
-		super( PassNode.COLOR, scene, camera );
+		super( scene, camera );
 
 		this.isAnaglyphPassNode = true;
 
-		this.stereo = new StereoCamera();
-
-		const _params = { minFilter: LinearFilter, magFilter: NearestFilter, type: HalfFloatType };
-
-		this._renderTargetL = new RenderTarget( 1, 1, _params );
-		this._renderTargetR = new RenderTarget( 1, 1, _params );
-
 		// Dubois matrices from https://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.7.6968&rep=rep1&type=pdf#page=4
 
 		this._colorMatrixLeft = uniform( new Matrix3().fromArray( [
@@ -43,60 +28,6 @@ class AnaglyphPassNode extends PassNode {
 			- 0.00155529, - 0.0184503, 1.2264
 		] ) );
 
-		this._mapLeft = texture( this._renderTargetL.texture );
-		this._mapRight = texture( this._renderTargetR.texture );
-
-		//
-
-		this._material = null;
-
-	}
-
-	setSize( width, height ) {
-
-		super.setSize( width, height );
-
-		this._renderTargetL.setSize( this.renderTarget.width, this.renderTarget.height );
-		this._renderTargetR.setSize( this.renderTarget.width, this.renderTarget.height );
-
-	}
-
-	updateBefore( frame ) {
-
-		const { renderer } = frame;
-		const { scene, camera, stereo, renderTarget } = this;
-
-		this._pixelRatio = renderer.getPixelRatio();
-
-		stereo.cameraL.coordinateSystem = renderer.coordinateSystem;
-		stereo.cameraR.coordinateSystem = renderer.coordinateSystem;
-		stereo.update( camera );
-
-		const size = renderer.getSize( _size );
-		this.setSize( size.width, size.height );
-
-		const currentRenderTarget = renderer.getRenderTarget();
-
-		// left
-
-		renderer.setRenderTarget( this._renderTargetL );
-		renderer.render( scene, stereo.cameraL );
-
-		// right
-
-		renderer.setRenderTarget( this._renderTargetR );
-		renderer.render( scene, stereo.cameraR );
-
-		// composite
-
-		renderer.setRenderTarget( renderTarget );
-		_quadMesh.material = this._material;
-		_quadMesh.render( renderer );
-
-		// restore
-
-		renderer.setRenderTarget( currentRenderTarget );
-
 	}
 
 	setup( builder ) {
@@ -122,23 +53,10 @@ class AnaglyphPassNode extends PassNode {
 
 	}
 
-	dispose() {
-
-		super.dispose();
-
-		this._renderTargetL.dispose();
-		this._renderTargetR.dispose();
-
-		if ( this._material !== null ) {
-
-			this._material.dispose();
-
-		}
-
-	}
-
 }
 
+export default AnaglyphPassNode;
+
 export const anaglyphPass = ( scene, camera ) => nodeObject( new AnaglyphPassNode( scene, camera ) );
 
-export default AnaglyphPassNode;
+addNodeClass( 'AnaglyphPassNode', AnaglyphPassNode );

src/nodes/display/ParallaxBarrierPassNode.js

@@ -1,87 +1,18 @@
 import { Fn, If, nodeObject, vec4 } from '../shadernode/ShaderNode.js';
-import PassNode from './PassNode.js';
-import { Vector2 } from '../../math/Vector2.js';
-import { StereoCamera } from '../../cameras/StereoCamera.js';
-import { HalfFloatType, LinearFilter, NearestFilter } from '../../constants.js';
-import { RenderTarget } from '../../core/RenderTarget.js';
-import QuadMesh from '../../renderers/common/QuadMesh.js';
 import { uv } from '../accessors/UVNode.js';
 import { mod } from '../math/MathNode.js';
-import { texture } from '../accessors/TextureNode.js';
 import { viewportCoordinate } from './ViewportNode.js';
+import StereoCompositePassNode from './StereoCompositePassNode.js';
+import { addNodeClass } from '../core/Node.js';
 
-const _size = /*@__PURE__*/ new Vector2();
-const _quadMesh = /*@__PURE__*/ new QuadMesh();
-
-class ParallaxBarrierPassNode extends PassNode {
+class ParallaxBarrierPassNode extends StereoCompositePassNode {
 
 	constructor( scene, camera ) {
 
-		super( PassNode.COLOR, scene, camera );
+		super( scene, camera );
 
 		this.isParallaxBarrierPassNode = true;
 
-		this.stereo = new StereoCamera();
-
-		const _params = { minFilter: LinearFilter, magFilter: NearestFilter, type: HalfFloatType };
-
-		this._renderTargetL = new RenderTarget( 1, 1, _params );
-		this._renderTargetR = new RenderTarget( 1, 1, _params );
-
-		this._mapLeft = texture( this._renderTargetL.texture );
-		this._mapRight = texture( this._renderTargetR.texture );
-
-		//
-
-		this._material = null;
-
-	}
-
-	setSize( width, height ) {
-
-		super.setSize( width, height );
-
-		this._renderTargetL.setSize( this.renderTarget.width, this.renderTarget.height );
-		this._renderTargetR.setSize( this.renderTarget.width, this.renderTarget.height );
-
-	}
-
-	updateBefore( frame ) {
-
-		const { renderer } = frame;
-		const { scene, camera, stereo, renderTarget } = this;
-
-		this._pixelRatio = renderer.getPixelRatio();
-
-		stereo.cameraL.coordinateSystem = renderer.coordinateSystem;
-		stereo.cameraR.coordinateSystem = renderer.coordinateSystem;
-		stereo.update( camera );
-
-		const size = renderer.getSize( _size );
-		this.setSize( size.width, size.height );
-
-		const currentRenderTarget = renderer.getRenderTarget();
-
-		// left
-
-		renderer.setRenderTarget( this._renderTargetL );
-		renderer.render( scene, stereo.cameraL );
-
-		// right
-
-		renderer.setRenderTarget( this._renderTargetR );
-		renderer.render( scene, stereo.cameraR );
-
-		// composite
-
-		renderer.setRenderTarget( renderTarget );
-		_quadMesh.material = this._material;
-		_quadMesh.render( renderer );
-
-		// restore
-
-		renderer.setRenderTarget( currentRenderTarget );
-
 	}
 
 	setup( builder ) {
@@ -114,23 +45,10 @@ class ParallaxBarrierPassNode extends PassNode {
 
 	}
 
-	dispose() {
-
-		super.dispose();
-
-		this._renderTargetL.dispose();
-		this._renderTargetR.dispose();
-
-		if ( this._material !== null ) {
-
-			this._material.dispose();
-
-		}
-
-	}
-
 }
 
+export default ParallaxBarrierPassNode;
+
 export const parallaxBarrierPass = ( scene, camera ) => nodeObject( new ParallaxBarrierPassNode( scene, camera ) );
 
-export default ParallaxBarrierPassNode;
+addNodeClass( 'ParallaxBarrierPassNode', ParallaxBarrierPassNode );

src/nodes/display/StereoCompositePassNode.js

@@ -0,0 +1,104 @@
+
+import PassNode from './PassNode.js';
+import { StereoCamera } from '../../cameras/StereoCamera.js';
+import { HalfFloatType, LinearFilter, NearestFilter } from '../../constants.js';
+import { RenderTarget } from '../../core/RenderTarget.js';
+import { texture } from '../accessors/TextureNode.js';
+import { Vector2 } from '../../math/Vector2.js';
+import QuadMesh from '../../renderers/common/QuadMesh.js';
+
+const _size = /*@__PURE__*/ new Vector2();
+const _quadMesh = /*@__PURE__*/ new QuadMesh();
+
+class StereoCompositePassNode extends PassNode {
+
+	constructor( scene, camera ) {
+
+		super( PassNode.COLOR, scene, camera );
+
+		this.isStereoCompositePassNode = true;
+
+		this.stereo = new StereoCamera();
+		const _params = { minFilter: LinearFilter, magFilter: NearestFilter, type: HalfFloatType };
+
+		this._renderTargetL = new RenderTarget( 1, 1, _params );
+		this._renderTargetR = new RenderTarget( 1, 1, _params );
+
+		this._mapLeft = texture( this._renderTargetL.texture );
+		this._mapRight = texture( this._renderTargetR.texture );
+
+		this._material = null;
+
+	}
+
+	updateStereoCamera( coordinateSystem ) {
+
+		this.stereo.cameraL.coordinateSystem = coordinateSystem;
+		this.stereo.cameraR.coordinateSystem = coordinateSystem;
+		this.stereo.update( this.camera );
+
+	}
+
+	setSize( width, height ) {
+
+		super.setSize( width, height );
+
+		this._renderTargetL.setSize( this.renderTarget.width, this.renderTarget.height );
+		this._renderTargetR.setSize( this.renderTarget.width, this.renderTarget.height );
+
+	}
+
+	updateBefore( frame ) {
+
+		const { renderer } = frame;
+		const { scene, stereo, renderTarget } = this;
+
+		this._pixelRatio = renderer.getPixelRatio();
+
+		this.updateStereoCamera( renderer.coordinateSystem );
+
+		const size = renderer.getSize( _size );
+		this.setSize( size.width, size.height );
+
+		const currentRenderTarget = renderer.getRenderTarget();
+
+		// left
+
+		renderer.setRenderTarget( this._renderTargetL );
+		renderer.render( scene, stereo.cameraL );
+
+		// right
+
+		renderer.setRenderTarget( this._renderTargetR );
+		renderer.render( scene, stereo.cameraR );
+
+		// composite
+
+		renderer.setRenderTarget( renderTarget );
+		_quadMesh.material = this._material;
+		_quadMesh.render( renderer );
+
+		// restore
+
+		renderer.setRenderTarget( currentRenderTarget );
+
+	}
+
+	dispose() {
+
+		super.dispose();
+
+		this._renderTargetL.dispose();
+		this._renderTargetR.dispose();
+
+		if ( this._material !== null ) {
+
+			this._material.dispose();
+
+		}
+
+	}
+
+}
+
+export default StereoCompositePassNode;