Coding Adventure: Rendering Text

Поділитися
Вставка
  • Опубліковано 20 лис 2024

КОМЕНТАРІ • 1,6 тис.

  • @IngieKerr
    @IngieKerr 7 місяців тому +4552

    As per the old traditions of typesetting, fonts come in three cases; upper-case, lower-case, and edge-case.

    • @th1v5
      @th1v5 7 місяців тому +101

      you won the comment section, good job

    • @RamoFX
      @RamoFX 7 місяців тому +11

      Underrated!

    • @ThisUsernameSystemF-ckingSucks
      @ThisUsernameSystemF-ckingSucks 7 місяців тому

      I be edging to this comment frfr

    • @nicks4727
      @nicks4727 7 місяців тому +30

      This might just be the perfect comment for this video

    • @ICanDoThatToo2
      @ICanDoThatToo2 7 місяців тому +16

      And all of them stored in a type case.

  • @photon6802
    @photon6802 7 місяців тому +191

    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.

    • @BobrLovr
      @BobrLovr 6 місяців тому +4

      its also why its extremely disheartening to other developers. He likes to show the best of him, doesn't show the pain that proceeds.

    • @meijuta
      @meijuta 5 місяців тому

      @@BobrLovr i find it quite inspiring personally

    • @brenosilvamorais2510
      @brenosilvamorais2510 4 місяці тому +4

      ​@@BobrLovrwhich is weird because a great part of the progression of his videos is exploring how things went wrong and what he had to do to fix it

    • @th0bse_
      @th0bse_ 4 місяці тому +4

      @@BobrLovr I don't feel like its disheartening at all, actually. It's really quite motivating to me, to be honest.

    • @BobrLovr
      @BobrLovr 4 місяці тому +1

      @@th0bse_ 👍

  • @chadbramwell977
    @chadbramwell977 7 місяців тому +2533

    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!

    • @tobeess
      @tobeess 7 місяців тому +43

      15 hours ago. what

    • @РоманПлуталов-м7ь
      @РоманПлуталов-м7ь 7 місяців тому +19

      ​@@tobeess bro is ahead of times💀

    • @nrnjn8547
      @nrnjn8547 7 місяців тому +7

      Probably unprivated later

    • @Xyz-tw8ym
      @Xyz-tw8ym 7 місяців тому +2

      Yupp. That's what I was thinking 😂​@@tobeess

    • @Moe5Tavern
      @Moe5Tavern 7 місяців тому +16

      Sebastian please make a video explaining how you can code a time travel machine in C++ thanks

  • @TinyDeskEngineer
    @TinyDeskEngineer 7 місяців тому +70

    As soon as you said "The Beauty of Bezier Curves" I knew _exactly_ what was coming.

  • @wlockuz4467
    @wlockuz4467 7 місяців тому +2488

    You're the Bob Ross of programming.
    Your videos are so relaxing to watch, the learning is just an added bonus.

    • @epiklizard6629
      @epiklizard6629 7 місяців тому +13

      Was thinking of making this exact comment. Cheers!

    • @TracyNorrell
      @TracyNorrell 7 місяців тому +56

      "here we have some happy little bezier curves"

    • @Anonymous-fr2op
      @Anonymous-fr2op 7 місяців тому +4

      ​@@TracyNorrellhonestly, he is the calmest soul ever, at least imo. And this guy follows him closely. Absolute joy to follow along

    • @francknouyrigat9809
      @francknouyrigat9809 7 місяців тому +1

      Hahaha true that

    • @voxsideres
      @voxsideres 7 місяців тому +1

      I want to like your comment, but I don't want to be the one to take away 420 likes, so here you go 👍

  • @stickguy9109
    @stickguy9109 7 місяців тому +146

    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.

    • @shmunkyman33
      @shmunkyman33 6 місяців тому +1

      I have no idea if Sebastian has ADHD and I'm not saying he does or doesn't, but that very much feels like an ADHD thing lol. When you get fixated on a new problem, "just a few more tries" ends up ballooning to hours or days of tedious trial and error because each new achievement is enough to trigger that dopamine release.

    • @stickguy9109
      @stickguy9109 6 місяців тому +2

      @@shmunkyman33 I don't know to my knowledge ADHD people can't sit in one place what you're saying sounds like the opposite

    • @purewaterruler
      @purewaterruler 6 місяців тому

      ​​@stickguy9109both of those things are adhd things! The difficult thing for people with adhd is managing and directing attention. That includes both having a hard time focusing on something, AND having a hard time stopping focus on something. The latter case is often called hyperfocus

    • @lazuliartz1296
      @lazuliartz1296 6 місяців тому +7

      @@stickguy9109 ADHD does not necessarily mean people can't sit still - there is a whole sub type called Inattentive ADHD which exhibits little to no hyperactivity at all. ADHD isn't a complete inability to focus, it's an inability to regulate that focus - you focus too hard on some things (leading to hyperfocus, where you sometimes ignore your basic needs to focus for hours and hours on end without break) but have trouble focusing at all on other things.

    • @fiona9891
      @fiona9891 6 місяців тому

      ​@@stickguy9109 attention issues with adhd are more of a lack of control of your attention - so people with adhd have a very, *very* hard time focusing on things they aren't interested in, and get incredibly absorbed into things they are interested in
      since there's no way to control what you're interested in, it makes school and work pretty hellish to deal with

  • @artemonstrick
    @artemonstrick 7 місяців тому +1410

    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

    • @David-um8tb
      @David-um8tb 7 місяців тому +243

      Don't forget that you might unintentionally implement a patented solution.
      Edit: just in case it wasn't clear, I believe patents shouldn't exist.

    • @pik910
      @pik910 7 місяців тому +30

      horrors beyond comprehension

    • @unknownname3703
      @unknownname3703 7 місяців тому +125

      @@David-um8tb software patents are evil

    • @CatDevz
      @CatDevz 7 місяців тому +48

      @@unknownname3703 patents are evil

    • @leftward_hoe
      @leftward_hoe 7 місяців тому

      @@David-um8tb imagine patenting writing. what an idiotic concept. you can't claim ownership of the process of writing letters. this is no different than trying to patent using ink in your pen. unless the pen is patented too? so who actually is allowed to write anything? do we all have to use charcoal that we make ourselves? or is the process of making charcoal also patented? or is it just part of the process of making charcoal that is patented? where does the idiocy end. "software patents" LMAO

  • @vladchira521
    @vladchira521 7 місяців тому +93

    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

    • @nukedboom
      @nukedboom 7 місяців тому +4

      I'm sure he's been frustrated with many a programming problems, but regardless of whether he has or hasn't, Sebastian's perseverance is something to strive for.

    • @HDL_CinC_Dragon
      @HDL_CinC_Dragon 7 місяців тому +4

      Regarding being so calm and collected in the videos, I refer to the great Ben Bailey: "That's editing." :D

  • @Barbara_Salesch
    @Barbara_Salesch 7 місяців тому +1415

    "...were designed to meet anticipated needs which never materialized" - i love that sentence

    • @Retucex
      @Retucex 7 місяців тому +21

      It's like the origin story of the YAGNI principle

    • @onlysmiles4949
      @onlysmiles4949 7 місяців тому +123

      Reminds me of a joke I read a while back that was something along the lines of
      "There are 4 competing standards for this system"
      "Hey, what if we created a universal standard that solves all the problems so we don't need to deal with 4 different standards?"
      "There are 5 competing standards for this system"

    • @rustyricotta5216
      @rustyricotta5216 7 місяців тому

      @@onlysmiles4949 classic xkcd 927

    • @melodyecho4156
      @melodyecho4156 7 місяців тому +50

      @@onlysmiles4949That's an XKCD, right?

    • @melodyecho4156
      @melodyecho4156 7 місяців тому +26

      Yup, XKCD #927

  • @CollidaCube
    @CollidaCube 7 місяців тому +26

    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!

  • @wlockuz4467
    @wlockuz4467 7 місяців тому +215

    That explanation of Bezier curves was just genius. You tricked me into learning them, and now I'll never forget about them.

    • @bigpopakap
      @bigpopakap 7 місяців тому +22

      You really should watch Freya's videos about Beziers and splines. The spline one is looooooong, but it's amazing! So beautifully animated and explained.

    • @olivierdulac
      @olivierdulac 7 місяців тому +5

      ​​@@bigpopakapyes, yes, yes, Freya's videos on the subject are incredible

    • @AgentCryo
      @AgentCryo 23 дні тому

      tricked?

  • @bernard-ng
    @bernard-ng 7 місяців тому +7

    Je suis développeur depuis longtemps et franchement les vidéos de Sebastian sont les meilleurs en terme de vulgarisation et exploration

  • @-5urv3y-
    @-5urv3y- 7 місяців тому +223

    After spending a long week focusing on quadratics, I come home for the weekend to unwind to videos containing parabolas.

  • @pesterenan
    @pesterenan 7 місяців тому +9

    That was such an dive into all the intricacies of text! I'm surprised at how many math problems there are to solve just to show letters correctly on screen, that was really nice. Never a dull moment in the video, beautiful and well explained code. Congratulations, Sebastian!

  • @juappdev
    @juappdev 7 місяців тому +205

    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, ...

    • @IceMetalPunk
      @IceMetalPunk 7 місяців тому +12

      Art lead: "Wait, what was that last one?"
      You: "...pixel alignment..."

    • @HalianTheProtogen
      @HalianTheProtogen 7 місяців тому +1

      I wouldn't call those optional myself.

  • @imrlyunoriginal
    @imrlyunoriginal 7 місяців тому +30

    There is exactly one (1) UA-camr who I would watch talk about displaying fonts programmatically for 70 minutes, and thank you for being him

    • @TNH91
      @TNH91 7 місяців тому

      Wait, this was 70 minutes? Where'd the time go?

  • @Gwilo
    @Gwilo 7 місяців тому +350

    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

    • @xandermckay9806
      @xandermckay9806 7 місяців тому +12

      Or just use a library for it

    • @stickguy9109
      @stickguy9109 7 місяців тому +53

      In my extremely crude and basic game engine I just used a spritesheet of ascii letters and called it a day. I never even came close to thinking just how complex it could be to properly render some text. It's one of those things we take so much for granted.

    • @nickpatella1525
      @nickpatella1525 7 місяців тому +81

      step 163. oh no it's patented

    • @Bestmann3n
      @Bestmann3n 7 місяців тому +22

      @@stickguy9109 text rendering is like UI layout/systems. endless rabbit holes that can consume years of your life. the trick is to avoid trying to solve the capital G general problem and instead just do the simplest thing that's good enough and then move on. for most video games simple bitmap fonts are enough and they can be implemented in less than a day

    • @stickguy9109
      @stickguy9109 7 місяців тому +5

      @@Bestmann3n Yeah I agree

  • @oculicious
    @oculicious 7 місяців тому +1463

    A) I hate that math can be patented
    B) I had no idea how much math you had to do for just one letter

    • @WhateverOwO
      @WhateverOwO 7 місяців тому +38

      it's not really math, it's algorithms and algorithms should have the possibility to be patented.

    • @P1XeLIsNotALittleSquare
      @P1XeLIsNotALittleSquare 7 місяців тому +135

      @@WhateverOwO but 20 years is kinda ridiculous

    • @jolkert
      @jolkert 7 місяців тому +228

      ​@@WhateverOwO
      I think most (if not all) things should not be allowed to be patented

    • @defalur
      @defalur 7 місяців тому +213

      @@WhateverOwO To be fair, algorithms are pretty close to being maths, and patenting them can cause issues. For example, the OpenCV developpers had to create a new way to extract and describe points on an image because the state of the art algorithm at the time "SIFT/SURF" are patented. What they came up with "ORB" is pretty good, but not being able to use an algorithm, that you could possibly independently invent in some cases, without having to pay some random guy to use it is quite infuriating.

    • @oculicious
      @oculicious 7 місяців тому +70

      @@WhateverOwO algorithms are just applied mathematics

  • @cybroxde
    @cybroxde 7 місяців тому +368

    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.

    • @cybroxde
      @cybroxde 7 місяців тому

      Paper, in case anyone is interested: DOI:10.1016/j.ifacol.2018.05.092

    • @MauritsWilke
      @MauritsWilke 7 місяців тому +6

      Haha I also thought of that, me and a buddy spent an entire evening thinking of how to solve it. Discord whiteboard feature actually had a use case for once

    • @DerMax2012
      @DerMax2012 7 місяців тому

      There's a super easy point in polygon test algorithm called "pnpoly" (google it), which I used for AoC 😅Only works well for integer coordinates though. Floating point will probably have all the precision issues discussed in the video as well. It might be an idea to convert the coordinates to fixed point but I don't know how well that works together with the bezier stuff...

    • @nomadvagabond1263
      @nomadvagabond1263 7 місяців тому +9

      I remember this shitty ass exercice made me quit the aoc😂

    • @Imperial_Squid
      @Imperial_Squid 7 місяців тому +2

      Haha yeah I remember that exact problem! Took a few goes off running my face into walls to finally encounter every edge case!

  • @meganton9417
    @meganton9417 7 місяців тому +6

    Having heard about Bezier Curves in a lecture and whatched the two videos you mentioned about them, this was at the exact perfect level of still interesting, but not overwhelmingly complex. Great video, as always!

  • @boiimcfacto2364
    @boiimcfacto2364 7 місяців тому +461

    The worst part about watching a Sebastian Lague video: knowing you'll have to wait months for the next one...

    • @Raoul1808.
      @Raoul1808. 7 місяців тому +36

      Honestly I don't mind the downtime, in fact I quite prefer it since it gives him more time to experiment with something and document it in an video in a very entertaining way. This is one of my favourite series on UA-cam.

    • @HDL_CinC_Dragon
      @HDL_CinC_Dragon 7 місяців тому +10

      I think that's the second worst part, rather than the actual worst. I think the actual worst part is that you know the video is going to end.

    • @eestaashottentotti2242
      @eestaashottentotti2242 7 місяців тому

      The most pressing reason for humanity to invent time machine.

    • @almc8445
      @almc8445 6 місяців тому +2

      @@Raoul1808. Yeah I think the point is more it would be amazing if we could have 10/10 quality videos every day of the week - Of course it's just not possible, but a man can dream

  • @fredriks9070
    @fredriks9070 7 місяців тому +1

    I'm continually blown away by the quality and depth of your videos, and your ability to demystify complex topics in such a clear and engaging way!
    I've recently been fascinated by procedural animation, especially after watching David Rosen's GDC talk and his video on the "Gibbon: Beyond the Trees" demo. I remember you used procedural animation for the spiders in one of your earlier Coding Adventures, and I would love to see a standalone video on the subject!

  • @lynnwilliam
    @lynnwilliam 7 місяців тому +29

    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

  • @googleyoutubechannel8554
    @googleyoutubechannel8554 7 місяців тому +4

    The 'twilight zone' cut-away... so good Sebastian, you're moving into 'film maker' level production here you realize...

  • @JensAndree
    @JensAndree 7 місяців тому +56

    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!

    • @shinyhappyrem8728
      @shinyhappyrem8728 7 місяців тому +2

      It's easy to use little-endian in hex dumps, just start rendering from the top right instead of the top left :)

  • @rockyraccoon
    @rockyraccoon 7 місяців тому +4

    I absolutely love your videos. You have an uncanny ability to take almost any topic and make it interesting and entertaining. Thanks for the time and care you put into these videos. I always look forward to them.

  • @jammy_jars
    @jammy_jars 7 місяців тому +77

    Your ability to just jump in to any odd thing and learn is both impressive and inspiring, and your videos are genuinely so much fun to watch, don’t ever stop doing what you do

  • @nuffsaid0
    @nuffsaid0 7 місяців тому +13

    This video is pure art. I can't imagine that if I told anyone that I watched more than an hour long video on rendering fonts with a smile on my face, anyone would believe. But I did.

  • @ValeBridges
    @ValeBridges 7 місяців тому +110

    Only 5 minutes in but I can tell this is a video I'm going to watch and rewatch a hundred times. For one it's a Sebastian Lague video, which are always entertaining and insightful and calming, a combination which I cannot get enough of. Furthermore, the topic of this video seems to cross over with so many other topics which I find fascinating.
    The thumbnail reminded me of Posy's video on segmented displays. The title made me think of Tom7's videos on upper-uppercase and lower-lowercase letters, and the mention of compound glyphs 5 minutes in brings to mind his anaglyphs video. The description mentions Bezier curves which remind me of Freya Holmer's splines video, as well as floating point errors which remind me of, like, the handful of videos on floating point I've watched.

    • @robinhood768
      @robinhood768 7 місяців тому +8

      after reading your comment, I am really looking forward to watching the video.

    • @dpgwalter
      @dpgwalter 7 місяців тому +8

      Some of the best technical UA-cam channels out there in that second paragraph

    • @matt_hart
      @matt_hart 7 місяців тому +6

      i literally know every video you mentioned just by name. we really are all just watching the same videos, aren't we

    • @sponge1234ify
      @sponge1234ify 7 місяців тому +2

      (Tell me if my commented the same thing, it disappeared on my end)
      Then I feel like you'll enjoy Agma Schwa's "Heterography: How to Destroy an Alphabet" video. It's a fun romp on writing system like Tom7's video.

    • @ValeBridges
      @ValeBridges 7 місяців тому +2

      @@sponge1234ify I've seen it before too, lol. I did enjoy it.

  • @Rollmops94
    @Rollmops94 7 місяців тому +1

    Years ago I was writing a 3D engine and thought I‘d quickly write my own font-file-parser. I didn‘t. Really cool to finally see someone explain this whole topic.

  • @garyduell3768
    @garyduell3768 7 місяців тому +38

    I legit laughed at 2 problems for the price of one. It's such a vibe for programming.

  • @FengXingFengXing
    @FengXingFengXing 7 місяців тому +2

    2 OpenType font exist: Truetype and Postscript. Each require diferent table list. This happen because Abode try hide Postscript font format. In Postscript font, glyph data in 'CFF ' table use very clever Type 2 CharString format. Postscript font use order 3 Bezier curve.

  • @jakobwetzel8167
    @jakobwetzel8167 7 місяців тому +77

    1 Hour long Video? LETS GO! Thx Sebastian.

  • @keheck
    @keheck 6 місяців тому +3

    I absolutely love how outside of the main topic of each video they also contain many different "mini lessons". Like at 2:35 it's a mini lesson about checking the endianess of whatever data you're reading, and when you created your "Evil Artifact Detector" at 41:28 it was basically a lesson about Fuzzing, a technique usually used to find security issues in code by basically screaming random data at that code and seeing if any unexpected behavior crops up, which is very similar to the debugging method you used: throw a bunch of pixels at your algorithm and see where incorrect values are returned.
    These mini lessons are in part what make these videos so rewatchable in my opinion. They don't just cover all the things directly related to the project, you aren't afraid of going on tangents to document your journey through a very tough issue and how you ultimately solved it

  • @PaulSpades
    @PaulSpades 7 місяців тому +28

    As an amateur type designer, you definitely made the right choices of what to fix.
    Overlapping shapes are used in designing type, but not always compiled as such (I think most software can do a vector union for each glyph, but it might be avoided because of compound glyphs). Self intersections just can't be avoided in some designs, but they can be minimised. If you're working with lots of auto-generated weights, you can easily miss some.
    And a font that doesn't use the winding direction correctly does not deserve to be displayed.
    Unsurprisingly, you had to re-implement the entire postscript rendering algorithm to get at the end of the video.
    If I was to go so far, I'd simplify all curves to a quad or pentagon and say it was the fastest text renderer in the universe (*that avoids the pesky patents).

  • @dahahaka
    @dahahaka 6 місяців тому +1

    Nice to see you shouting out Freya's incredible video on Béziers, it's such an incredibly well done explanation and visualization :)

  • @hmmmmm8716
    @hmmmmm8716 7 місяців тому +8

    omg, I've been following sebastian for so long see him post is about as rare and rewarding as a solar eclipse, just a couple of days ago I was rewatching his ants and slime simulation video and thought I'd try to do the ant colony optimisation in javascript and it took me a couple of days but I got it done, now working on porting it to C# in Unity to see how much faster it is, thank you for inspiring all of us Sebastian, your adventures pave the way for our own adventures too, hope you're doing well!

  • @opitopit2105
    @opitopit2105 7 місяців тому +5

    I've started a text rendering project just the last week or two and now I see that this legend has uploaded a video on the exact same topic. How is this even possible?

  • @cerealkeepsyougoingeveryda555
    @cerealkeepsyougoingeveryda555 7 місяців тому +47

    THE KING IS BACK!
    Though on a more serious note, Sebastian Lague has inspired me to pursue my deepest questions and go hands-on to understand things fully. Thanks Sebastian Lague!

  • @minecrafter0505
    @minecrafter0505 7 місяців тому +5

    I was not expecting one of your videos covering dynamic unit testing as well as this one. Section "0:41:22 The Evil Artifact Detector" is great at communicating the concept and the benefit it can bring at scale.

  • @Blananas2
    @Blananas2 7 місяців тому +5

    Watching experts at work is always insightful; incredible work as always!

  • @janhrubec7643
    @janhrubec7643 7 місяців тому +1

    Love your videos. Really amazing work, they are really calming and peaceful and you always get to learn about a new and interesting topic.

  • @yousorooo
    @yousorooo 7 місяців тому +9

    I love how in depth this video is. It’s even more in depth than my college courses. Rasterization is usually very brief without going into all the edge cases.

  • @1ups_15
    @1ups_15 4 місяці тому +1

    the curve rendering technique with that shader trick is SO smart, I would've absolutely never thought about that

  • @thatprogramer
    @thatprogramer 7 місяців тому +7

    I can't Believe i can read the intro text truly mind blowing how good our brains recognize patterns
    Im pretty sure the text reads "Coding adventures Rendering Text."

    • @AttyPatty3
      @AttyPatty3 7 місяців тому

      Well I mean, it was obvious that's what it said

  • @kaz49
    @kaz49 6 місяців тому +1

    I know I'll stop understanding about halfway through but I still watch because it's fascinating

  • @kytowhd
    @kytowhd 7 місяців тому +674

    2 minutes into the video and i'm already completely lost😭

    • @_EasyOnEasy_
      @_EasyOnEasy_ 7 місяців тому +22

      You made it that long!?!

    • @PatrickHoodDaniel
      @PatrickHoodDaniel 7 місяців тому +32

      2 minutes into this video and I am hooked! Love this stuff!

    • @MatthewHolevinski
      @MatthewHolevinski 7 місяців тому +29

      People have been struggling with the 'font' rabbit holes for 40 years, you're in good company.

    • @patman326
      @patman326 7 місяців тому +33

      If you're lost have you tried locating your current position by mapping it against a table of known dispositions and then feed that through an imposition formula?

    • @backslash057
      @backslash057 7 місяців тому +3

      I'm lost since 0:48

  • @whynotcode
    @whynotcode 7 місяців тому +1

    This brought back memories. Back in the day there used to be a standard called OpenVG that was supposed to accelerate font rendering using dedicated hardware… it ended up being deprecated because OpenGL ES ended being faster and it wasn’t worth the space on the chip. I love the ambition of your projects and the polish of your videos. I feel like my videos take so long to make so yours must be a full time job 😅

  • @SongStudios
    @SongStudios 7 місяців тому +35

    Another Sebastian video, i am so excited!

    • @EGeorgev
      @EGeorgev 7 місяців тому

      And I just can't hide it.

  • @BritleFoot
    @BritleFoot 7 місяців тому +2

    Thank you Sebastian! You’ve tough me to never give up on the hard things in life.
    So inspiring how you fought this glitches in text

  • @Artentus
    @Artentus 7 місяців тому +29

    The multi-channel SDF you mentioned is my favorite text rendering method so far. It looks really good except for very small text when strokes become thinner than one pixel. Its main advantage is that it is extremely fast.

    • @krytharn
      @krytharn 7 місяців тому +1

      It's a nice trick, I agree, but memory hungry and nowhere near pixel perfect. If, like me, you work with designers who can see your text is one pixel too far to the right, the technique Sebastian is explaining here is far superior.

    • @shinyhappyrem8728
      @shinyhappyrem8728 7 місяців тому +1

      @@krytharn: "designers who can see your text is one pixel too far to the right" - even at 4k?

    • @caerphoto
      @caerphoto 7 місяців тому

      @@shinyhappyrem8728 on a big enough screen, sure :D

    • @krytharn
      @krytharn 7 місяців тому +1

      @@shinyhappyrem8728 Even at 10K :) They are there and somehow they're the kind I usually work with. Every little detail counts for them. But don't get me wrong: multi-channel SDF is a great replacement for the old bitmapped text.

  • @borisjake2
    @borisjake2 7 місяців тому +1

    I love that you used the code you'd written to make the whacky ending. Every one of your videos is mesmerising, and I love hearing you how you tackle each problem and come up with solutions.

  • @tvhead625
    @tvhead625 7 місяців тому +57

    1:09:59 "Graphic design is my passion" that took me so off guard LOL

  • @apefu
    @apefu 7 місяців тому +1

    I made the same journey many years back having grown tired of bitmapped fonts. Implementing it was so enjoyable.

  • @AlexStrook
    @AlexStrook 7 місяців тому +35

    this was so funny:
    Screen is on fire and
    "Let's start with the most serious issue first: Getting rid of that weird line"

  • @levihenze9297
    @levihenze9297 7 місяців тому

    You always tell your stories as if we’re stumbling along with you, but in reality you put tremendous effort into visualising and explaining what you learnt along the way. It’s so meticulously crafted every time - brilliant.

  • @ericlengyel
    @ericlengyel 7 місяців тому +4

    I have some additional notes:
    * You talked about minified text looking bad. The main reason for this is the lack of dynamic dilation of the bounding polygon. You need to expand the boundary by half a pixel to ensure that the pixel shader is run for every pixel that is partially covered even a tiny bit. This can be done in the vertex shader given the current MVP matrix and viewport dimensions, but it's tricky. Without dilation, there are often pixels that are as much as 50% covered getting skipped during rasterization because the actual centers of the pixels fall outside the polygon being rendered.
    * You mentioned the use of multiple rays, as used by the Dobbie method, to perform antialiasing. It turns out that only two are necessary, a horizontal ray and a vertical ray, and these can be combined using a specially weighted average to accomplish nice antialiasing. Supersampling is a bad idea due to the limited number of samples and the horrible effect on performance.
    * A neat property of the quadratic formula of which most people seem to be unaware is that choosing the plus sign always gives you the root for which the derivative of the quadratic polynomial is positive, and choosing the minus sign always gives you the root for which the derivative is negative. It is never necessary to actually compute the derivative to determine which way a quadratic Bézier curve crosses a ray.
    * The banding technique you mentioned near the end of the video is described in the Slug paper. Listing only the Bézier curves that intersect each band, leaving out those parallel to the band, achieves a massive performance boost. Sorting the curves by their largest coordinate in the band direction doubles the speed by providing early-out opportunities. The Slug paper mentioned split bands in which a ray goes one direction or the opposite depending on where the pixel being rendered in located, but I have since determined that it's not worth the trouble and extra storage cost.
    * The Dobbie method divides a glyph into a grid instead of bands, where the idea is that there would be fewer curves to check in a grid square than an entire band. However, this approach fails pretty badly because the pixel footprint can become arbitrarily large at small text sizes, and extra (janky and slow) code and data needs to be added to account for multiple grid square being covered. Bands extending both directions without bound do not suffer from this problem.

  • @the-pink-hacker
    @the-pink-hacker 7 місяців тому

    I've been watching your videos for years now and it feels like every time I watch one of your videos I actually learn something. Recently, I came into an issue about doing point-rectangle collisions at arbitrary angles. This video has given me so much inspiration on how to tackle this daunting issue. Thank you so much for all the years of inspiration and motivation down my path into computer science. I wouldn't be nearly as far as I am today without you.

  • @MagicPixel
    @MagicPixel 7 місяців тому +6

    Sebastian, you have to make a video about how you make all these animations, especially the 2D ones. They are beautiful!
    This one was great, as always!

    • @pfqniet
      @pfqniet 7 місяців тому +3

      He's actually covered this! Check out the video "Answering Your Questions" where he does a really nice breakdown of how he makes his animations :)

    • @MagicPixel
      @MagicPixel 7 місяців тому

      @@pfqniet Cool, thank you!

  • @dexterman6361
    @dexterman6361 7 місяців тому +1

    1h video from the dude who makes me want to continue and try at look and remember the fun parts of my programming journey and pushes me to learn and get better and keep enjoying things? I don't need sleep I need video!
    Sometimes it just takes another to show you how to recognize the parts of your life that you do get some fun from. I sometimes forget those parts and get lost in the everyday droning. I mean, don't get me wrong, rent and expenses these days make me think there is no future, but hey doesn't mean I have to stop and ignore the fun I may have along the way to doom right :)
    Thank you! I genuinely love watching your videos and trying to make the best of the time when I program, and try to better my skills at it. You sir, are really wholesome. God speed. I hope only good things come your way.

  • @verdantblast
    @verdantblast 7 місяців тому +12

    When I saw the title, I didn't pay attention to the length of the video until I found out that he really planned to start talking about parsing file formats.
    More than an hour!

  • @IgorStojkovic
    @IgorStojkovic 7 місяців тому +2

    My God man! This is the best educational video I have ever seen! I can't imagine how much time you needed to study all those papers, find what is patented, implement everything and then on top of it all make such an amazing video about the whole thing. You just instantly got one more supporter. Keep up the great work!

  • @chewico3d133
    @chewico3d133 7 місяців тому +69

    A yes, the worst nightmare of Rendering.

    • @MichaelPohoreski
      @MichaelPohoreski 7 місяців тому +25

      The banes of graphics programming:
      * floating-point precision
      * transparency (mostly solved with OIT)

  • @JakeND
    @JakeND 7 місяців тому

    You are one of the very few people who can get away with sounding happy when you talk without sounding annoying

  • @chris.hinsley
    @chris.hinsley 7 місяців тому +9

    Sebastian, a lot of games these days use the concept of signed distance fields and have a pixel shader do an alpha plot based on the distance from the text vectors. That might be an interesting one to have a go at once you’ve extracted all of the paths. Probably a good starting point for that one is a line draw routine that uses a pixel shader !

    • @MichaelPohoreski
      @MichaelPohoreski 7 місяців тому +4

      I have a simple demo on ShaderToy: _Font: Bitmap vs SDF_ that showcases the difference.

    • @chris.hinsley
      @chris.hinsley 7 місяців тому +1

      @@MichaelPohoreski Shadertoy is another wonderful resource for folks.

    • @universaltoons
      @universaltoons 7 місяців тому +2

      he said it in the video

  • @krytharn
    @krytharn 7 місяців тому +1

    My favorite subject covered by my favorite UA-camr! I have dabbled with text rendering for months and I was familiar with much of what you do here, but I still learned new stuff.
    One thing to note is the pesky J that refuses to behave: the reason it probably cones out right when rendered by an OS, is that it probably just uses even-odd rendering: a pixel is drawn if it is inside an odd number of contours. What you do here is called non-zero rendering, where you count up if the contour is CW and down if CCW. There should be a flag in the font data telling you which method to use.

  • @marksmithcollins
    @marksmithcollins 7 місяців тому +5

    A seriously long and detailed research about various techniques

  • @mint4up2zio3
    @mint4up2zio3 3 місяці тому

    As a software engineer who tries to keep up with the business requirements of clients, this video is so calming. You take these ideas, and truly make an adventure out of them, carefully going through hours of R&D and being rewarded with utmost satisfaction. Something I wish I could do. Your videos are honestly so beautiful. Thank you

  • @lucasmontec
    @lucasmontec 7 місяців тому +126

    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.

    • @commonsenseisnowheretobefo8434
      @commonsenseisnowheretobefo8434 7 місяців тому +9

      Said like that i do agree. Like patenting how to solve an equation xD

    • @btodoroff
      @btodoroff 5 місяців тому

      There are a lot of stupid software patents, but this isn't a good example. When published, this was a new and novel reduction to practice for how to efficiently render smooth curves. They taught others how to do something new. Finding a more efficient way to multiply in a circuit and teaching others would also be a highly valuable new knowledge that would deserve the reward of an exclusive period for sharing the knowledge so others could build on it.

    • @Howtheheckarehandleswit
      @Howtheheckarehandleswit 4 місяці тому +11

      ​@btodoroff Speaking as someone who writes a lot of shaders: actually, this technique of drawing a triangle with the control points and discarding in the fragment shader is BY FAR the most obvious way to render filled bezier splines on programmable graphics hardware. Nearly every single person who tries to render text without looking up a tutorial ends up reinventing this exact technique immediately, because it is so completely fitting and natural to the way a GPU works.

  • @LasseVågsætherKarlsen
    @LasseVågsætherKarlsen 7 місяців тому +1

    Your channel is one of two, Freya Holmer is the second one, where I have enabled notifications for new videos. The content you bring is always enjoyable and full of knowledge.

  • @aleksszukovskis2074
    @aleksszukovskis2074 7 місяців тому +6

    hell, yeah! this is gonna be awesome

  • @JayFolipurba
    @JayFolipurba 7 місяців тому

    Really makes you appreciate how much work from both people and computers went into something so ubiquitous as rendering text to the screen. I mean it's just happening trillions of times a second all around the world and we don't even bat an eye

  • @AMTunLimited
    @AMTunLimited 7 місяців тому +4

    Awesome shout-out for Freya's videos. I feel like those two videos alone could kick off a graphic programming career, absolutely in awe

  • @asherhaun
    @asherhaun 7 місяців тому +1

    This is awesome! I remember experimenting with text rendering (only using bitmap rendering) and it was quite a rabbit hole with very little simple documentation. It was so satisfying to finally see hello world rendering in a window. As always, the explanation in this video is excellent.

  • @aviinl1
    @aviinl1 7 місяців тому +1582

    patents on algorithms should be illegal.

    • @EliasWolfy
      @EliasWolfy 7 місяців тому +128

      yes, this is very annoying, the person who does this has no heart.

    • @L1Q
      @L1Q 7 місяців тому +282

      How it is even feasible to not trip on a patent? Just derive a quadratic bezier based algorithm and Microsoft is at your doors? Makes no sense.

    • @TheKhalamar
      @TheKhalamar 7 місяців тому +146

      Many companies file patents defensively. Not to prevent others from using the algorithm, but to prevent trolls from preventing them from using it.

    • @pernilsson9493
      @pernilsson9493 7 місяців тому +56

      Shouldn’t then other patents, like those of for example manufacturing processes also be illegal? After all, both are just sets of instructions of how to achieve something?

    • @iago1840
      @iago1840 7 місяців тому +95

      Patents, in any possible scenario and case, should be illegal. Intellectual Property is something that absolutely doesn't exist on reality, makes no sense.

  • @richardmeyer418
    @richardmeyer418 7 місяців тому +1

    Thank you for your videos. I learn something with each one, and contrary to some other channels, I can watch and listen for hours without irritation. You have the best voice ever for presenting.
    I know others have said similar things, but I'm saying it again - you hear that, YT algorithm?

  • @awdk7994
    @awdk7994 7 місяців тому +43

    FREEDOM VECTOR RAHHHHH
    🦅🦅🦅🦅🦅🦅🦅🦅

    • @Giguv05
      @Giguv05 7 місяців тому +4

      LOL

    • @nullFoo
      @nullFoo 7 місяців тому +5

      The magnitude of this vector can only be measured in feet and inches, no metric allowed

    • @mr.hashundredsofprivatepla3711
      @mr.hashundredsofprivatepla3711 5 місяців тому

      WHAT THE FUCK IS A FLOAT3🇺🇸🇺🇸🇺🇸🇺🇸🦅🦅🦅🦅🦅

  • @QuintusCunctator
    @QuintusCunctator 7 місяців тому +1

    This is an amazing demonstration of emerging complexity from simple-ish problems. Thanks!

  • @ryderthefirst5023
    @ryderthefirst5023 7 місяців тому +75

    Uploading an hour long video at my local 4am is cruelty 😢

    • @germanminer1276
      @germanminer1276 7 місяців тому +3

      For real, I needa sleep but new vid can't miss

    • @WangleLine
      @WangleLine 7 місяців тому +10

      You'll have something nice to wake up to tomorrow!

    • @GeorgeSukFuk
      @GeorgeSukFuk 7 місяців тому

      Get your ass up

    • @xandermckay9806
      @xandermckay9806 7 місяців тому +1

      For me, 7 AM. Lemme guess… You live 3 timezones away from me, so Mountain time?

    • @jonaut5705
      @jonaut5705 7 місяців тому

      @@WangleLine sleep can wait, this video cannot

  • @user-oh6uw9mu9u
    @user-oh6uw9mu9u 7 місяців тому +1

    This might be my new favorite video of yours. Yes, watching chess or video game development is more "exciting", but exploring one of the oldest features of computers that we still use every single day is so interesting! I never would have guessed just how complex and smart font rendering is. I've noticed the colorful edges around text before but never looked up what it was for, so the sub-pixel AA explanation was appreciated too!

  • @angelcaru
    @angelcaru 7 місяців тому +8

    Bytecode instructions? HOW DID NOONE TELL ME FONTS ARE A PROGRAMMING LANGUAGE??????

    • @DogsRNice
      @DogsRNice 6 місяців тому

      How long until someone makes a playable doom font

  • @omkarbhale442
    @omkarbhale442 7 місяців тому +2

    When I saw your video, I shouted "YES" a few times and my friend was staring at me. Brother I dream of becoming a programmer as skilled as you.

  • @ninjacodertech
    @ninjacodertech 7 місяців тому +16

    "16-bit f words"

  • @monx
    @monx 3 місяці тому

    it's one thing to debug all these issues, but quite another to thoroughly document and demonstrate them and produce a compelling video. 10x the effort

  • @benjoe1993
    @benjoe1993 7 місяців тому +5

    Hearing that a simple method of rendering text using basic math is patented by someone made me unreasonably angry.

  • @FriedMonkey362
    @FriedMonkey362 7 місяців тому +1

    I know this is probably really bad for the UA-cam algorithm, but this video is probably really good so im going to save it for when im on vacation traveling

  • @pug_gamer137
    @pug_gamer137 6 місяців тому +6

    On the microsoft patent mentioned: patenting an algorithm does nothing actually prevent others from using it, only from profiting off of it, namely by competing with the owner of the patent. The ad sense profits from this video would not be in violation of the microsoft patent, to the best of my (not a lawyer) knowledge, as you are not competing with microsoft in any significant way.

  • @julienblais4592
    @julienblais4592 6 місяців тому

    This sums up a lot of what software development is: the hunches, the "good enough solution for now", the floating point shenanigans, the debug tools, the tests suite. This is a fantastic video, thanks!

  • @akashossain8468
    @akashossain8468 7 місяців тому +8

    I don't know why am watching this but I know this does not fit into my brain.

  • @cruisecontrol1489
    @cruisecontrol1489 7 місяців тому

    Amount of work you put into visualizing the concepts is truly colossal. Your tenacious problem-solving approach is truly awe-inspiring.

  • @trashtrash2169
    @trashtrash2169 7 місяців тому

    I could never understand how bezier curves work, but your 30 second explanation made it completely understandable. No clue why nobody could seem to do that. I only ever found walls of text that didn't seem to help ever after reading it all multiple times. Thanks!

  • @mopthet0p
    @mopthet0p 7 місяців тому

    i went to uni for cs but eventually ended up dropping out after a few years. im unlikely to really dabble in programming, much less font rendering any time soon, but youve kept my interests alive and i honestly couldnt be more grateful. every deep dive youve posted on these seemingly niche areas find their implementations in other projects and that continuity youve established with all of your code was what drew me to cs in the first place. youre comedic, concise but thorough, and really really good at editing ideas that are otherwise difficult to visualize. i dont leave comments too often but thought i needed to appreciate the content youve created for us

  • @Beatsbasteln
    @Beatsbasteln 7 місяців тому +1

    man, I love watching you solve things in code, but I am soooo glad that I don't have to encode fonts myself. it's a lot of very needed, but also very already-solved stuff

  • @realishak
    @realishak 7 місяців тому

    Wow the amount of work in these videos.. just wow. I just recently started dealing with text rendering and this video is just on another level....

  • @chaumas
    @chaumas 7 місяців тому

    I think you can count the number of people in the world who can make programming videos at this depth engaging on at most two hands, and the number who can do so on a 70 minute video like this might be down to one finger. It didn’t even matter that 90% of this material was firmly in my wheelhouse - I just had fun predicting what the next step would be, and then finding out about a few techniques I’d never heard of. Please never stop.

  • @AcoriSage
    @AcoriSage 5 місяців тому

    I immediately guessed that the ray clipping corners would probably cause problems, so it was kind of fun to see so much of the video go on to be about the ray clipping corners (and other intersections) causing problems

  • @Thecoolbigbear
    @Thecoolbigbear 7 місяців тому

    Your bezier curves plugin helped me immensely when writing my bachelor dissertation. Funny thing is I never knew you created that plugin until years after completing my bachelors. Thank you so much! As someone else said in the comments, you are the Bob Ross of programming. I understand probably 10% and love when you show your own bugs. Please keep doing what you're doing!

  • @thecodewarrior7925
    @thecodewarrior7925 7 місяців тому +2

    As someone who has written a typesetter, it seems very up your alley! I would love to see how you approach it and I think it’s a fascinating topic to dig into.
    Like font rendering, at its basic level it’s not *that* complex, you’ve already done the most basic advance width implementation, but as you start handling more complex mechanics it has almost limitless depth.

    • @lifthras11r
      @lifthras11r 7 місяців тому +1

      Indeed! As who have once designed a sizable font from the scratch---writing my own font file writer in progress---, it is really, _really_ complex if you want to cover them all.
      For example, even a basic font rendering needs *two* completely different outline formats (TrueType vs. CFF) due to the historical reason. This video implements only TrueType outlines, which cover more than 90% of all fonts in my experience, but a significant portion of (expensive) commercial fonts exclusively use CFF instead---such fonts can't use a typical `.ttf` extension however. And CFF is way more annoying to implement because it is an encoding for a specific subset of PostScript language...

  • @rainrope5069
    @rainrope5069 7 місяців тому

    this video was amazing. I really loved how this project combined so many different topics- parsing binary files, rendering, and a lot of math and problem solving. I really like how you showed the failures and how many different iterations and approaches the rendering piece went through. Fantastic video and project!

  • @BradenBest
    @BradenBest 7 місяців тому

    Your explanation of bezier curves is the first explanation to actually get me to understand bezier curves. And all you had to do was explain it in terms of lerp.