Issue getting gradient square in glsl es 2.0, Gamemaker Studio 2.0

大兔子大兔子 提交于 2019-12-05 18:38:47

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 colors:

8 colors:

16 colors:

32 colors:


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

Preview:

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!