Glyphs, shapes, fonts, signed distance fields.

[@frankerzed973]

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

[@jsmdnq]

Much like Ken Griffin shorting humanity... but I'm sure even fewer people know or care about Griffin.

[@cptfurball]

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.

[@Asdayasman]

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.

[@ABaumstumpf]

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.

[@hermedr9423]

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

[@youkool1526]

Ok this one blew my mind away. So simple and yet so powerful.

[@unfa00]

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!

[@slifertheone1]

Could you explain a little more how did you did it?

[@Kavukamari]

@@slifertheone1 seconding this lol, really curious of that method

[@Tsudico]

@@Kavukamari I don't know if you found your solution but there are a couple ways to do it. You might want to look into msdfgen which used the Valve paper as a basis and then extended it by including multiple channels to create sharper results.

[@dittilio]

Man, your videos answer SO many questions I've had but didn't even have the vocabulary to phrase. Thank you!

[@victorpkstrength]

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!

[@pedroenmanuelfuenteszambra8873]

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 :)

[@Tom3sYT]

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

[@markhenriksen_art]

So good! thank you for explaining this so clearly to a dumb 3d artist such as myself.

[@4AneR]

You channel is a gem that we all seek, but few of us ever find

[@anonymousmisnomer5443]

Typographers hate him for this one simple trick

[@Sliterinq]

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!

[@anerdwillhackit]

WOW! That is amazing! I had no idea SDFs could be so flexible. Thank you for the great video.

[@tynrare]

Incredible useful 6mins of information. Definitely will support on patreon

[@WildfireKitsune]

Oh no, going to watch these all in a day already...

[@chriss5112]

Ah cool! Thanks mate, your video's I have found have introduced me to some neat new concepts

[@notveryobservant1056]

This is EXACTLY what I needed. I will definitely be using this in my projects.

[@S-I-T]

I use this all the time with vfx textures on my current project (you know the one). I love that you can achieve resolution-less sprites.

[@S-I-T]

Oh and again a fantastic video. Any advice on how to begin shader writing Martin?

[@MartinDonald]

@@S-I-T the Book of Shaders is definitely a great place to get started or just to brush-up on core concepts :) thebookofshaders.com/

[@S-I-T]

@@MartinDonald thanks for this fella.

[@ImDrFail]

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. learnopengl.com/Getting-started/Textures

[@g4fly4ever8]

Im not a game dev but i love seeing computer magic explained

[@kevin-bf4ww]

criminally underviewed channel

[@hotfishdev]

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!😊

[@GetUpRespawn]

See, it doesn't work that way. If its in the texture then its getting downsized, compressed, or sticking to a resolution. When you use SDF realtime, it doesn't matter what your initial texture resolution was, you are practically getting a virtual shape that can be zoomed in or out infinitely and you have no detail loss like a vector graphic.

[@Reaversword3D]

Thank you for the amazing explanation

[@amac333]

woah, thanks for demystifying SDFs for me. I was really impressed with the simple use as alpha map, I don't really understand why it's so much better though for that. How the edges end up so nice and smooth. I'll have to do some more reading. Cheers.

[@Winexoid]

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!

[@shadespirit11]

Great video! Thank you for the insight, really inspiring! And the amount of information that was put into this short amount of time is amazing! 11/10

[@TrentSterling]

Gradient looks straight up baller; nice work!

[@diegoantoniorosariopalomin4977]

The multi layer distance field blew me away

[@vanderkarl3927]

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.

[@MecegguemMohamed]

This is underrated content I have learned a lot

[@knho1774]

Very high-quality video, thanks!

[@garrettbluma257]

This is very cool to see, and very well explained. It reminds me of the clever technique Valve used for the (almost) toon shaders in TF2 (Spherical Harmonic Irradiance). It's a cheap method of encoding local radiance information in, like, six points.

[@AndersonMancini]

OMG. This is so awesome 😮. I'm impressed 👏🏻👏🏻👏🏻

[@aachrisg]

Good explanation

[@Suzuki_Hiakura]

I just got recommended this video and feel that it is a step in the right direction of something I wanted to do in unity... actually I wanted to basically make simple svg textures that could reduce overall processing for a sign (needing to be at least 2k to not be so blurry and several more needing 1k and a lot of gpu power) and found that apparently svg is just impossible to implement in unity the way I wanted. I am still looking for a substitute method, albeit I have stopped all progress on my projects since but still hope to pick it back up eventually.

[@NunSuperior]

This is great. Now I understand Unity's Text Mesh Pro.

[@JoSilverNG]

HOLY SHIT! THIS EXACTLY WHAT I NEED!

[@4.0.4]

This is so simple, yet so brilliant! It feels like the kind of clever trick you'd know already but I sure didn't! Makes me think what else is simple but we don't know yet.

[@BRiemann313]

Again a great video Martin, I am proud to be your patron :D

[@aucer7904]

When I am finding the solution of jaggy label 3d in godot, this is so awsome!

[@WireWhiz]

Thank you, this made it really easy to understand.

[@РашидБерезкин]

Великолепный туториал, впрочем как и всегда. Спасибо!

[@giaco89]

Awesome video Martin! MOAR TA knowledge :D

[@Galomortalbr]

interesting to see that on Godot, i used the same technique for the Feathers of a creature in my project, i had no clue if was SDF tho

[@yogpanjarale]

I felt this must be a channel with more subscribers Nevertheless the video quality is just very professional or great.

[@KasperFrandsen]

Amazing video as always!

[@edh615]

Love it! please keep doing them

[@leimiles18]

This is great one.

[@RealPigeonz]

Dude. You are my hero xD THX!!!

[@Dubswitcher]

Wow I was NOT expecting to see my favorite game right at the start lol

[@VladgavligGapchich]

Awesome! That is super useful!

[@ShinoSarna]

My friend had the idea to use this to make edges of hand-drawn sprites smooth in any resolution, and perhaps another one even for entire lineart layer. Imagine graphics in something like Streets of Rage 4 that can be upscaled infinitely with little loss in quality.

[@PuraTvOyun]

I'm as excited as Barney Stinson comes up with the idea of bar name "Puzzles" right now. Where have you been? And why I didn't discover you before... 🤩🤩

[@timseguine2]

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.

[@ayushagnihotri8600]

Amazing. 😍

[@VeloFX]

This is crazy good

[@leshiy_nd]

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

[@FrohSim]

Fantastic video!

[@alan2here]

I was wondering how you could get negative distances :)

[@JasonCummer]

This is also very cool. Thanks

[@curiouspers]

Please continue talking about SDFs

[@emi_cpl]

Great video! :D

[@ChronoWrinkle]

OMFG! Instant subscribe!

[@stefanguiton]

excellent!

[@anteshell]

Ok, it works. But how does it work? Why low res distance field can make crisp edges while alpha channel with the same res cannot?

[@ronnetgrazer362]

I understood every bit of this video except this - the important part. The rest is super logical to me. Quite frustrating when you feel like you're the only one not getting it. Glad I'm not alone.

[@ronnetgrazer362]

Read the paper, still don't get it. It's just glossed over. If alpha cut-off is based on a low res bitmap, how could the resulting image ever be something other than blocky? I first thought the low res SDF was being used to decide which parts of the image need precise handling, and which parts can be passed through in a quick and dirty way, but I don't get that from the actual explanation. Good thing I'm not a game dev.

[@ravelite]

Hi, I had the same question, so here's a bit of my own speculation. In the case of the alpha channel, we have something like a step function--whites and blacks--that go through the nonlinearities of rendering and end up with grey artifacts exclusively near the border, which blurs it. In the case of the SDF, we have more of a continuous function, so that it varies smoothly near the border of in-and-out. First, it passes through rendering, then it is thresholded by the shader. Since the SDF is continuous with fewer edges, we don't expect that it will be artifacted in a localized way. Perhaps that is why the SDF with the shader preserves the crisp edges.

[@ronnetgrazer362]

@@ravelite So they're just trading spatial resolution for bit depth? I'm still not sure about the actual steps involved, but that sounds like a clever way to overcome hardware/pipeline limitations.

[@AntonioNoack]

With alpha channels, the alpha value is typically used as a blending factor. You indeed could interpret is as an isoline and already would get better results. Then the default texture is blurred, so you can use it for outlines as well. I wrote a shader to demonstrate it 😊: www.shadertoy.com/view/NtlBzX

[@ChiYeung-ky9yj]

Amazing

[@Patrick-pu5di]

I just found your channel and it's literally everything i love! im hoping to get a job as a technical artist sometime in the future. any plans on making videos going forward? And any advice for breaking into the industry?

[@KaletheQuick]

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

[@kogi04]

Thanks

[@araghon007]

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

[@israelRaizer]

Could you make a video about the use of SDFs with 3d raymarching?

[@ywenp]

That's cool! Has it been tried to replace the SDF by a "signed" (direction) vector field (*)? This way each pixel would know not only how far it is from the closest border but also in which direction D this border is. I know the point of SDFs is not to have to know the direction, just the distance, but I suspect you could do cool iridescence effects with that. For instance, you could encode such an "SDVF" as a texture using: - R channel: x component of D - G channel: y component of D - B (or A) channel: used like a boolean: 0 if "inside", 1 if "outside" (without it, you lose the "signed" aspect) The usual signed distance for any pixel is recoverable with: `vec2(R,G).norm() * (B*2 - 1)` (Could also work with 3D textures, you'd just use the remaining channel to represent D.z) (*) I'm using "vector" loosely here for simplicity's sake, though I believe a proper metric vector space structure could be devised for this

[@mateigiurgiu2586]

How do you rescale the texture using bicubic resampling?

[@MartinDonald]

Any good image editing/painting program will handle this for you, Photoshop or Krita will do, just resize the image and make sure the resampling method is set to bicubic.

[@dentjoener]

Question: The texture fetch, does that not use bilinear interpolation? Isn't that the same interpolation you have to use to downscale the SDF? Excellent tutorial!

[@spalose]

Hey Martin! I was wondering if a SDF shader using your methodology here could be translated to a 2D canvas item version in Godot 4.x?

[@vldkoz]

Hi. I'm trying to display an image from an fpv-drone on a screen using opengl, although I have very little experience with this library. But I am succeeding! Now I need to display various dynamic information on top of the video image. This information consists mainly of text and numbers with some icons. An important requirement is to outline the text to make it easier to read. Thus, I need to display text in 6-8 zones across the screen, which can change with each new frame. Saving every millisecond is important to me. I have a question - should I try your code, or should I look for other solutions for this kind of tasks? Thank you.

[@CharlesVanNoland]

There are free programs you can use to generate an SDF, like sdfgen and image-sdf.

[@anzhel3268]

you rock!

[@ni.ko3869]

why do we want the distance field to be signed? how far in/out of a shape's boundaries should it be white/black? i'd love to hear the answer, cheers

[@Matojeje]

At what point would it be better to use vector graphics for textures?

[@KryptLynx]

I think it depends on complexity of that vector texture. It is memory cost vs. computational cost. And memory is relatively cheap.

[@virgilehenry439]

"I much prefer to use free and open source examples for these videos" "the project files for this will be available via my patreon"

[@tarekwayne9193]

Exactly, and doesnt spend anytime showing how to make the texture and export it in Material Maker.

[@veggiet2009]

Could the same method be used to create a smooth looking voxel field?

[@timseguine2]

Marching cubes is usually based on a scalar field already. If you subsample the field during rasterization, it does give a smoother subdivision exactly like this.

[@w0nnafight]

planning on coming back?

[@MartinDonald]

Yep!

[@badradish2116]

C O O L

[@hontema]

why not use svg if you care about pixelization only?

[@GANESHKSME]

Bro.. do FFT ocean.. It's pure mathness makin makes all sick

[@xinfinity4756]

Not sure if the point of the video was to explain or show, but either way the how or why of signed distance fields was really left ignored with the video leaning towards a demonstration, which made it pretty confusing and didnt really allow me, at least, to grasp the topic of the video.

[@owsupport3650]

SDF allow you to have a texture which can be scaled and won't look bad. Normally when you scale a texture to a larger size it has blury edges, but with SDF you have a large range you can scale the texture and have smooth edges. You also get the bonus benefit of being able to do things such as outlines easily.

[@xinfinity4756]

@@owsupport3650 same issue as the video, how does that happen and why does it work?

[@owsupport3650]

@@xinfinity4756 When a normal texture is enlarged it just get blury and thats that. SDF is a gradient range. You in the shader pick what value is considered solid (Like 0.5 and higher) and what is considered fully transparent (like 0.3 and below) and you use smoothstep in the shader to set the alpha with those values. Because the gradient of the SDF is mostly the same when you resize it, its able to preserve the edges. You do however need to adjust the values you consider solid and transparent as you increase the size if you want the edge to stay sharp. Effectively because its a gradient you can adjust the settings to keep the edges sharp.

[@xinfinity4756]

