Sharper symbols with multichannel signed distance fields

[wipfli]

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.

[HarelM]

It's worth mentioning that the following issue talks about multi sdf a bit:

• https://github.com/maplibre/maplibre-gl-js/issues/2990

[wipfli]

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

[wipfli]

Great new blog post on msdf https://www.redblobgames.com/x/2404-distance-field-effects/

[wipfli]

Large and sharp text in the Meta map style:

https://wipfli.github.io/maplibre-msdf-demo/meta#map=11.84/51.50079/-0.12431

[HarelM]

Nice!!