Rendering camera view to new canvas?

Help & Support
, ,
1

This example uses render to texture on image element (Default PlayCanvas UI)
Capture

I was wondering if there is a way to render the camera view to a new canvas (HTML) element and achieve the same goal without using the default PlayCanvas UI system

Thanks for any help

2

Hi @Newbie_Coder,

Yes, you can do that. You will have to read the texture from the GPU and create an image (regular DOM element). You can then use that image on regular HTML elements.

A good starting point is the screenshot capture example, but instead of downloading the resulting image, create an image DOM element and use it:

https://developer.playcanvas.com/en/tutorials/capturing-a-screenshot/

3

Did a quick example, performance wise it’s really laggy, at least on my lap

Launch:
https://launch.playcanvas.com/1626205?debug=true
Editor:
https://playcanvas.com/editor/scene/1626205

Render time < 100

4

Oh yes, that’s expected, I wouldn’t use that per frame, just for a single frame.

Rendering and reading pixels stalls the CPU and will produce that noticeable lag.

5

Is there any other way to achieve the same functionality?