Search code examples
openglglslrounded-corners

GLSL 2D Rounded corners

I want to add some black outline to my game screen to make it look like the corners are rounded. This is the effect I want to achieve: rounded corners

I figured this effect was probably quite easy to create using a shader, instead of drawing a giant bitmap on top of everything.

Can someone help me with the GLSL shader code for this effect? I have 0 experience with shaders and was unable to find anything like this on the internet.

Solution

  • Thanks to @HolyBlackCat my shader now works. I've improved the performance and made it look smoothed.

    varying vec4 v_color;
varying vec2 v_texCoord0;

uniform vec2 u_resolution;
uniform vec2 u_screenOffset;

uniform sampler2D u_sampler2D;
const float max = pow(0.2, 4);

void main()
{
    vec2 pos = (gl_FragCoord.xy - u_screenOffset) / u_resolution;

    float vignette = pos.x * pos.y * (1.-pos.x) * (1.-pos.y);

    vec4 color = texture2D(u_sampler2D, v_texCoord0) * v_color;
    color.rgb = color.rgb * smoothstep(0, max, vignette);

    gl_FragColor = color;
}

    Set the uniforms as follows in the resize event of libGDX:

    shader.begin();
shader.setUniformf("u_resolution", viewport.getScreenWidth(), viewport.getScreenHeight());
shader.setUniformf("u_screenOffset", viewport.getScreenX(), viewport.getScreenY());
shader.end();

    This will make sure the shader works with viewports (only tested with FitViewport) aswell.