# How do I set up post-processing to make only one object in the scene glow, not all of it?

**URL:** <https://discourse.threejs.org/t/how-do-i-set-up-post-processing-to-make-only-one-object-in-the-scene-glow-not-all-of-it/50643>\
**Category:** Questions\
**Tags:** postprocessing\
**Created:** [April 20, 2023, 3:03pm UTC](https://discourse.threejs.org/t/how-do-i-set-up-post-processing-to-make-only-one-object-in-the-scene-glow-not-all-of-it/50643 "2023-04-20T15:03:06Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![JYuan94](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jyuan94/32/36075_2.png) [@JYuan94](https://discourse.threejs.org/u/JYuan94)\
**Post date:** [April 20, 2023, 3:03pm UTC](https://discourse.threejs.org/t/how-do-i-set-up-post-processing-to-make-only-one-object-in-the-scene-glow-not-all-of-it/50643/1 "2023-04-20T15:03:07Z")

</div>

I set the post-processing effect for the scene, I want the curve to glow, other objects will not be affected, now the whole scene is exposed, how should I deal with it, please ask the community to help check, thank you!

This is what I have now：

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/2/02c6717ec4a6cf37729176aabc8890ba3d22b9b4.jpeg)

This is an example of my code:

> **[sharp-wozniak-1beton - CodeSandbox](https://codesandbox.io/s/sharp-wozniak-1beton?file=%2Fsrc%2FApp.tsx:513-527)**
>
> sharp-wozniak-1beton by JYuan94 using @tweenjs/tween.js, loader-utils, react, react-dom, react-scripts, three

---

<div class="post-metadata">

**Author:** ![NachoPer](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/nachoper/32/35623_2.png) [@NachoPer](https://discourse.threejs.org/u/NachoPer)\
**Post date:** [April 22, 2023, 3:58am UTC](https://discourse.threejs.org/t/how-do-i-set-up-post-processing-to-make-only-one-object-in-the-scene-glow-not-all-of-it/50643/2 "2023-04-22T03:58:28Z")

</div>

Hi. There’s an example that uses it [https://threejs.org/examples/?q=bloo#webgl\_postprocessing\_unreal\_bloom\_selective](https://threejs.org/examples/?q=bloo#webgl_postprocessing_unreal_bloom_selective). You have to play with layers basically.

---

<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 22, 2023, 2:23pm UTC](https://discourse.threejs.org/t/how-do-i-set-up-post-processing-to-make-only-one-object-in-the-scene-glow-not-all-of-it/50643/3 "2023-04-22T14:23:28Z")

</div>

I think it would be better to delete that example tbh, it makes the simplest thing ever ridiculously complicated for no reason. bloom is selective ootb, there is nothing else needed, no copy passes, no traversing the scene, all this will only incur extra cost and complexity. [Selective Bloom ordering puzzle - #3 by drcmda](https://discourse.threejs.org/t/selective-bloom-ordering-puzzle/43150/3)

And since this is react it’s even easier

> **[glass flower - CodeSandbox](https://codesandbox.io/s/glass-flower-dq6wwe)**
>
> glass flower by drcmda using @react-three/drei, @react-three/fiber, @react-three/postprocessing, @types/three, react, react-dom, react-scripts, three

```jsx
import { EffectComposer, Bloom } from '@react-three/postprocessing'

...
      <EffectComposer>
        <Bloom luminanceThreshold={1} mipmapBlur />
      </EffectComposer>
...

// ❌ will not glow, same as RGB [1,0,0]
<meshStandardMaterial color="red"/>

// ✅ will glow, same as RGB [2,0,0]
<meshStandardMaterial emissive="red" emissiveIntensity={2} toneMapped={false} />

// ❌ will not glow, same as RGB [1,0,0]
<meshBasicMaterial color="red" />

// ❌ will not glow, same as RGB [1,0,0], tone-mapping will clamp colors between 0 and 1
<meshBasicMaterial color={[2,0,0]} />

// ✅ will glow, same as RGB [2,0,0]
<meshBasicMaterial color={[2,0,0]} toneMapped={false} />
```

---

<div class="post-metadata">

**Author:** ![JYuan94](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jyuan94/32/36075_2.png) [@JYuan94](https://discourse.threejs.org/u/JYuan94)\
**Post date:** [April 23, 2023, 2:54am UTC](https://discourse.threejs.org/t/how-do-i-set-up-post-processing-to-make-only-one-object-in-the-scene-glow-not-all-of-it/50643/4 "2023-04-23T02:54:42Z")

</div>

Yes, the example I showed was adapted from this official example, but I found that I could not set up a single curve to glow, and post-processing would affect the overall effect

---

<div class="post-metadata">

**Author:** ![JYuan94](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jyuan94/32/36075_2.png) [@JYuan94](https://discourse.threejs.org/u/JYuan94)\
**Post date:** [April 23, 2023, 5:06am UTC](https://discourse.threejs.org/t/how-do-i-set-up-post-processing-to-make-only-one-object-in-the-scene-glow-not-all-of-it/50643/5 "2023-04-23T05:06:15Z")

</div>

Thank you very much for your guidance! React-Three-Fiber is a complete package. Even though I realized the effect very simply using it, I still couldn’t figure out how to reproduce the effect through Three.js. My purpose is to know how the post processing of Three.js works on a single object. Not only does it satisfy the effect of React-Three-Fiber.

---

<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, 2023, 6:43am UTC](https://discourse.threejs.org/t/how-do-i-set-up-post-processing-to-make-only-one-object-in-the-scene-glow-not-all-of-it/50643/6 "2023-04-23T06:43:59Z")

</div>

it has no relation with react. it is the same in threejs. set threshold to 1, switch off tonemapping, control glow with colors, that is how you select glow in three/examples/jsm/effectcomposer, pmndrs/postprocessing, even in blender. the first link i posted is vanilla. the official example is not how you do it, i have no idea why it is still there.

though i think it’s fair to mention that threejs in react raw makes little sense. r3f is not a library but a renderer, like react-dom. you are expressing threejs in react just like you express the dom in react via jsx, but you’re still writing threejs. there is an eco system for fiber that’s larger than anything you will find in plain three, nor will plain three give you any integration with react.

---

<div class="post-metadata">

**Author:** ![JYuan94](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jyuan94/32/36075_2.png) [@JYuan94](https://discourse.threejs.org/u/JYuan94)\
**Post date:** [April 23, 2023, 3:43pm UTC](https://discourse.threejs.org/t/how-do-i-set-up-post-processing-to-make-only-one-object-in-the-scene-glow-not-all-of-it/50643/7 "2023-04-23T15:43:57Z")

</div>

Ok, thank you. Then you can help me with this example

> **[sharp-wozniak-1beton - CodeSandbox](https://codesandbox.io/s/sharp-wozniak-1beton?file=%2Fsrc%2FApp.tsx:513-527)**
>
> sharp-wozniak-1beton by JYuan94 using @tweenjs/tween.js, loader-utils, react, react-dom, react-scripts, three

How can I modify it so that only the curves glow again, while the rest of the scene is normal and unexposed 😅

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

I really want to know how three.js is set up so that this post-processing only affects one object (Mesh), but has no effect on the other (Mesh). Only looking at the code for React-Three-Fiber, I can’t see how it only affects the sphere in the middle and not the surrounding model. Or is there a similar example (implemented based on Three.js, without React-Three-Fiber code)

---

<div class="post-metadata">

**Author:** ![JYuan94](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jyuan94/32/36075_2.png) [@JYuan94](https://discourse.threejs.org/u/JYuan94)\
**Post date:** [April 23, 2023, 3:48pm UTC](https://discourse.threejs.org/t/how-do-i-set-up-post-processing-to-make-only-one-object-in-the-scene-glow-not-all-of-it/50643/8 "2023-04-23T15:48:53Z")

</div>

I also have the material’s.tonemapped property set to true in my example, but it has still been exposed 😅:

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

---

<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:** [April 26, 2023, 8:07am UTC](https://discourse.threejs.org/t/how-do-i-set-up-post-processing-to-make-only-one-object-in-the-scene-glow-not-all-of-it/50643/9 "2023-04-26T08:07:26Z")

</div>

This does not address the original issue. Nevertheless it shows an alternative approach without post-processing. A selective bloom can be faked by stacking several objects with decreasing opacity.

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

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

And a close-up:

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

---

<div class="post-metadata">

**Author:** ![JYuan94](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jyuan94/32/36075_2.png) [@JYuan94](https://discourse.threejs.org/u/JYuan94)\
**Post date:** [April 26, 2023, 8:30am UTC](https://discourse.threejs.org/t/how-do-i-set-up-post-processing-to-make-only-one-object-in-the-scene-glow-not-all-of-it/50643/10 "2023-04-26T08:30:09Z")

</div>

> [@drcmda](#):
>
> though i think it’s fair to mention that threejs in react raw makes little sense. r3f is not a library but a renderer, like react-dom. you are expressing threejs in react just like you express the dom in react via jsx, but you’re still writing threejs. there is an eco system for fiber that’s larger than anything you will find in plain three, nor will plain three give you any integration with react.

Okay, thanks for your help. I’ll check it out 😄