javascript - WebGL 中的索引缓冲区？

Question

我正在尝试学习一些 WebGL(来自本教程 http://learningwebgl.com/blog/?page_id=1217)。我遵循了指南，现在我正在尝试实现自己的演示。我想创建一个图形对象，其中包含要出现在场景中的每个单独对象的缓冲区和数据。目前，我有一个位置顶点缓冲区、一个纹理坐标缓冲区和一个法线缓冲区。在教程中，他使用了另一个缓冲区，一个索引缓冲区，但仅用于多维数据集。索引缓冲区实际上是做什么用的？我应该实现它吗？它对多维数据集以外的任何东西都有用吗？

Answer 1

对象的顶点由 3D 坐标系 (euclidian coordinate system) 中的位置定义。因此，在通过 rasterization process 将 3D 坐标系投影到 2D 光栅(屏幕或某些目标图像)之后，您可以获取每两个后续顶点并将它们与线连接起来.你会得到所谓的wireframe .

线框的问题在于它不明确。如果您以特定 Angular 观察线框立方体，您无法确定立方体是如何精确旋转的。那是因为你需要使用 visibility algorithms以确定立方体的哪一部分更接近观察者的位置(相机的位置)。

但是线本身不能定义表面，这是确定立方体的哪一侧比其他侧更接近观察者所必需的。如何在计算机图形中定义表面的最佳方式是多边形，确切地说是三 Angular 形(它对计算机图形有很多缺点)。

现在你有了由三 Angular 形定义的立方体(所谓的三 Angular 形网格)。

但是如何定义哪些顶点构成三 Angular 形呢？通过索引缓冲区。它包含顶点缓冲区的索引(列出您的顶点)并告诉光栅化算法三个顶点形成三 Angular 形。有很多方法，如何解释索引缓冲区中的索引以减少相同顶点的重复(一个顶点可能是很多三 Angular 形的一部分)，您可以在 article about graphics primitives 找到一些方法。 .