I’m working on a project with two scenes that are on top of each other. The scene in front is supposed to have a transparent background with the other scene being visible in the background. This all works well… until I try to add a DefaultRenderingPipeline to the foreground scene. As soon as I do that the scene turns opaque and I can’t see the scene in the background. Here is a simple playground example based on the official multiscene example (which is supposed to look like this). What can I do to fix this? Already tried various things, like setting the clear color to something transparent, but nothing seems to work.
Welcome aboard!
When using the default rendering pipeline (or any post process), the rendering is done in a separate framebuffer and is copied back to the canvas at the end. In your case you need a blending instead of a copy to avoid loosing the first scene. Also, for the blending to work, you should have alpha = 0 for the background pixels of the foreground scene.
So, you need to enable alpha blending on the last post process and use a clear color like (0,0,0,0) on the first post process:
https://playground.babylonjs.com/#L0IMUD#112
There’s a small oddity in that if you have a single post process in the chain, setting an alpha mode on this post process will disable its clearing, so you need to do it yourself (see lines 112-116).
3 Likes
Perfect, that works. Thank you!