Is there a more "first class" way to take a screenshot?

The PlayCanvas tutorial page for taking a screenshot: Capturing a screenshot | Learn PlayCanvas links to this code PlayCanvas | HTML5 Game Engine

There’s a few issues with this code, and the overall issue is that it looks fairly verbose, and requires calling into the guts of PlayCanvas, violating the API/interface. Is there a more official / first class way to take a screenshot? BabylonJS for example has CreateScreenshot. Threejs doesn’t have a first class method, and you still have to read canvas data into a buffer, but you can still do it with only a few lines of code and not having to talk to gl.

I’ve tried to turn the editor code into standalone code (by the way the editor code has some type errors and some dead code), my attempt so far is here: Take Screenshot Playcanvas · GitHub

But running this code results in

GL_INVALID_FRAMEBUFFER_OPERATION: Framebuffer is incomplete: No attachments and default size is zero.

Do you see anything obviously wrong with my code, and/or is there a more first class way to get image data?

The main error in the above code was not calling .render() to write data to the render target. I got it working, it’s still pretty verbose though and violates the pc API and requires @ts-ignore in a few places

But now there’s screenshots! Shaderfrog 2.0

1 Like