Merge pull request #12086 from tentone/unrealpass-toscreen

UnrealBloomPass enable renderToScreen

examples/js/postprocessing/UnrealBloomPass.js

@@ -1,9 +1,9 @@
 /**
  * @author spidersharma / http://eduperiment.com/
- Inspired from Unreal Engine::
- https://docs.unrealengine.com/latest/INT/Engine/Rendering/PostProcessEffects/Bloom/
+ * 
+ * Inspired from Unreal Engine
+ * https://docs.unrealengine.com/latest/INT/Engine/Rendering/PostProcessEffects/Bloom/
  */
-
 THREE.UnrealBloomPass = function ( resolution, strength, radius, threshold ) {
 
 	THREE.Pass.call( this );
@@ -131,6 +131,8 @@ THREE.UnrealBloomPass = function ( resolution, strength, radius, threshold ) {
 	this.camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
 	this.scene = new THREE.Scene();
 
+	this.basic = new THREE.MeshBasicMaterial();
+
 	this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
 	this.quad.frustumCulled = false; // Avoid getting clipped
 	this.scene.add( this.quad );
@@ -191,11 +193,23 @@ THREE.UnrealBloomPass.prototype = Object.assign( Object.create( THREE.Pass.proto
 
 		if ( maskActive ) renderer.context.disable( renderer.context.STENCIL_TEST );
 
+		// Render input to screen
+
+		if ( this.renderToScreen ) {
+
+			this.quad.material = this.basic;
+			this.basic.map = readBuffer.texture;
+
+			renderer.render( this.scene, this.camera, undefined, true );
+
+		}
+
 		// 1. Extract Bright Areas
 
 		this.highPassUniforms[ "tDiffuse" ].value = readBuffer.texture;
 		this.highPassUniforms[ "luminosityThreshold" ].value = this.threshold;
-		this.quad.material = this.materialHighPassFilter;
+		this.quad.material = this.materialHighPassFilter;		
+
 		renderer.render( this.scene, this.camera, this.renderTargetBright, true );
 
 		// 2. Blur All the mips progressively
@@ -207,15 +221,11 @@ THREE.UnrealBloomPass.prototype = Object.assign( Object.create( THREE.Pass.proto
 			this.quad.material = this.separableBlurMaterials[ i ];
 
 			this.separableBlurMaterials[ i ].uniforms[ "colorTexture" ].value = inputRenderTarget.texture;
-
 			this.separableBlurMaterials[ i ].uniforms[ "direction" ].value = THREE.UnrealBloomPass.BlurDirectionX;
-
 			renderer.render( this.scene, this.camera, this.renderTargetsHorizontal[ i ], true );
 
 			this.separableBlurMaterials[ i ].uniforms[ "colorTexture" ].value = this.renderTargetsHorizontal[ i ].texture;
-
 			this.separableBlurMaterials[ i ].uniforms[ "direction" ].value = THREE.UnrealBloomPass.BlurDirectionY;
-
 			renderer.render( this.scene, this.camera, this.renderTargetsVertical[ i ], true );
 
 			inputRenderTarget = this.renderTargetsVertical[ i ];
@@ -228,6 +238,7 @@ THREE.UnrealBloomPass.prototype = Object.assign( Object.create( THREE.Pass.proto
 		this.compositeMaterial.uniforms[ "bloomStrength" ].value = this.strength;
 		this.compositeMaterial.uniforms[ "bloomRadius" ].value = this.radius;
 		this.compositeMaterial.uniforms[ "bloomTintColors" ].value = this.bloomTintColors;
+
 		renderer.render( this.scene, this.camera, this.renderTargetsHorizontal[ 0 ], true );
 
 		// Blend it additively over the input texture
@@ -237,7 +248,18 @@ THREE.UnrealBloomPass.prototype = Object.assign( Object.create( THREE.Pass.proto
 
 		if ( maskActive ) renderer.context.enable( renderer.context.STENCIL_TEST );
 
-		renderer.render( this.scene, this.camera, readBuffer, false );
+
+		if ( this.renderToScreen ) {
+
+			renderer.render( this.scene, this.camera, undefined, false );
+
+		} else {
+
+			renderer.render( this.scene, this.camera, readBuffer, false );
+
+		}
+
+		// Restore renderer settings
 
 		renderer.setClearColor( this.oldClearColor, this.oldClearAlpha );
 		renderer.autoClear = oldAutoClear;

examples/webgl_postprocessing_unreal_bloom.html

@@ -144,6 +144,7 @@
 					hdrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
 
 				} );
+
 				// Lights
 
 				scene.add( new THREE.AmbientLight( 0x222222 ) );
@@ -162,21 +163,18 @@
 
 				renderScene = new THREE.RenderPass(scene, camera);
 
-		    // renderScene.clear = true;
-		    effectFXAA = new THREE.ShaderPass(THREE.FXAAShader);
-		    effectFXAA.uniforms['resolution'].value.set(1 / window.innerWidth, 1 / window.innerHeight );
+				effectFXAA = new THREE.ShaderPass(THREE.FXAAShader);
+				effectFXAA.uniforms['resolution'].value.set(1 / window.innerWidth, 1 / window.innerHeight );
 
-				var copyShader = new THREE.ShaderPass(THREE.CopyShader);
-				copyShader.renderToScreen = true;
+				bloomPass = new THREE.UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85);//1.0, 9, 0.5, 512);
+				bloomPass.renderToScreen = true;
 
-		    bloomPass = new THREE.UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85);//1.0, 9, 0.5, 512);
 				composer = new THREE.EffectComposer(renderer);
-		    composer.setSize(window.innerWidth, window.innerHeight);
-		    composer.addPass(renderScene);
+				composer.setSize(window.innerWidth, window.innerHeight);
+				composer.addPass(renderScene);
 				composer.addPass(effectFXAA);
-		    composer.addPass(bloomPass);
-				composer.addPass(copyShader);
-				//renderer.toneMapping = THREE.ReinhardToneMapping;
+				composer.addPass(bloomPass);
+
 				renderer.gammaInput = true;
 				renderer.gammaOutput = true;
 
@@ -191,14 +189,14 @@
 
 				gui.add( params, 'exposure', 0.1, 2 );
 				gui.add( params, 'bloomThreshold', 0.0, 1.0 ).onChange( function(value) {
-		        bloomPass.threshold = Number(value);
-		    });
+					bloomPass.threshold = Number(value);
+				});
 				gui.add( params, 'bloomStrength', 0.0, 3.0 ).onChange( function(value) {
-		        bloomPass.strength = Number(value);
-		    });
+					bloomPass.strength = Number(value);
+				});
 				gui.add( params, 'bloomRadius', 0.0, 1.0 ).onChange( function(value) {
-		        bloomPass.radius = Number(value);
-		    });
+					bloomPass.radius = Number(value);
+				});
 				gui.open();
 
 			}
@@ -261,7 +259,6 @@
 
 				}
 
-				// renderer.render( scene, camera );
 				composer.render();
 			}