Glyphs, shapes, fonts, signed distance fields.

แชร์
ฝัง
  • เผยแพร่เมื่อ 1 มิ.ย. 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/

ความคิดเห็น • 131

  • @cptfurball
    @cptfurball 2 ปีที่แล้ว +74

    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.

  • @frankerzed973
    @frankerzed973 2 ปีที่แล้ว +115

    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
      @jsmdnq 2 ปีที่แล้ว

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

  • @Asdayasman
    @Asdayasman 2 ปีที่แล้ว +30

    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.

  • @hotfishdev
    @hotfishdev ปีที่แล้ว +10

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

  • @diegoantoniorosariopalomin4977
    @diegoantoniorosariopalomin4977 หลายเดือนก่อน +1

    The multi layer distance field blew me away

  • @ABaumstumpf
    @ABaumstumpf 2 ปีที่แล้ว +3

    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.

  • @youkool1526
    @youkool1526 ปีที่แล้ว +4

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

  • @hermedr9423
    @hermedr9423 3 ปีที่แล้ว +6

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

  • @dittilio
    @dittilio 2 ปีที่แล้ว +2

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

  • @pedroenmanuelfuenteszambra8873
    @pedroenmanuelfuenteszambra8873 2 ปีที่แล้ว +2

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

  • @unfa00
    @unfa00 3 ปีที่แล้ว +10

    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
      @slifertheone1 2 ปีที่แล้ว +4

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

    • @Kavukamari
      @Kavukamari 11 หลายเดือนก่อน

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

    • @Tsudico
      @Tsudico 6 หลายเดือนก่อน

      @@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.

  • @victorpkstrength
    @victorpkstrength 3 ปีที่แล้ว +9

    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!

  • @Reaversword3D
    @Reaversword3D ปีที่แล้ว +1

    Thank you for the amazing explanation

  • @anerdwillhackit
    @anerdwillhackit 2 ปีที่แล้ว +3

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

  • @Tom3sYT
    @Tom3sYT ปีที่แล้ว +1

    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

  • @tynrare5631
    @tynrare5631 3 ปีที่แล้ว +5

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

  • @4.0.4
    @4.0.4 2 ปีที่แล้ว +1

    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.

  • @4AneR
    @4AneR 2 ปีที่แล้ว

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

  • @amac333
    @amac333 6 หลายเดือนก่อน

    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.

  • @Sliterinq
    @Sliterinq 3 ปีที่แล้ว +7

    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!

  • @AndersonMancini
    @AndersonMancini 4 หลายเดือนก่อน

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

  • @chriss5112
    @chriss5112 3 ปีที่แล้ว +3

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

  • @TrentSterling
    @TrentSterling 3 ปีที่แล้ว +1

    Gradient looks straight up baller; nice work!

  • @knho1774
    @knho1774 3 ปีที่แล้ว +1

    Very high-quality video, thanks!

  • @notveryobservant1056
    @notveryobservant1056 ปีที่แล้ว +1

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

  • @shadespirit11
    @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

  • @ImDrFail
    @ImDrFail 2 ปีที่แล้ว +2

    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

  • @WildfireKitsune
    @WildfireKitsune 2 ปีที่แล้ว

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

  • @KasperFrandsen
    @KasperFrandsen 3 ปีที่แล้ว +1

    Amazing video as always!

  • @WireWhiz
    @WireWhiz 3 ปีที่แล้ว +1

    Thank you, this made it really easy to understand.

  • @edh615
    @edh615 ปีที่แล้ว

    Love it! please keep doing them

  • @VladgavligGapchich
    @VladgavligGapchich 3 ปีที่แล้ว +1

    Awesome! That is super useful!

  • @giaco89
    @giaco89 3 ปีที่แล้ว +1

    Awesome video Martin!
    MOAR TA knowledge :D

  • @BRiemann313
    @BRiemann313 3 ปีที่แล้ว +1

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

  • @g4fly4ever8
    @g4fly4ever8 2 ปีที่แล้ว

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

  • @vanderkarl3927
    @vanderkarl3927 2 ปีที่แล้ว +2

    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.

  • @aucer7904
    @aucer7904 4 หลายเดือนก่อน

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

  • @aachrisg
    @aachrisg 2 ปีที่แล้ว +1

    Good explanation

  • @kevin-bf4ww
    @kevin-bf4ww 2 ปีที่แล้ว

    criminally underviewed channel

  • @FrohSim
    @FrohSim 2 ปีที่แล้ว

    Fantastic video!

  • @NunSuperior
    @NunSuperior 2 ปีที่แล้ว

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

  • @user-oc9ho6kv1s
    @user-oc9ho6kv1s 3 ปีที่แล้ว +1

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

  • @Winexoid
    @Winexoid ปีที่แล้ว +1

    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!

  • @DallinBackstrom
    @DallinBackstrom 2 ปีที่แล้ว

    Very informative! thanks.

  • @JoSilverNG
    @JoSilverNG 3 ปีที่แล้ว +3

    HOLY SHIT! THIS EXACTLY WHAT I NEED!

  • @PuraTvOyun
    @PuraTvOyun 2 ปีที่แล้ว

    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... 🤩🤩

  • @VeloFX
    @VeloFX 2 ปีที่แล้ว

    This is crazy good

  • @MecegguemMohamed
    @MecegguemMohamed 2 ปีที่แล้ว

    This is underrated content I have learned a lot

  • @garrettbluma257
    @garrettbluma257 2 ปีที่แล้ว

    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.

  • @leimiles18
    @leimiles18 2 ปีที่แล้ว +1

    This is great one.

  • @ayushagnihotri8600
    @ayushagnihotri8600 3 ปีที่แล้ว +1

    Amazing. 😍

  • @RealPigeonz
    @RealPigeonz 3 ปีที่แล้ว +1

    Dude. You are my hero xD THX!!!

  • @stefanguiton
    @stefanguiton 2 ปีที่แล้ว

    excellent!

  • @JasonCummer
    @JasonCummer 2 ปีที่แล้ว

    This is also very cool. Thanks

  • @Dubswitcher
    @Dubswitcher 2 ปีที่แล้ว

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

  • @emi_cpl
    @emi_cpl 3 ปีที่แล้ว +1

    Great video! :D

  • @ChiYeung-ky9yj
    @ChiYeung-ky9yj ปีที่แล้ว

    Amazing

  • @S-I-T
    @S-I-T 3 ปีที่แล้ว +1

    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
      @S-I-T 3 ปีที่แล้ว +1

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

    • @MartinDonald
      @MartinDonald  3 ปีที่แล้ว +1

      @@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
      @S-I-T 3 ปีที่แล้ว +1

      @@MartinDonald thanks for this fella.

  • @Suzuki_Hiakura
    @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.

  • @Galomortalbr
    @Galomortalbr 9 หลายเดือนก่อน

    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
    @yogpanjarale 2 ปีที่แล้ว

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

  • @ChronoWrinkle
    @ChronoWrinkle 2 ปีที่แล้ว +1

    OMFG! Instant subscribe!

  • @kogi04
    @kogi04 2 ปีที่แล้ว +1

    Thanks

  • @Patrick-pu5di
    @Patrick-pu5di 2 ปีที่แล้ว

    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?

  • @anzhel3268
    @anzhel3268 3 ปีที่แล้ว +1

    you rock!

  • @leshiy_nd
    @leshiy_nd 2 ปีที่แล้ว +1

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

  • @timseguine2
    @timseguine2 2 ปีที่แล้ว

    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.

  • @curiouspers
    @curiouspers 2 ปีที่แล้ว +1

    Please continue talking about SDFs

  • @dentjoener
    @dentjoener 2 ปีที่แล้ว

    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!

  • @alan2here
    @alan2here ปีที่แล้ว +1

    I was wondering how you could get negative distances :)

  • @ShinoSarna
    @ShinoSarna 2 ปีที่แล้ว

    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.

  • @araghon007
    @araghon007 2 ปีที่แล้ว

    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

  • @spalose
    @spalose 6 หลายเดือนก่อน

    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?

  • @ywenp
    @ywenp 5 หลายเดือนก่อน

    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
    @mateigiurgiu2586 3 ปีที่แล้ว +2

    How do you rescale the texture using bicubic resampling?

    • @MartinDonald
      @MartinDonald  3 ปีที่แล้ว +2

      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.

  • @anteshell
    @anteshell 2 ปีที่แล้ว +2

    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
      @ronnetgrazer362 2 ปีที่แล้ว +1

      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
      @ronnetgrazer362 2 ปีที่แล้ว

      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
      @ravelite 2 ปีที่แล้ว

      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
      @ronnetgrazer362 2 ปีที่แล้ว

      @@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
      @AntonioNoack 2 ปีที่แล้ว +2

      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

  • @KaletheQuick
    @KaletheQuick 2 ปีที่แล้ว +1

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

  • @anonymousmisnomer5443
    @anonymousmisnomer5443 2 ปีที่แล้ว

    Typographers hate him for this one simple trick

  • @israelRaizer
    @israelRaizer 2 ปีที่แล้ว

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

  • @CharlesVanNoland
    @CharlesVanNoland 2 ปีที่แล้ว

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

  • @ni.ko3869
    @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

  • @veggiet2009
    @veggiet2009 2 ปีที่แล้ว

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

    • @timseguine2
      @timseguine2 2 ปีที่แล้ว

      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.

  • @GANESHKSME
    @GANESHKSME 2 ปีที่แล้ว +1

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

  • @badradish2116
    @badradish2116 2 ปีที่แล้ว

    C O O L

  • @Matojeje
    @Matojeje ปีที่แล้ว

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

    • @KryptLynx
      @KryptLynx ปีที่แล้ว

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

  • @w0nnafight
    @w0nnafight 2 ปีที่แล้ว +1

    planning on coming back?

  • @hontema
    @hontema 10 หลายเดือนก่อน

    why not use svg if you care about pixelization only?

  • @virgilehenry439
    @virgilehenry439 10 หลายเดือนก่อน +2

    "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
      @tarekwayne9193 4 หลายเดือนก่อน

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

  • @zzador
    @zzador 2 ปีที่แล้ว

    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
      @owsupport3650 2 ปีที่แล้ว

      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
      @ABaumstumpf 2 ปีที่แล้ว

      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.

  • @xinfinity4756
    @xinfinity4756 2 ปีที่แล้ว +1

    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
      @owsupport3650 2 ปีที่แล้ว

      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
      @xinfinity4756 2 ปีที่แล้ว +1

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

    • @owsupport3650
      @owsupport3650 2 ปีที่แล้ว

      @@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
      @xinfinity4756 2 ปีที่แล้ว

      @@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
      @owsupport3650 2 ปีที่แล้ว

      @@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.

  • @rvoros
    @rvoros ปีที่แล้ว

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

  • @user-og6hl6lv7p
    @user-og6hl6lv7p 2 ปีที่แล้ว

    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
      @theblah12 2 ปีที่แล้ว +1

      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
      @owsupport3650 2 ปีที่แล้ว

      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
      @ABaumstumpf 2 ปีที่แล้ว

      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.