PDA

View Full Version : Draw an antialiased ring with fragment shader



Baumfaust
08-12-2017, 02:52 AM
Hello guys,

I just started to learn opengl. At the moment I try to draw antialiased ring which has a width of 1 pixel.
The outer edge looks pretty smooth, but inner edge is not.
Could you help to improve this?

https://i.imgur.com/YBlZpJC.png

Thats how my shader looks like:



uniform vec2 u_resolution;
uniform float u_width;
uniform vec4 u_color;

void main() {
float alpha = u_color[3];
float delta = 0.0;

vec2 st = gl_FragCoord.xy/u_resolution; // normalize resolution 0 to 1
float pixel = 1.0 / u_resolution.x; // normalized size of 1 pixel
st = st * 2.0 - 1.0; // set range from -1 to 1
float len = dot(st, st); // compute squared vec len from center to coordinate
float r2 = 1.0 - pixel;

delta = fwidth(len);
alpha = alpha - smoothstep(1.0 - delta, 1.0 + delta, len);
if ( alpha == u_color[3])
alpha = alpha- smoothstep(r2 + delta, r2 - delta, len);

gl_FragColor = u_color * alpha;
}