Get correct color of mesh with UnrealBloomPass + R3f

I’m having issues trying to use react three fiber and UnrealBloomPass. The bloom automatically turns my sphere white but I want the color to be the meshes color (pink).

I read this link, but I can’t figure out how to convert this to R3F implementation. Any ideas?

The sphere:

My code:

Have you tried to change the tint colors? Left snapshot is with default white tint colors, the right snapshot uses deep pink tint colors. Here is a non-R3F demo (see lines 26-32):

https://codepen.io/boytchev/full/zYMdboz

image

1 Like

Ah cool, did not know of this. Do you have any tips to convert that to R3f implementation? Just pretty new to all this and not quite sure.

Unfortunately I’m not familiar with react stuff. There are react gurus here, so they might help, or even suggest better alternatives.

1 Like

Selective approach (not R3F) :thinking:


Demo: https://codepen.io/prisoner849/pen/XWyaQWq

2 Likes

it’s the same, you just use way too intense colors. a regular rgb value in three is between 0 and 1, not 0 and 255, so you are 255 times over the threshold in your bloom.

btw, better use GitHub - pmndrs/react-postprocessing: 📬 postprocessing for react-three-fiber the jsm effectcomposer is very slow.

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

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

ps there is a description for bloom here React Postprocessing Documentation it explains how it works and how you get materials to glow selectively.

as for retaining the original color and just having bloom, that isn’t how it works. emissive works like a hot light, it starts to diffuse once it overwhelms the observer with intensity, the source of the emission will appear white-ish. this is the same in blender, when you crank emissive up the object turns white. you can counteract some of that with emissive, emissiveIntensity, color and also tonemapping, but in the end it will still try to work in a realistic manner.

1 Like

Thank you, that makes a lot more sense. I switched to pmndrs bloom and it worked great.

Quick question - When it comes to exact colors, it seems like it’s has a lot of trouble, and might not emit anything (has issues dealing with emitting blue tones, however red is fine.) I’m wondering why this may be? Im trying to use the hex value #40529f and it just keeps becoming fully white.