WebGL中的三角形立方体

Question

在这篇教程中，作者通过定义一个由6个面（6*4个顶点）组成的立方体，并告诉WebGL每个面的三角形来展示它。

这样做是否浪费？仅定义8个顶点并告诉WebGL如何连接它们以获得三角形不是更好吗？多个顶点共享颜色是否会造成问题？

为了让我的担忧更加明显：如果作者使用索引数组定义三角形，为什么他需要那么多顶点呢？他可以在顶点数组中仅指定8个顶点来指定所有三角形。

- oOo

Answer 1

这里是示例的作者。正如您所猜测的那样，问题与立方体的着色有关。

最简单理解这种代码的方式是将WebGL的“顶点”视为不仅仅是空间中的简单点，而是属性的捆绑包。一个特定的顶点可能是绑定在一起的 <(1，-1，1)，红色>。如果另一个顶点在相同的空间点上但具有不同的颜色（例如<(1，-1，1)，绿色>），则就从WebGL的角度而言是完全不同的顶点。

因此，虽然在数学意义上，一个立方体只有8个顶点（即空间点），但如果您想每个面都有不同的颜色，则每个点必须被三个不同的顶点占据，每个顶点代表一种颜色，这使得WebGL中有8x3=24个顶点。

尽管从内存方面来看不是非常高效，但与更规范化的表示形式相比，内存便宜了很多，后者需要更有效地处理。

希望这可以澄清问题。

- Giles Thomas

---

内存便宜，这是真的，但顶点数量的增加会线性地增加处理时间（或者不是，我不知道GPU如何处理）。如果我使用像素着色器进行着色，那么只指定8个顶点会更好，对吗？ - oOo

GPU通过其内存逐个读取数据顶点 --也就是说，对于每一组属性，顶点着色器会依次运行。如果要使其非正常化，则需要一个位置表，然后每个顶点（在WebGL意义上）都必须说明“我是位置#1，颜色为红色”（例如）。这将需要非线性内存读取（首先读取其他属性，包括位置索引，然后读取位置），这在我们谈论的低级图形硬件中实现起来更加困难。 - Giles Thomas

Answer 2

您可以使用顶点缓冲对象（VBO）。请参考此示例。它们创建了一个顶点列表和一个索引列表，指向顶点（无顶点重复）。

- pcantin

---

“to the waist”是什么意思？（非英语使用者） - oOo

这个回答如何解决问题？VBO 只是一个包含顶点的缓冲区 - 当三角形共享公共点和边时，它并不会以某种方式减少所需的顶点数量。 - andrew cooke

@andrew_cooke 在oOo提供的链接（教程）中，每个顶点都被复制了三次。我给出的例子只使用顶点的索引来定义面，这些顶点仅被定义一次，从而节省空间。使用VBO是实现这一目的的一种实用方式，在网络上有很多示例。 - pcantin

好的，谢谢。我读了一些相关资料后现在明白了。我之前没有理解到你可以在VBO中使用索引。如果有其他人也感到困惑 - 你首先构建一个“普通”的VBO，然后可以使用索引缓冲区引用其中的顶点。底层的VBO似乎是由顶点着色器处理的，因此重复的索引基本上是“免费”的。 - andrew cooke