如何检索WebGL位图数据?

WebGL的readPixels的签名在稍后的草稿中发生了更改。

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

空读像素(闪烁X、闪烁Y、Glsizei宽度、Glsizei高度、Glenum格式、Glenum类型、ArrayBufferView像素)

这允许对多个readpixels操作重复使用同一数组。

从工作草案 WebGL Specification :

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

返回带像素的ArrayBufferView 在传递的矩形内。数据 从readPixels返回的值必须为 最近更新的 已发送绘图命令。任何未加工的 必须完成绘图命令,并且 他们的研究成果呈现在当前 读取像素前的绘图缓冲区 访问绘图缓冲区。

特定的子类 返回的ArrayBufferView依赖于 传递的类型。如果是 无符号字节,uint8array是 返回,否则uint16array为 返回。

不像使用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});

从那时起,如果你想轻松地操纵图像,你可以在二维画布中渲染它,如果你想的话,可以在那里读取像素。

我经常用这个来“截屏”我正在玩的东西。