I’ve been using OIT (Order Independent Transparency) for quite some time now, and it’s become an indispensable feature for our work. However, I’m encountering a challenge specifically related to taking screenshots while OIT is active. I’m hopeful that someone might have insights or guidance regarding this issue. To facilitate understanding, I’ve prepared a PG (Playground) to replicate the problem. (https://www.babylonjs-playground.com/#JKA0QS#10)
Essentially, my aim is to capture a screenshot using an additional camera to avoid visible transitions in the image. I’m currently using OIT and FXAA (Fast Approximate Anti-Aliasing).
The outcomes seem inconsistent, ive attached 2 images that can be generated by just running the playground.
The sorting seems broken and sometimes we lose the clear color (blue color)
I hope this is enough information, let me know if more information is required, thanks!
The problem is that the depth peeling renderer (used by OIT) uses the pre-pass renderer, which does not work correctly for render target textures…
The only solution as of now is to use CreateScreenshot instead of CreateScreenshotUsingRenderTarget. Also, you should set the current active camera to the screenshot camera before calling CreateScreenshot, else this method is calling CreateScreenshotUsingRenderTarget internally:
However, this PG won’t work correctly because scene.executeWhenReady does not check if the depth peeling renderer is ready (there’s currently no way to check for this status). This PR will fix the problem: