How do you retrieve WebGL bitmap data?

Question

It is possible to retrieve the bitmap data HTML Canvas 2D element, is it also possible to access the rendered content of a Canvas 3D / WebGL element as bitmap data?

Answer 1

The signature of WebGL's readPixels has changed in a later draft.

Instead of returning a new array with the pixel data everytime, you pass an array to fill as last argument :

void readPixels(GLint x, GLint y, GLsizei width, GLsizei height, GLenum format, GLenum type, ArrayBufferView pixels)

This allows to reuse the same array for multiple readPixels operations.

Answer 2

Not as direct as using readPixels, but this might also work. You can also render the canvas to a Image element, like so:

var img = document.getElementById("game-canvas").toDataURL("image/jpeg");
$("#shots").append("<img src=\"" + img + "\" width=\"320\" height=\"480\"/>");

You have to get your webgl context with the special option preserveDrawingContext for this to work though:

var gl = canvas.getContext("experimental-webgl", {preserveDrawingBuffer: true});

From there on, if you want to manipulate the image easily, you could render that in a 2d canvas and read the pixels there if you want.

I regularly use this to take "screenshots" of the things I'm playing with.