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?
1 Like
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.
Hi!
Selective bloom? three.js examples
hey! i thought it might be possible to avoid this example 
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
2 Likes
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.
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.
Sure.
Here you are:
Pretty much based on the official example with selective bloom.
3 Likes
Hello Mr ,
to make the box non bloom you set
box.material = darkMaterial;
bloomComposer.render();
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 ?
Yes.
Make them black, render with bloomComposer, restore their original materials.
1 Like
Hello.
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
Great!!!
Thanks!
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?
@Stevieba
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
bloomComposer.render();
box.material = lightMaterial;
scene.background.set(bgColor); // set background color back
finalComposer.render();
//renderer.render(scene, camera);
})