Screenshots while using OIT seems broken

Hello, everyone!

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. (

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!

You have to let the system a little time to be sure everything is ready to be rendered with OIT:

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.

This is if I dont ever take the screenshot

This is after taking the screenshot

Ive attached SpectorJS capture files, not sure if it helps but it won’t hurt (3.3 MB)

We can reproduce this issues on Mac and Windows.

With OIT disabled we can save a good screenshot, with OIT enabled the screenshot is empty.

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:

1 Like