Ricky Reusser

A series of WebGL tools and tutorials based around the regl WebGL library

Regl Tools and Tutorials

Hello ! I am trying to capture the canvas as an image, I can't capture the rendered canvas to save it, every time I try I only get a transparent rendering. I tried through observable but also trying to capture framebuffer content within console but no success. Would you help me with this ? Thanks a lot.

DANIAUD Dimitri

You probably need to pass `attributes: { preserveDrawingBuffer: true }` in the canvas creation attributes. (This is WebGL behavior and not something regl implements; it just forwards context creation `attributes` to canvas.getContext().) Without this, WebGL flushes the content after each draw, so that it doesn't exist when you try to read it and save the image. See: https://registry.khronos.org/webgl/specs/latest/1.0/#5.2.1

Actually, I think there are two ways to accomplish this. The first is to include `preserveDrawingBuffer: true` in the context creation attributes as described above, and then you can read pixels (i.e. save the canvas image) at any time.

The second method is to *synchronously* call `regl.poll()`, then issue a sequence of draw commands, and then read the pixels. The commands *must all be synchronous*, in the same block of code. As long as they are, I think `preserveDrawingBuffer: true` is not required. This isn't always convenient though so that `preserveDrawingBuffer: true` may be more flexible.