2024-04-13

[public] 7.12K views, 34.8K likes, dislikes audio only

Sebastian Lague

This... is text! Let's figure out how to draw it.

Starring: Bézier curves and (oh so many) floating point problems.

Source code: https://github.com/SebLague/Text-Rendering

If you'd like to support my work (and get early access to new projects) you can do so here:

https://www.patreon.com/SebastianLague

https://ko-fi.com/sebastianlague

Resources:

https://developer.apple.com/fonts/TrueType-Reference-Manual/

https://www.microsoft.com/en-us/research/wp-content/uploads/2005/01/p1000-loop.pdf

https://wdobbie.com/post/gpu-text-rendering-with-vector-textures/

Font and Music Credits:

https://github.com/SebLague/Misc-Project-Info/blob/main/Coding-Adventures/TextRendering

Chapters

0:00:00 Intro

0:01:58 The Font Directory

0:04:27 Loading Simple Glyphs

0:10:42 Bézier Basics

0:13:42 The Character Map

0:15:47 Implied Points

0:18:11 Compound Glyphs

0:20:25 Size and Spacing

0:21:27 Rendering Glyphs with Lots of Triangles

0:22:17 Optimized Curve Rendering (Loop-Blinn)

0:28:20 A Brief Look at SDF Rendering

0:30:33 The Counting Method

0:31:48 Ray-Bézier Intersections

0:34:09 Point in Glyph Test

0:36:35 Shader Time

0:38:37 Floating Point Problems

0:41:22 The Evil Artifact Detector

0:45:36 The Closest Curve Method

0:50:48 Curve Splitting

0:54:31 Defeating the Evil Artifacts

0:58:58 Anti-Aliasing

1:02:47 Performance and Legibility

1:05:11 The Counting Method Returns

1:09:45 Outro