立方体中的 WebGL 三角形答案

【问题标题】：WebGL triangles in a cube立方体中的 WebGL 三角形
【发布时间】：2011-09-18 18:45:25
【问题描述】：

在this tutorial 中，作者通过定义它的 6 个面（6*4 个顶点）来显示一个立方体，然后告诉 webgl 每个面上的三角形。

这不是浪费吗？只定义 8 个顶点并告诉 webgl 如何连接它们以获得三角形不是更好吗？多个顶点共享颜色是否存在问题？

为了说明我的担忧：如果作者用索引数组定义三角形，为什么他需要这么多顶点？他可以指定顶点数组中只有 8 个顶点的所有三角形。

【问题讨论】：

【解决方案1】：

此处示例的作者。正如您所怀疑的，问题与立方体的着色有关。

最容易理解这类代码的方法是将 WebGL 的“顶点”不仅仅是空间中的简单点，而是属性包。一个特定的顶点可能是束。就 WebGL 而言，位于空间同一点但颜色不同（例如）的不同顶点将是完全不同的顶点。

因此，虽然立方体在空间中点的数学意义上只有 8 个顶点，但如果您希望每个面具有不同的颜色，则这些点中的每一个必须由三个不同的顶点占据，每种颜色一个 - 这使得WebGL 意义上的 8x3=24 个顶点。

就内存而言，它的效率不是很高，但与 CPU 能力相比，内存的成本很低，更规范化的表示需要高效处理。

希望能澄清一些事情。

【讨论】：

内存很便宜，没错，但是增加顶点数会增加线性处理它们所需的时间（或者不是，我不知道 GPU 是如何做到的）。如果我使用像素着色器进行着色，那么最好只指定 8 个顶点，对吧？
GPU 通过它的内存逐个顶点地读取数据——也就是说，顶点着色器为每个属性包一个接一个地运行。要对其进行非规范化，您需要一个位置表，然后每个顶点（在 WebGL 意义上）必须说“我是位置 #1，颜色为红色”（例如）。这将需要非线性内存读取（首先读取其他属性，包括位置索引，然后读取位置），这在我们正在讨论的低级图形硬件中更难有效实现。

【解决方案2】：

您可以使用顶点缓冲区对象 (VBO)。请参阅this 示例。他们创建一个顶点列表和一个“指向”顶点的索引列表（不重复顶点）。

【讨论】：

“到腰部”？这意味着什么？（不会说英语）
这如何回答这个问题？ vbo 只是一个包含顶点的缓冲区 - 当三角形共享共同点和边时，它不会以某种方式减少所需的顶点数量。
@andrew_cooke 在 oOo 给出的链接（教程）中，每个顶点被复制了 3 次。我给出的示例仅使用顶点索引来定义面，这些顶点（顶点）仅定义一次，从而节省空间。使用 VBO 是一种实用的方法，网上有很多例子。
好的，谢谢，我想我在读了一轮之后现在明白了。我不明白你可以对 vbos 进行索引。万一其他人感到困惑-您首先构造一个“正常” vbo，然后您可以使用索引缓冲区引用其中的顶点。底层 vbo 似乎是由顶点着色器处理的，因此重复索引或多或少是“免费的”。