Double Effect Composer Postprocessing Selective Glow

Questions
1

Hey there
( THREE.js 101r ) Im trying to create a simple glow post processing effect:

  1. Render the scene with glowing objects (glow composer)
  2. Apply blur to it, and save to a renderTarget
  3. Render the scene with all objects (main composer)
  4. Additively blend the result with glowing objects render target

I use 2 EffectComposers for this, first one to blur the glow objects, second one to blend the results.
glowyglow.zip (235.0 KB)
In the demo I want the cylinder to glow. The glowScene works fine, as shown when rendered with the renderer (commented line in animate() ) or when the glowComposer renders with the (last) vBlur.renderToScreen = true. That means I must have screwed up the composers setup. I’ve set the blending shader to show the glow render target by default, to highlight the problem. Somehow the glowRenderPass renders the main scene instead of the glow objects scene?
This is my initPostProcessing() function:

    composer = new THREE.EffectComposer( renderer );
	
	let glowRenderer = new THREE.WebGLRenderer({ canvas: canvas });
	glowRenderTarget = new THREE.WebGLRenderTarget( 512 , 512 , {} );
	glowComposer = new THREE.EffectComposer( glowRenderer );
	
	let renderPass = new THREE.RenderPass( scene0 , camera0 );
	let fxaaPass = new THREE.ShaderPass( THREE.FXAAShader );
	additivePass = new THREE.ShaderPass( additivePassShader );
	
	let glowPass = new THREE.RenderPass( glowScene , camera0 );
	let bluriness = 3;
	let hBlur = new THREE.ShaderPass( THREE.HorizontalBlurShader );
	hBlur.uniforms.h.value = bluriness/canvas.height;
	let vBlur = new THREE.ShaderPass( THREE.VerticalBlurShader );
	vBlur.uniforms.v.value = bluriness/canvas.width;
	
	glowComposer.addPass( glowPass );
	glowComposer.addPass( hBlur );
	glowComposer.addPass( vBlur );
	
	composer.addPass( renderPass );
	composer.addPass( fxaaPass );
	composer.addPass( additivePass );
	additivePass.renderToScreen = true;

and I have this in my loop:

	glowComposer.render( glowScene , camera0 );
	additivePass.uniforms.tGlow.value = glowRenderTarget.texture;
	
	composer.render( scene0, camera0 );

I noticed that if I change both renderPasses to ( glowScene, camera0 ), then the glow scene renders correctly, but the main scene render shows only the glowing objects as well. Are those 2 renderPasses connected somehow, even though they’re 2 different instances of THREE.RenderPass? :thinking:

What am I doing wrong? :sweat:

2

The latest release R104 added a new example that shows how to apply selective bloom. Maybe you can use a similar approach in your app:

https://threejs.org/examples/webgl_postprocessing_unreal_bloom_selective

3 Likes