javascript - (WebGL) 如何将顶点添加到已初始化的顶点缓冲区？

Question

我正在关注 WebGL 教程。我有一个初始化的顶点缓冲区，缓冲区数据的用途设置为gl.STATIC_DRAW。据我读到 MDN's documentation which describes usage ，如果我的顶点数据使用 gl.STATIC_DRAW 在整个应用程序中没有改变。正如他们所说:

The contents are intended to be specified once by the application, and used many times as the source for WebGL drawing and image specification commands.

我目前有这段代码来初始化我的顶点缓冲区:

const vertices = new Float32Array([
  -1.0, 1.0,   -1.0, -1.0,   1.0, 1.0,   1.0, -1.0
]);
const n = 4;

const vertexBuffer = gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

const aPosition = gl.getAttribLocation(program, 'aPosition');

gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(aPosition);

我想更改此缓冲区的内容，例如添加要绘制的新顶点坐标。我不想重新初始化整个顶点缓冲区，因为我认为这在性能方面不会很好。

我的想法是使用 gl.DYNAMIC_DRAW 的用法，正如 MDN 文档中所述:

The contents are intended to be respecified repeatedly by the application, and used many times as the source for WebGL drawing and image specification commands.

但是如果我使用这个值作为我的用法，我将如何向当前缓冲区提供新顶点并重绘？我找不到任何可以说明这一点的示例。

提前谢谢您。

Answer 1

你有2个选择

1. 调用 gl.bufferData 并将新数据传递给它

   这会重新分配缓冲区并将数据复制到

2. 调用gl.bufferSubData，这可以让您将数据复制到缓冲区的一部分。

   在这种情况下，您将首先调用 gl.bufferData 来分配缓冲区，然后调用 gl.bufferSubData 来更新数据。如果您想使用更多或更少的数据，您可以通过将不同的计数传递给 gl.drawArrays 来处理，使用不同的索引与 gl.drawElements 等...

   示例:

   const maxSizeInBytes = 100;
   const buf = gl.createBuffer();
   gl.bindBuffer(gl.ARRAY_BUFFER, buf);
   // allocate a buffer with 100 bytes
   gl.bufferData(gl.ARRAY_BUFFER, maxSizeInBytes, gl.DYNAMIC_DRAW);
   

   然后稍后

   gl.bindBuffer(gl.ARRAY_BUFFER, buf);
   const data = new Float32Array([123, 456, 789]);
   const offsetInBytes = 20;
   // update bytes 20 to 31 of the buffer
   gl.bufferSubData(gl.ARRAY_BUFFER, offsetInBytes, data);
   

请注意，gl.bufferData 末尾的值是一个提示。驱动程序可能会或可能不会对该提示执行任何有用的操作。

我还要补充一点，最常见的用例是缓冲区数据永远不会更新。相反，您为要绘制的每个对象创建一个或多个不同的缓冲区，“树”，“房子”，“人”，“三 Angular 形”，“正方形”，“圆形”，“星形”，然后切换缓冲区以绘制不同的缓冲区事情。

我并不是说您不应该更改缓冲区的内容。只是你说你是 WebGL 新手，所以我想我会转述大多数应用程序不会对缓冲区的内容进行太大更改，即使是那些这样做的应用程序也通常是它们绘制的大多数内容的异常(exception)。

PS:您可能会发现 these tutorials 有帮助。