Pass.setSize - make resizing of passes automatic through EffectComposer.setSize (#8925)

* add Pass.setSize() and have it called automatically by EffectComposer.setSize()

* fix minor bugs in EffectComposer.setSize routine.

* fix buggy prototype usage in Pass derived classes.

* fix buggy prototype usage in Pass derived classes.

* remove constructors as suggested by @mrdoob

* fix MaskPass's prototype.

* init pass side when added to compositor.

* tabify EffectComposer.js

* simplify for loop.

examples/js/postprocessing/EffectComposer.js

@@ -48,6 +48,9 @@ THREE.EffectComposer.prototype = {
 
 		this.passes.push( pass );
 
+		var size = this.renderer.getSize();
+		pass.setSize( size.width, size.height );
+
 	},
 
 	insertPass: function ( pass, index ) {
@@ -131,6 +134,12 @@ THREE.EffectComposer.prototype = {
 		this.renderTarget1.setSize( width, height );
 		this.renderTarget2.setSize( width, height );
 
+		for ( var i = 0; i < this.passes.length; i ++ ) {
+
+			this.passes[i].setSize( width, height );
+
+		}
+
 	}
 
 };
@@ -138,28 +147,30 @@ THREE.EffectComposer.prototype = {
 
 THREE.Pass = function () {
 
-  // if set to true, the pass is processed by the composer
-  this.enabled = true;
+	// if set to true, the pass is processed by the composer
+	this.enabled = true;
 
-  // if set to true, the pass indicates to swap read and write buffer after rendering
-  this.needsSwap = true;
+	// if set to true, the pass indicates to swap read and write buffer after rendering
+	this.needsSwap = true;
 
-  // if set to true, the pass clears its buffer before rendering
-  this.clear = false;
+	// if set to true, the pass clears its buffer before rendering
+	this.clear = false;
 
-  // if set to true, the result of the pass is rendered to screen
-  this.renderToScreen = false;
+	// if set to true, the result of the pass is rendered to screen
+	this.renderToScreen = false;
 
 };
 
 THREE.Pass.prototype = {
 
-  constructor: THREE.Pass,
+	constructor: THREE.Pass,
+
+	setSize: function( width, height ) {},
 
-  render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
+	render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
 
 		console.error( "THREE.Pass: .render() must be implemented in derived pass." );
 
-  }
+	}
 
 };

examples/js/postprocessing/SMAAPass.js

@@ -107,7 +107,7 @@ THREE.SMAAPass = function ( width, height ) {
 THREE.SMAAPass.prototype = Object.create( THREE.Pass.prototype );
 
 Object.assign( THREE.SMAAPass.prototype, {
-
+
 	render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
 
 		// pass 1

examples/js/postprocessing/TAARenderPass.js

@@ -29,6 +29,7 @@ THREE.TAARenderPass = function ( scene, camera, params ) {
 THREE.TAARenderPass.JitterVectors = THREE.ManualMSAARenderPass.JitterVectors;
 
 THREE.TAARenderPass.prototype = Object.create( THREE.ManualMSAARenderPass.prototype );
+
 Object.assign( THREE.TAARenderPass.prototype, {
 
 	render: function ( renderer, writeBuffer, readBuffer, delta ) {

examples/webgl_postprocessing_msaa.html

@@ -153,7 +153,6 @@
 				var newWidth  = Math.floor( width / pixelRatio ) || 1;
 				var newHeight = Math.floor( height / pixelRatio ) || 1;
 				composer.setSize( newWidth, newHeight );
-				msaaRenderPass.setSize( newWidth, newHeight );
 
 			}
 

examples/webgl_postprocessing_smaa.html

@@ -98,7 +98,6 @@
 				var newWidth  = Math.floor( width / pixelRatio ) || 1;
 				var newHeight = Math.floor( height / pixelRatio ) || 1;
 				composer.setSize( newWidth, newHeight );
-				pass.setSize( newWidth, newHeight );
 
 			}
 

examples/webgl_postprocessing_taa.html

@@ -172,7 +172,6 @@
 				var newWidth  = Math.floor( width / pixelRatio ) || 1;
 				var newHeight = Math.floor( height / pixelRatio ) || 1;
 				composer.setSize( newWidth, newHeight );
-				taaRenderPass.setSize( newWidth, newHeight );
 
 			}