使用8个索引顶点时,面部颜色不是唯一的

时间:2012-03-17 08:04:10

标签: webgl

首先没有任何代码让我描述一下这个问题。

我重新创建了旋转立方体的基本课程。第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,但我想我先得到一些意见?

...谢谢

2 个答案:

答案 0 :(得分:2)

简短的回答是否定的。

基本上你有树选项来为顶点赋值:

  1. 为每个顶点指定唯一值。请注意,如果要使用具有不同值的顶点(例如每个面的颜色不同),则每个配置必须存在唯一的顶点'
  2. 有时可以计算顶点或片段着色器中的值(这实际上适用于您的情况)。
  3. 使用统一的着色器值 - 这将为所有顶点指定相同的值(在这种情况下显然不是您想要的)。
  4. 有关更多信息,我建议您阅读我关于Unity中程序网格生成的博客文章,因为它解释了基本概念:

答案 1 :(得分:1)

没有简单的方法可以将每个面数据传递给WebGL。

在WebGL(和OpenGL ES 2)中有两种可以传递给着色器的数据:顶点属性和制服。顶点属性对于每个顶点可以具有不同的值,并且统一数据具有仅通过统一的*()调用之一显式更改的单个值。

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

如果你要使用制服,则必须在绘制每张脸时更换制服。这意味着您必须将多维数据集分成6个部分,并进行6次单独的绘图调用。这效率低得多。众所周知,“较少邪恶”的解决方案是如上所述拥有多个顶点条目,并消耗一些额外的GPU内存以使绘图更快。

在OpenGL的其他版本中,有一个函数glVertexAttribDivisor(),它允许您设置仅每n个顶点更改一次的顶点属性。这可以用来实现你想要做的事情。但遗憾的是,它不适用于WebGL。