[SOLVED] Screenshot with a camera and not the canvas


Is it possible to take screenshots from a camera and not from the canvas. In your playcanvas tutorials, you use the canvas to make the screenshot.
We want to take screenshots from another camera that is not the main camera, is that possible? so that a camera would just that screenshots in the background and not be the rendered camera on the canvas.

and can the screenshots be 4k?

You can render to a texture and then use the texture data to create an image as shown here: How to read pixels of texture?

4K x 4K is possible pending on the platform due to VRAM and device limitations. 1K x 1K and 2K x 2K are ‘safer’ dimensions to use.

yes, but when you say render to a texture, will it still be the main camera that is rendered on the canvas? of can it be another enabled camera that is not the one displayed?

You can change the render target of any camera to a texture. https://developer.playcanvas.com/en/api/pc.RenderTarget.html

A couple of examples of rendering to a texture:

to make a screenshot i would have to make an image element to have a png. So how can a turn my texture to an image element.

Because in my project, when you click on the button it takes multiple screenshots from different cameras and downloads them directly on my computer. Additionally we want to change the resolution of the screenshot to a 3300 x 3300.

var canvas = document.getElementById('application-canvas');
var dataURL = canvas.toDataURL('image/png');
var image = new Image();
image.src = dataURL;
// put the right link in the <a> and take the shot
this.button.href = dataURL;
this.button.download = "screenshot.png";

this is my code, but in our case, we don’t want the canvas to make the screenshot, but a camera that is not the main cam. and to be able to change the resolution of the image, but I am having doubts that it’s possible, because the downloaded image is the one from the dataUrl and i doubt we can change the size.

For now, we disable and enable different cameras to have different screenshots, but we see the change in the canvas, and that is not what we want.

1 Like

@yaustar, the project in this link doen’t work, i don’t have access to it
But yes I am trying to turn a texture to an image, but I am not finding any solutions

Actually trying this now and it’s a lot more difficult than I first thought as I can’t seem to convert a texture to something I can create an image out of yet.

However, as a work around, could you add a HTML DOM object/image to the screen that covers the canvas, enable/disable the cameras to take the screenshots from the canvas and when it’s all done, enable the main camera and remove the DOM?

Ya that was, my last option, but we are hoping for something better.

Render target, like you said looked like a nice solution, but turning a texture to an image is challenging. If you figure it out let me know! :slight_smile:

Finally done it after some posted in an old thread of someone else trying to do the same thing


WOW, i’ve been strungling with this. I was able to render the camera to texture, but not an image.
Thank you so make @yaustar !

Hey @yaustar,

I see you use layer with the renderTarget, but with that I am finding hard to have multiple cameras. I am trying to have multiple hidden camera screenshot.

What problems are you running into?

well I am trying to get like 6 screenshots from different cameras with one click of a button.

I tried by having the 6 camera in the same layer, but enabling them one at a time to get one screenshot for each. that did not work, the screenshot were just blank.

I tried by having 6 camera enabled at the start each in different layer but this happened.

looks like Playcanvas doesn’t like the fact that I have more then one enabled camera, but in your project you had another one to, so I am confused

nevermind for the second part the error, it was because the light was not reliated to all the layers

For this, chances are that you will need to at least wait for one render frame before taking the screen shot.

I see if I can get this working in the demo.

Done. https://playcanvas.com/project/605131/overview/capturing-screenshot-from-camera

Basically used the same camera and moved it each render frame to a new position.

1 Like

Building on top of this solution: Instead of setting the renterTaget of a layer to the texture, you can directly set the renderTarget of the screenshot camera to the texture. Then you don’t have to create another layer and tag every object you want to see in the screenshot.

(I would have commented directly on the demo project, but the devlog is empty, so I can’t.)


Ah yes, I think the render pipeline recently changed to allow for this now