@@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.
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"
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.
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.
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!
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 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
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 RUclips.
@@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
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
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.
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
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.
@@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
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.
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!
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, ...
When I needed a font for a small game, I looked at the TTF spec, said "Hell naw", displayed the font in somewhat the right size, black on white, took a screenshot, saved it as bmp and called it a day 😇. Amazing, amazing video. I knew it was complicated. I didn't know it would be _that_ complicated.
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.
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.
@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
@@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.
@@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
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 😅
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.
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
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...
I know this is probably really bad for the RUclips algorithm, but this video is probably really good so im going to save it for when im on vacation traveling
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.
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!
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.
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.
(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.
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).
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!
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
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!
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!
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!
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?
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.
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...
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
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.
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!
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.
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!
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.
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.
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."
"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
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?
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.
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
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
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.
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 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.
The funny part is that I literally watched Freya's videos on Bézier curves and splines again right before watching this video, so I was caught very off guard hearing you recommend them partway through. I knew on some level that these curves were relevant when displaying text, but I had never really thought of just how important they really were until now. Excellent video.
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 !
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!
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
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.
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.
@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.
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.
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!
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?
Patents, in any possible scenario and case, should be illegal. Intellectual Property is something that absolutely doesn't exist on reality, makes no sense.
You wait for this guy to post for 2-4 month, totally forget about him, and then he uploads the best video of all you've watched in those 2-4 month. Sebastian you're incredible!
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.
if you want to know what's the most difficult part of making this video, you should forget about understanding the format specification, the bezier stuff, the raitracing... the hardest part is to make it all a perfectly edited experience, having every line animate, transition into different positions, changing the parameters dynamically. This guy is actually making programs outside of the actual program, just so it all looks compelling. This is what has always fascinated me about coding adventure. It's not just about the piece of code on display, it is about how it is displayed
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!
Every few minutes I was thinking this is a good place to stop for a part 2. now this is the spot. What about now. Then it kept going. I was lost so quick. Hanging on by a thread of the bezier curve. But eventually all I could do was sit back and admire.
My favorite subject covered by my favorite RUclipsr! 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.
As per the old traditions of typesetting, fonts come in three cases; upper-case, lower-case, and edge-case.
you won the comment section, good job
Underrated!
I be edging to this comment frfr
This might just be the perfect comment for this video
And all of them stored in a type case.
A) I hate that math can be patented
B) I had no idea how much math you had to do for just one letter
it's not really math, it's algorithms and algorithms should have the possibility to be patented.
@@WhateverOwO but 20 years is kinda ridiculous
@@WhateverOwO
I think most (if not all) things should not be allowed to be patented
@@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.
@@WhateverOwO algorithms are just applied mathematics
"...were designed to meet anticipated needs which never materialized" - i love that sentence
It's like the origin story of the YAGNI principle
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"
@@onlysmiles4949 classic xkcd 927
@@onlysmiles4949That's an XKCD, right?
Yup, XKCD #927
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.
You're the Bob Ross of programming.
Your videos are so relaxing to watch, the learning is just an added bonus.
Was thinking of making this exact comment. Cheers!
"here we have some happy little bezier curves"
@@TracyNorrellhonestly, he is the calmest soul ever, at least imo. And this guy follows him closely. Absolute joy to follow along
Hahaha true that
I want to like your comment, but I don't want to be the one to take away 420 likes, so here you go 👍
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.
its also why its extremely disheartening to other developers. He likes to show the best of him, doesn't show the pain that proceeds.
@@BobrLovr i find it quite inspiring personally
@@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
@@BobrLovr I don't feel like its disheartening at all, actually. It's really quite motivating to me, to be honest.
@@th0bse_ 👍
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!
15 hours ago. what
@@ۥۥۥۥۥۥۥۥۥۥۥۥۥۥۥۥۥۥۥۥۥۥۥۥۥ bro is ahead of times💀
Probably unprivated later
Yupp. That's what I was thinking 😂@@ۥۥۥۥۥۥۥۥۥۥۥۥۥۥۥۥۥۥۥۥۥۥۥۥۥ
Sebastian please make a video explaining how you can code a time travel machine in C++ thanks
As soon as you said "The Beauty of Bezier Curves" I knew _exactly_ what was coming.
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
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.
horrors beyond comprehension
@@David-um8tb software patents are evil
@@unknownname3703 patents are evil
@@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
There is exactly one (1) RUclipsr who I would watch talk about displaying fonts programmatically for 70 minutes, and thank you for being him
Wait, this was 70 minutes? Where'd the time go?
The worst part about watching a Sebastian Lague video: knowing you'll have to wait months for the next one...
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 RUclips.
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.
The most pressing reason for humanity to invent time machine.
@@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
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
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.
Regarding being so calm and collected in the videos, I refer to the great Ben Bailey: "That's editing." :D
After spending a long week focusing on quadratics, I come home for the weekend to unwind to videos containing parabolas.
The quality of this content is beyond comprehension. Sebastian should be a CS professor.
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
Or just use a library for it
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.
step 163. oh no it's patented
@@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
@@Bestmann3n Yeah I agree
The 'twilight zone' cut-away... so good Sebastian, you're moving into 'film maker' level production here you realize...
That explanation of Bezier curves was just genius. You tricked me into learning them, and now I'll never forget about them.
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.
@@bigpopakapyes, yes, yes, Freya's videos on the subject are incredible
tricked?
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!
*you're
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, ...
Art lead: "Wait, what was that last one?"
You: "...pixel alignment..."
I wouldn't call those optional myself.
When I needed a font for a small game, I looked at the TTF spec, said "Hell naw", displayed the font in somewhat the right size, black on white, took a screenshot, saved it as bmp and called it a day 😇. Amazing, amazing video. I knew it was complicated. I didn't know it would be _that_ complicated.
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.
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.
@@shmunkyman33 I don't know to my knowledge ADHD people can't sit in one place what you're saying sounds like the opposite
@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
@@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.
@@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
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 😅
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.
Paper, in case anyone is interested: DOI:10.1016/j.ifacol.2018.05.092
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
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...
I remember this shitty ass exercice made me quit the aoc😂
Haha yeah I remember that exact problem! Took a few goes off running my face into walls to finally encounter every edge case!
Je suis développeur depuis longtemps et franchement les vidéos de Sebastian sont les meilleurs en terme de vulgarisation et exploration
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
I know this is probably really bad for the RUclips algorithm, but this video is probably really good so im going to save it for when im on vacation traveling
I legit laughed at 2 problems for the price of one. It's such a vibe for programming.
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.
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!
It's easy to use little-endian in hex dumps, just start rendering from the top right instead of the top left :)
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.
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.
after reading your comment, I am really looking forward to watching the video.
Some of the best technical RUclips channels out there in that second paragraph
i literally know every video you mentioned just by name. we really are all just watching the same videos, aren't we
(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.
@@sponge1234ify I've seen it before too, lol. I did enjoy it.
1:09:59 "Graphic design is my passion" that took me so off guard LOL
In papyrus too haha
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).
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!
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
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!
1 Hour long Video? LETS GO! Thx Sebastian.
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!
Nice to see you shouting out Freya's incredible video on Béziers, it's such an incredibly well done explanation and visualization :)
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!
YEAH HE IS BACK
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.
Another Sebastian video, i am so excited!
And I just can't hide it.
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?
see Birthday Paradox
A yes, the worst nightmare of Rendering.
The banes of graphics programming:
* floating-point precision
* transparency (mostly solved with OIT)
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.
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...
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
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.
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!
Babe, another Coding Adventure just dropped!
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.
35:30 finally, a biblically accurate font
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!
Love your videos. Really amazing work, they are really calming and peaceful and you always get to learn about a new and interesting topic.
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.
From 7k errors to 0. I admire your problem solving determination and skills❤
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.
I made the same journey many years back having grown tired of bitmapped fonts. Implementing it was so enjoyable.
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."
Well I mean, it was obvious that's what it said
I love the subtle joke of making the title a series of blocks, that's a nice touch
Watching experts at work is always insightful; incredible work as always!
"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
2 minutes into the video and i'm already completely lost😭
You made it that long!?!
2 minutes into this video and I am hooked! Love this stuff!
People have been struggling with the 'font' rabbit holes for 40 years, you're in good company.
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?
I'm lost since 0:48
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.
Hearing that a simple method of rendering text using basic math is patented by someone made me unreasonably angry.
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
hell, yeah! this is gonna be awesome
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
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.
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.
@@krytharn: "designers who can see your text is one pixel too far to the right" - even at 4k?
@@shinyhappyrem8728 on a big enough screen, sure :D
@@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.
The funny part is that I literally watched Freya's videos on Bézier curves and splines again right before watching this video, so I was caught very off guard hearing you recommend them partway through.
I knew on some level that these curves were relevant when displaying text, but I had never really thought of just how important they really were until now. Excellent video.
this was so funny:
Screen is on fire and
"Let's start with the most serious issue first: Getting rid of that weird line"
I know I'll stop understanding about halfway through but I still watch because it's fascinating
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 !
I have a simple demo on ShaderToy: _Font: Bitmap vs SDF_ that showcases the difference.
@@MichaelPohoreski Shadertoy is another wonderful resource for folks.
he said it in the video
the curve rendering technique with that shader trick is SO smart, I would've absolutely never thought about that
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!
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 :)
@@pfqniet Cool, thank you!
You are one of the very few people who can get away with sounding happy when you talk without sounding annoying
A seriously long and detailed research about various techniques
I'm not sure how you keep making research level computer science concepts seem like a simpe and logical thought process, but please keep doing it
FREEDOM VECTOR RAHHHHH
🦅🦅🦅🦅🦅🦅🦅🦅
LOL
The magnitude of this vector can only be measured in feet and inches, no metric allowed
WHAT THE FUCK IS A FLOAT3🇺🇸🇺🇸🇺🇸🇺🇸🦅🦅🦅🦅🦅
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
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.
Said like that i do agree. Like patenting how to solve an equation xD
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.
@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.
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.
"16-bit f words"
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!
Uploading an hour long video at my local 4am is cruelty 😢
For real, I needa sleep but new vid can't miss
You'll have something nice to wake up to tomorrow!
Get your ass up
For me, 7 AM. Lemme guess… You live 3 timezones away from me, so Mountain time?
@@WangleLine sleep can wait, this video cannot
I love it! 50% implementation, 50% fighting floats
patents on algorithms should be illegal.
yes, this is very annoying, the person who does this has no heart.
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.
Many companies file patents defensively. Not to prevent others from using the algorithm, but to prevent trolls from preventing them from using it.
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?
Patents, in any possible scenario and case, should be illegal. Intellectual Property is something that absolutely doesn't exist on reality, makes no sense.
I love this guys voice, it’s so unique and will literally put me to sleep.
Bytecode instructions? HOW DID NOONE TELL ME FONTS ARE A PROGRAMMING LANGUAGE??????
How long until someone makes a playable doom font
You wait for this guy to post for 2-4 month, totally forget about him, and then he uploads the best video of all you've watched in those 2-4 month. Sebastian you're incredible!
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.
It’s amazing how complicated and highly technical rendering text can be. Makes me appreciate modern text-setting and typeface creation tools 😅
I don't know why am watching this but I know this does not fit into my brain.
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
4:55 Sebastian there are children present, stop with all those Fwords
if you want to know what's the most difficult part of making this video, you should forget about understanding the format specification, the bezier stuff, the raitracing... the hardest part is to make it all a perfectly edited experience, having every line animate, transition into different positions, changing the parameters dynamically. This guy is actually making programs outside of the actual program, just so it all looks compelling. This is what has always fascinated me about coding adventure. It's not just about the piece of code on display, it is about how it is displayed
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!
This is so beautiful. You've gone well beyond an adventure. This is an epic.
Every few minutes I was thinking this is a good place to stop for a part 2. now this is the spot. What about now.
Then it kept going. I was lost so quick. Hanging on by a thread of the bezier curve. But eventually all I could do was sit back and admire.
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....
My favorite subject covered by my favorite RUclipsr! 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.