three.jsbloom

three.js bloom is a blur?

I am currently experimenting a bit with three.js and I am trying to add a bloom effect. however, when Iadd the bloom, it comes out more as a blur than an actual bloom:

enter image description here

the code:

composer = new THREE.EffectComposer(renderer, renderTarget);
effectBloom = new THREE.BloomPass(1, 25, 5);
composer.addPass(renderModel)
composer.addPass(effectBloom);
composer.addPass(copyPass)

and its being rendered with:

composer.render( delta )

I would like to get closer to this:

enter image description here

Solution

  • I had this similar issue. Bloom was just blurring the rendered image. To fix the issue I had to set renderer autoClear to false:

    renderer.autoClear = false;

    And in my render loop I had to do the clearing manually just before using composer to render the scene:

    renderer.clear();
composer.render();

    Check my pen to see this in action: http://codepen.io/jaamo/pen/BoKXrL