Glyphs, shapes, fonts, signed distance fields.
Vložit
- čas přidán 2. 07. 2024
- Old but gold, in this video I explain how to generate and use signed distance field textures for rendering sharp vector-like shapes such as text and graphics.
References:
cdn.cloudflare.steamstatic.co...
shaderbits.com/blog/various-d...
Me:
Patreon / bolddunkley
Twitter / bolddunkley
itch.io bolddunkley.itch.io/
Software used for this video:
Material Maker rodzilla.itch.io/material-maker
Blender 2.8 www.blender.org/
Godot 3.2 godotengine.org/
OBS obsproject.com/
Kdenlive kdenlive.org/en/
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.
The multi layer distance field blew me away
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.
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
Much like Ken Griffin shorting humanity... but I'm sure even fewer people know or care about Griffin.
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!😊
So good! thank you for explaining this so clearly to a dumb 3d artist such as myself.
I found this window and proceeded to binge watch all of them. mind blown so many times. thanks mate.
Thank you for the amazing explanation
Ok this one blew my mind away. So simple and yet so powerful.
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.
Man, your videos answer SO many questions I've had but didn't even have the vocabulary to phrase. Thank you!
You channel is a gem that we all seek, but few of us ever find
OMG. This is so awesome 😮. I'm impressed 👏🏻👏🏻👏🏻
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!
Could you explain a little more how did you did it?
@@slifertheone1 seconding this lol, really curious of that method
@@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.
Oh no, going to watch these all in a day already...
Ah cool! Thanks mate, your video's I have found have introduced me to some neat new concepts
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
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.
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.
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!
Incredible useful 6mins of information. Definitely will support on patreon
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!
WOW! That is amazing! I had no idea SDFs could be so flexible. Thank you for the great video.
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
This is EXACTLY what I needed.
I will definitely be using this in my projects.
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 :)
Good explanation
criminally underviewed channel
Gradient looks straight up baller; nice work!
Very high-quality video, thanks!
Amazing video as always!
Thank you, this made it really easy to understand.
Again a great video Martin, I am proud to be your patron :D
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
When I am finding the solution of jaggy label 3d in godot, this is so awsome!
Im not a game dev but i love seeing computer magic explained
Awesome! That is super useful!
Love it! please keep doing them
HOLY SHIT! THIS EXACTLY WHAT I NEED!
Fantastic video!
This is crazy good
This is underrated content I have learned a lot
Awesome video Martin!
MOAR TA knowledge :D
Amazing. 😍
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.
excellent!
Thanks
Amazing
This is great one.
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.
This is great. Now I understand Unity's Text Mesh Pro.
Великолепный туториал, впрочем как и всегда. Спасибо!
Very informative! thanks.
Dude. You are my hero xD THX!!!
Great video! :D
This is also very cool. Thanks
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... 🤩🤩
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!
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
Wow I was NOT expecting to see my favorite game right at the start lol
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.
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.
Oh and again a fantastic video. Any advice on how to begin shader writing Martin?
@@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/
@@MartinDonald thanks for this fella.
OMFG! Instant subscribe!
I felt this must be a channel with more subscribers
Nevertheless the video quality is just very professional or great.
you rock!
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 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?
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.
I'm shocked.
«You know what's cooler than magic? Math!»
I was wondering how you could get negative distances :)
Please continue talking about SDFs
C O O L
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!
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
There are free programs you can use to generate an SDF, like sdfgen and image-sdf.
Could you make a video about the use of SDFs with 3d raymarching?
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?
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
How do you rescale the texture using bicubic resampling?
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.
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?
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.
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.
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.
@@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.
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
Imagine pitching this idea you just had to your coworkers.
"No, seriously, I could make the text better by making it blurry!"
Hard sell.
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
Could the same method be used to create a smooth looking voxel field?
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.
At what point would it be better to use vector graphics for textures?
I think it depends on complexity of that vector texture. It is memory cost vs. computational cost. And memory is relatively cheap.
Typographers hate him for this one simple trick
Bro.. do FFT ocean.. It's pure mathness makin makes all sick
why not use svg if you care about pixelization only?
planning on coming back?
Yep!
"I much prefer to use free and open source examples for these videos"
"the project files for this will be available via my patreon"
Exactly, and doesnt spend anytime showing how to make the texture and export it in Material Maker.
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.
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.
@@owsupport3650 same issue as the video, how does that happen and why does it work?
@@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.
@@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?
@@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.
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.
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.
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.
failed to explain why using it as alpha results in clean curves
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.
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.
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.
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.