CODEWITHSUNDEEP
javascriptthree.jsrendering
dennis
dennis

Reputation: 865

three.js EffectComposer browser window resize issue

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.

Upvotes: 2

Views: 1422

Answers (1)

dennis
dennis

Reputation: 865

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

Upvotes: 4

Related Questions