使用8个索引顶点时脸部颜色不唯一

Question

没有任何代码，首先让我描述问题。

我重新创建了旋转立方体的基本教训。第4课学习Webgl http://learningwebgl.com/lessons/lesson04/index.html

该代码有4个顶点，每个面共列出24个顶点。它使用这些24个顶点0-23的索引来执行drawElements（...），并且它使用了24种不同颜色的颜色缓冲区数组。

所以最终结果当然是一个旋转的立方体，每个脸部都分配了不同的颜色。

我所做的事情是，一个立方体实际上只有8个顶点而不是24个。所以我做了一个8个顶点的数组。我重新设置了位置索引数组，以使用0-7的索引而不是0-23的索引。由于我将相同的顺序放置到了原始课程中的脸部创作中，因此我单独离开了颜色缓冲区数组。

当我完成drawElements（...）时，我确实有一个完美的旋转立方体。但立方体着色不正确。每个顶点具有单一颜色，因此只使用前八个颜色数组元素（24个）。基本上，上半部分是一种颜色，下半部分是另一种颜色。立方体的面没有独特的颜色。

问题是：有没有办法给顶点索引分配颜色而不是顶点？ 我怀疑我可以在着色器中使用gl_vertexID，但我想我会首先得到一些意见？

谢谢...

Answer 1

简短的回答是没有。

基本上你有到顶点的分配值树选项：

1. 指定每个顶点的唯一值。请注意，如果要使用具有不同值的顶点（例如每个面的颜色不同），那么每个“配置”必须存在唯一的顶点。有时可以计算顶点或片段中的值着色器（这将实际上在你的情况下）。
2. 使用统一的着色器值 - 这将为所有顶点分配相同的值（在这种情况下显然不是您想要的）。

欲了解更多信息，我建议你阅读程序剖分团结我的博客，帖子，因为它解释了基本概念：

• http://blog.nobel-joergensen.com/2010/12/25/procedural-generated-mesh-in-unity/
• http://blog.nobel-joergensen.com/2011/04/05/procedural-generated-mesh-in-unity-part-2-with-uv-mapping/

Answer 2

有没有简单的方法将每个人脸数据传递给WebGL。

在WebGL（和OpenGL ES 2）中有两种数据可以传递给着色器：顶点属性和制服。顶点属性对于每个顶点可以具有不同的值，并且统一数据具有仅通过统一的*（）调用中的一个明确地改变的单个值。

当一个顶点属性，比如一个颜色，被直接从顶点着色器传递到片段着色器时，它将被硬件自动插值，以便结果是在表面上的值（颜色）的平滑变化由此产生的三角。所以要给三角形一个“平坦”的颜色，三角形的所有顶点都需要赋予相同的颜色。由于顶点也将是可能具有不同颜色的其他三角形的一部分，唯一的选择是为使用相同点的每个面的每种不同颜色创建单独的顶点条目。

如果您要使用制服，则必须在绘制每个脸部时更改制服。这意味着你将不得不将立方体分成6个部分，并进行6个独立的绘图调用。这效率要低得多。人们普遍认为“较少邪恶”的解决方案是具有多个顶点条目并使用一些额外的GPU内存来使绘图更快。

在其他版本的OpenGL中，有一个函数glVertexAttribDivisor()，它允许您设置仅改变每n个顶点的顶点属性。这可以用来实现你正在尝试做的事情。然而，不幸的是它在WebGL中不可用。