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

From the working draft of the WebGL Specification:

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

Return a ArrayBufferView with pixels within the passed rectangle. The data returned from readPixels must be up-to-date as of the most recently sent drawing command. Any unprocessed drawing commands must be completed and their results presented to the current drawing buffers before readPixels accesses the drawing buffer.

The specific subclass of ArrayBufferView returned depends on the passed type. If it is UNSIGNED_BYTE, a Uint8Array is returned, otherwise a Uint16Array is returned.

Answer 3

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.