It’s not the first time I’ve fallen down the rabbit-hole of rendering text in real time. Every time I’ve looked into it an inkling of dissatisfaction always remained, either aliasing, large textures, slow build times, minification/magnification, smooth movement, etc.
Last time I landed on a solution using Multi-Channel Signed Distance Fields (SDFs) which was working well. However there was still a few things that bothered me and I just needed a little excuse to jump back into the topic.
That excuse came in the form of getting a new monitor of all things. One of those new OLEDs that look so nice, but that have fringing issues because of their non-standard subpixel structure. I got involved in a GitHub issue discussing this and of course posted my unrequested take on how to go about it. This was the last straw I needed to go try and implement glyph rendering again, this time with subpixel anti-aliasing.
Just to start things off, here is a test with a bunch of fonts, trying to test the most common styles, rounded, sharp, very thin lines, etc.
This one is higher resolution, recommended to open in a new tab and visualize at native 100% zoom if possible
And a cheeky menu to show it in movement, along with a console and the previously show demo text.
An important disclaimer about showing images and videos in this post is that artifacts might show due to minification/magnification, pixel alignment, and even subpixel structure.
But Why Though?
There was a few things that were bothering me about using SDFs, the main ones being:
Quality
... continue reading