react-postprocessing
react-postprocessing copied to clipboard
pmndrs
Outline/SelectiveBloom not rendering
Hi,
I am trying to use the Outline and/or selective bloom on some meshes, and while there is no error generated, the effects don't seem to be shown. I have made a code sandbox to illustrate the behavior. I based this off the examples I could find, but there weren't any updated ones for these effects here, so it is possible I am referencing something outdated.
Of note, my original example used forward references on groups as the arguments to selection, but I have tried this with forward references to meshes, and even normal references to both without success.
does any of the effects (either Outline or Selective Bloom) work standalone?
As in without one or the other? Neither works in isolation. I did test a couple others, such as Vignette, and those do work as expected.
@AndrewJSchoen got it, thanks for clarification
so looks like the scope is only those two effects
will look into that soon
thanks for reporting :)
Just in case a [non] working example is useful, here is a code sandbox link:
https://codesandbox.io/s/react-postprocessing-ssao-smaa-and-bloom-demo-forked-jvtvz
After looking at it, I am not positive that standard Bloom is working either. Maybe I just didn't set the params in a way that made it obvious enough.
Thanks again for the help!
I did notice this issue too. If it helps, I took an old demo of yours, updated the code to bump dependencies, including postprocessing to its latest version, and it still works. Here's the sandbox link. However, if I bump a bit more (which requires to update drei, fiber, postprocessing to their new names), it won't work. So the bug must be in @react-three/postprocessing.
I know this will be tricky to read, but please bare with me. Here's a screenshot of Spector.js (a WebGL debugger) running the same scene of the above sandbox. On the left is the broken one (latest versions of all dependencies), and on the right is the working one (old versions). You can see the difference on the last "Canvas frame buffer" image. The one on the right displays the outline.
There is a list of WebGL commands for the execution of the frame, including the OutlineMaterial shader. What strikes me most is the "clear" (highlighted in orange on the left). It looks that we are running a depth comparison shader and clearing the result before using it in the outline pass. On the right, it is not cleared and the shader works.
I'm not sure where this difference comes from. It sure does not come from postprocessing as the version used on both side is the same. Who decides to clear? Is this a difference in three itself? It may be a wrong lead, so forgive my ignorance. Hope this helps.
Hey, disabling autoclear seems to work!
<EffectComposer autoClear={false}>
There are probably side-effects to this workaround though.
Hey, disabling autoclear seems to work!
<EffectComposer autoClear={false}>There are probably side-effects to this workaround though.
Hmm. What are the versions of the packages you are using? I added the autoClear flag to the EffectComposer in my example and didn't see any change in either SelectiveBloom, Bloom, or Outline.
react-three/drei: 4.3.3 react-three/fiber: 6.0.19 react-three/posprocessing: 2.0.3 posprocessing: 6.21.4 three: 0.128.0
That is super strange. The only substantial difference I see between your example and mine is that you are using .tsx and my example is .jsx. Not sure if that is actually the culprit. In terms of deselecting, my guess is that this is a side-effect of turning autoClear to false?
No, the original example didn't support unselecting either. Not sure why.
I doubt TypeScript makes a difference. Could you try running your example through Spector.js and compare it with mine (see if the clear command is gone)?
@warrenseine I can replicate the clear behavior in an example with Spector.js. For another purpose, I had made a simplified example of what I was working on, and adding the autoClear={false} appeared to work there. However, in the original, it didn't work. One of the simplifications I had made was that I substituted my more complex mesh groups (GLTF) with standard drei <Box/> and <Sphere/> shapes. When I used a ref directly to one of those shapes, and autoClear={false} had been added, the outline shows. However, when you wrap one of those shapes in a <group/> element, it no longer works, even with autoClear={false}. From what I understand though, groups should be supported? @talentlessguy
I confirm that I only tested on meshes, not groups. Considering that the selection is added to a layer and that groups cannot be added to layers, I'm not surprised it didn't work.
I do have the same need though, and I'm using some convoluted solution to collect all the meshes I need to add to the selection to be outlined. I would prefer to add a property on my meshes or groups (a bit like castShadow) and have the effect traverse my tree to build the selection, but that's not how it was designed.
I have a problem that is maybe related to this, Im not sure. I'm creating a new issue, but basically it seems the selection I'm passing to SelectiveBloom is not updating.
I'm having the same problem and adding autoClear={false} on the <EffectComposer> works for me.
EDIT: now nearly a month later and I have yet to see any negative side effects from doing this.
I confirm that I only tested on meshes, not groups. Considering that the selection is added to a layer and that groups cannot be added to layers, I'm not surprised it didn't work.
I do have the same need though, and I'm using some convoluted solution to collect all the meshes I need to add to the selection to be outlined. I would prefer to add a property on my meshes or groups (a bit like
castShadow) and have the effect traverse my tree to build the selection, but that's not how it was designed.
So whats the method here..? Setting certain layer to all group children? :/
@cptSwing The solution now is to use <Selection/> (see here). I have found this to work for me pretty well, as long as I kept autoClear={false} in the <EffectComposer/>