three.js EffectComposer browser window resize issue

Question

I have a rendering setup where a resizing problem occurs when resizing the browser window.

I render two scenes, one of them for objects with postprocessing effects applied. For the effects I use the THREE.EffectComposer and shaders from the example directory.

The two scene renders are then additively blended with the help of another shader example.

See following simplified setup: http://jsbin.com/hibum/18/edit?js,output (in the HTML part I include a few js sources from the three.js repository)

If you shrink the output panel, then reload the page and again widen the panel, you'll see something like this:

The second scene rendering did not update correctly

The main scene (blue sphere) did update its rendering size, but the effects scene (orange sphere) still has the same resolution, just upscaled.

I can't find out which render target or renderer (or shader uniform?) needs to be updated at the browser resize event to still correctly output the image after resizing.

For the main composer it works with a setSize() call, but if I do that on the effects composer, it won't render the effects scene.

Any help is appreciated, thanks.

See how EffectComposer.reset() is used in the three.js examples. — WestLangley
@WestLangley, if I add a reset() to either the main or effects EffectComposer inside the setSize() function (the function that's called on browser resize) in my jsbin example, the effects scene is not rendered anymore, only the main scene... /edit: only main.reset(); in this function renders both scenes, but has no effect on the resize issue — dennis
OK, so you have to figure out why it works correctly in the three.js examples, but not it your code. — WestLangley
@WestLangley Right, thank you. I did not "re-attach" the render target after resetting the two composers. — dennis

dennis dennis · Accepted Answer · 2014-05-05T15:26:02

I had to reset both EffectComposers and then also reset the tDiffuse2 uniform of the AdditiveBlendShader:

main.reset();  
effects.reset();  

blend.uniforms.tDiffuse2.value = effects.renderTarget2;

See http://jsbin.com/hibum/23/edit?js,output

three.js EffectComposer browser window resize issue

1 Answers