Coding Adventure: Rendering Text

481,056
0
Published 2024-04-13
This... is text! Let's figure out how to draw it.
Starring: Bézier curves and (so many) floating point problems.

Source code: 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:
www.patreon.com/SebastianLague
ko-fi.com/sebastianlague

Resources:
developer.apple.com/fonts/TrueType-Reference-Manua…
www.microsoft.com/en-us/research/wp-content/upload…
wdobbie.com/post/gpu-text-rendering-with-vector-te…

Font and Music Credits:
github.com/SebLague/Misc-Project-Info/blob/main/Co…

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

All Comments (21)
  • @IngieKerr
    As per the old traditions of typesetting, fonts come in three cases; upper-case, lower-case, and edge-case.
  • @oculicious
    A) I hate that math can be patented B) I had no idea how much math you had to do for just one letter
  • @Barbara_Salesch
    "...were designed to meet anticipated needs which never materialized" - i love that sentence
  • @boiimcfacto2364
    The worst part about watching a Sebastian Lague video: knowing you'll have to wait months for the next one...
  • @chadbramwell977
    I've tried loading and rendering fonts multiple times but stopped because of the complexity everywhere. I continue to be amazed at the level of debugging tools you write! And I appreciate how much effort you spend forming your work into a journey that's easy to follow. Thanks for showing one path through the complexity and taking a relaxed/fun approach to it! I'm inspired to try again!
  • @wlockuz4467
    You're the Bob Ross of programming. Your videos are so relaxing to watch, the learning is just an added bonus.
  • @Gwilo
    this entire video summarizes coding precisely; step 1. I want to make some kind of game engine! first off, I need to figure out how to render some text for the UI! step 162. it's been a few weeks and I've encountered one of the last bugs. I'm done coding after I get this text to render
  • @-5urv3y-
    After spending a long week focusing on quadratics, I come home for the weekend to unwind to videos containing parabolas.
  • @artemonstrick
    the true nature of programming is beautifully (and very scary) encapsulated in this video: simple and beautiful solutions break down against gazillion corner cases, floating point math and "bad" input
  • @juappdev
    What I love about text is there's so much optional stuff that goes into rendering it besides drawing the glyphs like CTL, layout, pixel alignment, angry art leads complaining that the font looks terrible, ...
  • @wlockuz4467
    That explanation of Bezier curves was just genius. You tricked me into learning them, and now I'll never forget about them.
  • @stickguy9109
    The most impressive thing in this video and the thing that baffles me the most is how you never got tired of trying again and again to solve the artifacts problem. After a few tries I would have quit right then and there but you didn't.
  • @cybroxde
    After spending two painful days writing a point-in-polygon algorithm for last year's AdventOfCode, it warms my heart to see someone else struggle with the exact same edge cases. I sincerely thank you!❤ And also huge respect if you figured that out on your own. I ended up finding a paper that described the up/down crossing approach and went from there.
  • As soon as you said "The Beauty of Bezier Curves" I knew exactly what was coming.
  • @vladchira521
    I am always in utter awe at your ability to calmly (at least it's how you present it) tackle any topic in programming, without frustrations and abandonment. You are an inspiration for all of us aspiring programmers
  • @garyduell3768
    I legit laughed at 2 problems for the price of one. It's such a vibe for programming.
  • @aviinl1
    patents on algorithms should be illegal.
  • @lynnwilliam
    Studied this in computer science and I love that you covered it in a fun way. Because in college they teach it like reading a manual
  • @JensAndree
    Old-school coder here, long before Truetype was the standard, but one that's always been fascinated by typefaces. I did briefly look into how to render Truetype on the Amiga but back then information wasn't easily available so I stuck using Agfa Intellifont and Postscript Type 1, and of course cool bitmap fonts for all the demo programming we did back then! I've always wondered how TT worked and this mammoth video was one of your very best videos, explaining in detail the format - and how to implement rendering without breaking copyright... Awesome! Thanks for putting in all the weeks I'm sure this video took to make?! I suspect the reason why Truetype is using a big-endian format is that Apple designed it on Motorola 68k. (same as the Amiga albeit Amiga was a much better computer than the Mac... ;) ) I miss programming big-endian since it was so much simpler to use, especially in assembler, and I secretly wish Intel would change at some point but I know the benefits using small-endian. Just an anecdote from the past... Anyhow, using shaders to compute the rendering of the fonts was clever because in the beginning I wondered how much CPU you were going to use just rendering some text with your approach, and thinking back to the days of running a 7 mHz 68000 trying to squeeze in all the computations between each raster line not knowing the power that we'd have available today, would I even have believed it?! Yet again many thanks for making all the videos you do! Top class productions for sure!