如何检索 WebGL 位图数据？

Question

可以检索 HTML Canvas 2D 元素的位图数据，是否也可以将 Canvas 3D / WebGL 元素的渲染内容作为位图数据访问？

Answer 1

的WebGL的readPixels的签名在后面的草案已经改变。

而不是返回与像素数据每次一个新的数组的，则传递数组以填充作为最后一个参数：

空隙readPixels（闪烁X，闪烁Y，GLsizei宽度，高度GLsizei，GLenum格式，GLenum类型，ArrayBufferView像素）

这允许重复用于多个readPixels操作在相同的阵列。

Answer 2

从工作草案来看 WebGL 规范:

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

返回带有像素的ArrayBufferview在传递的矩形中。从读取像素返回的数据必须是最近发送的绘图命令的最新数据。任何未加工的绘图命令都必须完成，并且在readpixels访问绘图缓冲区之前，其结果将其结果呈现给当前的绘图缓冲区。

返回的ArrayBufferview的特定子类取决于传递的类型。如果是unsigned_byte，则返回一个uint8array，否则将返回uint16array。

Answer 3

还不如直接作为使用readPixels，但是这也可能工作。还可以使帆布的图像元件，像这样：

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

您必须获得与特殊选项preserveDrawingContext您WebGL的背景下对于这个工作虽然：

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

从那里，如果你想轻松处理图像，可以呈现在一个2D画布和读取像素那里，如果你想要的。

我经常用它来取我与玩的东西“屏幕截图”。