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 - https://github.com/SuboptimalEng/shad...
🎥 YouTube - / suboptimaleng
🐦 Twitter - / suboptimaleng
📸 Instagram - / suboptimaleng
💻 GitHub - https://github.com/SuboptimalEng
🌎 Website - https://suboptimaleng.com
== [ Resources ] ==
Inigo Quilez’s Articles - https://iquilezles.org/articles
The Book of Shaders - https://thebookofshaders.com
Simon Dev’s Shader Course - https://simondev.teachable.com
VS Code GLSL Shader Setup Guide - • How to Write GLSL Shaders in VS Code
== [ 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
