Outline & SelectiveBloom over-lapping meshes

[mysterybear]

Hi there

I've been trying to do as per the title. Here's a codesandbox of my attempt: https://codesandbox.io/s/github/mysterybear/outline-and-bloom?file=/src/App.tsx

As I've commented at the top, the objective is to have 2 stacks of boxes... Outline should outline whichever box is hovered, SelectiveBloom should bloom each stack that is hovered...

I believe I've set up the appropriate code architecture, it's just a case of the postprocessing stuff that won't give... Would really appreciate some help with this, sorry if it's inappropriate for an issue (though I'm not ruling out an issue with the library vis a vis combining Outline with SelectiveBloom?)

Cheers!

[mysterybear]

Sorta solved this by composing the effects without react-three/postprocessing wrappers on this branch https://codesandbox.io/s/github/mysterybear/outline-and-bloom/tree/old-style

That when nothing is selected, everything is bloomed... Seems to be an issue any time I get it working... Leave this open in case it's of interest to maintainers but feel free to close if not, have ended up just mutating a cache of materials for my actual application

Cheers

[vanruesc]

Thanks for the report and sorry for the delay!

That when nothing is selected, everything is bloomed

That doesn't sound right.. there might be something wrong with the SelectiveBloomEffect. I'll investigate.

[asjustis]

I have the same problem, pretty much have a structure of the following code

<Canvas frameloop="demand">
    <MyModel />
    <EffectComposer autoClear={false}>
	<SelectiveBloom
	    lights={[lightRef1, lightRef2, lightRef3]}
	     selection={[ringRef]}
	     luminanceThreshold={0.8}
	     luminanceSmoothing={0}
	/>
    </EffectComposer>		
</Canvas>

But I'll try to create a sample to reproduce it on sandbox later this week if I am able.

And it happens not on all computers, maybe related to browser/MacBook version: I'm on Intel Mac, both Safari and Chrome work fine, but on M1 Mac Safari it duplicates (Chrome works fine, though)

[vanruesc]

@asjustis That could be a device issue or an ANGLE bug.

The other issue where everything would bloom when the selection was empty is fixed in [email protected] but the peer dependency in react-postprocessing seems to be pinned to 6.26.3. @drcmda Can we relax the version requirement? Minor and patch releases should never introduce breaking API changes.

[asjustis]

@vanruesc Thanks for the response. I just made a sandbox example where this issue happens as well. Once again, not on all browsers, as explained before. Here is a video on my iPhone 12 (iOS 15.4.1) where the issue appears (but it didn't before the update), so it might suggest this could also be a browser issue

https://user-images.githubusercontent.com/1465112/167124806-f83bade3-e983-4937-bfe7-d5689fe10ff5.MP4

• Sandbox with my own dependencies versions: https://codesandbox.io/s/scanner-orig-dependencies-83u1h2?file=/src/ScannerModel.js
• Sandbox with latest dependencies: https://codesandbox.io/s/scanner-updated-dependencies-uus7hg?file=/src/ScannerModel.js

Removing EffectComposer and SelectiveBloom solves the issue.

[Tombar]

@vanruesc Thanks for the response. I just made a sandbox example where this issue happens as well. Once again, not on all browsers, as explained before. Here is a video on my iPhone 12 (iOS 15.4.1) where the issue appears (but it didn't before the update), so it might suggest this could also be a browser issue

RPReplay_Final1651836812.MP4

• Sandbox with my own dependencies versions: https://codesandbox.io/s/scanner-orig-dependencies-83u1h2?file=/src/ScannerModel.js
• Sandbox with latest dependencies: https://codesandbox.io/s/scanner-updated-dependencies-uus7hg?file=/src/ScannerModel.js

Removing EffectComposer and SelectiveBloom solves the issue.

I'm seeing the same behavior on mobile devices too, I narrowed it down to using autoClear={false} on my EffectComposer, If I remove the autoClear property I don't have the ghosting effect anymore.. but yes.. the outline effect just doesn't show anymore either

I plan on creating a new issue for this, but in the meantime hope this helps!

[vanruesc]

Unfortunately, I'm unable to reproduce the issue, but I'm on the lookout for anything related to this bug. My current guess is that there's something wrong with RGBA render target clearing on iOS. The default of three's alpha setting was changed to true in r137 and RGBFormat was removed. Could you try your failing example with r136 instead to see if that affects anything?

[CodyJasonBennett]

Looks like the issue we encountered in https://github.com/mrdoob/three.js/pull/24001#issuecomment-1119203172.

Also, from https://discord.gg/poimandres:

This is basically a shot in the dark, but can you try adding a large transparent cube to your scene (within camera view range) to see if that fixes it? Something like this:

const cube = new Mesh(
  new BoxGeometry(),
  new MeshBasicMaterial({
    side: BackSide,
    transparent: true,
    opacity: 0
  })
)

cube.scale.setScalar(camera.far - 10)
scene.add(cube)

[Tombar]

Here is a simple demo showing the problem with autoClear using three r136 https://codesandbox.io/s/github/Tombar/r3f-ios-bug/tree/main/

I'm not sure if i'm using the proper version of r3f, but 8.0.12 gave me an issue with r136 of three, so I went to r3f 7.X.X

Anyway you can try it out on a iPhone and you will see the ghost/artifact, swap lines 20 and 22 and it works again

Please let me know if you want me to open a new issue for this or its related

Regards

[asjustis]

@Tombar hm, I had this idea initially about the autoClear={false} flag, but it didn't solve the issue.

The same happens with your CodeSandbox example: if I only update the flag from true to false, the issue persists, but if I remove EffectComposer at all, then it works as expected (without the effect, though).

A bit later I'll try updating Safari on my Intel Mac to the latest minor version, to see if this is an iOS-specific or Safari-specific thing.

[CodyJasonBennett]

Clearing the canvas before every frame is a good workaround for the moment. You can do that by adding a lambda pass before your other effects:

import { LambdaPass } from 'postprocessing'

composer.addPass(new LambdaPass(() => {
  renderer.setRenderTarget(null)
  renderer.clear()
}))

In R3F you can add it to an effect which will run before render:

• https://docs.pmnd.rs/react-three-fiber/api/additional-exports

import { addEffect } from '@react-three/fiber'

addEffect(() => {
  renderer.setRenderTarget(null)
  renderer.clear()
})

Regarding the issue, calling gl.clear() with any combination of bits is enough to clean up. Looks like their underlying canvas implementation is leaking stuff and polluting into framebuffers. https://p89400.csb.app/