OpenGL3.2 GLSL块状插值

Question

我想要一个很好的渐变效果。但是在它真的很零碎的那一刻，你可以看到两个三角形之间的似乎。我有以下着色器vert和frag。我唯一能想到的就是换成预先生成的纹理。

对于两个三角形，数据被浮动为浮点数[x y] [R G B]，我不认为C ++源是值得展示的。

VERT     #version 330

layout(location = 0) in vec2 position;    
layout(location = 1) in vec3 incolor;

smooth out vec3 color;

void main()
{
    color = incolor;
    gl_Position = vec4(position.x,position.y,0.0,1.0);  
}

FRAG     #version 330

smooth out vec4 outputColor;
smooth in vec3 color;

void main()
{
    outputColor  = vec4(vec3(color),1.0);   
}

RESULT

查看单个三角形显示了块状

Answer 1

这是 quad 属性的线性插值的正确行为。请记住，四边形总是呈现为两个三角形。有两种可能性：以\对角线或/对角线作为共同边缘。现在如何插入属性变得模棱两可（在两种情况下都不同）。

我将向您展示一个类似于您的示例。

三角形由\对角线分隔。

三角形由/对角线分隔。

在这两种情况下，顶点的颜色都是：

000000  top left
3B3B3B  top right + bottom left
FFFFFF  bottom right

解决方案是仅提供导致明确插值颜色的属性值（颜色）。以下情况属于这种情况。

考虑从左上角到右下角的一条线（让我们将它们称为具有指定基色的基本顶点）。左上角的值为0，右下角为1。每个其他顶点（在这种情况下，左下角，右上角）必须与该虚线正交投影，并将相应的值分配给该顶点。在这种情况下（正方形），另外两个角的值分别为.5。这些角的颜色必须是两种基色的混合值，其alpha值对应于刚刚计算的值。

在上面的示例中，其他两个角的颜色必须是808080而不是3B3B3B才能使两个图像看起来相同：

在您的情况下，您使用以下颜色作为顶点（至少，它们在屏幕截图中显示）：

000000  top left
3A3A3A  top right + bottom left
595959  bottom right

所以他们不符合上述要求，因为3A3A3A不是其他两个人之间的平均值。

---

稍微不同的示例说明了为什么您可能不仅仅想要将.5用于混合alpha值（这会导致其他两个顶点的平均值）。考虑一个非方形四边形，就像这个矩形一样，它对另外两个角使用值.5，对应于808080灰色：

正如您所看到的，渐变的方向与两个“基角”之间的连接线不正交，正如我所说的那样（左上角 - 右下角）。现在让我们看看我的方法产生了什么：

这看起来更像是两个角之间的线性渐变，但在“世界空间”中，而不是在“纹理空间”中。您可能更喜欢两个输出中的一个而不是另一个;我想告诉你不同之处。连接线（正交投影）上的值如下所示（它们只是近似值！）

_{对不起我的坏图片......;）}