In the last post I described how I fell into the font rendering rabbit hole. I try to put some time limits on each topic — otherwise I would explore forever! I try to pick a theme each week:
- Week 3 was the basics: SDF, MSDF, atlas, shader
- Week 4 was effects on individual glyphs: outlines, shadows, glow, bevel
- Week 5 was effects on how glyphs move: sink, rise, bold, slant, rotate, wavy, bounce, warp
The key idea I wanted to explore this week is that a distance field font can be thought of as contour lines:
When rendering a font normally like I did last week, I considered distance < 0 ? "white" : "transparent". But there are so many more things to do with this distance!
The first thing I wanted to do is outlines. This is roughly distance < 0 ? "white" : distance < 0.1 ? "black" : "transparent":
I think this looks beautiful!
A variant is to apply blur to make this into a shadow, or apply blur and a bright color to make it into a glow effect. But I noticed that MSDF vs SDF makes a difference. SDF produces rounded corners, and I think the outlines don’t look nearly as good as with MSDF:
I wanted to see the difference, so I made this to highlight the pixels where they were different:
For some effects like shadow and blur I wanted the rounded corners, and for others like outlines I wanted the sharp corners. So I experimented with using both.
I played with lots of other things too, including taking the gradient of the distance field to get angles:
This gave me a way to apply lighting and make a bevel effect.
I learned a lot in Week 4. I had lots of bugs and I generally found it hard to debug shaders compared to cpu code. Sometimes I didn’t have the right frame of mind to fix a bug, so I continued with other experiments until I had a new idea, then came back to the bug and fixed it. I wrote up my notes originally for myself, and then cleaned them up for sharing. I had more I wanted to do, but the week was over, so I wrapped up and moved on to the next topic in Week 5.