javascript - 如何在 javascript 中读取 webgl GL.bufferData

Question

我想在 javascript 中读回存储在 GL.bufferData 数组中的数据。

这是我的代码

var TRIANGLE_VERTEX = geometryNode["triangle_buffer"];
GL.bindBuffer(GL.ARRAY_BUFFER, TRIANGLE_VERTEX);
GL.bufferData(GL.ARRAY_BUFFER,new Float32Array(vertices),GL.STATIC_DRAW);

在 webgl 中是否可以读回 GPU 中的缓冲区数据？如果可能，请用示例代码向我解释。

如何在运行时知道 webgl 中 Gpu 的内存大小(已满和空闲)以及如何在 webgl 中调试 GPU 中的着色器代码和数据。

Answer 1

在 WebGL1 中无法直接读回数据。 (请参阅下面的 WebGL2)。这是基于 WebGL 的 OpenGL ES 2.0 的限制。

有一些解决方法:

1. 您可以尝试将该数据渲染到纹理，然后使用 readPixels 读取数据。

   您必须在着色器中将数据编码为字节，因为 WebGL 中的 readPixels 只能读取字节

2. 您可以包装 WebGL 来自己存储数据，例如

   var buffers = {};
   var nextId = 1;
   var targets = {};
   
   function copyBuffer(buffer) {
      // make a Uint8 view of buffer in case it's not already
      var view = new Uint8Buffer(buffer.buffer); 
      // now copy it
      return new UintBuffer(view);
   }
   
   gl.bindBuffer = function(oldBindBufferFn) {
     return function(target, buffer) {
       targets[target] = new Uint8Buffer(buffer.buffer);
       oldBindBufferFn(target, buffer);
     };
   }(gl.bindBuffer.bind(gl));
   
   gl.bufferData = function(oldBufferDataFn) {
      return function(target, data, hint) {
        var buffer = targets[target];
        if (!buffer.id) {
          buffer.id = nextId++;
        }
        buffers[buffer.id] = copyBuffer(data);
        oldBufferDataFn(target, data, hint);
      };
   }(gl.bufferData.bind(gl)));
   

   现在你可以获取数据了

   data = buffers[someBuffer.id];
   

   这可能就是 the WebGL Inspector 所做的

   请注意，上面的代码存在一些问题。一种是它不检查错误。检查错误会使速度变慢，但如果您的代码产生错误，则不检查错误会给您不正确的结果。一个简单的例子

   gl.bufferData(someBuffer, someData, 123456);
   

   这会产生一个 INVALID_ENUM 错误并且不会更新 someBuffer 中的数据，但是我们的代码没有检查错误所以它会把 someData 到 buffers 中，如果您读取该数据，它将与 WebGL 中的内容不匹配。

   注意上面的代码是伪代码。例如，我没有为 gl.bufferSubData 提供包装器。

WebGL2

在 WebGL2 中有一个函数 gl.getBufferSubData 可以让您读取缓冲区的内容。请注意，WebGL2，即使它基于 OpenGL ES 3.0 也不支持 gl.mapBuffer，因为没有高性能和安全的方法来公开该功能。