mapbox-gl-js icon indicating copy to clipboard operation
mapbox-gl-js copied to clipboard

Antialias fills without gl.LINES

Open ansis opened this issue 9 years ago • 8 comments

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 https://github.com/mapbox/mapbox-gl-js/issues/1047

It could also help without our headless testing antialiasing headaches.

ansis avatar Feb 06 '16 02:02 ansis

cc @kkaefer

ansis avatar Feb 06 '16 02:02 ansis

Do you think this is the same phenomena as https://github.com/mapbox/mapbox-gl-js/pull/1606#issuecomment-179494096?

lucaswoj avatar Feb 08 '16 18:02 lucaswoj

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

tmpsantos avatar Jun 22 '17 16:06 tmpsantos

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

jfirebaugh avatar Jun 26 '17 22:06 jfirebaugh

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

image

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

jfirebaugh avatar Jun 26 '17 22:06 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:

image

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.

jfirebaugh avatar Jul 17 '17 18:07 jfirebaugh

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

image

exotfboy avatar May 24 '18 02:05 exotfboy

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.

alphex avatar Oct 25 '22 14:10 alphex