WebGLDeferredRenderer: added API for injecting postprocessing effects into...

WebGLDeferredRenderer: added API for injecting postprocessing effects into deferred rendering pipeline.

examples/js/postprocessing/EffectComposer.js

@@ -47,6 +47,12 @@ THREE.EffectComposer.prototype = {
 
 	},
 
+	insertPass: function ( pass, index ) {
+
+		this.passes.splice( index, 0, pass );
+
+	},
+
 	render: function ( delta ) {
 
 		this.writeBuffer = this.renderTarget1;

examples/js/renderers/WebGLDeferredRenderer.js

@@ -205,7 +205,7 @@ THREE.WebGLDeferredRenderer = function ( parameters ) {
 			uniforms.viewWidth.value = scaledWidth;
 			uniforms.viewHeight.value = scaledHeight;
 
-			resizableMaterials.push( material );
+			resizableMaterials.push( { "material": material } );
 
 		}
 
@@ -402,7 +402,7 @@ THREE.WebGLDeferredRenderer = function ( parameters ) {
 
 		// keep reference for size reset
 
-		resizableMaterials.push( materialLight );
+		resizableMaterials.push( { "material": materialLight } );
 
 		// sync proxy uniforms to the original light
 
@@ -478,7 +478,7 @@ THREE.WebGLDeferredRenderer = function ( parameters ) {
 
 		// keep reference for size reset
 
-		resizableMaterials.push( materialLight );
+		resizableMaterials.push( { "material": materialLight } );
 
 		// sync proxy uniforms to the original light
 
@@ -544,7 +544,7 @@ THREE.WebGLDeferredRenderer = function ( parameters ) {
 
 		// keep reference for size reset
 
-		resizableMaterials.push( materialLight );
+		resizableMaterials.push( { "material": materialLight } );
 
 		// sync proxy uniforms to the original light
 
@@ -610,7 +610,7 @@ THREE.WebGLDeferredRenderer = function ( parameters ) {
 
 		// keep reference for size reset
 
-		resizableMaterials.push( materialLight );
+		resizableMaterials.push( { "material": materialLight } );
 
 		// sync proxy uniforms to the original light
 
@@ -698,7 +698,7 @@ THREE.WebGLDeferredRenderer = function ( parameters ) {
 
 		// keep reference for size reset
 
-		resizableMaterials.push( materialLight );
+		resizableMaterials.push( { "material": materialLight } );
 
 		// sync proxy uniforms to the original light
 
@@ -734,7 +734,7 @@ THREE.WebGLDeferredRenderer = function ( parameters ) {
 
 		// keep reference for size reset
 
-		resizableMaterials.push( materialLight );
+		resizableMaterials.push( { "material": materialLight } );
 
 		return meshLight;
 
@@ -849,6 +849,25 @@ THREE.WebGLDeferredRenderer = function ( parameters ) {
 
 	};
 
+	this.addEffect = function ( effect, normalDepthUniform, colorUniform ) {
+
+		if ( effect.material && effect.uniforms ) {
+
+			if ( normalDepthUniform ) effect.uniforms[ normalDepthUniform ].value = compNormalDepth.renderTarget2;
+			if ( colorUniform )    	  effect.uniforms[ colorUniform ].value = compColor.renderTarget2;
+
+			if ( normalDepthUniform || colorUniform ) {
+
+				resizableMaterials.push( { "material": effect.material, "normalDepth": normalDepthUniform, "color": colorUniform } );
+
+			}
+
+		}
+
+		compFinal.insertPass( effect, -1 );
+
+	};
+
 	this.setScale = function ( scale ) {
 
 		currentScale = scale;
@@ -866,13 +885,19 @@ THREE.WebGLDeferredRenderer = function ( parameters ) {
 
 		for ( var i = 0, il = resizableMaterials.length; i < il; i ++ ) {
 
-			var uniforms = resizableMaterials[ i ].uniforms;
+			var materialEntry = resizableMaterials[ i ];
+
+			var material = materialEntry.material;
+			var uniforms = material.uniforms;
+
+			var colorLabel = materialEntry.color !== undefined ? materialEntry.color : 'samplerColor';
+			var normalDepthLabel = materialEntry.normalDepth !== undefined ? materialEntry.normalDepth : 'samplerNormalDepth';
 
-			uniforms[ "viewWidth" ].value = scaledWidth;
-			uniforms[ "viewHeight" ].value = scaledHeight;
+			if ( uniforms[ colorLabel ] ) uniforms[ colorLabel ].value = compColor.renderTarget2;
+			if ( uniforms[ normalDepthLabel ] ) uniforms[ normalDepthLabel ].value = compNormalDepth.renderTarget2;
 
-			if ( uniforms[ 'samplerColor' ] ) uniforms[ 'samplerColor' ].value = compColor.renderTarget2;
-			if ( uniforms[ 'samplerNormalDepth' ] ) uniforms[ 'samplerNormalDepth' ].value = compNormalDepth.renderTarget2;
+			if ( uniforms[ 'viewWidth' ] ) uniforms[ "viewWidth" ].value = scaledWidth;
+			if ( uniforms[ 'viewHeight' ] ) uniforms[ "viewHeight" ].value = scaledHeight;
 
 		}
 

examples/webgl_lights_deferred_arealights.html

@@ -54,11 +54,13 @@
 
 		<script src="js/shaders/CopyShader.js"></script>
 		<script src="js/shaders/FXAAShader.js"></script>
+		<script src="js/shaders/ConvolutionShader.js"></script>
 
 		<script src="js/postprocessing/EffectComposer.js"></script>
 		<script src="js/postprocessing/RenderPass.js"></script>
 		<script src="js/postprocessing/ShaderPass.js"></script>
 		<script src="js/postprocessing/MaskPass.js"></script>
+		<script src="js/postprocessing/BloomPass.js"></script>
 
 
 		<script>
@@ -114,6 +116,11 @@
 				var container = document.getElementById( 'container' );
 				container.appendChild( renderer.domElement );
 
+				// effects
+
+				var bloomEffect = new THREE.BloomPass( 0.75 );
+				renderer.addEffect( bloomEffect );
+
 				// camera
 
 				camera = new THREE.PerspectiveCamera( VIEW_ANGLE, WIDTH / HEIGHT, NEAR, FAR );