Rounded border rendering quality issues

[mstange]

https://bugzilla.mozilla.org/show_bug.cgi?id=1402954

>> Testcase <<

Some rounded borders, for example the one used for the URL bar in the Firefox UI, look jagged and not very round.

There are two major problems:

1. The curved part of the border doesn't connect smoothly to the straight part of the border. There is a pixel at the connection point which doesn't have full opacity.
2. The anti-aliasing in general is very crude. The shape looks like it's built out of two or three straight lines per corner, and doesn't look like a round curve.

[pcwalton]

This was a concern that was always somewhat on my mind.

The correct way to do antialiasing is to calculate the area of the arc that covers the pixel square. (Pathfinder 2 ECAA does this using Green's Theorem, approximating parabolic curves with 1-pixel-wide lines as a cheat to improve performance.) I believe that WebRender simply calculates the distance to the edge of the arc. This is an approximation that is valid in 1D (because distance times a constant height equals the area) but not in 2D.

I think it'd be doable to use Green's Theorem for this as well -- I believe clipping the arc in the fragment shader is straightforward with some simple trigonometry -- but there's the question as to whether we need to do that or whether we can get away with a cruder approximation. For instance, we could implicitize the curve and supersample 4 times in the fragment shader, and that would probably look better than what we have right now.

[nical]

Other than precision issues of the approximation, it looks like the border is biased towards the outside (maybe by half a pixel). I haven't delved into this shader yet but I wouldn't be surprised that there is a half-pixel offset somewhere that is extraneous or omitted.

(gecko is on the left and webrender on the right)

[nical]

I believe this is caused by mismatch between the positions being specified in a coordinate system that is snapped to the corners of the pixels, while the distance should be sampled from the point of view of the center of the pixels. I have a fix that makes the borders look good but I am not 100% certain that it is strictly correct (not sure yet that it is the best place to compensate for that half-px offset).