WebGL2：最大元素索引/顶点是怎么回事？

Question

我正在使用 WebGL2（和 Three.js）开发一个 Web 组件 OES_element_index_uint 已启用。我正在使用索引绘制几何图形 顶点，我看到以下异常 - 寻找线条 穿过图的中间：

如果我重新绘制图形，即使我不改变，我也会得到稍微不同的东西 输入（我认为）。

我已经编写了调试代码来仔细检查我传递给几何图形的缓冲区 我没有发现任何问题。我也没有注意到使用类似的东西 具有较小数据集的相同实现（尚未）。

我查看了这个 webgl2 报告网站 https://alteredqualia.com/tools/webgl-features/ 我注意到这些线条：

                 Max elements vertices: 1048575
                  Max elements indices: 150000

这可能是异常的原因吗，因为我的缓冲区比这个大？ 这些数字在哪里解释？

我正在使用 GPU 报告为的 Mac 笔记本电脑

                     Unmasked renderer: AMD Radeon Pro 560X OpenGL Engine
                       Unmasked vendor: ATI Technologies Inc.

任何有关正在发生的事情的线索或有关最大元素索引/顶点的解释将不胜感激。预先感谢。

Answer 1

我正在 WebGL1.0 中进行渲染，我发现 64k 顶点限制是“一个问题”。当我击中这个“东西”时，我会得到类似那些长三角形的特征，就像那些不知从何而来的特征。

解决这个问题的方法是将你的模型分成几个模型，这样子模型的顶点数就不会超过 64k。

我自己还没有测试过边界，但根据一些报告，您可能应该考虑 65000 作为每个模型最大顶点的边界，因为如果您使用 65535，您可能会遇到一些问题。

Answer 2

要使用drawElements绘制对象，WebGL2允许您定义数据类型gl.UNSIGNED_INT的索引，最大可达4294967296。您必须将Uint32Array数组“new Uint32Array(indices)”传递到您创建和绑定的索引缓冲区

const indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(
    gl.ELEMENT_ARRAY_BUFFER,
    new Uint32Array(indices),
    gl.STATIC_DRAW
);

在drawElements中传递gl.UNSIGNED_UINT作为索引类型：

gl.drawElements(primitive, count, gl.UNSIGNED_UINT, offset);

在 setIndex 中使用 THREE.js 来设置缓冲区几何图形：

  bg = new THREE.BufferGeometry();    
  bg.setIndex( new THREE.BufferAttribute( new Uint32Array( indices ), 1 ) );