为什么在将一些数据放入此缓冲区之前应该调用webgl.bindBuffer？

如何解决为什么在将一些数据放入此缓冲区之前应该调用webgl.bindBuffer？

我试图弄清楚缓冲区在WebGL中是如何工作的，这里有些卡住了。以下是我的猜测-请确认或否认。

catch

我们通过JS在RAM上创建了一个浮点数组。
WebGL直接在GPU上创建一个空缓冲区，并将对该缓冲区的引用返回给JS。现在变量const positions = new Float32Array([ -1,1,-0.5,-0.25,0.25,]); let buffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER,buffer); gl.bufferData(gl.ARRAY_BUFFER,positions,gl.STATIC_DRAW); gl.bindBuffer(gl.ARRAY_BUFFER,null);是一个指针。
将缓冲区上的指针设置为buffer。
现在，我们将数据从RAM复制到GPU缓冲区。
从gl.ARRAY_BUFFER取消绑定缓冲区（但是该缓冲区在GPU上仍然可用，我们可以将其重新绑定多次）。

那么为什么我们不能只用gl.ARRAY_BUFFER来调用createBuffer()而不是使用positions作为JS和GPU之间的桥梁？这些是OpenGL API的唯一限制，还是我们有充分的理由不这样做？如果我错了，请纠正我，但是在调用ARRAY_BUFFER之后，以已知大小分配内存比以positions大小分配一些内存和重新分配要快。

解决方法

因为这是唯一的答案。

许多人都同意您的观点，那就是使用不同的API会更好。这是为什么会有新的API（DirectX11 / 12，Vulkan，Metal，WebGPU）的原因之一

但是问题中的描述在技术上不正确

我们通过JS在RAM上创建了一个浮点数组。
WebGL创建一个对象，该对象表示GPU缓冲区（GPU上未分配任何内容）
将缓冲区上的指针设置为gl.ARRAY_BUFFER。
现在，我们分配一个缓冲区并将数据从RAM复制到GPU缓冲区。
从gl.ARRAY_BUFFER取消绑定缓冲区（但是该缓冲区在GPU上仍然可用，我们可以将其重新绑定多次）。

不需要步骤5。没有理由解除缓冲区的绑定。

您可以这样想。假设您有一个javascript函数将图像绘制到画布上，但是该图像的传递方式与示例中的缓冲区相同。这是代码

class Context {
  constructor(canvas) {
    this.ctx = canvas.getContext('2d');
  }
  bindImage(img) {
    this.img = img;
  }
  drawImage(x,y) {
    this.ctx.drawImage(this.img,x,y);
  }
}

假设您要绘制3张图像

const ctx = new Context(someCanvas);
ctx.bindImage(image1);
ctx.drawImage(0,0);
ctx.bindImage(image2);
ctx.drawImage(10,10);
ctx.bindImage(image3);
ctx.drawImage(20,20);

就可以了。没有理由

const ctx = new Context(someCanvas);
ctx.bindImage(image1);
ctx.drawImage(0,0);
ctx.bindImage(null);    // not needed
ctx.bindImage(image2);
ctx.drawImage(10,10);
ctx.bindImage(null);    // not needed
ctx.bindImage(image3);
ctx.drawImage(20,20);
ctx.bindImage(null);    // not needed

在WebGL中是相同的。有时会将null绑定到某些东西，例如

gl.bindFramebuffer(gl.FRAMEBUFFER,null);  // start drawing to the canvas

但是在大多数情况下，解除绑定只是程序员的个人喜好，而不是API本身需要的

参考：

请注意，即使我上面的描述在技术上也不正确。尚未确定step4是否将数据复制到GPU。如果使用了缓冲区，它只能将数据复制到RAM中，并且只能在绘制时将其复制到GPU中，然后再复制。很多驾驶员都这样做。有关驱动程序在看起来像this answer和this one

时不将数据复制到GPU的更具体示例

为什么在将一些数据放入此缓冲区之前应该调用webgl.bindBuffer？

如何解决为什么在将一些数据放入此缓冲区之前应该调用webgl.bindBuffer？

解决方法

相关推荐