Antialias fills without gl.LINES

[ansis]

The minimum ALIASED_LINE_WIDTH_RANGE required by the spec is [1, 1]. We need at least a width of 2 for antialiasing to work. ANGLE only supports a width of 1. Angle is used in Chrome and Firefox on windows, and by our headless testing.

We should use triangles.

moving away from gl.LINES should fix #1047

It could also help without our headless testing antialiasing headaches.

[ansis]

cc @kkaefer

[lucaswoj]

Do you think this is the same phenomena as #1606 (comment)?

[tmpsantos]

ANGLE is also used on Mapbox GL Native + Qt on Windows.

[jfirebaugh]

The core profile for desktop OpenGL on macOS supports only [1, 1] as well: https://developer.apple.com/opengl/OpenGL-Capabilities-Tables.pdf.

[jfirebaugh]

Weirdly, support for >1 seems to have increased abrupt in recent months:

http://webglstats.com/webgl/parameter/ALIASED_LINE_WIDTH_RANGE

[jfirebaugh]

@kkaefer pointed out a potential technique for doing polygon antialiasing/stroking using barycentric coordinates, and I spent some time prototyping it in gl-js. It's a clever technique, but unfortunately it doesn't look like it will work for us. The technique originates as a way of drawing wireframes, where all three sides of each triangle are stroked. When you want to stroke only some of the sides, the issue arises that the edges that are not stroked end up "cutting off" pieces of the stroke on adjacent edges:

The skinnier the triangles, the worse this gets -- and earcut tends to generate a lot of very skinny triangles.

You could try to correct for this by shading portions of the other triangles that cover that border, but this doesn't seem straightforward, and I couldn't find any papers or threads online that discussed it.

A second issue with this technique is that it will only allow us to antialias or stroke the interior of the polygon. An interior-only antialiasing would likely produce or exacerbate seams between polygons that share an edge. What we really want is a 50/50 split between the interior and exterior, and to get that, we'd need to implement polygon outset, a complex algorithm.

[exotfboy]

Hi , I found that the Antialias also does not work with the fill-extrusion.

[alphex]

I'm suffering from this issue also.
I found that setting a 1px stroke with 50% opacity of the same color solved the issue... but .. yeah, doesn't work as advertised.