OpenGL3.2 GLSL block 状插值

Question

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

数据被抛光为两个三角形的浮点数 [x y][R G B]，我认为 C++ 源代码不值得展示。

垂直
#版本 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
#版本 330

smooth out vec4 outputColor;
smooth in vec3 color;

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

结果


查看单个三角形显示块状

Answer 1

这是 属性线性插值的正确行为四核 .请记住，四边形始终呈现为两个三角形。有两种可能:使用 \对角线或 /对角线作为它们的共同边。现在如何插入属性变得不明确(这两种情况都不同)。

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



三角形由 \ 分隔对角线。



三角形由 / 分隔对角线。

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

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灰色的:



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



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



抱歉我的图片不好... ;)