Uploaded June 2021 | Updated September 2026, 2 weeks ago

---

✔️ Tested in 2020.3 ➕ 2021.1

Squares, boxes, and rounded rectangles are all common shapes you might want to draw in a shader. In this video, I show you how to do that using 2D signed distance fields, or SDFs. We'll derive the formula, recreate it in the shader graph, and then make some cool shaders to see it in action: including a mouse-controlled rectangle drawer, rainbow SDF visualizer, and procedural brick wall.

👋 Subscribe for weekly game development videos!
► youtube.com/c/nedmakesgames?sub_confirmation=1

👑 Join my Patreon to watch videos early, download all project files, vote on future topics, and more! Thank you so much!
► patreon.com/nedmakesgames

🔗 Check out my website for a searchable list of tutorials!
► nedmakesgames.github.io

2️⃣ 2nd Channel ► youtube.com/nedmakesgames2
🔴 Twitch ► twitch.tv/nedmakesgames
🐦 Twitter ► twitter.com/nedmakesgames
🎮 Discord ► discordapp.com/invite/ubxSVBK
📸 Instagram ► instagram.com/nedmakesgames
👽 Reddit ► reddit.com/u/nedmakesgames
🎶 TikTok ► tiktok.com/@nedmakesgames
☕ Ko-fi ► ko-fi.com/nedmakesgames

🎬 Previous videos
► Line segment: youtu.be/D_Zq6q1gnvw

💬 Video transcript
► docs.google.com/document/d/1ZTV7D4ZL2DkgrMd-s4ZG4VA0LJNHgaCwpR4y7DCnMzs/edit?usp=sharing

⏲️ Timestamps:
0:00 Intro
0:19 Deriving the SDF
4:09 SDFs in Shader Graph
5:11 Mouse driven rectangle drawing
6:15 Rainbow SDF visualizer
6:46 Procedural brick wall
7:26 Wrap up and credits

🎖️ Credits, references and further reading:
• Inigo Quilez: 2D SDF formulas - iquilezles.org/www/articles/distfunctions2d/distfunctions2d.htm
• Alan Zucconi: A Gentle Primer on 2D Rotations - alanzucconi.com/2016/02/03/2d-rotations
• Academo: 2D Rotation about a point - academo.org/demos/rotation-about-point

Music:
Ouroboros by Kevin MacLeod
Link: incompetech.filmmusic.io/song/4996-ouroboros
License: filmmusic.io/standard-license

#GameDev #IndieDev #Unity