# Unreal Bloom Pass Effect on Shader Materials?

**URL:** <https://discourse.threejs.org/t/unreal-bloom-pass-effect-on-shader-materials/64465>\
**Category:** Questions\
**Tags:** effect-composer, unrealbloompass, materials, animation, shaders\
**Created:** [April 22, 2024, 11:29pm UTC](https://discourse.threejs.org/t/unreal-bloom-pass-effect-on-shader-materials/64465 "2024-04-22T23:29:06Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![CharDotCom](https://avatars.discourse-cdn.com/v4/letter/c/919ad9/32.png) [@CharDotCom](https://discourse.threejs.org/u/CharDotCom)\
**Post date:** [April 22, 2024, 11:29pm UTC](https://discourse.threejs.org/t/unreal-bloom-pass-effect-on-shader-materials/64465/1 "2024-04-22T23:29:06Z")

</div>

I am trying to create a background for my scene where it consists of moving clouds, sun, and a sky. I finally was able to get the sun beaming using an **unreal bloom pass effect** , but I believe that effect is the reason my scene looks very gray and cloudy now.

I’ve combed through so many docs, blogs, Q&A posts, and CodePens to try to fix this problem so I’m pretty stuck on what else to try. I read in other posts that you can have just one object in a scene glow using this effect, but the problem is the clouds and sky use a **shader material** instead of the **standard mesh material** so that’s why I think I can’t set `emissiveIntensity` on it to determine which object should glow in the scene.

I only want the effect on the **Sun** component:

```javascript
const Sun = () => {
  const sunColor = new Color(0xffdd16);

  return (
    <>
      <Effects disableGamma>
        <unrealBloomPass threshold={1} strength={0.5} radius={1} />
        <outputPass args={[ACESFilmicToneMapping]} />
      </Effects>
      <mesh position={[1, 40, 5000]}>
        <sphereGeometry args={[95, 50, 50]} />
        <meshStandardMaterial
          color={sunColor}
          toneMapped={false}
          emissive={sunColor}
          emissiveIntensity={3}
        />
      </mesh>
    </>
  );
};

```

But it affects the whole scene (sorry, the **Clouds** component is pretty long but I used a shader material in a similar way as the **Sky** component):

```javascript
return (
    <shaderMaterial
      name='Sky'
      uniforms={uniforms}
      vertexShader={vertexShader}
      fragmentShader={fragmentShader}
      side={BackSide}
      attach='material'
      emissiveIntensity={0}
    />
  );

```

Adding the `emissiveIntensity` doesn’t seem to fix the problem unfortunately, does anyone know what I can do to get the scene back to its original vibrance? I’ve also tried using **layers** , but that would just hide certain components.

Goal/Original:

 ![Screenshot 2024-04-22 at 5.59.17 PM](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/9/2923c0f092ab50d3d373be649b89dfa57f4ff473.jpeg)

Current (after adding in **Effects** ):

 ![Screenshot 2024-04-22 at 5.57.58 PM](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/0/003fa140ed2910dc302ab28d144de4de1f6c9533.jpeg)

---

<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 23, 2024, 8:07pm UTC](https://discourse.threejs.org/t/unreal-bloom-pass-effect-on-shader-materials/64465/2 "2024-04-23T20:07:27Z")

</div>

check if your shadermaterial has these two includes

```
 #include <tonemapping_fragment>
 #include <colorspace_fragment>

```

getting this srgb/tonemapping stuff right has become very hard, i can never remember the specific steps that three requires. but maybe share your box as a codesandbox, i might be able to have a look.

ps i like the desaturated look actually, but that’s beside the point 😃

pps, better use shaders like this [ThreeJS Journey Portal - CodeSandbox](https://codesandbox.io/s/ni6v4) it makes them reusable and easier to digest. you also don’t need “attach=‘material’”

---

<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 23, 2024, 8:31pm UTC](https://discourse.threejs.org/t/unreal-bloom-pass-effect-on-shader-materials/64465/3 "2024-04-23T20:31:33Z")

</div>

> [@CharDotCom](#):
>
> Adding the `emissiveIntensity` doesn’t seem to fix the problem unfortunately, does anyone know what I can do to get the scene back to its original vibrance?

emissiveIntensity is just a specific way of adding to the brightness of a surface. What matters is the total brightness of the surface relative to the bloom pass’s threshold.

Without a demo it’s hard to say exactly what might be going on here (can you share a codepen or similar?) but you might try…

- disable bloom, just keep output pass
- disable output pass, just keep bloom

… to isolate where the difference is coming from. Or raise the threshold significantly (say, 1000) so that nothing blooms, then work from there.

---

<div class="post-metadata">

**Author:** ![CharDotCom](https://avatars.discourse-cdn.com/v4/letter/c/919ad9/32.png) [@CharDotCom](https://discourse.threejs.org/u/CharDotCom)\
**Post date:** [April 24, 2024, 12:07am UTC](https://discourse.threejs.org/t/unreal-bloom-pass-effect-on-shader-materials/64465/4 "2024-04-24T00:07:16Z")

</div>

@drcmda @donmccurdy Thank you so much for your answers! I do have a [sandbox](https://codesandbox.io/p/sandbox/cocky-edison-5zhvhk?file=%2Fsrc%2FApp.js%3A13%2C24&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clvcvqiqj00063b6j64gyh5px%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clvcvqiqj00023b6jgc6uuha4%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clvcvqiqj00033b6j0p97jkdd%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clvcvqiqj00053b6jfm9jtxpr%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B53.515517714913486%252C46.484482285086514%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clvcvqiqj00023b6jgc6uuha4%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clvcvqiqj00013b6jcy5nvf6d%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Findex.js%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522clvcwlkez00023b6igzl8aukr%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A13%252C%2522startColumn%2522%253A24%252C%2522endLineNumber%2522%253A13%252C%2522endColumn%2522%253A24%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252FApp.js%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clvcvqiqj00023b6jgc6uuha4%2522%252C%2522activeTabId%2522%253A%2522clvcwlkez00023b6igzl8aukr%2522%257D%252C%2522clvcvqiqj00053b6jfm9jtxpr%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clvcvqiqj00043b6jhr1oefhm%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522clvcvqiqj00053b6jfm9jtxpr%2522%252C%2522activeTabId%2522%253A%2522clvcvqiqj00043b6jhr1oefhm%2522%257D%252C%2522clvcvqiqj00033b6j0p97jkdd%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clvcvqiqj00033b6j0p97jkdd%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D) to share since I feel like I’m not giving as much context (I stripped it down to just the background-related parts of the scene).

I’m happy with any reasonable solution that makes the scene less muted whether that involves tweaking the shaders, the effects, both, or some other thing. 😃

---

<div class="post-metadata">

**Author:** ![CharDotCom](https://avatars.discourse-cdn.com/v4/letter/c/919ad9/32.png) [@CharDotCom](https://discourse.threejs.org/u/CharDotCom)\
**Post date:** [April 24, 2024, 12:08am UTC](https://discourse.threejs.org/t/unreal-bloom-pass-effect-on-shader-materials/64465/5 "2024-04-24T00:08:30Z")

</div>

> ps i like the desaturated look actually, but that’s beside the point 😃

I feel you. If I wasn’t already going for a perky, upbeat tone, then I would have just given up and left it as is. 😂

---

<div class="post-metadata">

**Author:** ![CharDotCom](https://avatars.discourse-cdn.com/v4/letter/c/919ad9/32.png) [@CharDotCom](https://discourse.threejs.org/u/CharDotCom)\
**Post date:** [May 3, 2024, 3:37pm UTC](https://discourse.threejs.org/t/unreal-bloom-pass-effect-on-shader-materials/64465/6 "2024-05-03T15:37:53Z")

</div>

No one has a clue on how I can proceed?

---

<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:** [May 3, 2024, 11:32pm UTC](https://discourse.threejs.org/t/unreal-bloom-pass-effect-on-shader-materials/64465/7 "2024-05-03T23:32:19Z")

</div>

With no lit shading happening in this scene, you may want to simplify things and remove the tone mapping, it is meant for lit scenes. Adding `<Canvas flat={true} ...` is enough.

THREE.OutputPass does not take arguments, so note that this line is doing nothing:

```jsx
<outputPass args={[ACESFilmicToneMapping]} />

```

If the sky were meant as the background to a lit scene, and you _did_ need tone mapping for this scene, I believe you would want a brightness multiplier for the sky, clouds, and sun, such that these scalars can be adjusted carefully:

- renderer.toneMappingExposure
- sun/sky/cloud multiplier
- scene lighting
- bloom threshold

But for the example as shown, that is unnecessary.

---

<div class="post-metadata">

**Author:** ![Umbawa\_Sarosong](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/umbawa_sarosong/32/30107_2.png) [@Umbawa\_Sarosong](https://discourse.threejs.org/u/Umbawa_Sarosong)\
**Post date:** [May 4, 2024, 2:28am UTC](https://discourse.threejs.org/t/unreal-bloom-pass-effect-on-shader-materials/64465/8 "2024-05-04T02:28:58Z")

</div>

The bloom is not supposed to affect the background or the environment

---

<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:** [May 4, 2024, 2:53am UTC](https://discourse.threejs.org/t/unreal-bloom-pass-effect-on-shader-materials/64465/9 "2024-05-04T02:53:15Z")

</div>

That appears to be a smaller factor in the “goal vs. current” screenshots above, so I’m advising to solve one thing at a time and deal with the tone mapping difference first. But the bloom would be further constrained by raising the bloom threshold, along with the brightness of the sun.

---

<div class="post-metadata">

**Author:** ![CharDotCom](https://avatars.discourse-cdn.com/v4/letter/c/919ad9/32.png) [@CharDotCom](https://discourse.threejs.org/u/CharDotCom)\
**Post date:** [May 4, 2024, 10:46pm UTC](https://discourse.threejs.org/t/unreal-bloom-pass-effect-on-shader-materials/64465/10 "2024-05-04T22:46:15Z")

</div>

Thank you, this definitely helped me get towards the right direction. `<Canvas flat={true} gl={{ toneMappingExposure: 0.1, }}` got rid of a lot of the overcast effect on the scene.

What do you mean by multiplier? Not the `emissiveIntensity`, right? Because that seems like hopefully the last step to get the scene close enough to my goal. I just need the clouds to have more of a contrast.

---

<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:** [May 5, 2024, 1:19am UTC](https://discourse.threejs.org/t/unreal-bloom-pass-effect-on-shader-materials/64465/11 "2024-05-05T01:19:22Z")

</div>

`emissiveIntensity` is a property of some materials that three.js provides, such as THREE.MeshStandardMaterial, and its effect is equivalent to:

```glsl
gl_FragColor.rgb += emissiveColor.rgb * emissiveIntensity;

```

In a custom ShaderMaterial there is no `emissiveIntensity` property, as you are providing the shading model yourself, but you can include similar code in your GLSL.

---

<div class="post-metadata">

**Author:** ![CharDotCom](https://avatars.discourse-cdn.com/v4/letter/c/919ad9/32.png) [@CharDotCom](https://discourse.threejs.org/u/CharDotCom)\
**Post date:** [May 10, 2024, 2:07am UTC](https://discourse.threejs.org/t/unreal-bloom-pass-effect-on-shader-materials/64465/12 "2024-05-10T02:07:48Z")

</div>

> [@CharDotCom](#):
>
> sandbox

Thank you so much! Finally got it working thanks to you.