Introduction to Signed Distance Fields

Published: 20 March 2023
on channel: Suboptimal Engineer

26,784

1.3k

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

Watch video Introduction to Signed Distance Fields online without registration, duration hours minute second in high quality. This video was added by user Suboptimal Engineer 20 March 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 26,784 once and liked it 1.3 thousand people.

6,153