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规范，这个函数调用应该是可行的。使用类型gl.UNSIGNED_BYTE也会返回此错误。当我尝试读取ArrayBufferView中的像素时（我想避免它，因为它似乎慢一些），它适用于gl.RGBA和gl.UNSIGNED_BYTE的格式/类型组合{{1} }但Uint8Array()和gl.RGBA不适用于gl.FLOAT - 这是预期的，因为它已在WebGL规范中记录。

我很感谢有关如何从我的帧缓冲区获取浮点像素值或者如何以此方式获取此粒子管道的任何建议。

Answer 1

您是否尝试使用此扩展程序？

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

Answer 2

在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);

https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/readPixels

Answer 3

您拥有的 gl 是 webgl1，而不是 webgl2。试试：

var gl = document.getElementById("canvas").getContext('webgl2');

将WebGL 2中的像素作为浮点值

3 个答案: