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/shader-tutorials
🐦 Twitter - https://twitter.com/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 - https://youtube.com/watch?v=7UvpTTEE1Hs

== [ 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

Видео Introduction to Signed Distance Fields канала Suboptimal Engineer