You have a great style of explaining things and making them feel friendly. I especially loved the two blob characters 🥰 I hope you make many more maths videos!

A few notes on what most actual implementations do (from what I've been able to read), just in case anyone thought this was simple: * Solving quadratics is (probably much) slower and harder than just subdividing until you're smaller than pixels then testing against the x coordinates of the points closest in y coordinates. * Generally the letters (or, more generally, glyphs) are only rendered once per font size when needed and then that copy is stamped at all the places it's needed. * It's common to use the fact that PC monitors layout their pixels in vertical RGB stripes to get more horizontal resolution. * At small sizes, avoiding blurring as lines cross through pixels is more important than exactly representing the outline. The solution is pretty crazy: TTF fonts include programs that execute to adjust the coordinates based on size... and potentially other things like weight and surrounding characters! * This doesn't work if you're animating, as you can see the outlines jumping around (and it's slow). In this and other situations, like very large text or 3d, signed distance fields (or SDF), which are basically fancier bitmaps that are quite good at approximating the outline but still very fast to render.

2:14 just for comparison, I had a Commodore 64 back in the '80s. it used 8x8 pixels for each character and only 1 bit per pixel. so the WHOLE ASCII table of 256 characters took 256*8*8*1bits = 2KB well it only had 64KB of memory anyway.

Might be worth mentioning that there is an alternative solution for fast, real-time rendering of glyphs pioneered and patented by NVIDIA, which is based on using the stencil buffer to determine coverage per pixel. Basically, a pixel is subdivided into subpixels and a shader determines for each subpixel whether it is inside the glyph or not. This can be quickly determined if you are smart in how you create your geometry. Quadratic curves, for instance, can be evaluated by creating a triangle from points p0, p1 and p2 and using barycentric coordinates for the vertices. It then becomes trivial to determine whether the subpixel is inside or outside the curve. The "winding" path is then drawn first, adding values to the stencil buffer. Next, the "non-winding" paths are drawn, subtracting the values in the stencil buffer. You end up with a stencil buffer containing ones and zeroes for every subpixel. Finally, in the so-called coverage step, you calculate the coverage of each pixel by adding all subpixel values for that pixel; if 16 out of 16 subpixels are set to one, you have 100% coverage, but if only 8 pixels are set to one, you have 50% coverage and so on. The final color will be determined by using coverage as an alpha value, or by multiplying the red, green and blue colors by the coverage. Substantial research has gone into finding ways to generate optimized stencil and coverage meshes to render, as well as coming up with ways to efficiently store these mesh representations on the GPU. It's sad that this process has been patented, but on the other hand it's free to use if you own an NVIDIA GPU. See: developer.nvidia.com/nv-path-rendering

I am seriously unable to comprehend why you have such a small following... Your content is amazing and super high effort! You should be in the millions!

Very interesting... the more I learn about font rendering/rasterization, the less I take it for granted :D

This is great. Would love to see you go to the next step and talk about anti-aliasing etc.

Distance field fonts are worth a mention as well because of their awesome utility, though getting into distance fields is itself a whole other topic

What an amazing video - great graphics, really informative and easy to understand. Props!

This video is absolutely fantastic, such a clear and simple explanation for a thoroughly interesting topic!

This was very interesting. You did a great job. Hope to see more from you in future.

2:14 "~ 53 Kb" -> 53 KB. Typically, bytes are indicated with an uppercase 'B', and bits are indicated with a lowercase 'b'.

Wow, that's a lot more complicated than I thought! Great video!

I'm looking for an interesting topic for my maths homework right now, and your way of explaining this concept made it tremendously easy! Thank you so much for the video and your beginner-friendly explanations!

Just wow. I had to work with a small OLED display and hexfonts a while ago. Since then l have been wondering how more advanced responsive font systems work and this video was the perfect answer. Thank you for this bit of knowledge.

Amazing video. Really well explained and perfectly animated. Must watch all videos you have. Congratulations for your work, I'm going to share this to friends :)

Awesome! This is so cool and interested me the whole way!

Looking forward to part 2!

Wow nice video, really explained the concept well (except for the quadratic algebra stuff, but I don't think anyone can explain it well to me), and the visuals definitely helped me understand it.

I just found a gem of a channel

Love this video. Always wondered how font was rendered

I've been wondering how exactly fonts are represented, visualized and scaled for a long time. A few months ago I implemented Bezier curves for smoothing out path finding points in my game, so it was a nice surprise to find them here too! Thanks for a great video.

this deserves so much more attention.

Hey, this video is incredible! Please, keep up your work!

Oh, the Font Wars of the 90's. Fond memories. There was a huge battle between Apple's TrueType fonts (1991) and Adobe's proprietary PostScript Type 1 fonts (1984). There was much debate over the merits of both, such as Apple had special "hints" to display better at low resolution. Adobe responded with Adobe Type Manager which was the de facto standard for a while but was expensive. Then Apple licensed TrueType to Microsoft for WIndows 3.1. But Apple wouldn't license Apple Advanced Typography, so Microsoft joined with Adobe to create OpenType (1996).

Future 3Brown1Blue channel. Keep going.

This is a very simplified overview to get you started, it's very good! The real world of fonts and font engines is spicy. Two examples: Winding orders aren't actually used consistently to mark regions, so you should calculate the normal of the glyph instead to find out which direction it's facing first. Some font tools or glyph operations may flip your glyph for example (I.e. your font has data for b, but represents d as a mirror of b through an affine transform). As for rasterizing bezier curves, font engines will actually linearize first based on a variety of heuristics since the test math is faster. I maintain a fast open source font engine on the weekends and love this stuff

This channel is underrated, and my day is r..... *made

Fascinating stuff!

this was super interesting, thanks!

I think a video on anti-aliasing would be interesting as well. The idea behind anti-aliasing is that if the edges contrast too much with the background you get a jagged looking texture along the edges on a (low resolution) bitmap screen. So what you do is you fill in the background near the edges with shades that transition between the shades of the letter and the background so that shades transition between the letter and the background more gradually. This gives less jagged looking edges. Thank for this video.

stellar vid mate

Jeez, I take for granted on how I can able to change zoom and increase text size on the fly nowadays. Thanks for these amazing insights.

great video ! thanks

Amazing Video😃

Great video man

Thanks, this video made my day

3b1b sent me

Thanks for this! I was actually making a font renderer!

the size of the channel isn't representative of the production quality of this video. subbed, really good video

Great video

Incredible, earned a sub

nice video, i kind of expected the part with the raster, like how it's turned into pixels, anti aliasing and stuff like that

What an amazing video.

Wonderful!

Nicely explained. Sadly, I really wanted to see subpixel rendering techniques and hardware acceleration mechanisms, like single-instrucion-multiple-data.

really good vid.

when your math knowledge from school is seen outside of school that's the coolest feeling

Nice work! I bet animating'll be easier with all the refactoring you've done.

Amazing 🤩

That's helpful thanks.

makes a video about font rasterisation and casually explains bezier lines better than any other tutorial I could find

This video is fire

Your explanation and visual representation of linear interpolation and Bezier curves is very similar to what I've posted on my channel! Almost scene-for-scene, haha. Well done though!

Very interesting

finally learnt how Bezier curve work after years.

A so good video

Adobe Type 1 vector fonts are from 1984, and the concept of vector fonts is older than that. The biggest difference between Type 1 vs. TrueType fonts is that the former used cubic Bézier curves, while the latter switched to quadratic Bézier curves (I think to work around Adobe’s patents?).

Possible way to optimise it: Use the points defining a character to make a bounding box, then divide the area to be rendered into small patches with pointers to the characters whose bounding boxes lie within each patch. The rendering shader then only needs concern itself with testing its fragment coordinate against the characters within a given patch. Putting the relevant data into a format a fragment shader can work with might be a bit complicated, though. Going below the level of a character seems like it might be possible, but I have no idea how you would go about it, given it seems like it would require splitting the lines and curves and adding new boundaries for patch edges that lie inside the character.

7:00 in: I got this ! What ? More math ? 😂 Still High School math suffices to get this. Good job. (When you started talking about pixels and filling, I had to stop myself from making an imagemagick joke hahah)

amazing

It would be nice to look at the rasterization of cubic bezier curves after that. The ones that are used in the .otf font format and in vector graphics in general. A completely new set of problems arises there. Such as looking for self-intersections, which cannot be done analytically because of the high order of polynomials. Anti-aliasing is another interesting issue worth discussing in relation to the whole topic of rasterization.

great great great !!!

awesome

Do computers have to calculate the root in the quadratic equation for every pixel, every frame? Isn't that really expensive computation?

Hnnng, now I wanna see if I can go this on my graphing calculator

I'm sorry to leave a comment like that on a video with relatively few other comments, but: 10:25 lmao "pinus"

Can you please explain what is Q(t)? because I want to know what the function Q(t) for generating Bezier Curves is if you know it/them.

I found a way to render a path made of lines, bezier curves of any degree, arc of ellipse or any shape you can imagine. For each computed pixel, i keep trace of the vertical sign of the derivate of the curve (which i compute by simply substracting a pixel position from it's previous). If it's an edge, or two curves crossing each other, i keep trace of both values. Now, from the upper pixel to the lower, then form the more left pixel to the more right, i draw the filler pixel if the sum of the sign is more than 0. I can avoid drawing on line if i want.

Would it be reasonable to rasterize the outline of the curve and then floodfill the rest to avoid having to test each pixel?

Are you sure that TTF uses 3-point Bézier curves? Usually 4-point Bézier curves are used in vector programs and most other applications. That will give you 2 control points which lets you create more complex shapes, and importantly it lets you determine the slope in the start and the end points of the curve separately. I haven’t been thought about this too much but I feel like it would be really bad or even impossible to create smooth shapes but combining several Bézier curves without being able to control the slope in the start and end points

One thing I don’t understand is how does the Bézier curve work on points (2 numbers), do you just apply the operations to vector2 elements?

10:26 “pinus” - I guess I should’ve paid more attention in my maths courses, never heard of that arithmetic operator before 🤣

overwhelmed !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! the only thing i could say........

Doesn't it also work, for example, if a pixel's X position is equal to the Y position (x = y), place the pixel there (rotated line)?

15:10 but don't you have to check that the crossings are to the right of the tested pixel?

Why is it that fonts on my windows XP computer look very blocky (more so than other non-text elements) at high resolutions? Did they just not use rasterisation?

12:09 The formula can be simplified nicely: P(t) = (1-t)²P0 + 2t(1-t)P1 + t²P2

i cant pass a test yet i find this really interesting

Cool

14:17 - why do you use the y coordinates here?

Font rasterization makes use of the quadratic formula, which in itself is not too difficult. The real difficulty is figuring out the specific version of the quadratic formula Microsoft used in their renderer.

Your P's drove my subwoofer through the floor. :P

10:24 so many P's in that equation so it even infected the "minus" and became "pinus"

thanks.

Not what I thought!

I'll take code over math notation any day.

10:26 My Mans really just said P I N U S 💀

While what you have described will allow one to render an outline, this will not render characters or strings of characters of high quality. Consider rendering outlines on a fix grid a progressively smaller and larger sizes. Consider the letter uppercase H, at large sizes the two vertical strokes are of equal width and height, buts as the size gets smaller one of the strokes will render 1 or more pixels narrower that the other (This is known as the picket fence problem) looking at the horizontal stroke as the outline gets smaller the stroke will render wider or narrower than the vertical strokes, it will also be displaced upward or downward from it’s desired location. This is the vertical variation of the picket fence problem. Now let’s consider Capital M with regard to the vertical strokes it has the same problem as Capital H, but now it has anew problem the diagonal strokes don’t have the same widths as the size gets smaller, but because of pixelization there weight becomes heavier ( fatter relative the the vertical strokes) this applies to all diagonal strokes as is most pronounced at 45%. The same artifacts apply to curves Consider the Character O, as it drops in size the left right top and bottom will not be the same width in pixels similarly the curve will render fatter and fatter as it approaches North east, south east south west and north west. Now lets consider a collection of characters. The horizontals are varying in width and move up and down in Y the Verticals are varying in width and moving Left and right of their entended position. The most obvious artifact is the bottom of the characters don’t share a common base line the is called baseline wander. There are solutions to all of these problems that involve looking at the morphology of each character individually and looking at strings as agrégate characters with features like common base lines inter character spacing and string widths as features that need to be preserved when they are rendered. As an exercise for the reader consider the case of a lowercase i it is clear that the size of the staff and dot need to be the same, but the relative position of the dot, size of white space and staff need to be treated holistically. When one moves away from Latin Alphabets to ideogram base writing systems like Kanji, Hangul, Nihongo, Cursive positional representations like that found in Arabic… al of the Latin problems exist as well as numerous features that need to be preserved that are not as simple as the examples that I gave above. Then there is a basic implementations philosophy issue to you codify the rendering rules in each character “smart characters, dumb rendering” or Dumb characters, smart rendering” The former requires more work per character/ideogram the latter requires more understanding of the underlying morphology issues. I think true type is a good rendering system (Smart Characters, dumb rendering) Adobe type 1 rendering is the first to market and mass adoption format is an example for (Dumb Characters, Smart Rendering). Good presentation of rendering outlines to pixels, but not really representative of what it takes to render high quality type. I am one of the creators of Adobe’s type technology and also had a hand in the reaction of TrueType. More please.

8:12 does that mean that rendering 1 billion 'B' letters is more costly than 1 billion 'I" letters in the ttf format?

15:33 well, thats why i originally came for :D

Most need not remember the quadratic formula -- only (visually) that degree 2 single-variable functions bend toward and then away from the x-axis, and (algebraically) `x * y = 0` where x and y are expressions, means either x = 0, y = 0, or both

I always thought the F in TTF stood for "font", was I mistaken?

Why cant the interior, which is to be filled in black, simply be identified by a single pixel, or vector direction from one of the defined edge points, or a set thereof?

14:45 why would it not intersect with our curve if it's greater than 1? Also at 14:17 the solutions should be shown as "t=" not "y=". Interesting video, thanks!

You can write documents in a terminal. You can build a website in a terminal. No guarantee that doing these things made someone encounter rasterized text :)

Nice video. Just gotta watch out for those French names.

14:01 *mom walks in* finally she walks in when I can pose as doing my online math homework instead of the weird part of the TV show mom: "I thought you finished the quadradisc last year! Go do your weird TV show research already!"

I have a question, isn't possible to save an interior point in the font file? It would simplify all the calculations. I'm not a programmer, if someone know why it is not used, it will satisfy my curiosity.

14:15 It should be noted that you shouldn't use that formula for the case where the two terms in numerator have opposite signs.