How to use bloom effect not for all object in scene?

I make 2 scenes: first for objects, second for clone “lighting” objects with EffectComposer(BloomPass,FilmPass). I trying make renderer.render(scene,camera) with composer.render() - but it is not work, and i m reading here this is no good practic and way to troubles. How i can blooming not all scene?

use GitHub - vanruesc/postprocessing: A post processing library that provides the means to implement image filter effects for three.js. instead of jsm effectcomposer. it is more flexible and also outperforms the former. it has natural support for selective effects.

Selective bloom? three.js examples

hey! i thought it might be possible to avoid this example :slight_smile:

Yeah, the example itself is overcomplicated, but the conception of selective bloom is not that complex.

1 Like

Tangentially, as I’m just getting into this - I see the postprocessing lib uses “trianges instead of quads” and some more jargon I’m unfamiliar with.
Any thoughts on how much more efficient it is, and if three.js will catch up? ( I would always prefer to stick to the native lib if possible )

1 Like

use layers; and see more: Edit fiddle - JSFiddle - Code Playground

thank prisoner849

1 Like

Yes but… in all of the abouve examples the bloom effect gets clipped by the non bloom layers. I’ve been unsuccessful in getting the “Glow” effect to overlay onto non bloom effect background objects. I would expect that some of the “glow” would bleed over onto the non bloomed portion of the cube in the above examples.

Here is another way to visualize this problem.
I challenge anyone to demonstrate how to create a glowing wireframe cube where only the edges of the wireframe cube are glowing. THEN: inside of that glowing wireframe cube you have a solid NON-BLOOM cube that is 80% the size of the wireframe cube.

1 Like

I’m not sure if you’re familiar with the way Unity does its bloom post-processing, but The Cherno has a nice video explaining it, just search for “bloom the cherno” in YouTube and you’ll find it. He explains that you can easily achieve real selective bloom using SRGB color values (stuff above 1). I’m unsure how three would deal with this, so I’ve made my own implementation work with capturing any object that has an emissive value.

You then downsample the threshold image 13 times, blur it, then upsample and combine them again making a total of approx 28 render passes. This sounds scary but since you’re down sampling to extremely low resolutions, and mainly rely on linear filtering for the initial blurring, this even runs blazingly fast on average mobile hardware.

I don’t have an actual demo that you can see as a fiddle since I’ve baked this all deep in my own engine and rendering pipeline, but if you’re familiar enough with post processing techniques and know your way around render targets and three in general, this is pretty trivial to implement.

As for your challenge, create a box as a wall, put emissive value on it to make it “emit light”, then put a box in front of it and you’ll see light from the wall bleeding over the box, as long as the wall is visible. Remember, you’re dealing with post processing, meaning all information you can work with is what you see on screen.

Challenge accepted :thinking:


Box sizes:
inner wireframe - 5
solid box - 4 (80% of inner wireframe)


Very impressive @prisoner849. I tried for quite some time earlier this year to achieve this. Any chance you could make this available via a public fiddle. I would love to learn the proper techniques and how to better utilize layering.

Here you are:

Pretty much based on the official example with selective bloom.

1 Like

Hello Mr ,
to make the box non bloom you set

   box.material = darkMaterial;
   box.material = lightMaterial;

but if i have a scene with 14 obj and every single one have a different material ,and only one obj i need to bee with bloom , i have to set a dark material to every 13 obj ? there is no different way ?

Make them black, render with bloomComposer, restore their original materials.

1 Like


Isn’t possible to make box pure white?
It seems to be darken because of darkMaterial.
Thank you.

@bemuse try to comment this line: renderer.toneMapping = THREE.ReinhardToneMapping;

1 Like


Nice one @prisoner849

When I change the scene background to a dark grey, it seems to cause a very white scene.
scene.background = new THREE.Color(0x444444). Can you explain whats happening here?

I modified the example:

// define and set the color
let bgColor = 0x404040;
scene.background = new THREE.Color(bgColor);

// animation loop
renderer.setAnimationLoop(() => {
  box.material = darkMaterial;
  scene.background.set(0x000000); // all, except blooming objects, must be black, including background
  box.material = lightMaterial;
  scene.background.set(bgColor); // set background color back
  //renderer.render(scene, camera);