线框着色器-使用共享顶点时重心坐标存在问题

Question

我正在用WebGL绘制地形。问题是我只使用4个顶点通过使用索引共享顶点来绘制单个四边形。因此，我无法为每个顶点上传唯一的重心坐标，因为它是共享的。

这是一张更清晰地显示问题的图片。

我没有可用于问号的重心坐标。（0,1,0）用于左上方，（0,0,1）用于上方，（1,0,0）用于左侧。因此，当我使用索引来保存顶点数时，绝对没有办法做到这一点。

我是否真的使用4个顶点（而不是6个顶点）来绘制四边形，从而节省了这么多的性能？如果不是这样，那是解决我的问题的最简单方法。但是我仍然很好奇是否有一种方法可以使用共享顶点。

我知道可以使用GL_LINES在线框中绘制地形，但我不喜欢这种方法，我想对线框有更多控制（例如，使其不透明）。

有人可能会问为什么我使用重心坐标在线框模式下绘制地形，这是因为在此演示中效果很好：

http://codeflow.org/entries/2012/aug/02/easy-wireframe-display-with-barycentric-coordinates/

因此，基本上我要寻找两件事：

• 在绘制每个四边形使用6个顶点而不是4个顶点的地形时，我会失去很多性能吗？因为如果没有，那可以通过不共享顶点来解决我的问题。
• 是否可以为四个顶点共享唯一的重心坐标以绘制单个四边形？

谢谢！

Answer 1

如果您不需要在线框中绘制每个四边形的对角线，并且只绘制每个四边形的边缘就可以了，这将变得更加简单。如果您对四边形而不是三角形进行操作，则无需担心重心坐标。代替3个重心坐标，对网格内的相对位置使用2个坐标：

0,2----1,2----2,2----3,2----4,2
 |      |      |      |      |
 |      |      |      |      |
 |      |      |      |      |
0,1----1,1----2,1----3,1----4,1
 |      |      |      |      |
 |      |      |      |      |
 |      |      |      |      |
0,0----1,0----2,0----3,0----4,0

这也使您可以共享四边形上的顶点，从而将模型中的顶点总数减少了大约4倍。

然后，将这些坐标对从顶点着色器馈送到片段着色器，就像在链接的文章中针对重心坐标所描述的那样。

在片段着色器中，代码变得稍微复杂一点，因为在取小数部分后，它需要测试接近0或接近1的值。我还没有测试过，但是可能看起来像这样，与本文vQC中的等效vBC：

varying vec2 vQC;
...
void main() {
    vec2 vRel = fract(vQC);
    if (any(lessThan(vec4(vRel, 1.0 - vRel), vec4(0.02)))) {
        gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
    } else {
        gl_FragColor = vec4(0.5, 0.5, 0.5, 1.0);
    }
}