Rendering Fonts Quickly on the GPU

Summary

Last month I started working on a WebGPU animation renderer so I could render animations directly in the web for this blog. It's not quite done yet, but along the way I've managed to implement a very cool technique for rendering TTF fonts. The technique comes from work by Loop and Blinn, Resolution independent curve rendering using programmable graphics hardware. According to Google, this work was patented by Microsoft in 2005, and just expired in March this year!The technique is actually surprisingly elegant for the GPU and I think it's really cool. In order to understand this technique from scratch, I'm going to break down a little bit of everything, from fonts to graphics rendering and splines.By the way, the animated GIF at the top was rendered using this technique!I also spent a ton of time making little explainer animations for further on in this blog. Let me know if they help!My True Type Font is Telling Lies Again Let's start with True Type fonts (.ttf) because they are the one true font format. Open Type fonts (.otf) are almost the exact same structure as True Type fonts, and Web Open Font Format (.woff and .woff2) fonts are essentially just wrappers that compress True Type and Open Type fonts. So, understanding True Type fonts is basically all you need.The format in which TTF encodes its information is frankly over engineered and very boring so I'm going to just completely skip that. You can check out Tomek Czajecki's blog post on TTF file parsing if your interested.Characters in TTF fonts are made of glyphs. Each glyph is made up of paths, which are in turn each made up of curves. The hierarchy sort of looks like this:FontCharacterGlyphsPathsCurvesEach blue point in the a glyph is a start and end point for a curve. Each red point is a control point. Control points control (haha) the curvature of a curve. You can also see, for example, on the stem of the glyph some of the lines don't have a control point. When reading the curve data, I just add the control...