Introduction to Signed Distance Fields

In this GLSL shader tutorial, we will go over the basics of Signed Distance Fields (SDFs). We will start by setting up a GLSL shader in VS Code with proper UV coordinates. Then we will draw a circle using the SDF function available on Inigo Quilez’s website. Finally, we will add some visuals to help us understand how the SDF works.
📖 Code - github.com/SuboptimalEng/shad...
🐦 Twitter - / suboptimaleng
💻 GitHub - github.com/SuboptimalEng
🌎 Website - suboptimaleng.com
== [ Resources ] ==
Inigo Quilez’s Articles - iquilezles.org/articles
The Book of Shaders - thebookofshaders.com
Simon Dev’s Shader Course - simondev.teachable.com
VS Code GLSL Shader Setup Guide - • How to Write GLSL Shad...
== [ Timestamps ] ==
00:00 Intro to SDFs
01:08 GLSL Shader Setup
02:03 UV Coordinates
03:23 Signed Distance Field
04:47 Exponential Shadow
06:04 Sin Waves
07:00 Smoothstep Border
== [ Tags ] ==
#suboptimal #glsl #shaders

[@countessanise8372]

Great video. The fact that you had different commented-out lines ready to be uncommented one by one in order visualize the math, helped me quite a lot in grasping the concept. Thank you very much, Suboptimal!

[@SuboptimalEng]

Thanks Anise! It's great to hear that the technique of gradually uncommenting code helped 🔥

[@Demixroxic]

great video dude imma save it and come back

[@Andrew-qc8jh]

Really well laid out video, thanks🖖

[@SuboptimalEng]

Glad it was helpful!

[@user-vr6zs6lv9j]

Thank you very much. The best explanation !!!

[@SuboptimalEng]

Glad it was helpful!

[@emteiks]

love it! more of shader gooodies needed! :)

[@SuboptimalEng]

It’s on my roadmap for this year. Right after I learn WebGL!

[@lksxxtodin5292]

Thank You!

[@deadbit6007]

thanks for video, do you know how make dashed outline for rounded rectangle ?

[@janus798]

This is a pretty high quality tutorial! I'm surprised there aren't any comments yet

[@SuboptimalEng]

Thanks! I'm still waiting for the day the algorithm picks up my videos 😂

[@yonilaskov340]

very nice

[@suvetar]

Love it, thanks for your great introduction and explanation! I wonder, can this technique be used on internal corners and edges to calcular a kind of ambient occlusion? Just like the idea of messing with the parameters and seeing what happens!

[@SuboptimalEng]

Thanks! Most of my knowledge comes from Inigo Quilez. He used the SDF to create a fake ambient occlusion for 2D shapes which is what I've shown here. Inverting the colors allowed me to turn the fake AO into a nice glow effect. I still have to learn how to do actual SSAO so I'll be looking into that next.

[@Byynx]

You're the guy!!@

[@Hobbes9]

I don't use webGL, but I'm learning openGL and I think GLSL should be the same for both(?) Came from some youtube comment, but this is pretty well made so subbed

[@SuboptimalEng]

Thanks! Yea, OpenGL uses GLSL as well so the code should be similar. I'm actually considering learning OpenGL with C++ since lots of graphics roles need this 🤓

[@axMf3qTI]

I still don't understand how the whole screen is updated without a loop or update function.

[@SuboptimalEng]

I'd recommend watching Kishimisu's "An Introduction to Shader Art Coding" video.

[@axMf3qTI]

@@SuboptimalEng will do, thanks!

[@rs-dn4ez]

Gpu has many cores, you can calculate each pixel in parallel.

[@Lee-qj4hk]

+1 I really liked the way you asked for a sub and would like to be asked again :P

[@regularmenthol]

The introduction 🤣

[@Shortom_Boy]

Bro can you teach how we make a perfect game It's Magic Engine? this works in mobile