Opengl es 将WebGL 2中的像素读取为浮点值

我需要读取帧缓冲区中的像素作为浮点值。 我的目标是在CPU和GPU之间快速传输大量粒子，并实时处理它们。为此，我将粒子属性存储在浮点纹理中

每当添加新粒子时，我都希望从纹理中获取当前粒子阵列，添加新粒子属性，然后将其重新拟合到纹理中（这是我唯一能想到的动态添加粒子并以GPU方式处理它们的方法）

我之所以使用WebGL 2，是因为它支持将像素读回

PIXEL\u PACK\u BUFFER

目标。我每晚都在Firefox中测试我的代码。所讨论的代码如下所示：

// Initialize the WebGLBuffer
this.m_particlePosBuffer = gl.createBuffer();
gl.bindBuffer(gl.PIXEL_PACK_BUFFER, this.m_particlePosBuffer);
gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null);
...
// In the renderloop, bind the buffer and read back the pixels
gl.bindBuffer(gl.PIXEL_PACK_BUFFER, this.m_particlePosBuffer);
gl.readBuffer(gl.COLOR_ATTACHMENT0); // Framebuffer texture is bound to this attachment
gl.readPixels(0, 0, _texSize, _texSize, gl.RGBA, gl.FLOAT, 0);

我在控制台中遇到此错误：

TypeError: Argument 7 of WebGLRenderingContext.readPixels could not be converted to any of: ArrayBufferView, SharedArrayBufferView.

但是看看当前的WebGL 2规范，这个函数调用应该是可能的。使用类型

gl.UNSIGNED_BYTE

也会返回此错误。 当我尝试读取ArrayBufferView中的像素时（我想避免，因为它看起来慢多了），它与

gl.RGBA

和

gl.UNSIGNED_BYTE

的格式/类型组合一起工作，对于

Uint8Array（）

而不是

gl.RGBA

和

gl.FLOAT

对于

Float32Array（）

-这是意料之中的事，因为WebGL规范中有相关说明

---

对于如何从帧缓冲区获取浮点像素值，或者如何以其他方式使此粒子管道运行，我非常感谢您的建议。

您是否尝试使用此扩展

var ext = gl.getExtension('EXT_color_buffer_float');

---

在WebGL2中，glReadPixel的语法为

void gl.readPixels(x, y, width, height, format, type, ArrayBufferView pixels, GLuint dstOffset);

所以

let data = new Uint8Array(gl.drawingBufferWidth * gl.drawingBufferHeight * 4);
gl.readPixels(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight, gl.RGBA, gl.UNSIGNED_BYTE, pixels, 0);