Ausgabe bekommen Gradientenquadrat in Glsl es 2.0, Gamemaker Studio 2.0

Question

Ich machte eine Dreiecksliste mit 4 Dreiecke, mit dem Mittelpunkt eine andere Farbe. Und dann zielen Sie darauf, die Dreiecke zu kombinieren, um einen schönen Farbverlauf zu erhalten. Aber die Kanten der Dreiecke erzeugen unerwünschte Linien, ich will diese Linien nicht, ich möchte, dass sie glatt sind. Wie kann ich das gewünschte Ergebnis erhalten?

Bilder:

Shader-Code:

// 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; 
    } 

    // 
    // Simple passthrough fragment shader 
    // 
    varying vec2 v_texcoord; 
    varying vec4 v_colour; 

    void main() 
    { 
     gl_FragColor = v_colour; 
    } 

Gamemaker Code: erstellen Ereignis:

//Build vertices list 


    vertex_format_begin(); 
    vertex_format_add_position(); 
    vertex_format_add_colour(); 
    vertex_format_add_textcoord(); 
    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); 
    shader_set_uniform_f(uni_radius, var_radius); 
    vertex_submit(v_buff, pr_trianglelist, tex); 
    shader_reset(); 

Answer 1

Der Effekt, den Sie sehen können, ist optische Täuschung. Sie können dies sichtbar machen, indem Sie die Farben sortieren. Verwenden Sie die folgenden Fragment-Shader für diesen:

varying vec2 v_texcoord; 
varying vec4 v_colour; 

void main() 
{ 
    float steps = 4.0; 
    //float steps = 8.0; 
    //float steps = 16.0; 
    //float steps = 32.0; 

    vec3 gradColor = floor(v_colour.rgb * steps)/steps; 
    gl_FragColor = vec4(gradColor, 1.0); 
} 

4 Farben:

8 Farben:

16 Farben:

32 Farben:

ein besseres Ergebnis zu erreichen, müssen Sie die Farbe in den Fragment-Shader berechnet tun. Der folgende Shader ändert den Farbverlauf von einem kreisförmigen Farbverlauf in der Mitte der Ansicht zu einem quadratischen Farbverlauf an den Rändern der Ansicht. Die Fragmentfarbe wird von color1 bis color2 unter Verwendung der GLSL mix-Funktion interpoliert.

varying vec2 v_texcoord; 
varying vec4 v_colour; 

void main() 
{ 
    vec4 color1 = vec4(1.0, 0.0, 0.0, 1.0); 
    vec4 color2 = vec4(0.0, 0.0, 0.0, 1.0); 

    vec2 distV  = v_texcoord * 2.0 - 1.0; 
    float maxDist = max(abs(distV.x), abs(distV.y)); 
    float circular = length(distV); 
    float square = maxDist; 

    gl_FragColor = mix(color1, color2, mix(circular,square,maxDist)); 
} 

Vorschau: