# Selective bloom not working

**URL:** <https://discourse.threejs.org/t/selective-bloom-not-working/63350>\
**Category:** Questions\
**Tags:** selective-bloom, postprocessing\
**Created:** [March 28, 2024, 7:42am UTC](https://discourse.threejs.org/t/selective-bloom-not-working/63350 "2024-03-28T07:42:42Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![arjun\_lokesh](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/arjun_lokesh/32/39767_2.png) [@arjun\_lokesh](https://discourse.threejs.org/u/arjun_lokesh)\
**Post date:** [March 28, 2024, 7:42am UTC](https://discourse.threejs.org/t/selective-bloom-not-working/63350/1 "2024-03-28T07:42:42Z")

</div>

I followed a tutorial by anderson mancini - [https://www.youtube.com/watch?v=er02gtD8asA&ab\_channel=AndersonMancini-ThreejsJourney](https://www.youtube.com/watch?v=er02gtD8asA&ab_channel=AndersonMancini-ThreejsJourney)

I coded accordingly except for the part where he traverses the scene for the mesh, i search it with getObjectByName funtion. The whole scene is getting the bloom effect however i want just the blook object to get it.

```javascript
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
import { BloomEffect, EffectComposer, EffectPass, RenderPass, SelectiveBloomEffect } from "postprocessing";
import { Selection } from 'postprocessing';

//Initialising a scene and camera 
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  50,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

//initialising the renderer and inserting it into DOM element
const renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.type = THREE.VSMShadowMap;
document.body.appendChild(renderer.domElement);

//declaring shadown maps and tone mapping of the scene
renderer.shadowMap.enabled = true;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 0.5;
renderer.setPixelRatio( window.devicePixelRatio );

/*const composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));
composer.addPass(new EffectPass(camera, new BloomEffect()));*/

let model; // Declare the model variable at a higher scope

//loading the HDRI to the scene
const hdriLoader = new RGBELoader();
hdriLoader.load('../env1.hdr', (texture) => {
  const envMap = texture;
  envMap.mapping = THREE.EquirectangularReflectionMapping;
  envMap.exposure = 0.25;
  scene.environment = envMap;
  scene.background = new THREE.Color(0.5, 0.5, 0.5);
});

/*
const renderScene = new RenderPass(scene,camera);
const composer = new EffectComposer(renderer);
composer.addPass(renderScene);

const bloomPass = new UnrealBloomPass(
  new THREE.Vector2(window.innerWidth,window.innerHeight),
  1.6,
  0.1,
  0.1
);

composer.addPass(bloomPass);
*/

//loading the model using the GLTF loader 
const loader1 = new GLTFLoader();

const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.5.6/');
loader1.setDRACOLoader(dracoLoader);

let selectedobjectforbloom = new Selection();
const composer = new EffectComposer(renderer);
const renderpass = new RenderPass(scene,camera);

loader1.load(
  'interior_threejs.glb',
  function (gltf) {
    model = gltf.scene;
    model.position.set(0, 0.01, 0);
    model.traverse((child) => {
        if (child.isObject3D) child.castShadow = true;
      });
    // Assuming you've loaded the GLTF model into the scene and named the light in Blender as 'pointLight'

      // Traverse through the scene to find the light
      model.traverse((child) => {
       if (child.name === 'Spot') {
        // Access the punctual light
          const pointLight = child;8

           // Now you can access properties of the light
          console.log('Punctual light intensity:', pointLight.children[0].intensity);
          console.log('Punctual light color:', pointLight.children[0].color);
          console.log('Punctual light position:', pointLight.position);
    
    // You can also manipulate the light properties if needed
    // For example:
        pointLight.children[0].intensity = 25;
         //pointLight.color.set(0xff0000);
  }
  const scene1 = model.getObjectByName("Scene", true);
  scene1.receiveShadow = true;

  const object = model.getObjectByName( "Cube", true );
  object.receiveShadow = true;
  object.castShadow = true;

  const object1 = model.getObjectByName("Cube002",true)
  object1.receiveShadow = true;
  object1.castShadow = true;

  const object2 = model.getObjectByName( "Cube001_2", true );
  object2.receiveShadow = true;
  object2.castShadow = true;

  const selectiveBloom = new SelectiveBloomEffect(scene,camera, {
    intensity : 1.5,
    luminanceThreshold : 0.0001,
    mipmapblur : true,
    radius : .35,
  })
  
  selectiveBloom.selection = selectedobjectforbloom;
  
  const obj = model.getObjectByName("bloom", true);
  selectedobjectforbloom.add(obj);

 
  composer.addPass(renderpass);
  composer.addPass(new EffectPass(camera, new BloomEffect(), selectiveBloom));

});

      scene.add(model);
      console.log(model);
      
    },
    undefined,
    function (error) {
      console.error('Error loading GLTF model:', error);
    }
  );
    /*
  let selectedobjectforbloom = new Selection();

  const selectiveBloom = new SelectiveBloomEffect(scene,camera, {
    intensity : 1.5,
    luminanceThreshold : 0.0001,
    mipmapblur : true,
    radius : .35,
  })
  
  selectiveBloom.selection = selectedobjectforbloom;
  
  const obj = model.getObjectByName("bloom", true);
  selectedobjectforbloom.add(obj);

  const composer = new EffectComposer(renderer);
  const renderpass = new RenderPass(scene,camera);
  composer.addPass(renderpass);
  composer.addPass(new EffectPass(camera, bloom, selectiveBloom));*/

// Initialize ambient light
const ambientLight = new THREE.AmbientLight(0xffffff, 1); // Color: white, Intensity: 1
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff,8);
directionalLight.position.set(-6.5,2.5,-1.5);
directionalLight.castShadow = true;
scene.add(directionalLight);

directionalLight.shadow.mapSize.width = 1024; // Shadow map width
directionalLight.shadow.mapSize.height = 1024; // Shadow map height
directionalLight.shadow.camera.near = 0.5; // Near plane of shadow camera
directionalLight.shadow.camera.far = 500; // Far plane of shadow camera
directionalLight.shadow.camera.left = -10; // Left boundary of shadow camera's frustum
directionalLight.shadow.camera.right = 10; // Right boundary of shadow camera's frustum
directionalLight.shadow.camera.top = 10; // Top boundary of shadow camera's frustum
directionalLight.shadow.camera.bottom = -10;
directionalLight.shadow.bias = 0; // Shadow bias
directionalLight.shadow.normalBias = 1; // Shadow normal bias
directionalLight.shadow.radius = 4; 
   
  //orbit controls for the chair
const orbit = new OrbitControls(camera, renderer.domElement);
camera.position.set(0, 2, 3);
/*
// Set limits for rotation
orbit.minPolarAngle = 0; // radians
orbit.maxPolarAngle = 1.309; // radians

// Set limits for zoom
orbit.minDistance = 1;
orbit.maxDistance = 3;
*/
orbit.update();

//animate to render it realtime
function animate() {
    requestAnimationFrame(animate);
   // renderer.render(scene, camera);
    composer.render();
  }
  animate();

```

the above is my code and the output is shown below

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/3/c30897de6fcfb08fd76608e8a2e18ae7593f8d85.jpeg)

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [March 28, 2024, 10:25am UTC](https://discourse.threejs.org/t/selective-bloom-not-working/63350/2 "2024-03-28T10:25:23Z")

</div>

Please format the code properly, it’s not really readable in the current form.

---

<div class="post-metadata">

**Author:** ![arjun\_lokesh](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/arjun_lokesh/32/39767_2.png) [@arjun\_lokesh](https://discourse.threejs.org/u/arjun_lokesh)\
**Post date:** [March 28, 2024, 1:22pm UTC](https://discourse.threejs.org/t/selective-bloom-not-working/63350/3 "2024-03-28T13:22:27Z")

</div>

i have done by best, please take a look. Thanks!

---

<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:** [March 28, 2024, 2:46pm UTC](https://discourse.threejs.org/t/selective-bloom-not-working/63350/4 "2024-03-28T14:46:12Z")

</div>

This is a different approach, but also see:

> [@How to render a scene with 2 different UnrealBloom effects applied on2 different Object3D?](https://discourse.threejs.org/t/how-to-render-a-scene-with-2-different-unrealbloom-effects-applied-on2-different-object3d/63239/2):
>
> Bloom is a screen-space effect — trying to apply it per-object is going to be a lot of trouble, particularly with a threshold of 0. Instead of two passes with different strengths, consider making these materials (much) brighter … material1.color.setRGB( 1000, 0, 0 ); material2.color.setRGB( 0, 500, 0 ); … then use a single bloom pass and set the threshold to something larger than one. The goal here is to choose color intensities and a threshold high enough that non-emissive objects (even if th…

My feeling is that getting your “emissive” objects and bloom threshold above the 0–1 range is generally a better approach, and avoids the need for manual selectivity.

---

<div class="post-metadata">

**Author:** ![arjun\_lokesh](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/arjun_lokesh/32/39767_2.png) [@arjun\_lokesh](https://discourse.threejs.org/u/arjun_lokesh)\
**Post date:** [March 28, 2024, 5:01pm UTC](https://discourse.threejs.org/t/selective-bloom-not-working/63350/5 "2024-03-28T17:01:08Z")

</div>

thanks for the suggestion.

I did set the color to be bright yellow as i wanted it to emulate LED strip lighting and set the emission strength above 1 (5). however I am still facing the same issues

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/d/a/dafccad047093b989bf31b14879d1a3bb64fc6f6.jpeg)

I am sure that I am not understanding something very important here, so below are my questions

1. what is the best material type to set for the emissive objects (LED strips or lamps)? so i can use bloom on them  
is it lambert or other type?

2. i set the color of the light mesh to be brightest yellow, is that what you mean or do I have to do something different?  

3. will i have issues of using bloom when i have spot lights lighting my scene?

4. when you mention threshhold of 0, do you mean this threshold mentioned below?  

5. if at all i want to create led strip lighting or a lamp lighting in a well lit interior scene what approach is the best?

---

<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:** [March 28, 2024, 6:26pm UTC](https://discourse.threejs.org/t/selective-bloom-not-working/63350/6 "2024-03-28T18:26:01Z")

</div>

> [@arjun\_lokesh](#):
>
> what is the best material type to set for the emissive objects (LED strips or lamps)? so i can use bloom on them  
> is it lambert or other type?

I would suggest either a PBR material (Standard or Physical) with “.emissive” or a Basic material with just “.color”. Either should be fine.

> i set the color of the light mesh to be brightest yellow, is that what you mean or do I have to do something different?

In Blender you’ll want: to use the Emissive option, and crank the strength up \>\>\> 1…

![Screenshot 2024-03-28 at 2.19.53 PM](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/7/e7d0ab43d4727bded4a1653bf9c0f155b41f2334.png)

Then open the model in [https://gltf.report/](https://gltf.report/) and open the metadata tab. You should see `KHR_materials_emissive_strength` listed as an extension – if not then your version of Blender is too old.

> will i have issues of using bloom when i have spot lights lighting my scene?

Only if your spotlights are so bright that they cause a surface to reflect more light than the luminance threshold. That is “as intended”, as you might very well want to see bloom off of the strongest reflections, or not, you can choose the threshold and emissive values accordingly.

> when you mention threshhold of 0, do you mean this threshold mentioned below?

Yes, that’s the one.

Keep in mind that the threshold is not compared directly to the RGB values, but to a luminance computed from them with sRGB / Rec. 709 luminance weights…

```javascript
Luminance = 0.2126 * R + 0.7152 * G + 0.0722 * B

```

… related to perceived brightness of different colors. So, for example, an emissive blue at strength 2 will have a lower luminosity than white at strength 1, choose your emissive strengths accordingly.

Physically based lighting could easily have intensities in the thousands of nits (and would require adjustments to .toneMappingExposure to create a well-exposed image), there is nothing magical about “1” as an emissive strength value.

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [March 28, 2024, 6:45pm UTC](https://discourse.threejs.org/t/selective-bloom-not-working/63350/7 "2024-03-28T18:45:11Z")

</div>

Let me propose an alternative – if there are just a few meshes that must bloom, it might be feasible to use fake selective bloom, like the golden ring in this example. Fake bloom does not use any post-processing passes, instead it adds a few additional meshes.

[https://codepen.io/boytchev/full/ExdmvxE](https://codepen.io/boytchev/full/ExdmvxE)

[![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/8/f831d30b7de7ab29012eeeafe1c03fb77b7cbc38.jpeg)](https://codepen.io/boytchev/full/ExdmvxE)

(you may also add a halo object, which is yet another variant of fake selective bloom)

---

<div class="post-metadata">

**Author:** ![arjun\_lokesh](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/arjun_lokesh/32/39767_2.png) [@arjun\_lokesh](https://discourse.threejs.org/u/arjun_lokesh)\
**Post date:** [March 29, 2024, 1:57pm UTC](https://discourse.threejs.org/t/selective-bloom-not-working/63350/8 "2024-03-29T13:57:46Z")

</div>

I have set the color to brightest yellow with the emission strength as 50 as you directed  
Then open the model in [https://gltf.report/](https://gltf.report/) and open the metadata tab.

> You should see `KHR_materials_emissive_strength` listed as an extension – if not then your version of Blender is too old.

I did check it in the website and it does have that extenstion

> Only if your spotlights are so bright that they cause a surface to reflect more light than the luminance threshold. That is “as intended”, as you might very well want to see bloom off of the strongest reflections, or not, you can choose the threshold and emissive values accordingly.

I halved the brightness of all my spotlight for such case so as to avoid the entire issue of creating strong reflections, it did improve a bit as i can see some of the white marble texture.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/1/c1ee30bde6f8393c0b379ca416f4eadebfee1545.jpeg)

I did try to tinker with the threshold and intensity, I dont see any expected difference

is there a blog post or something i can read to get better at this ??

---

<div class="post-metadata">

**Author:** ![arjun\_lokesh](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/arjun_lokesh/32/39767_2.png) [@arjun\_lokesh](https://discourse.threejs.org/u/arjun_lokesh)\
**Post date:** [March 29, 2024, 1:58pm UTC](https://discourse.threejs.org/t/selective-bloom-not-working/63350/9 "2024-03-29T13:58:54Z")

</div>

thanks for an alternative approach. its just that it ain’t very aesthetic for my client. he is very particular about having natural looking lights in the scene

---

<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:** [April 1, 2024, 3:37pm UTC](https://discourse.threejs.org/t/selective-bloom-not-working/63350/10 "2024-04-01T15:37:44Z")

</div>

If a non-emissive white floor under normal lighting is causing bloom, then your bloom luminance threshold should be set much higher. Also make sure the floor’s material is _not_ emissive. Sorry I don’t know of a blog post on this subject.

---

<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:** [April 1, 2024, 11:30pm UTC](https://discourse.threejs.org/t/selective-bloom-not-working/63350/11 "2024-04-01T23:30:45Z")

</div>

use the normal Bloom, not SelectiveBloom. bloom is selective out of the box without you having to do anything. set luminianceThreshold to 1 or 2 so that nothing glows. the prop is called **mipmapBlur** , not mipmapblur, it is important for it to be true because without it’s using the terrible looking implementation, mipmap uses unreal bloom which is beautiful and natural. i would remove the radius prop because your mipmap was off.

now emission will allow you to pick the materials that are supposed to bloom. the floor won’t if it isn’t emissive.

---

<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:** [April 27, 2024, 10:13pm UTC](https://discourse.threejs.org/t/selective-bloom-not-working/63350/12 "2024-04-27T22:13:32Z")

</div>

Here’s a longer explanation of the bloom effect, and how it can be isolated without using SelectiveBloom:

> **[Emission and bloom](https://www.donmccurdy.com/2024/04/27/emission-and-bloom/)**
>
> Explains the relationship between emission and the bloom post-processing effect, and how to use them effectively in realtime 3D scenes.

---

<div class="post-metadata">

**Author:** ![marcoscarvalho](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/marcoscarvalho/32/54863_2.png) [@marcoscarvalho](https://discourse.threejs.org/u/marcoscarvalho)\
**Post date:** [January 24, 2025, 2:34pm UTC](https://discourse.threejs.org/t/selective-bloom-not-working/63350/13 "2025-01-24T14:34:54Z")

</div>

Hey your answer really helped me out, I was going by selective bloom but as it wasn’t glowing for distant objects on camera view, I abandoned the idea and went through yours.

At first it wasn’t working but it was my own fault, I was rendering the toneMapping before the bloom, and after hours in this silly bug I inverted their order and it is working great now, thank you!