79 votes

Sharp Corners with Signed Distance Fields Fonts

EDIT: Please see my other answer with a concrete solution. I have actually solved this exact problem over a year ago for my master's thesis. In the Valve paper, they show that you can AND two ...
Detheroc's user avatar
  • 1,436
50 votes

Sharp Corners with Signed Distance Fields Fonts

Sorry about the long wait, but it has become obvious that although the article I have promised is basically complete, the publishing process will take some time. Therefore, I have instead prepared an ...
Detheroc's user avatar
  • 1,436
12 votes
Accepted

why does black text have orange and blue pixels

This is called subpixel rendering. The different primary colors in your monitor are not stacked on top of each other. Instead they are arranged near each other. Different monitors have different ...
joojaa's user avatar
  • 8,437
8 votes
Accepted

Signed distance field font looks odd

Hmm, that SDF doesn't look right. It should be much smoother, like this image for instance: (image from this blog). One possible issue I noticed in your description: My program first generates a ...
Nathan Reed's user avatar
8 votes
Accepted

What kind of anti-aliasing is used in font rasterization?

Sean Barrett, the author of the stb libraries, wrote an article on how stb_truetype's rasterization works. It's quite readable. The article describes two methods of antialiasing, both based on ...
Nathan Reed's user avatar
7 votes

Sharp Corners with Signed Distance Fields Fonts

Quite interesting! I'm the author of the valve signed distance paper. Sorry that it's a little sparse on implementation details. I only included the two channel example as future work - I didn't have ...
chris green's user avatar
7 votes

Is there an algorithm to bold an outline font?

The best way to do proper outlines, is unfortunately, also the hardest. It involves calculating an offset curve, usually from the medial axis or straight skeletons, which are non-trivial to calculate. ...
user1118321's user avatar
  • 3,411
6 votes
Accepted

Is there an algorithm to bold an outline font?

I think dilation would be close enough to what you want. It is likely that font processing software would have more advanced algorithms to avoid rounding all the corners, among other things. Fonts ...
Olivier's user avatar
  • 1,585
5 votes
Accepted

Why does some text on my laptop have only gray-scale pixels while other text has color pixels?

It's called subpixel rendering (there are different solutions on different platforms). Microsoft's one is called ClearType, just google for it, Wikipedia has a nice description. Earlier, simple edge ...
Gábor's user avatar
  • 166
3 votes
Accepted

Stylized math like rendering?

You might want to check matplotlib-cpp. You'll find a "funny-looking xkcd-styled example" in the README. I also saw xkcd related entries on matplotlib's Python documentation. So, it should ...
madbuggerswall's user avatar
3 votes
Accepted

Fonts rendered through textures look thinned

From looking at your example images this looks like a case of Alpha blending being applied to the RGB channel of the font-atlas texture and then again applied via the A channel when rendering. The ...
PaulHK's user avatar
  • 2,322
2 votes

How to get the length of paths in an given font/character

The way I would approach this is to get the outline curves of the font and then break each one down into some fixed number of steps (like, say, 100), and make a series of very small straight lines. ...
user1118321's user avatar
  • 3,411
1 vote

How to scale signed distance field fonts properly?

After some trials I've realized my problem was a programming error and not an actual issue with SDF fonts. Originally I was rendering the numbers on the texture of the canvas, which had a fixed scale. ...
Endanke's user avatar
  • 131
1 vote

Sharp Corners with Signed Distance Fields Fonts

I am by no means an expert on the subject, but you might be able to, at least in theory, preserve sharp corners in a monochromatic pseudo-SDF if you used either a Bilateral filter a Directional ...
Amaroq Starwind's user avatar

Only top scored, non community-wiki answers of a minimum length are eligible