OIT feature and Screenshot size

Hi !
I use to create screenshots by creating a new canvas at the wanted size and a new camera to take those screenshots at differents points of view without showing the changes at screen.
It works pretty well, but now I have to set `useOrderIndependentTransparency` to true, and so I need to set my screenshot camera as the active one in the scene to make screenshots works with OIT, so the screenshots are now at the size of the screen canvas.
Is there a way to create screenshots at a specific size with OIT activated that I didn’t see ?
Here’s a playground: https://playground.babylonjs.com/#XPNWUV#3
Thank you !!

cc @Evgeni_Popov

Did you try using CreateScreenshotUsingRenderTargetAsync instead of CreateScreenshotAsync? The former let’s you pass the screenshot size, you should not have to modify the canvas for that.

Note: your PG generates 800x600 screenshots for me

As you were saying here the `CreateScreenshotAsync` doesn’t work with OIT feature.
In the PG the final image is at the good size, but just filled with transparency:


Without OIT and camera set active, here’s the result expected with screenshot:

Ah, yes, it’s because of OIT using the prepass renderer that CreateScreenshotUsingRenderTargetAsync can’t work…

However, I don’t understand your point:

This output is better than the one above, because OIT correctly handles interpenetrating transparent objects.

Now, if we take a screenshot from the PG running with OIT enabled, we get:

It matches what we can see in pictures #2 above, so it seems to work (?)

Yes, no problem with transparency rendering
It’s just that OIT forces me to set the camera as scene.activeCamera
By doing that, the screenshot is not “fullscreen” anymore
Sorry if it’s not clear, I hope this image will explain better:

I understand better now.

In fact, registering a view does not work because the screenshot is not taken from the canvas view, but from the main canvas.

The transparent areas on the left/right are due to the fact that we are using an intermediate canvas and we are not clearing it with the scene’s clear color.

Here is a PR that allows you to pass a flag to CreateScreenshot to indicate that this canvas should be cleared with the scene’s clear color:

Once this PR is merged, this PG will generate 800x600 screenshots without transparent borders:

What I wanted is to have a screenshot of the scene like with CreateScreenshotUsingRenderTarget, not a cropped one filled with clearColor scene.

For the moment, I can just resize my rendering canvas during the screenshot but the flickering is not very satisfying…

So I tried to modify locally this function to try to make it work with prePass:

  • I removed the engine.skipFrameRender = true
  • Instead of creating a new RenderTargetTexture, I use the one in scene.prePassRenderer.renderTargets[0]
  • I also removed the line that set forceLayerMaskCheck

With that, the screenshot is not empty anymore, but the render is not ok and my understanting of the postpross pipeline stops here…
Any idea to try to help me to make prePass compatible with CreateScreenshotUsingRenderTarget ?
I don’t even know if I’m in the good direction…

I don’t really see how to make that work with the pre-pass renderer…

Once screenshots of all sizes are supported by frame graphs (currently, you can only use CreateScreenshot), you’ll be able to do whatever you want with a frame graph.