你如何在WebGL中使用Index Buffers？

Question

  

可能重复：
  Rendering meshes with multiple indices

这是关于使用索引缓冲区来渲染自定义几何体，例如从OBJ文件中。我对3d图形约定有点了解，但我对WebGL没有做太多的事情。 我的问题的简写形式是“你如何在WebGL中使用索引缓冲区？”

我想要做的是，对于一个自定义几何体，构建一个正在播放的位置矢量列表，以及一个正在播放的UV矢量列表（让我们跳过法线）。然后，当我去绘制三角形时，我只想用指向三个现有位置矢量的指针定义每个三角形，并指向三个现有UV矢量的指针。 （仅仅因为这就是OBJ的设置方式）

从我读过的内容（我发誓我用Google搜索了一百种不同的方法并且无法得到确定的答案），你必须将UV和位置一起作为顶点，然后将三角形定义为指向其中三个顶点的指针。但是当UV列表的长度与位置列表的长度不同时会发生什么？

让我们说我有一个立方体。这是八个位置向量。但鉴于每张脸都有相同的方形UV布局（渲染时每一面看起来都一样）。那是四个（独特的）紫外线。现在怎么样？

就像我必须放弃这种方法，咬掉子弹，并且对于所有12个三角形，定义每个位置和UV--沿着立方体边缘重复位置矢量并沿着面部对角线重复uvs的“成本”。如果这是公认的做法，那很好，我只是想确保我以正确的方式解决这个问题。

Answer 1

包含顶点位置，纹理坐标，法线等的数组必须具有相同的长度。这意味着在许多情况下冗余数据。多维数据集是冗余特别糟糕的一个示例。你实际上必须传入24个顶点和24个texcoords。

Answer 2

您已经听说过不能重复使用立方体顶点，但对于其他一些上下文，请注意现代3D内容有很多光滑的非平面表面;因此，三角形之间的大多数连接可以共享顶点，因为它们具有相同的法线和其他属性。属性不连续的尖锐边缘是不太常见的情况，因此不应对其进行优化。