Trying to get the Crossfade example working with R3F. Having FBO issues

[johnmarinelli]

(relevant sandbox:) https://codesandbox.io/embed/glitch-react-three-fiber-react-spring-5fdt6?fontsize=14&hidenavigation=1&theme=dark

I'm trying to get this example (https://threejs.org/examples/webgl_postprocessing_crossfade.html) working with r3f.

In the example, they use an intermediary shader to mix the result of 2 FBOs.
In my code, it seems like the intermediary "transition" shader does not get rendered to at all. I can't figure out if the scenes are not writing correctly to their appropriate FBO's, or if shader code is wrong. I suspect the renderer.setRenderTarget logic is messed up somehow, but I've gone through the WebGLRenderer docs a million times and tried every logical combination I could, but it still didn't work.

I've basically copy+pasted the code directly from the example and adapted it to R3F as best I could - there is no extra logic that I'm using outside of the example code.

Am I missing something here? Any direction would be appreciated. Thanks.
(relevant sandbox:) https://codesandbox.io/embed/glitch-react-three-fiber-react-spring-5fdt6?fontsize=14&hidenavigation=1&theme=dark

[drcmda]

here's an easier example, is this the same effect? https://codesandbox.io/s/blissful-driscoll-x37p4kk6p4

[johnmarinelli]

sorry for the late response, was really busy this week.

this works great! i just replaced the the images with my scene FBO's and everything works fine. thanks.

[taseenb]

Hey @johnmarinelli would you share your port to R3F of the cross fade example in a code sandbox please? I'm struggling with this one and would really like to see how you did it. Thanks!