Part of the Khronos Group
OpenGL.org

The Industry's Foundation for High Performance Graphics

from games to virtual reality, mobile phones to supercomputers

Results 1 to 1 of 1

Thread: Draw an antialiased ring with fragment shader

  1. #1
    Junior Member Newbie
    Join Date
    Aug 2017
    Posts
    1

    Draw an antialiased ring with fragment shader

    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:

    Code :
    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;
    }
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	ring.jpg 
Views:	26 
Size:	5.2 KB 
ID:	2445  

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •