在glsl es 2.0，Gamemaker Studio 2.0中获得渐变方块的问题 [英] Issue getting gradient square in glsl es 2.0, Gamemaker Studio 2.0

问题描述

我制作了一个包含4个三角形的三角形列表，中间点的颜色不同.然后旨在合并三角形以获得一个不错的渐变. 但是三角形的边缘会产生多余的线条，我不希望这些线条一直保持平滑. 如何获得理想的结果?

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?

图片:

着色器代码:

    // 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: Create event:

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

推荐答案

您可以看到的效果是错觉.您可以通过对颜色进行分级来使其可见.为此，请使用以下片段着色器:

The effect that you can see is optical illusion. You can make this visible by grading the colors. Use the following fragment shader for this:

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 函数.

To achieve a better result, you have to do the color calculated in the fragment shader. The following shader smoothly change the gradient, from a circular gradient in the middle of the the view, to a square gradient at the borders of the view. The fragment color is interpolated form color1 to color2, using the GLSL mix function.

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

预览:

这篇关于在glsl es 2.0，Gamemaker Studio 2.0中获得渐变方块的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！