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

andyandy · September 29, 2023, 10:56pm

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?

andyandy · October 1, 2023, 5:22pm

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

gist.github.com

https://gist.github.com/AndrewRayCode/945246756b04c8746cd836477b851c61

playcanvas_screenshot.ts


const copyUIntToImageData = (data: Uint8Array, imageData: ImageData) => {
  for (let i = 0; i < data.length; i += 4) {
    let index = data.length - i; // flip how data is read
    imageData.data[index] = data[i]; //red
    imageData.data[index + 1] = data[i + 1]; //green
    imageData.data[index + 2] = data[i + 2]; //blue
    imageData.data[index + 3] = data[i + 3]; //alpha
  }
};

This file has been truncated. show original

But now there’s screenshots! Shaderfrog 2.0