Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SelectiveBloom no longer working with Three.js r135? #111

Open
jessefischer opened this issue Jan 17, 2022 · 10 comments · May be fixed by #297
Open

SelectiveBloom no longer working with Three.js r135? #111

jessefischer opened this issue Jan 17, 2022 · 10 comments · May be fixed by #297

Comments

@jessefischer
Copy link

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!

Screen Shot 2022-01-17 at 5 15 34 PM

Screen Shot 2022-01-17 at 5 15 50 PM

@michaelkramer
Copy link

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

@TimKraemer
Copy link

TimKraemer commented Jan 27, 2022

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
Copy link
Member

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
Copy link
Member

drcmda commented Feb 23, 2022

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
Copy link
Member

vanruesc commented Feb 23, 2022

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
Copy link
Member

drcmda commented Feb 23, 2022

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

@vanruesc
Copy link
Member

@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
Copy link

mattparrilla commented Jul 20, 2022

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
Copy link

ssadler commented Sep 11, 2022

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

@drcmda
Copy link
Member

drcmda commented Sep 12, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
7 participants