4

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

Enamul Hassan
  • 5,266
  • 23
  • 39
  • 56
Kevin Kuyl
  • 1,215
  • 1
  • 17
  • 31
  • I looked at the shader [here](https://github.com/mrdoob/three.js/blob/b7279adc60d366ff33a3e662576f349720139820/examples/js/shaders/ConvolutionShader.js) You should probably have that yellow way brighter, if not setting up a floating point render texture yourself. The code [here](https://github.com/mrdoob/three.js/blob/6ff842c0f4a1fbe99e741ffac6e99ff7749f1f1c/examples/js/postprocessing/BloomPass.js) seems to say that the blur pass is just superimposed and thats what the material at line 30 does. Try adding another copy pass with your bloom render result, over your current output, might work – pailhead May 17 '14 at 01:43
  • thank you for the quick response, i have turned up the brightness of the yellow way up now, and tried adding another copy pass. but im completely new to this kind of programming, im not sure if the pass doesnt work, or im doing something wrong. probably the latter. if it's not too much trouble could you give me a nutshell explanation of how the passes are processed? – Kevin Kuyl May 17 '14 at 04:42
  • 2
    i have figured out the solution using examples, turns out the solution was really simple, and not really in my question. 'renderer.autoClear = false;' i could still use that explanation for future reference tho. – Kevin Kuyl May 17 '14 at 04:54
  • In a nutshell, you render two triangles across the entire screen and then process a temporary texture (buffer) with a shader using that quad. You can be as creative as you want. Here you rendered your scene into a texture, this texture is then processed and along the way copies are made (like bluring it in one direction, then using that temporary texture and bluring it in the other). At the end of the chain, you show the result on the screen. – pailhead May 17 '14 at 05:51
  • Your help has been educational, thank you very much ^^ – Kevin Kuyl May 17 '14 at 06:17
  • Stumbled upon this one: http://threejs.org/examples/#webgl_shaders_tonemapping – polyclick May 05 '16 at 17:06

2 Answers2

5

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

user3201996
  • 186
  • 2
  • 4
0

A bloom is a blurred image, super imposed over your main rendering. You probably need more of a dynamic range to create the effect as seen in the attached image.

pailhead
  • 5,162
  • 2
  • 25
  • 46