# Selective UnrealBloom Effect in glb file

**URL:** <https://discourse.threejs.org/t/selective-unrealbloom-effect-in-glb-file/51323>\
**Category:** Questions\
**Tags:** unrealbloompass\
**Created:** [May 8, 2023, 11:07am UTC](https://discourse.threejs.org/t/selective-unrealbloom-effect-in-glb-file/51323 "2023-05-08T11:07:06Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Alexander\_Rubino](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/alexander_rubino/32/35626_2.png) [@Alexander\_Rubino](https://discourse.threejs.org/u/Alexander_Rubino)\
**Post date:** [May 8, 2023, 11:07am UTC](https://discourse.threejs.org/t/selective-unrealbloom-effect-in-glb-file/51323/1 "2023-05-08T11:07:06Z")

</div>

Hi.  
I am importing a .glb file from Blender, which is then presented in Three js. The file consists of a lot of children, and I then want to make some of the children’s material glow when the specific object is hovered. I have managed to set up a system that detects when the mouse hovers it, and then changes the emesiveIntensity of the object. As you can see below:

```javascript
import * as THREE from "three"
import Experience from "../experience.js";
import GSAP from "gsap"

export default class Room {
  constructor() {
    this.experience = new Experience()
    this.scene = this.experience.scene
    this.resoruces = this.experience.recources
    this.renderer = this.experience.renderer.renderer
    this.room = this.resoruces.items.room
    this.actualRoom = this.room.scene
    
    this.mouse = new THREE.Vector2( Infinity, Infinity );

    this.setModel()
    this.setupEventListeners()

    //Setup new arary that contains the children that should be hovered
    this.hoverChildren = this.actualRoom.hoverChildren.filter((child) => {
      if (child.name === "About_Me_Machine" || child.name === "Contact_Me_Machine" || child.name === "My_Skills_Machine" || child.name === "Projects_Machine" || child.name === "Space_Invaders_Machine" || child.name === "Pac_Man_Contols") {
        return child
      }
    })
  }

  setModel() {
    this.actualRoom.hoverChildren.forEach((child) => {
      child.castShadow = true;

      if (child instanceof THREE.Group) {
        child.hoverChildren.forEach((groupChild) => {
          groupChild.castShadow = true
        })
      }
    });

    this.scene.add(this.actualRoom)
    this.actualRoom.scale.set(0.08, 0.08, 0.08)
  }

  //Control mouse move and mouse click
  setupEventListeners() {
    this.renderer.domElement.addEventListener( 'mousemove', (event) => {
      event.preventDefault();

      this.mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
      this.mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
    });

    //this.renderer.domElement.addEventListener( 'click', onMouseClick );
  }

  raycast() {
    this.INTERSECTED = null;
    this.raycaster = new THREE.Raycaster();
  
    this.raycaster.setFromCamera( this.mouse, this.experience.camera.perspectiveCamera );
    this.intersects = this.raycaster.intersectObjects( this.hoverChildren );
  
    if ( this.intersects.length > 0 ) {
      this.intersects.forEach((element) => {
        
        if (element.object.name === "About_Me_Screen") {
          //Hovers About Me Machine
          this.INTERSECTED = this.actualRoom.hoverChildren[5].hoverChildren[3]
          
          // this.INTERSECTED.material.color.setRGB(10,0,0)
          this.INTERSECTED.material.emissiveIntensity = 5 //When the machine is hovered
          this.INTERSECTED.material.toneMapped = false
          
          console.log(this.INTERSECTED.material)
        }
      })
      
    } else {
      //Reset to norms
      this.INTERSECTED = this.actualRoom.hoverChildren[5].hoverChildren[3]
      this.INTERSECTED.material.emissiveIntensity = 1 //When the machine is not hovered

      this.INTERSECTED = null;
    }
  
  }

  resize() {
    
  }

  update() {
    this.raycast()
  }
}

```

But this does not look perfect, so I tried implementing UnrealBloom, but I can’t make this work. I have seen a lot saying that you should make all objects to black material, but I can’t figure out how to do that with a glb file.  
Note: I have an array with all the objects that should glow, and an array with all the objects that should not glow.  
You can see my current code here, where I renderer the scene and implement UnrealBloom:

```javascript
import * as THREE from "three"
import Experience from "./experience.js";

import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js"
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js"
import { UnrealBloomPass } from "three/examples/jsm/postprocessing/UnrealBloomPass.js"
import { ShaderPass } from "three/examples/jsm/postprocessing/ShaderPass.js"

export default class Renderer {
  constructor() {
    this.experience = new Experience()
    this.sizes = this.experience.sizes
    this.scene = this.experience.scene
    this.canvas = this.experience.canvas
    this.camera = this.experience.camera

    this.setRenderer()
  }

  setRenderer() {
    this.renderer = new THREE.WebGLRenderer({
      canvas: this.canvas,
    });
    
    this.renderer.physicallyCorrectLight = true
    this.renderer.outputColorSpace = THREE.SRGBColorSpace
    this.renderer.toneMapping = THREE.ReinhardToneMapping
    this.renderer.toneMappingExposure = 1.5
    this.renderer.shadowMap.enabled = true
    this.renderer.shadowMap.type = THREE.PCFSoftShadowMap
    this.renderer.setSize(this.sizes.width, this.sizes.height)
    this.renderer.setPixelRatio(this.sizes.pixelRatio)

    //Unreal Bloom
    this.renderScene = new RenderPass(this.scene, this.camera.perspectiveCamera)
    this.composer = new EffectComposer(this.renderer)
    this.composer.renderToScreen = false

    this.bloomPass = new UnrealBloomPass(
      new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 10, 1)

    this.composer.addPass( this.renderScene )
    this.composer.addPass( this.bloomPass)

    this.finalPass = new ShaderPass(
      new THREE.ShaderMaterial({
        uniforms: {
          baseTexture: { value: null },
          bloomTexture: { value: this.composer.renderTarget2.texture }
        },
        vertexShader: document.getElementById( 'vertexshader' ).textContent,
        fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
        defines: {}
      }), "baseTexture"
    )
    this.finalPass.needsSwap = true

    this.finalComposer = new EffectComposer(this.renderer)
    this.finalComposer.addPass( this.renderScene )
    this.finalComposer.addPass( this.finalPass ) 
  }

  resize() {
    this.renderer.setSize(this.sizes.width, this.sizes.height)
    this.renderer.setPixelRatio(this.sizes.pixelRatio)
  }

  update() {
    this.renderer.setClearColor(0x000000);
    this.composer.render()
    this.renderer.setClearColor(0X202020);
    this.finalComposer.render()
  }
}

```

How can you achieve selective UnrealBloom on specific object when you are working with a glb file? I have really hit rock bottom, so I hope you can help 🙂.  
Please let me know if you want more code.

---

<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:** [May 8, 2023, 12:39pm UTC](https://discourse.threejs.org/t/selective-unrealbloom-effect-in-glb-file/51323/2 "2023-05-08T12:39:19Z")

</div>

it’s a wrong use of the effect pass. you are correct in controlling it with emissiveintensity, that is all you need and it will work ootb if you set the composer up correctly.

> [@Selective Bloom not working in react function with vanilla js wrapped in useeffect](https://discourse.threejs.org/t/selective-bloom-not-working-in-react-function-with-vanilla-js-wrapped-in-useeffect/42767/2):
>
> imo this is not how you use bloom. you don’t need to use layers. bloom is selective ootb, and just like in blender you control it with emissiveIntensity on your materials. // The following 2 lines should be in any threejs project w/o exception THREE.ColorManagement.legacyMode = false ... renderer.outputEncoding = THREE.sRGBEncoding renderer.toneMapping = THREE.ACESFilmicToneMapping ... const target = new THREE.WebGLRenderTarget(width, height, { type: THREE.HalfFloatType, format: THREE.RGBA…

---

<div class="post-metadata">

**Author:** ![Alexander\_Rubino](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/alexander_rubino/32/35626_2.png) [@Alexander\_Rubino](https://discourse.threejs.org/u/Alexander_Rubino)\
**Post date:** [May 8, 2023, 1:41pm UTC](https://discourse.threejs.org/t/selective-unrealbloom-effect-in-glb-file/51323/3 "2023-05-08T13:41:36Z")

</div>

I have tried implementing your solution, but now my object just becomes black on hover. This is my updated code:

```javascript
import * as THREE from "three"
import Experience from "./experience.js";

import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js"
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js"
import { UnrealBloomPass } from "three/examples/jsm/postprocessing/UnrealBloomPass.js"
import { ShaderPass } from "three/examples/jsm/postprocessing/ShaderPass.js"

export default class Renderer {
  constructor() {
    this.experience = new Experience()
    this.sizes = this.experience.sizes
    this.scene = this.experience.scene
    this.canvas = this.experience.canvas
    this.camera = this.experience.camera

    this.setRenderer()
  }

  setRenderer() {
    THREE.ColorManagement.enabled = false
    this.renderer = new THREE.WebGLRenderer({
      canvas: this.canvas,
    });
    
    this.renderer.physicallyCorrectLight = true
    this.renderer.outputColorSpace = THREE.SRGBColorSpace
    this.renderer.toneMapping = THREE.ReinhardToneMapping
    this.renderer.toneMappingExposure = 1.5
    this.renderer.shadowMap.enabled = true
    this.renderer.shadowMap.type = THREE.PCFSoftShadowMap
    this.renderer.setSize(this.sizes.width, this.sizes.height)
    this.renderer.setPixelRatio(this.sizes.pixelRatio)

    //Unreal Bloom
    this.target = new THREE.WebGLRenderTarget(this.sizes.width, this.sizes.height, {
      type: THREE.HalfFloatType,
      format: THREE.RGBAFormat,
      colorSpace: THREE.SRGBColorSpace,
    })
    this.target.samples = 8

    this.renderScene = new RenderPass(this.scene, this.camera.perspectiveCamera)
    this.bloomPass = new UnrealBloomPass( new THREE.Vector2(window.innerWidth, window.innerHeight), 1, 1, 1 )
    this.composer = new EffectComposer(this.renderer, this.target)
    // this.composer.renderToScreen = false

    this.composer.addPass( this.renderScene )
    this.composer.addPass( this.bloomPass)
  }

  resize() {
    this.renderer.setSize(this.sizes.width, this.sizes.height)
    this.renderer.setPixelRatio(this.sizes.pixelRatio)
  }

  update() {
    this.composer.render()
  }
}

```

I change my objects material in the following code:

```javascript
this.INTERSECTED.material.toneMapped = false
this.INTERSECTED.material.emissive = "red"
this.INTERSECTED.material.emissiveIntensity = 10 //When the machine is hovered

```

I noticed that your suggestion with sRGBEncoding is not supported anymore, or at least wasn’t allowed in my code. Am I missing something obvious?  
I have alreaddy seen the links you have sent, and I couldn’t quite figure out their code.

---

<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:** [May 8, 2023, 1:53pm UTC](https://discourse.threejs.org/t/selective-unrealbloom-effect-in-glb-file/51323/4 "2023-05-08T13:53:34Z")

</div>

ah yes, it was renamed in the latest three, it is called outputColorSpace now.

THREE.ColorManagement.enabled has to be true always, it is true by default now

tonemapped = false has to be the state for the material that’s supposed to glow in general. i don’t think you can switch this on and off