4
\$\begingroup\$

The naive approach to implementing signed distance field font rendering suffers quality issues where sharp corners get softened (either outward- or inward-facing corners, i.e. convex or concave corners).

Step-by-step, just how are a second and third channel used to improve the final output? How are these channels produced, as compared with a single channel (for which the process is straightforward)?

\$\endgroup\$
5
\$\begingroup\$

I have solved this exact problem for my master's thesis over a year ago and have already talked about it here. Yesterday, I released an open source program with my multi-channel distance field construction algorithm, msdfgen, which you can try out right now.

It is available on GitHub: https://github.com/Chlumsky/msdfgen

If you are interested in how it works, I will be also publishing a short paper about the method soon, or you can examine the source code. Here is a preview of how it compares to monochrome distance fields, but it really depends on the particular font and other factors.

Multi-channel distance field 16x16 Monochrome distance field 32x32

\$\endgroup\$
2
\$\begingroup\$

One distance field cannot represent sharp corners, because within the space between 4 samples (i.e. inside each "square pixel", even though pixels are not little squares), the value of the distance field is a quadratic function due to bi-linear interpolation. This class of quadratics cannot represent sharp corners well, because they are polynomials and cannot have their derivatives change quickly enough (except in a few pathological cases, but these are not general enough to be useful).

It is easy to make sharp corners on the border between regions, on the gridlines connecting samples, because here the samples which are used change abruptly. You can see this on the last page of this paper from Valve.

By using two channels, and thus two functions, we can have two lines (or curves, in the general case), in each cell. Then, as long as there is only one corner per cell, we can easily define two lines whose intersection is at the corner we seek. Using two channels, we can use AND of the two regions to define convex corners. If we assume + is outside, and - is inside, then AND is the same as taking the MAX of both channels, after interpolation. The max function can have sharp corners, even if the two functions it operates on are smooth.

We could use OR to get sharp concave corners. And with clever uses of three channels, we could use both AND and OR to get concave and convex corners in the same image. Of course, setting up those two or three channels to get the desired effect is quite complicated.

\$\endgroup\$
  • \$\begingroup\$ The Valve paper's final image offers only an incomplete idea of where to go with this. I've amended the question to ask for a more verbose, step-by-step description of one or more algorithms used to produce the multiple channels. The issue here is that it's not clear from that image / explanation how one can have n sharp corners on an image without using n channels (which would clearly be prohibitive). \$\endgroup\$ – Engineer Jan 16 '15 at 11:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.