將WebGL 2中的像素讀爲浮點值

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格式/類型組合適用於爲Float32Array()一個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