如何检索WebGL位图数据？

Question

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

Answer 1

WebGL的readPixels的签名在稍后的草稿中发生了变化。

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

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

这允许重复使用相同的阵列进行多个readPixels操作。

Answer 2

从WebGL Specification的工作草案：

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画布中渲染该图像，并在需要时读取像素。

我经常使用它来截取我正在玩的东西的“截图”。