javascript - Webgl 使用两个不同的 vbo 绘制两个不同的几何图形

Question

假设你有一个 vbo 数组。您创建、绑定(bind)并填充第一个，然后继续其他。

在绘制时，您重新绑定(bind)它们并定义 gl 如何使用 attribpointer 提取数据。

如果我用所有几何图形填充一个缓冲区，我的代码可以正常工作，但现在我想尝试为每个几何图形使用单独的缓冲区。

根据我读到的内容，最后，当所有状态机都设置完毕后，您只需调用一次drawArrays(例如在绘制循环中)。

问题是每个 vbo 都有不同数量的顶点，所以我对什么参数感到困惑在drawarrays处传递:

gl.drawArrays(gl.TRIANGLES, 0, THIS PARAMETER SHOULD TAKE CARE OF THE NUMBER OF VERTICES);

我尝试将每个缓冲区的顶点计数相加，但这给了我一个索引超出范围的错误。但是，我该如何处理每个 vbo 具有不同数量的顶点这一事实，而我们必须在绘图循环中使用(或者至少我认为如此)仅一个绘图调用？

编辑:我已经成功地为每个vbo调用drawarrays使其工作。我仍然不确定这是否是最佳解决方案。

Answer 1

您应该为您执行的每组绑定(bind)调用drawArrays(每个几何图形一次)。

更优化的解决方案是使用 VertexArrayObject然后收集其中的绑定(bind):

对于每个网格，您可以像这样绑定(bind):

vao = gl.createVertexArray();

gl.bindVertexArray(vao);
//gl.bindAttribute calls 
gl.bindVertexArray(null);

然后在绘制每个网格时，您可以执行以下操作:

gl.bindVertexArray(mesh.vao);
gl.drawArrays(gl.TRIANGLES, 0, mesh.pointCount);
gl.bindVertexArray(null);