OpenGL3.2 GLSL块状插值

Question

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

对于两个三角形,数据被浮动为浮点数[xy] [RGB],我不认为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);   
}

结果

观察单个三角形显示了块状

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

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

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

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