Respect the original camera view offset inside SSAARenderPass. (#21740)

* Respect the original camera view offset inside SSAARenderPass.

Add a viewOffsetX GUI param to the webgl_postprocessing_ssaa example.

* Refine the camera view preservation inside SSAARenderPass.

Fix a viewOffsetX param typo inside the webgl_postprocessing_ssaa example.

* Convert spaces to tabs inside the webgl_postprocessing_ssaa example and SSAARenderPass.

* Update SSAARenderPass to always preserve the original camera view.

* Update the SSARenderPass to handle the original view offset through camera methods instead of direct access of camera.view.

* Remove an unnecessary conditional inside SSAARenderPass.

* Refine the originalViewOffset conditional logic further inside SSAARenderPass.

Co-authored-by: Matt Simpson <[email protected]>

Author: msimpson

examples/jsm/postprocessing/SSAARenderPass.js

@@ -95,7 +95,25 @@ class SSAARenderPass extends Pass {
 		const roundingRange = 1 / 32;
 		this.copyUniforms[ 'tDiffuse' ].value = this.sampleRenderTarget.texture;
 
-		const width = readBuffer.width, height = readBuffer.height;
+		let viewOffset = {
+			
+			fullWidth: readBuffer.width,
+			
+			fullHeight: readBuffer.height,
+			
+			offsetX: 0,
+			
+			offsetY: 0,
+			
+			width: readBuffer.width,
+			
+			height: readBuffer.height
+		
+		};
+
+		let originalViewOffset = Object.assign( {}, this.camera.view );
+	
+		if ( originalViewOffset.enabled ) Object.assign( viewOffset, originalViewOffset );
 
 		// render the scene multiple times, each slightly jitter offset from the last and accumulate the results.
 		for ( let i = 0; i < jitterOffsets.length; i ++ ) {
@@ -104,9 +122,15 @@ class SSAARenderPass extends Pass {
 
 			if ( this.camera.setViewOffset ) {
 
-				this.camera.setViewOffset( width, height,
-					jitterOffset[ 0 ] * 0.0625, jitterOffset[ 1 ] * 0.0625, // 0.0625 = 1 / 16
-					width, height );
+				this.camera.setViewOffset(
+					
+					viewOffset.fullWidth, viewOffset.fullHeight,
+					
+					viewOffset.offsetX + jitterOffset[ 0 ] * 0.0625, viewOffset.offsetY + jitterOffset[ 1 ] * 0.0625, // 0.0625 = 1 / 16
+					
+					viewOffset.width, viewOffset.height
+				
+				);
 
 			}
 
@@ -141,8 +165,26 @@ class SSAARenderPass extends Pass {
 			this.fsQuad.render( renderer );
 
 		}
-
-		if ( this.camera.clearViewOffset ) this.camera.clearViewOffset();
+			
+		if ( this.camera.setViewOffset && originalViewOffset.enabled ) {
+			
+			this.camera.setViewOffset(
+				
+				originalViewOffset.fullWidth, originalViewOffset.fullHeight,
+				
+				originalViewOffset.offsetX, originalViewOffset.offsetY,
+			
+				originalViewOffset.width, originalViewOffset.height
+			
+			);
+			
+		}
+		
+		else if ( this.camera.clearViewOffset ) {
+			
+			this.camera.clearViewOffset();
+			
+		}
 
 		renderer.autoClear = autoClear;
 		renderer.setClearColor( this._oldClearColor, oldClearAlpha );

examples/webgl_postprocessing_ssaa.html

@@ -39,6 +39,7 @@
 				camera: 'perspective',
 				clearColor: 'black',
 				clearAlpha: 1.0,
+				viewOffsetX: 0,
 				autoRotate: true
 
 			};
@@ -67,6 +68,7 @@
 				gui.add( params, 'camera', [ 'perspective', 'orthographic' ] );
 				gui.add( params, "clearColor", [ 'black', 'white', 'blue', 'green', 'red' ] );
 				gui.add( params, "clearAlpha", 0, 1 );
+				gui.add( params, "viewOffsetX", -100, 100 );
 				gui.add( params, "autoRotate" );
 
 				gui.open();
@@ -92,6 +94,7 @@
 
 				cameraP = new THREE.PerspectiveCamera( 65, aspect, 3, 10 );
 				cameraP.position.z = 7;
+				cameraP.setViewOffset( width, height, params.viewOffsetX, 0, width, height );
 
 				cameraO = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 3, 10 );
 				cameraO.position.z = 7;
@@ -172,6 +175,7 @@
 				const aspect = width / height;
 
 				cameraP.aspect = aspect;
+				cameraP.setViewOffset( width, height, params.viewOffset, 0, width, height );
 				cameraO.updateProjectionMatrix();
 
 				cameraO.left = - height * aspect;
@@ -226,6 +230,8 @@
 				ssaaRenderPassO.enabled = ( params.camera === 'orthographic' );
 
 				copyPass.enabled = ! params.renderToScreen;
+				
+				cameraP.view.offsetX = params.viewOffsetX;
 
 				composer.render();