WebGL 从屏幕外画布正确读取像素

Question

我知道这方面有很多资源，但没有一个对我有用。
一些是：webgl readpixels 总是返回 0,0,0,0，
而这个：/sf/ask/3140871961/\ 以及这个：Read pixel from a WebGL 纹理，
但它们都没有帮助或成功。

目标：使用 WebGL 着色器渲染屏幕外画布，然后将其用作单独的 WebGL 着色器中的纹理。

笔记：

• 对于这些 WebGL 着色器，我使用了用于像素着色器的通用顶点着色器，特别是光线跟踪器/光线行进器。这是：attribute vec2 a_position; void main() { gl_Position = vec4(a_position.xy, 0.0, 1.0); }。这个顶点着色器被输入了两个覆盖屏幕的三角形，所以基本上片段着色器正在做所有的工作。

问题：为了从屏幕外画布中获取图像数据，我尝试了以下方法：

1. WebGLgl.readPixels函数

var capturedImageData = new Float32Array(screenWidth * screenHeight * 4);
gl.readPixels(0, 0, screenWidth, screenHeight, gl.RGBA, gl.FLOAT, capturedImageData);

2. 使用另一个画布 getContext('2d')

var offscreenCanvas = document.createElement("canvas");
offscreenCanvas.width = screenWidth;
offscreenCanvas.height = screenHeight;
var ctx = offscreenCanvas.getContext('2d');
ctx.drawImage(glCanvas, 0, 0);
var capturedImageData = ctx.getImageData(0, 0, screenWidth, screenHeight);

这两种方法都会导致capturedImageData数组被填充
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, . . .，这显然是不对的。

如果有人对此问题有经验，将不胜感激。谢谢！

该计划的直接链接是：https : //www.khanacademy.org/cs/-/6289631977619456

Answer 1

您应该始终查看浏览器的 JavaScript 控制台（按 F12）或从菜单中选择它。我应该为你的代码显示一个错误

var capturedImageData = new Float32Array(screenWidth * screenHeight * 4);
gl.readPixels(0, 0, screenWidth, screenHeight, gl.RGBA, gl.FLOAT, capturedImageData);

var capturedImageData = new Float32Array(screenWidth * screenHeight * 4);
gl.readPixels(0, 0, screenWidth, screenHeight, gl.RGBA, gl.FLOAT, capturedImageData);

当我运行你的代码时，我收到此错误

js:16 WebGL: INVALID_ENUM: readPixels: invalid type

你不能用 来阅读FLOAT。看这个答案

但是，您想要执行的操作（渲染到一个纹理并将其用作另一个着色器的输入）不应使用 readPixels 来完成。它应该使用帧缓冲区来完成，允许您直接渲染到纹理。

请参阅此或其中之一