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

Question

我试图弄清楚缓冲区在 WebGL 中到底是如何工作的，但我有点卡住了。以下是我的猜测 - 请确认或否认。const positions = new Float32Array([ -1, 1, -0.5, 0, -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);我们通过 JS 在 RAM 上创建一个浮点数组。WebGL 直接在 GPU 上创建一个空缓冲区，并将该缓冲区的引用返回给 JS。现在变量buffer是一个指针。将缓冲区上的指针设置为gl.ARRAY_BUFFER。现在我们将数据从 RAM复制到 GPU 缓冲区。取消绑定缓冲区gl.ARRAY_BUFFER（但缓冲区在 GPU 上仍然可用，我们可以多次重新绑定它）。那么为什么我们不能只调用createBuffer()withpositions而不是 usingARRAY_BUFFER作为 JS 和 GPU 之间的桥梁呢？这些只是 OpenGL API 的限制还是我们有充分的理由不这样做？如果我错了，请纠正我，但是分配已知大小的内存比分配一些内存并positions在调用后重新分配大小要快bufferData。

Answer 1

因为 API 才是唯一真正的答案。

许多人都同意你的观点，认为不同的 API 会更好。这是出现新 api（DirectX11/12、Vulkan、Metal、WebGPU）的原因之一

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

1. 我们通过 JS 在 RAM 上创建一个浮点数组。

2. WebGL 创建一个代表 GPU 缓冲区的对象（GPU 上未分配任何内容）

3. 将缓冲区上的指针设置为 gl.ARRAY_BUFFER。

4. 现在我们分配一个缓冲区并将数据从 RAM 复制到 GPU 缓冲区。

5. 从 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 本身所要求的