SelectiveBloom no longer working with Three.js r135?

[jessefischer]

Hi all,

I'm a relatively new Three.js and R3F user. I was having trouble getting SelectiveBloom to work selectively at all (it just seemed to apply it to the whole scene) and I attempted to reproduce the example posted last year in #85 by @danielx-art.

To my untrained eye it appears as though something broke or changed between Three.js r134 and r135. Here's an extremely minimal Code Sandbox to demonstrate:

https://codesandbox.io/s/quizzical-curran-dvg6f?file=/src/App.js

With Three.js version 0.134.0 or lower, I get the intended behavior which is the left (green) box glowing but the right (orange) box plain. With version 0.135.0 or higher, I get both boxes glowing. My other dependencies are the same:

@react-three/fiber 7.0.24 @react-three/postprocessing 2.1.2 react 17.0.2 react-dom 17.0.2 react-scripts 4.0.0

(I notice that in the Three.js release notes for r135, they note two updates to Layers... I wonder if this could have broke something?)

Can anyone else reproduce this? Is there a bug in SelectiveBloom introduced by an update in Three.js or am I doing something else wrong? Thanks in advance for your help!

[michaelkramer]

What what I'm experiencing is that it will selective bloom everything BUT what you want to bloom.

[TimKraemer]

Hi I can confirm,

I have forked your code-sandbox and reduced it even further: https://codesandbox.io/s/selective-bloom-bug-forked-yvt6p?file=/src/index.js

just change three version in the dependency menu to anything higher than 0.134.0 and SelectiveBloom will no longer work.

however, the underlaying native three-js effect unrealBloomPass still works with the newest three package - see: https://codesandbox.io/s/r3f-selective-bloom-forked-mupl3?file=/src/index.js

[vanruesc]

Selective bloom from postprocessing works fine with all recent versions of three and there are no issues in SelectiveBloom.tsx either. The changes made in three r135 only fixed Layers to properly support layer 31 which isn't even used in this sandbox.

So I tried to get to the bottom of this, but no matter what, the sandbox refused to work with three ≥ r135. I then downloaded the project as a zip to debug it, updated and installed dependencies locally and then it worked all of a sudden with three r137.

It would be nice if someone could verify this on another machine: selective-bloom-bug.zip (npm i && npm start)

[drcmda]

i seem to have no problem getting it to work with latest three (137.5): https://codesandbox.io/s/selective-bloom-cjike8?file=/src/App.js

[vanruesc]

Thanks, that sandbox works on my end too.

There are some undesired bloom artifacts around non-selected objects though which are caused by multisampling. MSAA leads to a size mismatch between the depth textures that are used for masking. This is a known problem that also affects SSAO.

[drcmda]

good to know @vanruesc i take it MSAA also needs to be 0 for selective outlines ...

[vanruesc]

@drcmda I think outlines don't use the main depth texture so that one should work. FYI: I want to get MSAA to play nice with all effects but I haven't found a good solution yet.

[mattparrilla]

I'm still seeing this issue (139.0) demonstrated in this sandbox. Both boxes get the bloom despite enabled={false}. Only when you hover on one does the other lose its bloom. This sandbox is adapted from @drcmda's Selective Outlines example, which doesn't have the issue, confirming @vanruesc's guess.

If I add the following component to the scene <Select enabled /><mesh /></Select> so that there is never a scene without a selected component, the bloom works as expected (only on hover): https://codesandbox.io/s/selective-bloom-forked-lsgjv7?file=/src/App.js

[ssadler]

In my case this was due to using depthTest=false on my materials.

[drcmda]

you don't need to select bloom, it is selective ootb, you control what glows on the materials, not on the effect pass.

// nothing at all will glow ootb with threshold of 1, unless you move colors out of 0-1 range
<Bloom luminanceThreshold={1} mipmapBlur />

// ❌ 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 glow, same as RGB [2,0,0]
<meshBasicMaterial color={[2,0,0]} toneMapped={false} />