Coding Adventure: Rendering Text

  Переглядів 479,121

Sebastian Lague

Sebastian Lague

День тому

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-Rend...
If you'd like to support my work (and get early access to new projects) you can do so here:
/ sebastianlague
ko-fi.com/sebastianlague
Resources:
developer.apple.com/fonts/Tru...
www.microsoft.com/en-us/resea...
wdobbie.com/post/gpu-text-ren...
Font and Music Credits:
github.com/SebLague/Misc-Proj...
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

КОМЕНТАРІ: 1 300
@IngieKerr
@IngieKerr 16 днів тому
As per the old traditions of typesetting, fonts come in three cases; upper-case, lower-case, and edge-case.
@th1v5
@th1v5 16 днів тому
you won the comment section, good job
@RamoFX
@RamoFX 16 днів тому
Underrated!
@ThisUsernameSystemF-ckingSucks
@ThisUsernameSystemF-ckingSucks 15 днів тому
I be edging to this comment frfr
@nicks4727
@nicks4727 15 днів тому
This might just be the perfect comment for this video
@ICanDoThatToo2
@ICanDoThatToo2 15 днів тому
And all of them stored in a type case.
@oculicious
@oculicious 16 днів тому
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 15 днів тому
it's not really math, it's algorithms and algorithms should have the possibility to be patented.
@P1XeLIsNotALittleSquare
@P1XeLIsNotALittleSquare 15 днів тому
@@WhateverOwO but 20 years is kinda ridiculous
@jolkert
@jolkert 15 днів тому
​@@WhateverOwO I think most (if not all) things should not be allowed to be patented
@defalur
@defalur 15 днів тому
@@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 15 днів тому
@@WhateverOwO algorithms are just applied mathematics
@Barbara_Salesch
@Barbara_Salesch 16 днів тому
"...were designed to meet anticipated needs which never materialized" - i love that sentence
@Retucex
@Retucex 15 днів тому
It's like the origin story of the YAGNI principle
@onlysmiles4949
@onlysmiles4949 15 днів тому
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 15 днів тому
@@onlysmiles4949 classic xkcd 927
@melodyecho4156
@melodyecho4156 15 днів тому
@@onlysmiles4949That's an XKCD, right?
@melodyecho4156
@melodyecho4156 15 днів тому
Yup, XKCD #927
@boiimcfacto2364
@boiimcfacto2364 16 днів тому
The worst part about watching a Sebastian Lague video: knowing you'll have to wait months for the next one...
@Raoul1808.
@Raoul1808. 15 днів тому
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 UKposts.
@HDL_CinC_Dragon
@HDL_CinC_Dragon 13 днів тому
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 5 днів тому
The most pressing reason for humanity to invent time machine.
@chadbramwell977
@chadbramwell977 16 днів тому
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!
@toeb.
@toeb. 16 днів тому
15 hours ago. what
@user-iv8ii7xh5e
@user-iv8ii7xh5e 16 днів тому
​@@toeb. bro is ahead of times💀
@nrnjn8547
@nrnjn8547 16 днів тому
Probably unprivated later
@Xyz-tw8ym
@Xyz-tw8ym 16 днів тому
Yupp. That's what I was thinking 😂​@@toeb.
@Moe5Tavern
@Moe5Tavern 16 днів тому
Sebastian please make a video explaining how you can code a time travel machine in C++ thanks
@wlockuz4467
@wlockuz4467 16 днів тому
You're the Bob Ross of programming. Your videos are so relaxing to watch, the learning is just an added bonus.
@epiklizard6629
@epiklizard6629 16 днів тому
Was thinking of making this exact comment. Cheers!
@TracyNorrell
@TracyNorrell 16 днів тому
"here we have some happy little bezier curves"
@Anonymous-fr2op
@Anonymous-fr2op 16 днів тому
​@@TracyNorrellhonestly, he is the calmest soul ever, at least imo. And this guy follows him closely. Absolute joy to follow along
@francknouyrigat9809
@francknouyrigat9809 16 днів тому
Hahaha true that
@voxsideres
@voxsideres 16 днів тому
I want to like your comment, but I don't want to be the one to take away 420 likes, so here you go 👍
@Gwilo
@Gwilo 16 днів тому
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 16 днів тому
Or just use a library for it
@stickguy9109
@stickguy9109 16 днів тому
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 16 днів тому
step 163. oh no it's patented
@Bestmann3n
@Bestmann3n 16 днів тому
@@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 16 днів тому
@@Bestmann3n Yeah I agree
@-5urv3y-
@-5urv3y- 16 днів тому
After spending a long week focusing on quadratics, I come home for the weekend to unwind to videos containing parabolas.
@artemonstrick
@artemonstrick 16 днів тому
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 16 днів тому
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 16 днів тому
horrors beyond comprehension
@unknownname3703
@unknownname3703 16 днів тому
@@David-um8tb software patents are evil
@CatDevz
@CatDevz 15 днів тому
@@unknownname3703 patents are evil
@leftward_hoe
@leftward_hoe 15 днів тому
@@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
@wlockuz4467
@wlockuz4467 16 днів тому
That explanation of Bezier curves was just genius. You tricked me into learning them, and now I'll never forget about them.
@bigpopakap
@bigpopakap 13 днів тому
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 11 днів тому
​​@@bigpopakapyes, yes, yes, Freya's videos on the subject are incredible
@stickguy9109
@stickguy9109 16 днів тому
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 3 дні тому
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 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 2 дні тому
​​@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
@vladchira521
@vladchira521 16 днів тому
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 14 днів тому
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 13 днів тому
Regarding being so calm and collected in the videos, I refer to the great Ben Bailey: "That's editing." :D
@cybroxde
@cybroxde 16 днів тому
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 16 днів тому
Paper, in case anyone is interested: DOI:10.1016/j.ifacol.2018.05.092
@MauritsWilke
@MauritsWilke 16 днів тому
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 16 днів тому
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 16 днів тому
I remember this shitty ass exercice made me quit the aoc😂
@Imperial_Squid
@Imperial_Squid 16 днів тому
Haha yeah I remember that exact problem! Took a few goes off running my face into walls to finally encounter every edge case!
@juappdev
@juappdev 16 днів тому
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 15 днів тому
Art lead: "Wait, what was that last one?" You: "...pixel alignment..."
@HalianTheProtogen
@HalianTheProtogen 6 днів тому
I wouldn't call those optional myself.
@JensAndree
@JensAndree 16 днів тому
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 13 днів тому
It's easy to use little-endian in hex dumps, just start rendering from the top right instead of the top left :)
@oivinf
@oivinf 12 днів тому
Without infringing on a patent, not breaking copyright :) And luckily at least the first patent he mentions seems to have just a year or so left on its term, so we get to use it soon anyway!
@garyduell3768
@garyduell3768 16 днів тому
I legit laughed at 2 problems for the price of one. It's such a vibe for programming.
@TinyDeskEngineer
@TinyDeskEngineer 8 днів тому
As soon as you said "The Beauty of Bezier Curves" I knew _exactly_ what was coming.
@ValeBridges
@ValeBridges 16 днів тому
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 16 днів тому
after reading your comment, I am really looking forward to watching the video.
@dpgwalter
@dpgwalter 16 днів тому
Some of the best technical UKposts channels out there in that second paragraph
@matt_hart
@matt_hart 15 днів тому
i literally know every video you mentioned just by name. we really are all just watching the same videos, aren't we
@sponge1234ify
@sponge1234ify 12 днів тому
(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 12 днів тому
@@sponge1234ify I've seen it before too, lol. I did enjoy it.
@aviinl1
@aviinl1 16 днів тому
patents on algorithms should be illegal.
@EliasWolfy
@EliasWolfy 12 днів тому
yes, this is very annoying, the person who does this has no heart.
@L1Q
@L1Q 12 днів тому
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 11 днів тому
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 10 днів тому
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 10 днів тому
Patents, in any possible scenario and case, should be illegal. Intellectual Property is something that absolutely doesn't exist on reality, makes no sense.
@photon6802
@photon6802 12 днів тому
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.
@jammyfonx
@jammyfonx 16 днів тому
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
@TheIncredibleAverage
@TheIncredibleAverage 15 днів тому
Yes reading the docs and researching doesn't occur to most modern programmers
@kytowhd
@kytowhd 16 днів тому
2 minutes into the video and i'm already completely lost😭
@_EasyOnEasy_
@_EasyOnEasy_ 16 днів тому
You made it that long!?!
@PatrickHoodDaniel
@PatrickHoodDaniel 16 днів тому
2 minutes into this video and I am hooked! Love this stuff!
@MatthewHolevinski
@MatthewHolevinski 16 днів тому
People have been struggling with the 'font' rabbit holes for 40 years, you're in good company.
@patman326
@patman326 16 днів тому
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 16 днів тому
I'm lost since 0:48
@PaulSpades
@PaulSpades 16 днів тому
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).
@lynnwilliam
@lynnwilliam 16 днів тому
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
@chewico3d133
@chewico3d133 16 днів тому
A yes, the worst nightmare of Rendering.
@MichaelPohoreski
@MichaelPohoreski 16 днів тому
The banes of graphics programming: * floating-point precision * transparency (mostly solved with OIT)
@tvhead625
@tvhead625 15 днів тому
1:09:59 "Graphic design is my passion" that took me so off guard LOL
@CollidaCube
@CollidaCube 16 днів тому
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!
@googleyoutubechannel8554
@googleyoutubechannel8554 13 днів тому
The 'twilight zone' cut-away... so good Sebastian, you're moving into 'film maker' level production here you realize...
@jakobwetzel8167
@jakobwetzel8167 16 днів тому
1 Hour long Video? LETS GO! Thx Sebastian.
@minecrafter0505
@minecrafter0505 12 днів тому
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.
@lucasmontec
@lucasmontec 15 днів тому
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 11 днів тому
Said like that i do agree. Like patenting how to solve an equation xD
@imrlyunoriginal
@imrlyunoriginal 14 днів тому
There is exactly one (1) UKpostsr who I would watch talk about displaying fonts programmatically for 70 minutes, and thank you for being him
@TNH91
@TNH91 13 днів тому
Wait, this was 70 minutes? Where'd the time go?
@cerealkeepsyougoingeveryda555
@cerealkeepsyougoingeveryda555 16 днів тому
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!
@mariaaryasophie9024
@mariaaryasophie9024 16 днів тому
YEAH HE IS BACK
@SongStudios
@SongStudios 16 днів тому
Another Sebastian video, i am so excited!
@EGeorgev
@EGeorgev 13 днів тому
And I just can't hide it.
@pesterenan
@pesterenan 16 днів тому
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!
@kaz49
@kaz49 День тому
I know I'll stop understanding about halfway through but I still watch because it's fascinating
@hmmmmm8716
@hmmmmm8716 16 днів тому
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!
@Artentus
@Artentus 16 днів тому
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 15 днів тому
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 13 днів тому
@@krytharn: "designers who can see your text is one pixel too far to the right" - even at 4k?
@caerphoto
@caerphoto 13 днів тому
@@shinyhappyrem8728 on a big enough screen, sure :D
@krytharn
@krytharn 13 днів тому
@@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.
@DanielNetSet
@DanielNetSet 4 дні тому
From 7k errors to 0. I admire your problem solving determination and skills❤
@whynotcode
@whynotcode 13 днів тому
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 😅
@bullshitman155
@bullshitman155 13 днів тому
Never imagined i'd watch a 1hr video on text rendering, but,, i guess here we are
@meganton9417
@meganton9417 16 днів тому
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!
@AlexStrook
@AlexStrook 6 днів тому
this was so funny: Screen is on fire and "Let's start with the most serious issue first: Getting rid of that weird line"
@julienblais4592
@julienblais4592 2 дні тому
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!
@Blananas2
@Blananas2 16 днів тому
Watching experts at work is always insightful; incredible work as always!
@opitopit2105
@opitopit2105 16 днів тому
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?
@shinyhappyrem8728
@shinyhappyrem8728 13 днів тому
see Birthday Paradox
@jeanmeurice2584
@jeanmeurice2584 12 днів тому
There is an interesting property of Bézier curves that makes splitting them at a point actually easier than expected (compared to what is done here in the curve splitting section). It is called "de Casteljau" subdivision. The new anchor point that lies on the line between the original anchor points of the curve is actually the linear interpolation with the same 't' as the splitting point. This can be visualized in your animation in "Bézier basics" where you show the interpolation line. We search the intersection between the tangent at the splitting point and the anchor line. The tangent is exactly the interpolation line.
@bernard-ng
@bernard-ng 13 днів тому
Je suis développeur depuis longtemps et franchement les vidéos de Sebastian sont les meilleurs en terme de vulgarisation et exploration
@thatprogramer
@thatprogramer 16 днів тому
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 16 днів тому
Well I mean, it was obvious that's what it said
@nuffsaid0
@nuffsaid0 16 днів тому
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.
@thecodewarrior7925
@thecodewarrior7925 15 днів тому
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 15 днів тому
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...
@fredriks9070
@fredriks9070 14 днів тому
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!
@rockyraccoon
@rockyraccoon 16 днів тому
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.
@MagicPixel
@MagicPixel 16 днів тому
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 16 днів тому
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 15 днів тому
@@pfqniet Cool, thank you!
@BritleFoot
@BritleFoot 8 днів тому
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
@WannaComment2
@WannaComment2 16 днів тому
35:19 lol I love how you sold that joke with the visuals
@chris.hinsley
@chris.hinsley 16 днів тому
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 16 днів тому
I have a simple demo on ShaderToy: _Font: Bitmap vs SDF_ that showcases the difference.
@chris.hinsley
@chris.hinsley 16 днів тому
@@MichaelPohoreski Shadertoy is another wonderful resource for folks.
@universaltoons
@universaltoons 15 днів тому
he said it in the video
@mebamme
@mebamme 16 днів тому
I'm so looking forward to watching this video once I have an hour to spare!
@user-oh6uw9mu9u
@user-oh6uw9mu9u 16 днів тому
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!
@dexterman6361
@dexterman6361 16 днів тому
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.
@awdk7994
@awdk7994 16 днів тому
FREEDOM VECTOR RAHHHHH 🦅🦅🦅🦅🦅🦅🦅🦅
@Giguv05
@Giguv05 16 днів тому
LOL
@nullFoo
@nullFoo 12 днів тому
The magnitude of this vector can only be measured in feet and inches, no metric allowed
@GanerRL
@GanerRL 16 днів тому
ive messed with opengl font rendering before and its super nice to see a video explaining everything, makes me wanna redo it using these tricks lol
@Thecoolbigbear
@Thecoolbigbear 13 днів тому
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!
@cruisecontrol1489
@cruisecontrol1489 10 днів тому
Amount of work you put into visualizing the concepts is truly colossal. Your tenacious problem-solving approach is truly awe-inspiring.
@bamsestudio8699
@bamsestudio8699 16 днів тому
I always like when a new video is out ❤
@ryderthefirst5023
@ryderthefirst5023 16 днів тому
Uploading an hour long video at my local 4am is cruelty 😢
@germanminer1276
@germanminer1276 16 днів тому
For real, I needa sleep but new vid can't miss
@WangleLine
@WangleLine 16 днів тому
You'll have something nice to wake up to tomorrow!
@GeorgeSukFuk
@GeorgeSukFuk 16 днів тому
Get your ass up
@xandermckay9806
@xandermckay9806 16 днів тому
For me, 7 AM. Lemme guess… You live 3 timezones away from me, so Mountain time?
@jonaut5705
@jonaut5705 14 днів тому
@@WangleLine sleep can wait, this video cannot
@The.Sponge
@The.Sponge 16 днів тому
Incredibly entertaining! Your way of showing your work and workflow is inspiring
@dahahaka
@dahahaka 2 дні тому
Nice to see you shouting out Freya's incredible video on Béziers, it's such an incredibly well done explanation and visualization :)
@aleksszukovskis2074
@aleksszukovskis2074 16 днів тому
hell, yeah! this is gonna be awesome
@yousorooo
@yousorooo 16 днів тому
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.
@dutssz
@dutssz 12 днів тому
"there's no way there's 1 hour and 10 minutes worth of text rendering stuff" said I, clueless of all the interesting intricacies of rendering fonts. Absolutely loved the video
@adriamesas1747
@adriamesas1747 13 днів тому
Congrats for the video once more! It might not be too visual as the others but it’s content and how you explain it it’s gold. My field it’s marketing but I just love your videos and I could spend all the day watching them!❤️ Thanks for the effort you put in them, there are no longer channels like yours
@Dshado
@Dshado 16 днів тому
Woke, boke, and now I see there's a new Coding Adventure! Great Start to the Weekend
@verdantblast
@verdantblast 16 днів тому
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!
@mindgame112
@mindgame112 15 днів тому
Your way of visualizing complex mathematics is really next level! The way you are able to explain quite complex formulas and make them understandable ... Top notch content thank you so much!!
@gg.mp4642
@gg.mp4642 14 днів тому
I love the animations/visualizations, thank you for putting that much effort into them
@hnfrd
@hnfrd 16 днів тому
I found this 10 minutes after it was posted. The video is an hour long. But there's already people commenting how great of a video it was. Sebastian should do a video about THAT phenomena.
@Laborejo
@Laborejo 16 днів тому
My guess would be that financial supporters get an early view of the video. It can exist as unlisted for as long as he wants and then switch it to public.
@JordanMetroidManiac
@JordanMetroidManiac 16 днів тому
Bot comments exist
@Giga4ever
@Giga4ever 16 днів тому
Supporters can watch video earlier. But if you are a poor boy, just say so.
@canerylk2428
@canerylk2428 16 днів тому
Nah it's good from the start.
@natescode
@natescode 15 днів тому
THAT is called Patreon and private video links for supporters before it is made public
@angelcaru
@angelcaru 16 днів тому
Bytecode instructions? HOW DID NOONE TELL ME FONTS ARE A PROGRAMMING LANGUAGE??????
@MarushiaDark316
@MarushiaDark316 15 днів тому
Another sentence along the same lines as "The quick brown fox ..." that uses all the letters, which I really like is: "Pack my box with five dozen liquor jugs." If I recall correctly, it was first coined by H. P. Lovecraft. Didn't know about the disco one though, so that's cool as now I know of at least three.
@the-pink-hacker
@the-pink-hacker 15 днів тому
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.
@jamesmillerjo
@jamesmillerjo 16 днів тому
A seriously long and detailed research about various techniques
@thatonefoxxy
@thatonefoxxy 16 днів тому
WE'RE IN FOR ANOTHER HOUR OF A BANGER VIDEO BOIS!
@IgorStojkovic
@IgorStojkovic 13 днів тому
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!
@asherhaun
@asherhaun 16 днів тому
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.
@AMTunLimited
@AMTunLimited 16 днів тому
Awesome shout-out for Freya's videos. I feel like those two videos alone could kick off a graphic programming career, absolutely in awe
@akashossain8468
@akashossain8468 16 днів тому
I don't know why am watching this but I know this does not fit into my brain.
@liuyxpp
@liuyxpp 15 днів тому
I have similar experiences when I developed a project. It is amazing that you can record this process so clearly and concisely in such an enjoyable way. Admire!
@janhrubec7643
@janhrubec7643 13 днів тому
Love your videos. Really amazing work, they are really calming and peaceful and you always get to learn about a new and interesting topic.
@krytharn
@krytharn 15 днів тому
My favorite subject covered by my favorite UKpostsr! 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.
@marked23
@marked23 16 днів тому
This is so beautiful. You've gone well beyond an adventure. This is an epic.
@finlaycameron4553
@finlaycameron4553 13 днів тому
Your videos are so chill, I love what you’re doing ❤
@skysphr
@skysphr 16 днів тому
Wow, literally yesterday I randomly remembered the channel and thought "It's been a few months, I bet Sebastian is cooking something really cool".
@jamescutajar2679
@jamescutajar2679 15 днів тому
There is so much detail and the process is complicated, but I deeply appreciate the time you have taken to cover the topic. I've been searching on multiple websites to try and understand how the font file format works, and having such a detailed and concise video is amazing! Thanks!
@TearonQ
@TearonQ 6 днів тому
Aaaaaa i wanted to watch more of this!! i was so focused on watching it for the whole hour long video, then it just ended :c awesome job, really nice video !
@lobau_
@lobau_ 11 днів тому
The work that you are putting into those videos is inspiring. Thank you.
@omkarbhale442
@omkarbhale442 16 днів тому
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.
@rainrope5069
@rainrope5069 13 днів тому
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!
@AngrySkyBandit
@AngrySkyBandit 22 години тому
Awesome video ! You are one of the very few content creators who can release a +1h video, and I would go back to it when I have the time. Thank you for your work, and how you share it with us.
@borisjake2
@borisjake2 13 днів тому
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.
@FoxChaotica
@FoxChaotica 16 днів тому
I love the subtle joke of making the title a series of blocks, that's a nice touch
Coding Adventure: Simulating Fluids
47:52
Sebastian Lague
Переглядів 1,5 млн
The Bubble Sort Curve
19:18
Lines That Connect
Переглядів 251 тис.
КИРПИЧ ОБ ГОЛОВУ #shorts
00:24
Паша Осадчий
Переглядів 980 тис.
In 10 Minutes This Room Will Explode!
10:00
MrBeast
Переглядів 52 млн
When Optimisations Work, But for the Wrong Reasons
22:19
SimonDev
Переглядів 746 тис.
Bizarre traveling flame discovery
14:34
Steve Mould
Переглядів 2,8 млн
World's First SCREW-BIKE
23:04
James Bruton
Переглядів 1,4 млн
I Made a Graph of Wikipedia... This Is What I Found
19:44
adumb
Переглядів 1,9 млн
How Quake Failed their way to Success
21:51
SimonDev
Переглядів 98 тис.
I'm a Mess, so I'm Making My Own File Organizer [TagStudio]
23:32
CyanVoxel
Переглядів 225 тис.
The Insane Engineering of the Gameboy
17:49
Real Engineering
Переглядів 1,3 млн
I Tried Making A Ray Traced Game
26:17
Acerola
Переглядів 134 тис.
Фокус
0:10
ekaterina_naturally
Переглядів 5 млн
все узнали? #shorts
0:10
levsky
Переглядів 8 млн
Никто Такого Не Ожидал 😳
0:23
EpicShortsRussia
Переглядів 1,2 млн