canvas - 你如何检索 WebGL 位图数据？

Question

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

Answer 1

WebGL 的 readPixels 的签名在后来的草案中发生了变化。

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

void readPixels(GLint x, GLint y, GLsizei 宽度, GLsizei 高度, GLenum 格式, GLenum 类型, ArrayBufferView 像素)

这允许为多个 readPixels 操作重用相同的数组。

Answer 2

不像使用 readPixels 那样直接，但这也可能有效。您还可以将画布渲染到 Image 元素，如下所示：

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 画布中渲染它，并根据需要读取那里的像素。

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

Answer 3

来自WebGL 规范的工作草案：

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

返回一个 ArrayBufferView，其中包含传递的矩形内的像素。从 readPixels 返回的数据必须是最新发送的绘图命令的最新数据。在 readPixels 访问绘图缓冲区之前，必须完成任何未处理的绘图命令并将其结果呈现给当前绘图缓冲区。

返回的 ArrayBufferView 的具体子类取决于传递的类型。如果是 UNSIGNED_BYTE，则返回 Uint8Array，否则返回 Uint16Array。