glsl es 2.0、Gamemaker Studio 2.0のグラデーションスクエアを取得する問題

Question

中点が異なる色を持つ4つの三角形の三角形リストを作成しました。そして、三角形を結合して素晴らしい勾配を得ることを目指してください。 しかし、三角形の辺は不要な線を作ります。私は線を滑らかにしたいと思っていません。 希望の結果を得るにはどうすればよいですか？

画像：

シェーダコード：

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

ゲーム会社コード： 作成イベント：

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

ドローイベント：

shader_set(shd_prim); 
    shader_set_uniform_f(uni_radius, var_radius); 
    vertex_submit(v_buff, pr_trianglelist, tex); 
    shader_reset(); 

Answer 1

あなたが見ることができる効果は錯視です。色をグレーディングすることで、これを表示させることができます。このため、以下のフラグメントシェーダを使用する：

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色：

8色：

16色：

32色：

より良い結果を達成するために、あなたは、フラグメントシェーダで計算された色をしなければなりません。次のシェーダは、ビューの中央にある円形のグラデーションから、ビューの境界にある四角形のグラデーションにスムーズにグ​​ラデーションを変更します。フラグメントカラーは、GLSL mix関数を使用してcolor1〜color2の形式で補間されます。

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

プレビュー：あなたの応答のための