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!
Hello! This didn’t fixed the issue for me, I still get the same result even if I increase the wait time. This happens when we do the final compose in the depthPeelingRenderer.
Also if you take special attention to this image
We can see that it looks like we have rendering issues inside the sphere and in the right one we can actually see a hole in the plane intersection. It almost seems that is information from last render
Thanks for the help
Edit: More info
I did a capture with SpectorJS after taking a screenshot and without taking a screenshot at all.
Hello, all
i also have similar setup with IOT and the second camera for the screenshots.
the fix with executeWhenReady did not helped that much…
on mac (intel version) the screenshot is black and it breaks clear color.
on windows wokrs a bit better, the clear color is fine (although it flashes white) and screenshot is ok. But if you switch the camera to screeshot one - screenshot is there, but it looks a bit broken
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:
