EffectComposer doesn't play nicely with drei/View

[tarabishy2020]

Whenever Effects are placed as part of a View, nothing is rendered properly.

https://codesandbox.io/s/view-skissor-forked-g84lwh?file=/src/App.js

[ThimoDEV]

Did someone find a solution to make this work?

[denkravchu]

Faced the same problem.

Me too.

[denkravchu]

Me too.

Partable solution.

I have not yet figured out how to use the EffectComposer if you overlay two scenes on top of each other, because the alpha channel is lost. However, if an alpha channel is not required, the best solution i found would be to make your own view component and use the THREEJS effectComposer inside it, like in this example https://codesandbox.io/s/r3f-hud-forked-z625d2?file=/src/index.js (just add there threejs scissors and ull get what u need).

Also i tried using EffectComposer from postprocessing library, sometimes it works sometimes it doesn’t, but it’s also quite possible to set it up for a specific situation by playing in the priority for rendering.

I'll post again if Ill find a better solution.

[ynamite]

Any updates on this? The codesandbox from @denkravchu is gone, sadly

[timmevandermeer]

Have solved this similarly to @denkravchu, by forking View and using a EffectComposer in there (in the Container component) in stead of the regular renderer (on this line https://github.com/pmndrs/drei/blob/71864076c35c3b4f201cd9518da873eff7dc90a1/src/web/View.tsx#L138)

[ynamite]

@timmevandermeer thanks a lot!
When you say EffectComposer, do you mean EffectComposer from @react-three/postprocessing or effectComposer from three JS postprocessing? Either way, some example code would help a lot. I'm a bit new to this.

[ynamite]

Now EffectComposer is working with the original View.tsx from Drei. It requires a wrapper that basically takes over EffectComposer rendering and renders a contents view to a texture to handle transparency:
https://codesandbox.io/p/sandbox/twilight-browser-7235jd

Some more info here: pmndrs/drei#1413
It requires a slightly modified EffectComposer, due to a bug mentioned here: #285

[SoftwareMechanic]

@ynamite

when I try to replicate the same setup using the more recent versions, like:

"@react-three/drei": "^10.5.0",
"@react-three/fiber": "^9.0.0",
"@react-three/postprocessing": "^3.0.0"

...the effects no longer render properly in my application. The only thing I notice still working is the dpr setting — but none of the postprocessing effects are visible anymore.

I'm going to fork the original sandbox and attempt to upgrade the dependencies to the latest versions to see if I can reproduce and isolate the issue.

EDIT:

here I made some tests, uploading some libraries:

• uploading only r3/postprocessing, the post processing effects just don't work anymore
• uploading everything except r3f/postprocessing, still make the post processing effects not work anymore and this snippet trigger exceptions:

  const children = instance.current.objects as unknown[]
  for (let i = 0; i < children.length; i++) 

I had to use the ? operator to avoid exceptions.

• same if upload everything

do you have some hints on how to proceed to fix this issue? I'm still new to the codebase of this repository

[ynamite]

@SoftwareMechanic

I don't have any hints off the bat, I'm sorry, I haven't tried this with recent versions.

To be clear, the above was an experiment to achieve an effect I wanted for my website. In the end, I abandoned r3f/postprocessing (and effectComposer) and went with a custom post processing solution, simply because effectComposer was too demanding for the effect I wanted to achieve (too many effects on separate layers).

Can you share what it is exactly you want to do? My knowledge here is quite limited too, but maybe I or somebody else can help once it's more clear what it is you want to do.

[SoftwareMechanic]

@ynamite thank you for your response.

I am not a lot into post processing, so that's why I thought it was cool to use this library, as to me seems almost a standard in r3f.
even if I don't see a lot of movement here in the last months.

I am working on a project which in some part sof it, it needs to have multiple viewers, but I want to avoid using multiple canvases, I would like to use Drei View, which come with it's problems when using EffectComposer also, as this issue rightly says.

using the effects is not the priority, but it will be cool if I can use the effects also in these Views.

probably I will start digging more in this repository, in order to understand what the issue could be.

[ynamite]

@SoftwareMechanic

Don't get me wrong, the EffectComposer/postprocessing libs are great and I love them. It just wasn't a good fit for my requirements in the end.
In combination with Drei View (depending on the effects used) performance can take a serious hit.

Not sure what the best way would be to implement what you're looking for using r3f. If you only have a few small views then you might actually be better off justing rendering different canvases. While it's generally not recommended, you can get away with it if and when they're not too large and there aren't more than say 3-4 of them.

Could you maybe share a codesandbox of your previously mentioned setup using current versions of all the libraries?
I may be able to help you debug it.

[SoftwareMechanic]

@ynamite

here a version of the sandbox with latest libraries (including react 19 of course)
sandbox

NOTE

right now it will give you the following error:

can't access property "length", children is undefined
at the line 124 of EffectComposer.tsx

I tried using question mark operator, and also using the property 'children' instead of 'objects (seems it's not there anymore) at line 122.

at the end it render everything, except the effects.
I don't think there should a big job to do, but considering all these libraries updates, probably there are more things to consider which I don't know.

[SoftwareMechanic]

@ynamite I Think I solved it!

these are the updates:

const children = instance.current?.children as unknown[];

          for (let i = 0; i < children?.length; i++) {
            const child = children[i];

            if (child.object instanceof Effect) {
              const effects: Effect[] = [child.object];

              if (!isConvolution(child.object)) {
                let next: unknown = null;
                while ((next = children[i + 1]) instanceof Effect) {
                  if (isConvolution(next)) break;
                  effects.push(next);
                  i++;
                }
              }

              const pass = new EffectPass(camera, ...effects);
              passes.push(pass);
            } else if (child instanceof Pass) {
              passes.push(child);
            }

[ynamite]

@SoftwareMechanic I can't access your Codesandbox for some reason :)