mapbox / mapbox-gl-js

Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL
https://docs.mapbox.com/mapbox-gl-js/
Other
11.07k stars 2.21k forks source link

Aliasing on alternate-projected edges of the world #11164

Open mourner opened 2 years ago

mourner commented 2 years ago

There is visible aliasing ("steps") on edges of the world when using alternate projections:

Fill layers are anti-aliased, but there was previously no need to anti-alias background layers or modify tile clipping masks to accommodate anti-aliased edges. This changes with alternate projections. Not sure how involved that is, but if it's an easy fix, we should do it before the final release to make thematic world maps look nicer. cc @ansis @ryanhamley

ansis commented 2 years ago

I think this could be very tricky to do as part of the fill layer (water). We might need to draw a world outline above all the layers that makes some these pixels more transparent. We would also need to get that under labels that can extend beyond the map.

rreusser commented 2 years ago

This notebook illustrates the standard derivatives method for antialiasing, which might possibly work here: Basically if you divide in a fragment shader 1) any function which falls off to zero at the desired point, by 2) its derivative with respect to screen pixels, you get: a function that goes to zero over one pixel and can be used for antialiasing. This works with analytical derivatives as well as those computed with oes_standard_derivatives (which GL JS doesn't use currently, but which is universally supported, and can be relied upon to be present)

Edit: Oops, wrong link, sorry: https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_best_practices