maplibre-gl-js
maplibre-gl-js copied to clipboard
maplibre
Sharper symbols with multichannel signed distance fields
I would like to try out multichannel signed distance fields (MSDF) because the should give us sharper corners for text letters and icons than the currently used signed distance fields. This issue is here to keep track of the current status and collect some material.
Overview
The basic advantage of MSDFs is that you get sharper corners. Here is an example from https://github.com/Chlumsky/msdfgen
From left to right: 16x16 MSDF, 16x16 SDF, 32x32 SDF.
In an MSDF you store 3 different signed distance fields in the 3 color channels of an RGB image. So this means you need 3x more data. However, the 16x16 MSDF still outperforms the 32x32 SDF in terms of corner quality.
To learn more about MSDFs I recommend reading this Master thesis
Goal
My goal is to have a proof-of-concept version of MapLibre GL JS which just shows a single MSDF letter on a map. Once we have this we can extend it.
It's worth mentioning that the following issue talks about multi sdf a bit:
- https://github.com/maplibre/maplibre-gl-js/issues/2990
The demo here
can now show a single letter via the
icon-image channel.
https://wipfli.github.io/maplibre-msdf-demo/#map=3/47/8
Great new blog post on msdf https://www.redblobgames.com/x/2404-distance-field-effects/
Large and sharp text in the Meta map style:
https://wipfli.github.io/maplibre-msdf-demo/meta#map=11.84/51.50079/-0.12431