@@owsupport3650 why does making it a gradient keep it sharp as you enlarge though? Wouldnt it run into the same issue of trying to represent curves but only having pixels to approximate with?

[@owsupport3650]

@@xinfinity4756 Why is water wet? I can only tell you what happens, not the maths behind it. Its not perfect when its scaled, its just better at being resized than a normal image. And since you control what area of the image is defined as the edge you can tune it(You can't tune a normal image). Simply put if you use Bitmap Fonts (Image(s) with all your fonts characters) you need to have multiple copies at different sizes if you use normal textures as they just blur or have artefacts when resized(You can generally divide with even numbers and it will look right though). If you use SDF with the Bitmap Font you can have one set of Images to represent your characters at multiple sizes. All you need to do is tune the values in the shader to keep the edge smooth. Though like i said its not 100% perfect. There is a point where if you scale too much it will look bad. But you can generally have a very large range like 14pt to 40pt where it looks good. Simply put its a combination of being able to tune the edge in the shader and the fact that SDF upscale well. P.S Shaders operate on Fragments or "sub pixels". So you effectively get more range with SDF as the shader interpolates using bilinear filtering.

[@zzador]

Impressive technique but to be honest: I have never stood in my favorite game in front of a wall and thought "Well, that letter on that texture is not very sharp on the edges". It is an effect that won't even be recognized by the majority of gamers out there I guess.

[@owsupport3650]

Its best used for fonts. Vector Fonts are expensive as your having to render alot of vertex's if you want them smooth. Bitmap Fonts are cheap but you need multiple copies at different sizes if you want them to look good. SDF used with Bitmap Fonts mean you get the benefit of it being cheap (As its just a single Quad per character) but also the ability to just use one Texture and have it scale.

[@ABaumstumpf]

great for things that need sharp outlines, not good for anything else. So it really depends on the game if it is useful or not. Say you have a crime/puzzle-game and and want to have the player find written notes, read a news-paper and whatnot - those are things that require hard black-on-white lines to be readable. In this case SDF can make the text crisp while also reducing the amount of diskspace and Vram needed.

[@rvoros]

failed to explain why using it as alpha results in clean curves

[@user-og6hl6lv7p]

While this is pretty neat it's still pretty un-optimized due to the fact that you need to store every piece of text as an image, taking up more memory and more storage space. Considering how much text is required in just your average indie game, this method would take a super, super long time to implement. I think there is a better way tbh.

[@theblah12]

Not really. The technique was designed mostly for vector-style decal textures that would be applied to the environment - stuff like warning signs, large pieces of text, icons etc that would usually be stored as textures anyway. For something like that, this technique is really simple, a lot of artists already do something similar to this already when they create an alpha texture with grayscale values instead of pure black and white, really all this technique does is increase the amount of grayscale values to create a smoother alpha test result. In fact, because the result looks a lot smoother then a conventional alpha texture, you can actually downscale the texture even more then usual so it can actually take up less memory, or you can stuff more assets into a atlas file without worrying about the texel density. But if you wanted to use this technique for any kind of generic text, then you could just store a full alphabet within the texture then chop up the faces to make words, you could probably write a fairly simply script that does that for you.

[@owsupport3650]

You don't store each piece of text as an image though. You just make a normal "Bitmap Font" (A texture or textures which hold images of each character in your font) but apply SDF to it. You get the benefit of "Bitmap" Fonts which is that they are fast (as each character is just a Quad) but also the ability to scale it with a very large range meaning that you don't need individual "Bitmap" Fonts for each size.

[@ABaumstumpf]

How do you think text gets displayed on the screen? There are basically 2 things you can do: 1 - have a straight renderer that directly converts the character to pixels on the screen. No transformation, just straight letters like you see in the comments here. This is easy and fast, but does not allow for anything else like changing their size based on view distance as it is an inherently 2D approach. 2 - convert the text to textures That is what you need to do for basically any 3D application with text inside the 3D world. You can do that in many ways - most games tend to just store a picture of the text. Think for example a "Stop" sign in a driving game. The game already needs to store the texture of the sign and writing the text ontop of that picture takes up NO extra space or processing time. Or you can store it as text and then when the game is running use the First approach to draw the text as a 2D object but instead of displaying it store that as a texture. That way it takes up less disk-space and can reduce the startup and load-times of the game, but it needs to be generated before it is drawn. SDF is then just a particular way of representing the drawn texture.