How do I get this circle to maintain its thickness when viewed from different angles?

Questions
8

Fwidth is what I would use for this to get pixel perfect lines, as well, but I pass it in as a threshold to smoothstep, which gives a pretty nice anti aliased edge but you’ll start to notice artifacts at really skewed angles particularly with thicker lines. And of course it’ll disappear if you look at the plane from the side anyway:

    // calculate the distance from center
    float dist = length(uv);    
    float distToEdge = abs(dist - circle_radius);

    float pixelWidth = fwidth(dist);
    float t = smoothstep(pixelWidth * (border - 1.0), pixelWidth * (border + 0.25), distToEdge) ;

Here’s a fiddle with the change:

https://jsfiddle.net/z914og7a/1/

You can adjust the border - 1.0 and border + 0.25 thresholds to taste depending on how much of a feathered / AA’d edge you want. The artifacts at skewed angles are gonna bug me, though…

2 Likes