Coding Adventure: Rendering Text

578,986
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
  • @wlockuz4467
    That explanation of Bezier curves was just genius. You tricked me into learning them, and now I'll never forget about them.
  • @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.
  • @photon6802
    It shocks me when I realize how much effort has been put in all of these adventures and how much of this I don't see as the viewer. I mean 1) docs and articles research 2) implementing and debugging 3) coding interactive visualizations 4) coding debug tools 5) collecting all of the material into one smooth journey I'm pretty sure that I see just 10th part of all work been done to make this video happen. And the amount of behind the scenes work is the main reason why these adventures so interesting and comfortable to watch. Thank you for your job.
  • @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.
  • @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
  • @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
  • @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
  • @lucasmontec
    That patent is so stupid it hurts. A patent on a programming technique should never be a thing. Its like patenting multiplication. It doesn't make any sense.
  • @-5urv3y-
    After spending a long week focusing on quadratics, I come home for the weekend to unwind to videos containing parabolas.
  • @boiimcfacto2364
    The worst part about watching a Sebastian Lague video: knowing you'll have to wait months for the next one...
  • @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
  • @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.
  • @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, ...
  • @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!
  • @CollidaCube
    Sebastian is the only person who can catch people's attention about FONTS for AN HOUR Dude your insane. I learn so much from every one of your videos. Keep uploading!