# Selective Bloom Issues

**URL:** <https://discourse.threejs.org/t/selective-bloom-issues/68143>\
**Category:** Questions\
**Tags:** selective-bloom, post-processing\
**Created:** [July 14, 2024, 10:16pm UTC](https://discourse.threejs.org/t/selective-bloom-issues/68143 "2024-07-14T22:16:39Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![MEPower](https://avatars.discourse-cdn.com/v4/letter/m/ba9def/32.png) [@MEPower](https://discourse.threejs.org/u/MEPower)\
**Post date:** [July 14, 2024, 10:16pm UTC](https://discourse.threejs.org/t/selective-bloom-issues/68143/1 "2024-07-14T22:16:39Z")

</div>

Hi everyone,

I have a program where I have several groups of meshes. I want exactly one of these mesh groups to glow. For that, I am able to target the one mesh in that group that makes up most of its area. I do not really know much about the bloom filter as I was not able to find the code for UnrealBloomPass.

Anyway, after looking at the examples and at forum posts especially by @ [drcmda](https://discourse.threejs.org/u/drcmda), I have written this code  
(stencil buffer is true because I am using a stencil buffer elsewhere in the code)

```javascript
const renderer = new THREE.WebGLRenderer({antialias:true, stencil:true});
renderer.sortObjects = false;
renderer.setSize( window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.outputEncoding = THREE.sRGBEncoding
renderer.toneMapping = THREE.ACESFilmicToneMapping
...
const renderTarget = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, {
    type: THREE.HalfFloatType,
    format: THREE.RGBAFormat,
    encoding: THREE.sRGBEncoding,
    stencilBuffer:true
  })

renderTarget.samples = 8;
const composer = new EffectComposer( renderer, renderTarget );

composer.addPass(new RenderPass(scene, camera));
composer.addPass(new ShaderPass(GammaCorrectionShader));
composer.addPass(new UnrealBloomPass(	undefined, 6, 8, 1))

```

The group of meshes is created in its own separate function. There, I have this code after its creation so that one mesh that makes up most of the group is set to the values that should make it glow.

```javascript
        group.toneMapped = false;
        red_plane_group.children[0].material.color= new THREE.Color(10, 0, 0);

```

Then, I am using this function to animate everything

```javascript
function animate(){
    requestAnimationFrame(animate);
    composer.render();
}

```

So now, I have several questions:

1. Can I leave out the renderer’s toneMapping? It is included in many examples, but I dislike how it looks.
2. Currently, every non-red group of meshes is a grey-ish white on every single group when they had more distinctive colors before so that they cannot be told apart and a lot of the recognizable lines have disappeared, even though none of their RGB values should be above 1 and I already set the luminance threshold to 6 so that only the mesh in the group with the RGB value 10 glows. Why is that? Is it working different because I am using groups of meshes instead of single meshes?

Also, the glow works on the group where I wanted it to work although it seems to more a sort of aura around the group rather than directly emanating from it. Also, the glow seems to go out that when I drag the group to the lower part of the screen (which is only visible after everything gets resized when I open the console for debugging but still).

Thanks in advance

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [July 15, 2024, 7:22am UTC](https://discourse.threejs.org/t/selective-bloom-issues/68143/2 "2024-07-15T07:22:17Z")

</div>

threejs changed a lot, tonemapping and color correction works different. the code you saw is outdated, although bloom selection, thank goodness, still is the same. you can check three examples to figure out how what you need. colors generally should not change when you use effectcomposer.

also consider [GitHub - pmndrs/postprocessing: A post processing library for three.js.](https://github.com/pmndrs/postprocessing) instead of jsm.effectcomposer. jsme is very old, and very slow, it can’t keep up any longer and the performance difference in prod is too large. postpros bloom is the same as unrealbloom, do not forget the mipmapBlur setting.

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [July 15, 2024, 7:56am UTC](https://discourse.threejs.org/t/selective-bloom-issues/68143/3 "2024-07-15T07:56:30Z")

</div>

You want to set .emissive for glow, not .color.  
You’re setting the diffuse color to your 10,0,0  
So this will only glow if the scenes lights hit it, which is why you see the effect fade out.

red\_plane\_group.children[0].material.emissive = new THREE.Color(10, 0, 0);

Here’s an example “in prod”:  
[https://manthrax.github.io/mcade/](https://manthrax.github.io/mcade/)

and the effectComposer setup source:

[https://manthrax.github.io/mcade/js/cabinet.js](https://manthrax.github.io/mcade/js/cabinet.js)

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [July 15, 2024, 8:16am UTC](https://discourse.threejs.org/t/selective-bloom-issues/68143/4 "2024-07-15T08:16:26Z")

</div>

color works in my experience with a basic ambientlight, 10, 0, 0 should be a glowing red. if it’s meshbasicmaterial light shouldn’t matter.

---

<div class="post-metadata">

**Author:** ![MEPower](https://avatars.discourse-cdn.com/v4/letter/m/ba9def/32.png) [@MEPower](https://discourse.threejs.org/u/MEPower)\
**Post date:** [July 15, 2024, 12:52pm UTC](https://discourse.threejs.org/t/selective-bloom-issues/68143/5 "2024-07-15T12:52:43Z")

</div>

Thank you @drcmda and @manthrax for both of your input.

> you can check three examples to figure out how what you need.

In the forums, you mean or where?

> also consider [GitHub - pmndrs/postprocessing: A post processing library for three.js.](https://github.com/pmndrs/postprocessing)

I have followed you advice and tried out that library for a bit. This is my current code. I do not understand where to put the minmapblur setting. What does is do?

```javascript
const renderer = new THREE.WebGLRenderer({
	powerPreference: "high-performance",
	antialias: true,
	stencil: true,
	depth: false
});
renderer.sortObjects = false;
renderer.setSize( window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.outputEncoding = THREE.sRGBEncoding
renderer.toneMapping = THREE.ACESFilmicToneMapping
...
const composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));

```

and in the function where that group is created (it is read from SVG and therefore created asynchronously so it has to be there)

```javascript
        composer.addPass(new EffectPass(camera, new SelectiveBloomEffect(scene, camera, red_plane_group.children[0].material.color)));

```

and the animate method still looks the same.

Now, there is an error in the postprocessing library in the build folder in index.js:

> TypeError: pass.setRenderer is not a function

Apparently setRenderer is deprecated. Is there a way to solve this easily?

And is there a way to stop he whole setup from affecting how the other groups that are not supposed to glow look like?

> You want to set .emissive for glow, not .color.

This causes the color to change to bright red that no longer has a glow.

> So this will only glow if the scenes lights hit it, which is why you see the effect fade out.

I have both an AmbientLight and a DirectionalLight in my scene. Commenting out one of them did not change that the glow disappeared seemingly at ramdom sometimes (as far as I remember mostly to the sides of the screen).

> . if it’s meshbasicmaterial light shouldn’t matter.  
> The meshes are made of MeshBasicMaterial, yes.

I hope this helps with getting a picture of how the problem is right now.

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [July 16, 2024, 12:56pm UTC](https://discourse.threejs.org/t/selective-bloom-issues/68143/6 "2024-07-16T12:56:29Z")

</div>

@MEPower what three.js version are you using? The latest version is r166, for example.