opengl-es - 将 WebGL 2 中的像素读取为 Float 值

Question

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

每当添加新粒子时，我想从纹理中取回当前粒子数组，添加新的粒子属性，然后将其重新放入纹理中(这是我能想到的动态添加粒子的唯一方法并以 GPU 方式处理它们)。

我正在使用 WebGL 2，因为它支持将像素读回到 PIXEL_PACK_BUFFER 目标。我在 Firefox Nightly 中测试我的代码。有问题的代码如下所示:

// 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 Specification 来看，这个函数调用应该是可以的。使用 gl.UNSIGNED_BYTE 类型也会返回此错误。当我尝试读取 ArrayBufferView 中的像素时(我想避免这样做，因为它似乎速度较慢)它使用 gl.RGBA 和 gl.UNSIGNED_BYTE 的格式/类型组合 用于 Uint8Array() 但不是 gl.RGBA 和 gl.FLOAT 用于 Float32Array() - 这是预期的，因为它记录在 WebGL 规范中。

对于如何从我的帧缓冲区获取浮点像素值或如何让这个粒子管道继续运行的任何建议，我非常感谢。

Answer 1

你试过使用这个扩展吗？

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