如何在 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

   读取数据。

   您必须在着色器中将数据编码为字节，因为

   readPixels

   在 WebGL 中只能读取字节

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];
   

   这可能是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

，因为没有高性能和安全的方法来公开该功能。