How do you retrieve WebGL bitmap data?
The WebPl readPixels signature changed in a later version.
Instead of returning a new array of pixel data each time, you pass the array to fill as the last argument:
void readPixels (GLint x, GLint y, GLsizei width, GLsizei height, GLenum format, GLenum type, ArrayBufferView pixels)
This allows the same array to be reused for multiple readPixels operations.
a source to share
From a working draft of the WebGL Specification :
ArrayBufferView readPixels(GLint x, GLint y,
GLsizei width, GLsizei height, GLenum format, GLenum type)
Returns an ArrayBufferView with pixels within the omitted rectangle. The data returned from readPixels must be updated as of the last paint command sent. Any raw paint commands must be executed and their results presented to paint buffers before readPixels accesses the paint buffer.
The specific subclass that ArrayBufferView returns depends on the passed type. If it is UNSIGNED_BYTE, Uint8Array is returned, otherwise Uint16Array is returned.
a source to share
Not as straight forward as using readPixels, but it might work as well. You can also make the canvas an image element, for example:
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 a custom preserveDrawingContext option for this to work:
var gl = canvas.getContext("experimental-webgl", {preserveDrawingBuffer: true});
From there, if you want to manipulate the image easily, you can do it on a 2d canvas and read the pixels there if you like.
I regularly use this to take "screenshots" of what I am playing with.
a source to share