OpenGL3.2 GLSL Block Interpolation

Question

I want a nice gradient effect. But for a moment it is really heterogeneous, and you can see how between the two triangles. I have the following vert and frag shaders. The only thing I can do is swap with a pre-generated texture.

The data is buffered as float [xy] [RGB] for two triangles, I don’t think the C ++ source is worth showing.

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

Looking at a single triangle, he shows

Answer 1

This is the correct behavior of linear interpolation of quad attributes. Remember that a quad is always displayed as two triangles. This can be done in two ways: with a diagonal \ or a diagonal / as a common edge. How an attribute is interpolated now becomes ambiguous (in both cases it is different).

I will show you an example similar to yours.

The triangles are separated by a diagonal \ .

The triangles are separated by a diagonal / .

In both cases, the colors of the vertices:

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

The solution is to provide only attribute values ​​(colors) that result in unambiguous interpolated colors. This occurs when the following is performed.

Consider the line in the upper left in the lower right corner (call these base vertices with the assigned base color). The upper left corner is 0 , the lower right is 1 . Each other vertex (in this case, the lower left upper right) must be projected orthogonally to this imaginary line, and the corresponding value is assigned to this vertex. In this case (square), the other two angles have a value of .5 each. The colors of these corners should be the blending value of the two base colors with the alpha value corresponding to the value just calculated.

In the above example, the colors of the other two angles should have been 808080 instead of 3B3B3B so that both images look the same:

In your case, you use the following colors for the vertices (at least they are displayed as such in the screenshot):

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

Thus, they do not fulfill the requirement from above, since 3A3A3A not the average between the other two.

---

A slightly different example shows why you probably just don't want to use .5 for the alpha mix value (which leads to average values ​​for the other two vertices). Consider a non-square square like this rectangle, which uses .5 values ​​for the other two angles, which corresponds to 808080 gray:

As you can see, the direction of the gradient is not orthogonal to the connection line between the two “base angles”, as I called them (upper left - lower right). Now let's see what my method produces from above:

Which is more like a linear gradient between two corners, but in a "world space" rather than a "texture space". You may prefer one of two exits over the other; I wanted to show you the difference. The values ​​on the connection line (orthogonal projection) are as follows (these are only approximations!)

_{Sorry for my bad images ...;)}