Cross fade with a third scene (or how to cross fade transparent objects in a complex scene)

[taseenb]

I’m looking for some help with a puzzle:

1. The goal is to “simply” cross fade two groups of meshes (red appears, blue disappears and vice versa).
   

   

2. The Cross fade example would be perfect BUT it does not work in this case because there are other elements in the scene that should not be affected by the cross fade (and may intersect with those that are affected).
   

   

3. Alpha texture and opacity would also be great BUT we cannot use those because not all objects can be transparent=true (we have to do this to avoid transparency issues). I could be wrong: maybe there is a way to override transparency=false via shaders and still change the alpha channel?

Here’s a simplified demo: cross fade with transparency - CodeSandbox (inspired by the Cross fade example). As you can see the “permanent” scene disappears during the cross fade.

Any help would be immensely appreciated

[taseenb]

It took some time, but I found a very simple solution that can work in some scenarios. It works by simply rendering the “permanent” scene twice, once for each FBO used for the cross fade.

So we have the cross fade between the red and blue objects but also the rest of the scene:

      // Scene A
      renderer.setRenderTarget(fboA)
      renderer.clear()
      renderer.render(permanentScene, camera)
      sceneA.render(delta)

      // Scene B
      renderer.setRenderTarget(fboB)
      renderer.clear()
      renderer.render(permanentScene, camera)
      sceneB.render(delta)

      // Now render the transition scene
      renderer.setRenderTarget(null)
      renderer.render(transitionScene, cameraOrtho)

Demo: cross fade with transparency - CodeSandbox

But if someone came up with a more efficient solution I would certainly prefer that one.