readPixels from WebGL2RenderContext只返回黑色像素

Question

所以有一个在线游戏使用WebGL2和WebAssembly。我的目标是通过脚本与游戏互动。它在内部使用指针，这使得很难从游戏数据中读取数据。这就是为什么我决定使用WebGL上下文来浏览UI。我是WebGL、图形和渲染的新手，不知道自己在做什么。

我已经找到了画布，可以在它上面执行方法。我的第一步是使用WebGL截取一些区域的屏幕截图，我可以用这些截图来分析部分UI。我用WebGLRenderingContext#readPixels。下面是读取整个画布并将其像素保存为RGBA的代码片段:

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("webgl2");
const pixels = new Uint8Array(ctx.drawingBufferWidth * ctx.drawingBufferHeight * 4);
ctx.readPixels(0, 0, ctx.drawingBufferWidth, ctx.drawingBufferHeight, ctx.RGBA, ctx.UNSIGNED_BYTE, pixels)
// Returns only black / white
pixels.findIndex(pixel => pixel !== 0 && pixel !== 255); // -1

所以在这种情况下，只有黑色像素，所有4元组都等于(0,0,0,255)。一个在临时画布上绘制这些像素并下载其ImageData作为png的方法创建了一个黑色图像。

这背后的原因是什么，我该如何解决它?

Answer 1

出于性能原因，WebGl的绘图缓冲区在绘图后被清除。https://www.khronos.org/registry/webgl/specs/latest/1.0/

2.2任何对readPixels()的调用都将返回空数据。

为了保持它的内容，你需要在通过getContext("webgl")函数获取绘图上下文时将preserveDrawingBuffer标志设置为true。

那么改变这个

const ctx = canvas.getContext("webgl2");

const ctx = canvas.getContext("webgl2", {preserveDrawingBuffer: true});