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

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:

This is an example of my code:

Hi. There’s an example that uses it https://threejs.org/examples/?q=bloo#webgl_postprocessing_unreal_bloom_selective. You have to play with layers basically.

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

And since this is react it’s even easier

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} />
1 Like

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

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.

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.

1 Like

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

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

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)

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

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

image

And a close-up:

image

3 Likes

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