Interpolating between triangle vertices in a grid

Question

I have a hexagonal map and try to build a fog of war over it. What I'm doing is building a VBO with vertices being center of hexes. I then assign alpha value to each tile center according to its visibility (0.0f, 0.5f, 1.0f). Here is vertex shader:

#ifdef GL_ES                                        

precision highp float;

#endif

attribute vec4 a_position;
attribute float a_alpha;

uniform  mat4 u_MVPMatrix;

varying float v_alpha;

void main()
{
    gl_Position = u_MVPMatrix * a_position;
    v_alpha = a_alpha;
}

and my fragment shader:

#ifdef GL_ES

precision highp float;

#endif

varying float v_alpha;

void main()
{ 
    gl_FragColor = vec4(v_alpha, v_alpha, v_alpha, 1.0);
}

I tried to carve a hole from the fogmap to try it out and I'm getting this:

What's wrong with the interpolation? Why is there a triangle structure so visible?

It's an artefact of linear interpolation. Perhaps you can see if you can change the interpolation method of your attribute of the fragment shader. There's some information on them here: khronos.org/opengl/wiki/… — Bartvbl
It's not really an interpolation artefact. It is a perceptual artefact. If you take a close look, you'll see that the color values are continuous. The only thing that changes is the gradient direction (which is discontinuous). And this discontinuity gets amplified by our brain. So, indeed. The only way to solve this is to use a different interpolation method across the triangle. But this depends a lot on what you need and might also be not so easy to achieve. — Nico Schertler
Ok, I understand it. I believe there is no simple way to change the interpolation method of the varying var. Is there any simple way to achieve the smooth transition (besides using texture to hide the gradient)? — Hedin

Nicol Bolas Nicol Bolas · Accepted Answer · 2017-02-14T15:27:43

As Nico pointed out, this is an optical illusion.

Basically, what you have is a discontinuity between the two triangles. The shared edges have the same color values, but because the gradient is different on the two sides, it creates the appearance of a line between them. The change in the gradient across the triangle edges is not smooth.

Mathematically, you have C0 continuity across the line, but not C1 continuity.

And the human eye/perception is very used to smooth things. So when something isn't smooth, we perceive a discontinuity.

There's not much you can do about this. You might be able to play around with interpolation schemes, but the best thing you can do is simply texture the hex. The texture's frequently changing colors will help mask the gradient discontinuity.

Interpolating between triangle vertices in a grid

1 Answers