Post-Processing: Introducing base class for Passes

* Post-Processing: Introducing base class for Passes

* Post-Processing: move pass to effect composer

examples/js/postprocessing/AdaptiveToneMappingPass.js

@@ -9,6 +9,8 @@
 
 THREE.AdaptiveToneMappingPass = function ( adaptive, resolution ) {
 
+	THREE.Pass.call( this );
+
 	this.resolution = ( resolution !== undefined ) ? resolution : 256;
 	this.needsInit = true;
 	this.adaptive = adaptive !== undefined ? !! adaptive : true;
@@ -113,10 +115,6 @@ THREE.AdaptiveToneMappingPass = function ( adaptive, resolution ) {
 		blending: THREE.NoBlending
 	} );
 
-	this.enabled = true;
-	this.needsSwap = true;
-	this.clear = false;
-
 	this.camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
 	this.scene  = new THREE.Scene();
 
@@ -125,8 +123,12 @@ THREE.AdaptiveToneMappingPass = function ( adaptive, resolution ) {
 
 };
 
+THREE.AdaptiveToneMappingPass.prototype = Object.create( THREE.Pass.prototype );
+
 THREE.AdaptiveToneMappingPass.prototype = {
 
+	constructor: THREE.AdaptiveToneMappingPass,
+
 	render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
 
 		if ( this.needsInit ) {

examples/js/postprocessing/BloomPass.js

@@ -4,6 +4,8 @@
 
 THREE.BloomPass = function ( strength, kernelSize, sigma, resolution ) {
 
+	THREE.Pass.call( this );
+
 	strength = ( strength !== undefined ) ? strength : 1;
 	kernelSize = ( kernelSize !== undefined ) ? kernelSize : 25;
 	sigma = ( sigma !== undefined ) ? sigma : 4.0;
@@ -61,10 +63,7 @@ THREE.BloomPass = function ( strength, kernelSize, sigma, resolution ) {
 
 	} );
 
-	this.enabled = true;
 	this.needsSwap = false;
-	this.clear = false;
-
 
 	this.camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
 	this.scene  = new THREE.Scene();
@@ -74,8 +73,12 @@ THREE.BloomPass = function ( strength, kernelSize, sigma, resolution ) {
 
 };
 
+THREE.BloomPass.prototype = Object.create( THREE.Pass.prototype );
+
 THREE.BloomPass.prototype = {
 
+	constructor: THREE.BloomPass,
+
 	render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
 
 		if ( maskActive ) renderer.context.disable( renderer.context.STENCIL_TEST );

examples/js/postprocessing/BokehPass.js

@@ -5,6 +5,8 @@
 
 THREE.BokehPass = function ( scene, camera, params ) {
 
+	THREE.Pass.call( this );
+
 	this.scene = scene;
 	this.camera = camera;
 
@@ -55,10 +57,7 @@ THREE.BokehPass = function ( scene, camera, params ) {
 	} );
 
 	this.uniforms = bokehUniforms;
-	this.enabled = true;
 	this.needsSwap = false;
-	this.renderToScreen = false;
-	this.clear = false;
 
 	this.camera2 = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
 	this.scene2  = new THREE.Scene();
@@ -68,8 +67,12 @@ THREE.BokehPass = function ( scene, camera, params ) {
 
 };
 
+THREE.BokehPass.prototype = Object.create( THREE.Pass.prototype );
+
 THREE.BokehPass.prototype = {
 
+	constructor: THREE.BokehPass,
+
 	render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
 
 		this.quad2.material = this.materialBokeh;
@@ -99,4 +102,3 @@ THREE.BokehPass.prototype = {
 	}
 
 };
-

examples/js/postprocessing/ClearPass.js

@@ -4,13 +4,19 @@
 
 THREE.ClearPass = function () {
 
-	this.enabled = true;
+	THREE.Pass.call( this );
+
+	this.needsSwap = false;
 
 };
 
+THREE.ClearPass.prototype = Object.create( THREE.Pass.prototype );
+
 THREE.ClearPass.prototype = {
 
-	render: function ( renderer, writeBuffer, readBuffer ) {
+	constructor: THREE.ClearPass,
+
+	render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
 
 		renderer.setRenderTarget( readBuffer );
 		renderer.clear();

examples/js/postprocessing/DotScreenPass.js

@@ -4,6 +4,8 @@
 
 THREE.DotScreenPass = function ( center, angle, scale ) {
 
+	THREE.Pass.call( this );
+
 	if ( THREE.DotScreenShader === undefined )
 		console.error( "THREE.DotScreenPass relies on THREE.DotScreenShader" );
 
@@ -23,11 +25,6 @@ THREE.DotScreenPass = function ( center, angle, scale ) {
 
 	} );
 
-	this.enabled = true;
-	this.renderToScreen = false;
-	this.needsSwap = true;
-
-
 	this.camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
 	this.scene  = new THREE.Scene();
 
@@ -36,9 +33,13 @@ THREE.DotScreenPass = function ( center, angle, scale ) {
 
 };
 
+THREE.DotScreenPass.prototype = Object.create( THREE.Pass.prototype );
+
 THREE.DotScreenPass.prototype = {
 
-	render: function ( renderer, writeBuffer, readBuffer, delta ) {
+	constructor: THREE.DotScreenPass,
+
+	render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
 
 		this.uniforms[ "tDiffuse" ].value = readBuffer;
 		this.uniforms[ "tSize" ].value.set( readBuffer.width, readBuffer.height );
@@ -51,7 +52,7 @@ THREE.DotScreenPass.prototype = {
 
 		} else {
 
-			renderer.render( this.scene, this.camera, writeBuffer, false );
+			renderer.render( this.scene, this.camera, writeBuffer, this.clear );
 
 		}
 

examples/js/postprocessing/EffectComposer.js

@@ -134,3 +134,32 @@ 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 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 result of the pass is rendered to screen
+  this.renderToScreen = false;
+
+};
+
+THREE.Pass.prototype = {
+
+  constructor: THREE.Pass,
+
+  render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
+
+		console.error( "THREE.Pass: .render() must be implemented in derived pass." );
+
+  }
+
+};

examples/js/postprocessing/FilmPass.js

@@ -4,6 +4,8 @@
 
 THREE.FilmPass = function ( noiseIntensity, scanlinesIntensity, scanlinesCount, grayscale ) {
 
+	THREE.Pass.call( this );
+
 	if ( THREE.FilmShader === undefined )
 		console.error( "THREE.FilmPass relies on THREE.FilmShader" );
 
@@ -24,11 +26,6 @@ THREE.FilmPass = function ( noiseIntensity, scanlinesIntensity, scanlinesCount,
 	if ( scanlinesIntensity !== undefined ) this.uniforms.sIntensity.value = scanlinesIntensity;
 	if ( scanlinesCount !== undefined ) this.uniforms.sCount.value = scanlinesCount;
 
-	this.enabled = true;
-	this.renderToScreen = false;
-	this.needsSwap = true;
-
-
 	this.camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
 	this.scene  = new THREE.Scene();
 
@@ -37,9 +34,13 @@ THREE.FilmPass = function ( noiseIntensity, scanlinesIntensity, scanlinesCount,
 
 };
 
+THREE.FilmPass.prototype = Object.create( THREE.Pass.prototype );
+
 THREE.FilmPass.prototype = {
 
-	render: function ( renderer, writeBuffer, readBuffer, delta ) {
+	constructor: THREE.FilmPass,
+
+	render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
 
 		this.uniforms[ "tDiffuse" ].value = readBuffer;
 		this.uniforms[ "time" ].value += delta;
@@ -52,7 +53,7 @@ THREE.FilmPass.prototype = {
 
 		} else {
 
-			renderer.render( this.scene, this.camera, writeBuffer, false );
+			renderer.render( this.scene, this.camera, writeBuffer, this.clear );
 
 		}
 

examples/js/postprocessing/GlitchPass.js

@@ -1,19 +1,21 @@
 /**
- 
+ * @author alteredq / http://alteredqualia.com/
  */
 
 THREE.GlitchPass = function ( dt_size ) {
 
+	THREE.Pass.call( this );
+
 	if ( THREE.DigitalGlitch === undefined ) console.error( "THREE.GlitchPass relies on THREE.DigitalGlitch" );
-	
+
 	var shader = THREE.DigitalGlitch;
 	this.uniforms = THREE.UniformsUtils.clone( shader.uniforms );
 
 	if ( dt_size == undefined ) dt_size = 64;
-	
-	
+
+
 	this.uniforms[ "tDisp" ].value = this.generateHeightmap( dt_size );
-	
+
 
 	this.material = new THREE.ShaderMaterial( {
 		uniforms: this.uniforms,
@@ -21,31 +23,30 @@ THREE.GlitchPass = function ( dt_size ) {
 		fragmentShader: shader.fragmentShader
 	} );
 
-	this.enabled = true;
-	this.renderToScreen = false;
-	this.needsSwap = true;
-
-
 	this.camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
 	this.scene  = new THREE.Scene();
 
 	this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
 	this.scene.add( this.quad );
-	
+
 	this.goWild = false;
 	this.curF = 0;
 	this.generateTrigger();
-	
+
 };
 
+THREE.GlitchPass.prototype = Object.create( THREE.Pass.prototype );
+
 THREE.GlitchPass.prototype = {
 
-	render: function ( renderer, writeBuffer, readBuffer, delta ) {
+	constructor: THREE.GlitchPass,
+
+	render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
 
 		this.uniforms[ "tDiffuse" ].value = readBuffer;
 		this.uniforms[ 'seed' ].value = Math.random();//default seeding
 		this.uniforms[ 'byp' ].value = 0;
-		
+
 		if ( this.curF % this.randX == 0 || this.goWild == true ) {
 
 			this.uniforms[ 'amount' ].value = Math.random() / 30;
@@ -71,30 +72,33 @@ THREE.GlitchPass.prototype = {
 			this.uniforms[ 'byp' ].value = 1;
 
 		}
+
 		this.curF ++;
-		
 		this.quad.material = this.material;
+
 		if ( this.renderToScreen ) {
 
 			renderer.render( this.scene, this.camera );
 
 		} else {
 
-			renderer.render( this.scene, this.camera, writeBuffer, false );
+			renderer.render( this.scene, this.camera, writeBuffer, this.clear );
 
 		}
 
 	},
+
 	generateTrigger: function() {
 
 		this.randX = THREE.Math.randInt( 120, 240 );
 
 	},
+
 	generateHeightmap: function( dt_size ) {
 
 		var data_arr = new Float32Array( dt_size * dt_size * 3 );
 		var length = dt_size * dt_size;
-		
+
 		for ( var i = 0; i < length; i ++ ) {
 
 			var val = THREE.Math.randFloat( 0, 1 );
@@ -103,10 +107,11 @@ THREE.GlitchPass.prototype = {
 			data_arr[ i * 3 + 2 ] = val;
 
 		}
-		
+
 		var texture = new THREE.DataTexture( data_arr, dt_size, dt_size, THREE.RGBFormat, THREE.FloatType );
 		texture.needsUpdate = true;
 		return texture;
 
 	}
+
 };

examples/js/postprocessing/ManualMSAARenderPass.js

@@ -12,6 +12,8 @@
 
 THREE.ManualMSAARenderPass = function ( scene, camera, params ) {
 
+	THREE.Pass.call( this );
+
 	this.scene = scene;
 	this.camera = camera;
 
@@ -20,9 +22,6 @@ THREE.ManualMSAARenderPass = function ( scene, camera, params ) {
 	this.params = params || { minFilter: THREE.NearestFilter, magFilter: THREE.NearestFilter, format: THREE.RGBAFormat };
 	this.params.minFilter = THREE.NearestFilter;
 	this.params.maxFilter = THREE.NearestFilter;
-	this.enabled = true;
-
-	this.needsSwap = true;
 
 	if ( THREE.CompositeShader === undefined ) {
 
@@ -57,6 +56,8 @@ THREE.ManualMSAARenderPass = function ( scene, camera, params ) {
 
 };
 
+THREE.ManualMSAARenderPass.prototype = Object.create( THREE.Pass.prototype );
+
 THREE.ManualMSAARenderPass.prototype = {
 
 	constructor: THREE.ManualMSAARenderPass,
@@ -79,7 +80,7 @@ THREE.ManualMSAARenderPass.prototype = {
 
 	},
 
-	render: function ( renderer, writeBuffer, readBuffer, delta ) {
+	render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
 
 		var camera = ( this.camera || this.scene.camera );
 		var jitterOffsets = THREE.ManualMSAARenderPass.JitterVectors[ Math.max( 0, Math.min( this.sampleLevel, 5 ) ) ];

examples/js/postprocessing/MaskPass.js

@@ -4,10 +4,11 @@
 
 THREE.MaskPass = function ( scene, camera ) {
 
+	THREE.Pass.call( this );
+
 	this.scene = scene;
 	this.camera = camera;
 
-	this.enabled = true;
 	this.clear = true;
 	this.needsSwap = false;
 
@@ -15,9 +16,13 @@ THREE.MaskPass = function ( scene, camera ) {
 
 };
 
+THREE.MaskPass.prototype = Object.create( THREE.Pass.prototype );
+
 THREE.MaskPass.prototype = {
 
-	render: function ( renderer, writeBuffer, readBuffer, delta ) {
+	constructor: THREE.MaskPass,
+
+	render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
 
 		var context = renderer.context;
 
@@ -69,13 +74,19 @@ THREE.MaskPass.prototype = {
 
 THREE.ClearMaskPass = function () {
 
-	this.enabled = true;
+	THREE.Pass.call( this );
+
+	this.needsSwap = false;
 
 };
 
+THREE.ClearMaskPass.prototype = Object.create( THREE.Pass.prototype );
+
 THREE.ClearMaskPass.prototype = {
 
-	render: function ( renderer, writeBuffer, readBuffer, delta ) {
+	constructor: THREE.ClearMaskPass,
+
+	render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
 
 		var context = renderer.context;
 

examples/js/postprocessing/RenderPass.js

@@ -4,6 +4,8 @@
 
 THREE.RenderPass = function ( scene, camera, overrideMaterial, clearColor, clearAlpha ) {
 
+	THREE.Pass.call( this );
+
 	this.scene = scene;
 	this.camera = camera;
 
@@ -15,15 +17,18 @@ THREE.RenderPass = function ( scene, camera, overrideMaterial, clearColor, clear
 	this.oldClearColor = new THREE.Color();
 	this.oldClearAlpha = 1;
 
-	this.enabled = true;
 	this.clear = true;
 	this.needsSwap = false;
 
 };
 
+THREE.RenderPass.prototype = Object.create( THREE.Pass.prototype );
+
 THREE.RenderPass.prototype = {
 
-	render: function ( renderer, writeBuffer, readBuffer, delta ) {
+	constructor: THREE.RenderPass,
+
+	render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
 
 		this.scene.overrideMaterial = this.overrideMaterial;
 

examples/js/postprocessing/SMAAPass.js

@@ -4,6 +4,8 @@
 
 THREE.SMAAPass = function ( width, height ) {
 
+	THREE.Pass.call( this );
+
 	// render targets
 
 	this.edgesRT = new THREE.WebGLRenderTarget( width, height, {
@@ -92,13 +94,7 @@ THREE.SMAAPass = function ( width, height ) {
 		fragmentShader: THREE.SMAAShader[2].fragmentShader
 	} );
 
-	//
-
-	this.renderToScreen = false;
-
-	this.enabled = true;
 	this.needsSwap = false;
-	this.clear = false;
 
 	this.camera = new THREE.OrthographicCamera( -1, 1, 1, -1, 0, 1 );
 	this.scene  = new THREE.Scene();
@@ -108,9 +104,13 @@ THREE.SMAAPass = function ( width, height ) {
 
 };
 
+THREE.SMAAPass.prototype = Object.create( THREE.Pass.prototype );
+
 THREE.SMAAPass.prototype = {
 
-	render: function ( renderer, writeBuffer, readBuffer, delta ) {
+	constructor: THREE.SMAAPass,
+
+	render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
 
 		// pass 1
 

examples/js/postprocessing/SavePass.js

@@ -4,6 +4,8 @@
 
 THREE.SavePass = function ( renderTarget ) {
 
+	THREE.Pass.call( this );
+
 	if ( THREE.CopyShader === undefined )
 		console.error( "THREE.SavePass relies on THREE.CopyShader" );
 
@@ -30,10 +32,7 @@ THREE.SavePass = function ( renderTarget ) {
 
 	}
 
-	this.enabled = true;
 	this.needsSwap = false;
-	this.clear = false;
-
 
 	this.camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
 	this.scene  = new THREE.Scene();
@@ -43,9 +42,13 @@ THREE.SavePass = function ( renderTarget ) {
 
 };
 
+THREE.SavePass.prototype = Object.create( THREE.Pass.prototype );
+
 THREE.SavePass.prototype = {
 
-	render: function ( renderer, writeBuffer, readBuffer, delta ) {
+	constructor: THREE.SavePass,
+
+	render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
 
 		if ( this.uniforms[ this.textureID ] ) {
 

examples/js/postprocessing/ShaderPass.js

@@ -4,6 +4,8 @@
 
 THREE.ShaderPass = function( shader, textureID ) {
 
+	THREE.Pass.call( this );
+
 	this.textureID = ( textureID !== undefined ) ? textureID : "tDiffuse";
 
 	if ( shader instanceof THREE.ShaderMaterial ) {
@@ -28,13 +30,6 @@ THREE.ShaderPass = function( shader, textureID ) {
 
 	}
 
-	this.renderToScreen = false;
-
-	this.enabled = true;
-	this.needsSwap = true;
-	this.clear = false;
-
-
 	this.camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
 	this.scene = new THREE.Scene();
 
@@ -43,9 +38,13 @@ THREE.ShaderPass = function( shader, textureID ) {
 
 };
 
+THREE.ShaderPass.prototype = Object.create( THREE.Pass.prototype );
+
 THREE.ShaderPass.prototype = {
 
-	render: function( renderer, writeBuffer, readBuffer, delta ) {
+	constructor: THREE.ShaderPass,
+
+	render: function( renderer, writeBuffer, readBuffer, delta, maskActive ) {
 
 		if ( this.uniforms[ this.textureID ] ) {
 

examples/js/postprocessing/TAARenderPass.js

@@ -23,7 +23,7 @@ THREE.TAARenderPass = function ( scene, camera, params ) {
 
 	this.sampleLevel = 0;
 	this.accumulate = false;
-	
+
 };
 
 THREE.TAARenderPass.prototype = Object.create( THREE.ManualMSAARenderPass.prototype );
@@ -90,7 +90,7 @@ THREE.TAARenderPass.prototype.render = function ( renderer, writeBuffer, readBuf
 
 			renderer.render( this.scene, this.camera, writeBuffer, true );
 
-			renderer.render( this.scene2, this.camera2, this.sampleRenderTarget, ( this.accumulateIndex == 0 ) );
+			renderer.render( this.scene2, this.camera2, this.sampleRenderTarget, ( this.accumulateIndex === 0 ) );
 
 			this.accumulateIndex ++;
 			if( this.accumulateIndex >= jitterOffsets.length ) break;

examples/js/postprocessing/TexturePass.js

@@ -4,6 +4,8 @@
 
 THREE.TexturePass = function ( texture, opacity ) {
 
+	THREE.Pass.call( this );
+
 	if ( THREE.CopyShader === undefined )
 		console.error( "THREE.TexturePass relies on THREE.CopyShader" );
 
@@ -22,10 +24,8 @@ THREE.TexturePass = function ( texture, opacity ) {
 
 	} );
 
-	this.enabled = true;
 	this.needsSwap = false;
 
-
 	this.camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
 	this.scene  = new THREE.Scene();
 
@@ -34,13 +34,17 @@ THREE.TexturePass = function ( texture, opacity ) {
 
 };
 
+THREE.TexturePass.prototype = Object.create( THREE.Pass.prototype );
+
 THREE.TexturePass.prototype = {
 
-	render: function ( renderer, writeBuffer, readBuffer, delta ) {
+	constructor: THREE.TexturePass,
+
+	render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
 
 		this.quad.material = this.material;
 
-		renderer.render( this.scene, this.camera, readBuffer );
+		renderer.render( this.scene, this.camera, readBuffer, this.clear );
 
 	}