Issues making a gradient square in glsl es 2.0, Gamemaker Studio 2.0

I made a triangle list with 4 triangles, having the middle point a different color. And then aim to combine the triangles to get a nice gradient. But the edges of the triangles create unwanted lines, I don't want these lines I want it to be smooth al the way. How can I get the desired result?

Images:

    // Simple passthrough vertex shader
//
attribute vec3 in_Position;                  // (x,y,z)
attribute vec4 in_Colour;                    // (r,g,b,a)
attribute vec2 in_TextureCoord;              // (u,v)

varying vec2 v_texcoord;
varying vec4 v_colour;

void main()
{
vec4 object_space_pos = vec4( in_Position.x, in_Position.y,         in_Position.z, 1.0);
gl_Position = gm_Matrices[MATRIX_WORLD_VIEW_PROJECTION] * object_space_pos;

v_colour = in_Colour;
v_texcoord = in_TextureCoord;
}

//
//
varying vec2 v_texcoord;
varying vec4 v_colour;

void main()
{
gl_FragColor = v_colour;
}


Gamemaker code: Create event:

    //Build vertices list

vertex_format_begin();
v_format = vertex_format_end();
v_buff = vertex_create_buffer();
vertex_begin(v_buff, v_format);

//triangle 0
vertex_position(v_buff, 200, 100);
vertex_colour(v_buff, c_black, 1);
vertex_texcoord(v_buff, 0.0, 0.0);

vertex_position(v_buff, 600, 100);
vertex_colour(v_buff, c_black, 1);
vertex_texcoord(v_buff, 1.0, 0.0);

vertex_position(v_buff,  400, 300);
vertex_colour(v_buff, c_red, 1);
vertex_texcoord(v_buff, 0.5, 0.5);

//triangle 1
vertex_position(v_buff, 200, 100);
vertex_colour(v_buff, c_black, 1);
vertex_texcoord(v_buff, 0.0, 0.0);

vertex_position(v_buff, 200, 500);
vertex_colour(v_buff, c_black, 1);
vertex_texcoord(v_buff, 0.0, 1.0);

vertex_position(v_buff,  400, 300);
vertex_colour(v_buff, c_red, 1);
vertex_texcoord(v_buff, 0.5, 0.5);

//triangle 2
vertex_position(v_buff, 600, 100);
vertex_colour(v_buff, c_black, 1);
vertex_texcoord(v_buff, 1.0, 0.0);

vertex_position(v_buff, 600, 500);
vertex_colour(v_buff, c_black, 1);
vertex_texcoord(v_buff, 1.0, 1.0);

vertex_position(v_buff,  400, 300);
vertex_colour(v_buff, c_red, 1);
vertex_texcoord(v_buff, 0.5, 0.5);

//triangle 3
vertex_position(v_buff, 200, 500);
vertex_colour(v_buff, c_black, 1);
vertex_texcoord(v_buff, 0.0, 1.0);

vertex_position(v_buff, 600, 500);
vertex_colour(v_buff, c_black, 1);
vertex_texcoord(v_buff, 1.0, 1.0);

vertex_position(v_buff,  400, 300);
vertex_colour(v_buff, c_red, 1);
vertex_texcoord(v_buff, 0.5, 0.5);

vertex_end(v_buff);
tex = sprite_get_texture(sprite_index, 0);


Draw event:

    shader_set(shd_prim);
vertex_submit(v_buff, pr_trianglelist, tex);

• I just implemented this in WebGL and it is the intended behaviour (Implementation here), I'll see what I can do about it Nov 21, 2017 at 16:34
• It might help if you could post an image of the result you want to achieve.
– user1430
Nov 21, 2017 at 16:53

Here's a WebGL implementation showing the same effect, which means it is the intended behaviour

That's just an optical illusion, the line isn't there. Let me magnify the image:

Your eye perceives lightness relative to the sorroundings. You might've seen one of these images before:

The pixel at A and B have the exact same color, but you perceive them as different ones because of the surroundings (It's also the explanations behind the infamous black-blue and white-gold dress.

The pixels in the corners have a lot of relatively darker pixels around them, this makes them look brighter than the pixels at the edges with fever surrounding darker pixels.

So, if you want quad-like gradient, then you simply can't eliminate this problem. If you however want a spherical one, then you can achieve one very easily.

Instead of using the fragment shader as a simple pass-trough one, use something that creates a circular gradient using the texture coordinates. Texture coordinates range from 0 to 1, 0.5 is the center. This means, that the distance between your current texture coordinate and (0.5, 0.5) can be used to create the gradient. The fragment shader is:

varying vec2 v_texcoord;
varying vec4 v_colour;

void main()
{
float dist = distance(vec2(0.5), v_texcoord) * 2.0;
dist = min(dist, 1.0);
gl_FragColor = (1.0 - dist) * v_colour;
}