线框着色器 - 使用共享顶点时出现重心坐标 [英] Wireframe shader - Issue with Barycentric coordinates when using shared vertices

问题描述

我正在努力在WebGL中绘制地形。问题是我只使用4个顶点来绘制单个四边形，方法是使用索引来共享顶点。所以我不能为每个顶点上传唯一的中心坐标，因为它是共享的。

I'm working on drawing a terrain in WebGL. The problem is that I'm only using 4 vertices to draw a single quad by using indices to share vertices. So I can't upload unique baricentric coordinates for each vertex, because it's shared.

这是一张能够更清楚地显示问题的图片。

Here's a picture that shows the problem more clearly.

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

There's no barycentric coordinate that I can use for the question mark. (0,1,0) is used top left, (0,0,1) is used above and (1,0,0) is used to the left. So there's absolutely no way I can do this when I'm using indices to save vertex count.

我是否真的保存了使用4个顶点绘制四边形而不是6？如果没有，那么这是解决问题的最简单方法。但是我仍然很好奇我是否可以使用共享顶点来实现它。

Do I really save that much performance drawing a quad using 4 vertices instead of 6? If not then that's the easiest way to fix my problem. But I'm still curious if there's a way I can do it with shared vertices.

我知道我可以使用GL_LINES在线框中绘制我的地形，但我不知道不喜欢那种方法，我希望能更好地控制我的线框（例如，不要让它透明）。

I'm aware that I can draw my terrain in wireframe using GL_LINES but I don't like that method, I want to have more control over my wireframe (e.g. not make it transparent).

有些人可能会问为什么我使用重心坐标来这是在线框模式中绘制我的地形，因为它在这个演示中很好用：

Some people might ask why I'm using barycentric coordinates to draw my terrain in wireframe mode, it's because it works nicely in this demo:

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

所以它基本上是我要找的两件事：

So it's basically two things I'm looking for:

• 在绘制我的地形时，我是否会失去很多性能，每个四边形使用6个顶点而不是4个顶点？因为如果没有，那么这将通过不共享顶点来解决我的问题。


• 是否可以为共享的4个顶点设置唯一的重心坐标以绘制单个四边形？

谢谢！

推荐答案

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

If you don't require to draw the diagonal of each quad in your wireframe, and are fine with only drawing the edges of each quad, this gets much simpler. There's no need to worry about barycentric coordinates if you operate on quads instead of triangles. Instead of the 3 barycentric coordinates, use 2 coordinates for the relative position within the mesh:

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倍。

This also allows you to share vertices across quads, cutting the total number of vertices in your model by approximately a factor of 4.

然后将这些坐标对从顶点着色器提供到片段着色器，就像你在链接的文章中描述的重心坐标一样。

You then feed these coordinate pairs from the vertex shader through to the fragment shader just like it's described for the barycentric coordinates in the article you linked.

In片段着色器，代码稍微复杂一点，因为在获取小数部分之后需要测试接近0或接近1的值。我没有测试过这个，但它可能看起来像这样， vQC 相当于 vBC 文章：

In the fragment shader, the code gets just slightly more complicated, since it needs to test for values being either close to 0 or close to 1, after taking the fractional part. I haven't tested this, but it could look something like this, with vQC being the equivalent of vBC in the article:

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);
    }
}

这篇关于线框着色器 - 使用共享顶点时出现重心坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！