WebGL中的索引缓冲？

Question

我正在尝试学习WebGL（来自这个教程：http://learningwebgl.com/blog/?page_id=1217）。我跟随指南，现在正在尝试实现我的演示。我想创建一个图形对象，其中包含每个单独对象出现在场景中所需的缓冲区和数据。目前，我有一个位置顶点缓冲区，一个纹理坐标缓冲区和一个法线缓冲区。在教程中，作者使用另一个缓冲区，即索引缓冲区，但仅用于立方体。索引缓冲区的实际作用是什么？我应该实现它吗？除了立方体之外，它还有其他用途吗？

- Sefu

Answer 1

您的对象的顶点由在三维坐标系（欧几里得坐标系）中的位置定义。因此，您可以使用光栅化过程将您的3D坐标系统投影到2D光栅上（屏幕或某个目标图像），然后连接每两个相邻的顶点，您将获得所谓的线框模型。

问题在于线框图并不明确。如果您从特定的角度观察线框立方体，您不能确定立方体的旋转方式。这是因为您需要使用可见性算法来确定哪个部分的立方体更靠近观察者的位置（相机的位置）。

但是，线本身无法定义表面，这是确定立方体哪一侧比其他侧更靠近观察者所必需的。在计算机图形学中定义表面的最佳方法是多边形，特别是三角形（它对计算机图形学有很多缺点）。

因此，现在您通过三角形（称为三角网格）定义了立方体。

但是如何定义哪些顶点形成三角形呢？通过索引缓冲区。它包含对顶点缓冲区（带有您的顶点列表）的索引，并告诉光栅化算法哪三个顶点形成三角形。有很多方法可以解释索引缓冲区中的索引，从而减少相同顶点的重复使用（一个顶点可能是许多三角形的一部分），您可以在关于图形基元的文章中找到一些。

- Sorceror

---

非常感谢您清晰详细的解释！正是我所需要的。 - Sefu

Answer 2

从技术上讲，您不需要索引缓冲区。有两种渲染几何图形的方式，使用glDrawArrays和glDrawElements。glDrawArrays不使用索引缓冲区。您只需将顶点一个接一个地写入缓冲区，然后告诉GL如何处理元素即可。如果在调用中使用GL_TRIANGLES模式，则必须将数据（顶点、法线等）的三元组放入缓冲区，因此当一个顶点被多次使用时，您必须将其多次添加到缓冲区中。

相反，glDrawElements可以用于仅存储一次顶点，然后多次使用它。但是有一个问题，单个索引的参数集是固定的，因此当您需要两个不同的法线时（或者另一个属性，例如纹理坐标或颜色），您必须为每个属性集存储它。

对于球体，glDrawElements非常有意义，因为参数匹配，但对于立方体而言，法线不同，前面的面需要不同的法线而顶部面则需要另一种法线，但两个顶点的位置相同。您仍然必须将位置放入缓冲区两次。对于这种情况，glDrawArrays可能有意义。

哪个调用需要更少的数据取决于数据，但是glDrawElements更加灵活（因为您始终可以使用包含数字0、1、2、3、4等的索引缓冲区来模拟glDrawArrays）。

- Josef Meixner