
Text rendering using multi channel signed distance fields - qqii
https://github.com/Chlumsky/msdfgen
======
benrampling
There is a concise description of how this works (written by the author) here:

[https://computergraphics.stackexchange.com/a/2151](https://computergraphics.stackexchange.com/a/2151)

~~~
sgrove
There's also a _fantastic_ talk on this paper at the SF PapersWeLove meetup
going over it
[https://youtu.be/-O0-HEZAwg8?t=1025](https://youtu.be/-O0-HEZAwg8?t=1025)

Really enjoyed this paper, the talk, and this technique. Quite clever!

------
haxiomic
This is a great library, I used it last year for text rendering in WebGL [0].
The advantage over regular SDF is you can use lower-resolution glyph maps to
achieve the same text sharpness. The disadvantage is that text effects like
glow and stroke are tricker as you tend to get sharp edges and artefacts [1].

[0] [https://github.com/VALIS-software/GPUText](https://github.com/VALIS-
software/GPUText)

[1]
[https://github.com/Chlumsky/msdfgen/issues/67](https://github.com/Chlumsky/msdfgen/issues/67)

~~~
Hydraulix989
It's also trickier to support Unicode and arbitrary fonts.

I was building a 3D game for language learning on mobile, and the font
rendering in Unity3D was awful (blurry and rasterized).

When I eventually ended up writing my own engine, I started with bitmap fonts
and quickly switched to SDF shaders. I ended up having to regenerate the
texture on-the-fly as new characters were needed, acting as a cache (one of
the markets was China -- you're not going to just stash all of the characters
into one texture).

Another wrinkle: There's also right-to-left writing systems like Hebrew and
Arabic, but those weren't our markets.

So far, the best I've seen is Eric Lengyel's Slug library: [1]
[http://sluglibrary.com/](http://sluglibrary.com/)

~~~
mises
With respect to slug, do you know if it would be usable with something like
nerd fonts (custom glyphs)? My impression is yes, but I wasn't quite clear.

~~~
Hydraulix989
Their demo shows it rendering color glyphs. Try reaching out to Eric?

------
ChrisFoster
This is pretty neat work, I was considering using it to help work around the
problems of anisotropically scaled SDF font rendering. (Trick: do the
anisotropic scaling and add the Jacobian correction factor per color channel
before combining with the median. This will avoid some subset of the artifacts
you get when trying to anisotropically scale SDFs and subsequently use them
for antialiasing and stroke rendering.)

If you're going to use this library, note that the maintenance situation is
complicated. Some forks seem well ahead in terms of bug fixes, for example
[https://github.com/RCrockford/msdfgen](https://github.com/RCrockford/msdfgen)

------
redff0000
Are there any decent tools for generating these mSDF from arbitrary SVG? Last
time I looked, the available tooling failed on most nontrivial SVGs so the
whole concept was a bit of a non-starter.

------
lostmsu
Is this simply generating textures for 2D planes, that you can just strap to a
cube, or does it go beyond that?

~~~
drcode
My novice take is that the author is using a low-res RGB texture and then
cleverly combining it with some custom GPU code to generate an extremely high-
res monochrome texture at the memory cost of the low-res texture.

~~~
pcwalton
Signed distance fields for vector rendering are based on the fact that you can
perfectly† reconstruct the distance to any straight line via bilinear
interpolation between samples of the Euclidean distance. On GPU, the texture
sampling hardware provides that bilinear interpolation.

The trouble with using this property to encode and render polygons is that
sometimes to render polygons properly you need to consider the distance to two
or more edges simultaneously in the course of processing a pixel. A single-
channel signed distance field just accepts the artefacts that result from
this. A three-channel signed distance field, on the other hand, allows each
texel to record the distance to _two_ edges simultaneously. (The extra channel
basically exists just to specify the Boolean operation to be performed on the
two edge differences.) This enhances the quality, especially around sharp
edges.

Note that rendering of general polygons with any sort of signed distance field
remains an approximation, because of the limited number of edges per texel as
explained above. SDFs are not general vector renderers and should not be
treated as such.

† Modulo quantization error from the fact that you're encoding distance into
an 8-bit channel.

