Glyphs, shapes, fonts, signed distance fields.

I like these kind of more in depth game dev contents because as a hobbyist, I don't really get exposed to to these stuff. And your explanations are very good too! Thanks! I see that you have not posted in awhile. I hope there is more.

Your channel is criminally underrated. I just got recommended and I'm so glad I did. Please don't give up on it, your content is absolute gold

I loved this technique. Makes so much sense too - you have a texture which can store a continuum of data ranges per point, but most of the points are storing only one extreme or the other, and then a very small amount are storing some point in the range, but that small amount's count is what turns out to be important. SDFs just spread the burden out over more points, and use cheap post-pro to reconstruct the data at runtime. Super elegant.

Something interesting I’ve found, is that because Sdf is basically just alpha, if you encode it in the alpha of a texture you can encode color in the rgb channels. So, you can generate colored Sdf textures!😊

I got really fascinated by this and managed to achieve super sharp concave and convex corners with this technique using 3-layer SDF images (R,G,B). I take common of R and G, then add B SDF and this way I can have super awesome vertex graphics in tiny textures!

SDFs aren't used by people generaly. Developers use them by importing libraries and premade shaders, It's hard to find guys that actually sees a problem and thinks "Oh! I can use SDFs on these!" Im going to every video of yours and leaving a like :D So cool to find people making good AND in depth tutorials using godot. Is a need for the comunity at the moment :)

Signed distance functions have been used in rendering for decades, but as with many things it just takes a long time to get that knowledge spread wide. There are papers talking about this from the 90's, used in professional application at least since 2000 (there have even been Nvidia devblog-entries from back then talking about how to use SDF and how to avoid some of the problems - with 3D textures even), throughout the 2010s it has found its ways into more and more libraries.

Imagine pitching this idea you just had to your coworkers. "No, seriously, I could make the text better by making it blurry!" Hard sell.

The multi layer distance field blew me away

You did it again! Thanks, man, even that I do teach art daily in my company I still learned a lot of good stuff. Right now digging into wave function collapse, which you described so good that I just threw everything on the side and started to learned what needed to implement it. Thanks!

I first heard about SDFs from Tom7 (suckerpinch)'s sigbovik vid on using AI to make uppestcase and lowestcase characters. I was pretty surprised that I'd never heard of them prior since they seem so useful and, after learning about them, kind of obvious in hindsight! I think they are way more useful than they seem to be given credit for.

I think this is a truly wonderful video and I'm glad you've made it because it's made the concept of using SDFs in a game development context a bit more practical. I have seen a lot of people very excited about using SDFs for general purpose shaders and rendering and while it is incredibly cool to make geometry with infinite resolution and 0 vertices, I can never see myself really using it in any modern engine, given that I'd then have to be able to make that mesh with the physics engine. Perhaps I'm simply too uncreative for such things, but regardless, this is a much more approachable use for them and I want to thank you for making a video on it, even if my thanks is coming almost 2 years late. With that said, I think the omission of the rather key detail that your shader is using texture filtering (I assume bilinear?) makes it a bit difficult for those of us who want to make use of this outside of Godot(or maybe in Godot, I've never used it so I'm not sure if they just use GL_LINEAR by default or something?). I see two comments below where people are asking this question, and perhaps aren't sure how to verbalize it entirely. I'm no shader guru either mind you, but my understanding is that the reason why this works(in other words, the reason why you get crisp lines at the theoretical boundaries with seemingly infinite resolution-even though the texture resolution is far lower) is that the renderer is performing texture filtering before it hits the fragment shader which interpolates the values in-between the pixels actually present in the texture. If it was using the OpenGL default(this default may have changed since the docs I was reading were written) of GL_NEAREST(nearest-neighbor) filtering then this approach actually would not be able to create these results that you get which are at a far higher resolution than the input texture. I worry that someone who doesn't really understand this might try to implement these as you have shown here, but in a different engine/context without knowing that they need to be using texture filtering(if they aren't super well versed in shaders, perhaps) and be put off of the idea, not knowing what they had missed. If I am incorrect on any of this, I encourage anyone to correct me as I'd love to use this technique myself and don't want to be starting off completely in the wrong direction when I can get around to it. https://learnopengl.com/Getting-started/Textures <-- for anyone who has no idea what any of that meant and wants to know, go to the section on "Texture Filtering" To clarify for anyone who is incredibly well-versed in shader programming what the "rub" is: It is not obvious to someone coming in to this that the values that the fragment shader receives are automatically interpolated between pixels on the texture before they even enter the function. That all being said, I do want to thank you again for making this video and elucidating me on this concept! I have just discovered your channel, and while there is precious little in quantity of videos, the quality of the information is staggering and I truly hope you can find the time or motivation to continue making videos like these in the future, as I know there are many out there who your video may find at just the right time and either save a struggling dev, or maybe even make someone who was just a bit interested in math/programming into a game developer, and the world would have you to thank for every wonderful work of art they created from that point forward. If you do read this, I sincerely hope life is treating you well.

wow, distance fields vector graphics map! so clever and cool way to improve resolution in text rendering and decals. it may look a bit costly in shader instructions but memory bandwidth is much more expensive - only 64x64 texture instead of 4096x4096 - it's a killer 4k times that :) this is where knowledge of a developer has more power than hardware :P overall, i'm really glad that 3d graphics trend is moving towards to ray-casting/-tracing techniques (which DF is one of) and moving away from pixels (texels actually) for the quality and real-like optical effects. same feel for procedural generation of textures. some day a game with 256pcs of 64x64 textures could look better than a game with 1024pcs 8K textures using 10GiB!

I just stumbled upon your video on twitter and OH MY! This is real high quality content. Everything is so well presented. This is awesome, thanks a lot!

I wanted to have SVG based billboards in a project I am working on. This seems like maybe a way to lower the necessary texture memory when there are only a small number of colors.

I found this window and proceeded to binge watch all of them. mind blown so many times. thanks mate.

I'm shocked. «You know what's cooler than magic? Math!»

I've been messing around with these myself a while back, even made a program that could generate these textures, but didn't get it polished enough. I Also tried messing around with different source texture resolutions, and it's weird to see that higher source resolution gives the output higher detail, even if the output texture is really small

This is beautiful. I was surprised when i tried to import vector graphic into Godot, and I couldn't without rasterization. I will 100% be using this technique from now on

I was wondering how you could get negative distances :)