In this video, I go through most of the concepts required to render text to the screen. (Bitmaps, Vector, SDFs, MSDFs, String Representation and Shaping)
This video is sponsored by Brilliant.
You can try Brilliant for free for 30 days using the link https://brilliant.org/VoxelRifts . You will also get 20% off Brilliant’s annual premium subscription!
Timestamps:
00:00 Intro
00:48 Bitmap
02:56 Vector
07:01 SDF
10:24 MSDF
12:09 String Representation Intro
12:27 ASCII
13:35 Unicode
15:38 A Simple Drawing Procedure
16:36 Shaping Intro
17:13 Shaping Operations
20:04 Putting it all together
21:10 About Brilliant
Links:
Sebastian Lague's Video on Text Rendering: https://youtu.be/SO83KQuuZvg?si=o968YCS3zkkkHkmy
SDF Generator (used to show artifacts at high scales): https://gabdube.github.io/easy-signed-distance-field/
SDF Paper: https://steamcdn-a.akamaihd.net/apps/valve/2007/SIGGRAPH2007_AlphaTestedMagnification.pdf
MSDF Thesis: https://dspace.cvut.cz/bitstream/handle/10467/62770/F8-DP-2015-Chlumsky-Viktor-thesis.pdf
Shaping Model Docs: https://github.com/n8willis/opentype-shaping-documents
Substitution Table Docs: https://learn.microsoft.com/en-us/typography/opentype/spec/gsub
Positioning Table Docs: https://learn.microsoft.com/en-us/typography/opentype/spec/gpos
Text Layout: https://learn.microsoft.com/en-us/globalization/fonts-layout/text-layout
Fun read about the third Unicode encoding I didn't mention (UTF-16) and it's predecessor UCS2: https://unascribed.com/b/2019-08-02-the-tragedy-of-ucs2.html
Discord: https://discord.gg/8rtYjQkqDF
The video was animated using motion-canvas.
Animation source: https://github.com/PixelRifts/video-animations/tree/master/text-rendering
#graphics #sdf #programming