Introduction to Signed Distance Fields
23 هزار بار بازدید -
پارسال
-
In this GLSL shader tutorial,
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...
🐦 Twitter - Twitter: 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
📖 Code - https://github.com/SuboptimalEng/shad...
🐦 Twitter - Twitter: 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
پارسال
در تاریخ 1401/12/29 منتشر شده
است.
23,034
بـار بازدید شده