How to take a screenshot of a fixed aspect ratio in the scene

Question2u · February 5, 2025, 9:39am

Hi!

Regarding this topic i have a question im currently trying to find a solution for:

In an 3D scene i want to capture an area and create an image from this area (its like a photo booth). The image always should have the same size and the same scene detail - like a photo booth.

Now i tried the screenshot scenes - but when switching to mobile it stretches the output.

Is there a solution i could place a fix photo booth camera and some kind of area to create a screenshot from?

if using the screenshot example with the ui screenshot area, it wount work, because it always adjusts the resolution, if switching on mobile device resolutions and standalone.

Basically it should be always the same picture of the photo booth area - regardless if on mobile or standalone. its not like taking just an camera screenshot, because its resolution also changes depending on the device resolution - it just should always be a fix frame / covering the same area of the 3d Scene.

Not sure how to achieve this

mvaligursky · February 5, 2025, 9:58am

If you’re using engine 2, we have this new function that could work for your case:

github.com

playcanvas/engine/blob/2dde663394455eef07555c492e8df8e6a8727b41/src/platform/graphics/texture.js#L1103-L1131


      
          /**
           * Download the textures data from the graphics memory to the local memory.
           *
           * Note a public API yet, as not all options are implemented on all platforms.
           *
           * @param {number} x - The left edge of the rectangle.
           * @param {number} y - The top edge of the rectangle.
           * @param {number} width - The width of the rectangle.
           * @param {number} height - The height of the rectangle.
           * @param {object} [options] - Object for passing optional arguments.
           * @param {RenderTarget} [options.renderTarget] - The render target using the texture as a color
           * buffer. Provide as an optimization to avoid creating a new render target. Important especially
           * when this function is called with high frequency (per frame). Note that this is only utilized
           * on the WebGL platform, and ignored on WebGPU.
           * @param {number} [options.mipLevel] - The mip level to download. Defaults to 0.
           * @param {number} [options.face] - The face to download. Defaults to 0.
           * @param {Uint8Array|Uint16Array|Uint32Array|Float32Array} [options.data] - The data buffer to
           * write the pixel data to. If not provided, a new buffer will be created. The type of the buffer
           * must match the texture's format.
           * @param {boolean} [options.immediate] - If true, the read operation will be executed as soon as

This file has been truncated. show original

It’s not public yet, but will work fine.
Just allocate a color texture with resolution you need, create a render target using it as a color buffer, attach it as a render target on the camera. Then enable the camera for a frame, and in the following frame you can call Texture.read, which gives you a promise to get the data back in a frame or two later.

Question2u · February 5, 2025, 10:17am

Hi @mvaligursky no this project is not using Engine v2.

Would you have an idea how to achieve this within Engine v1?

mvaligursky · February 5, 2025, 10:29am

consider moving the project to v2.

on v1, what you have is probably one of the easiest to do solutions, unless you want to go down to webgl code yourself. But after you download the image, you might need to crop it based on the screen aspect ratio or similar, to have the same view.

Question2u · February 5, 2025, 10:58am

Thanks a lot…

hmm i think i will have to create some kind of workaround and adjust the fov for the different platforms.

I think adjusting the fov should work - but its a quick and dirty workaround…