Mastering GLSL in TouchDesigner, Lesson 4: Drawing Shapes & Essential GLSL Functions

In this (longer) lesson of Mastering GLSL in TouchDesigner, we dive into drawing simple shapes using GLSL and common math functions that are essential for shader programming. You’ll learn how to use functions like fract(), mod(), step(), mix(), and smoothstep() to manipulate values and create dynamic visuals. We’ll also explore how to draw circles and lines using pixel-based logic and introduce Signed Distance Fields (SDFs) for precise shape rendering.

📌 Key Topics Covered:
✅ Essential GLSL functions (floor(), sin(), length(), etc.)
✅ Drawing circles and lines using distance functions
✅ How step() and smoothstep() help create smooth transitions
✅ Introduction to Signed Distance Fields (SDFs) for shape rendering
✅ Combining SDFs to create more complex forms

Find me online:
Project Files/Patreon: https://www.patreon.com/water__shed
Portfolio: https://www.lakeheckaman.com
IG: https://instagram.com/lake_heckaman

Resources:
SDFs from IQ: https://iquilezles.org/articles/distfunctions2d/
Book of Shaders: https://thebookofshaders.com/

00:00 – Intro
01:48 – Drawing Shaping with GLSL
06:15 – SDFs in TouchDesigner
09:16 – Useful GLSL functions for drawing shapes
13:10 – Examples – Step() and Smoothstep()
16:04 – How to draw a line in GLSL using TouchDesigner
42:19 – Drawing a rectangle with shaders in GLSL
47:56 – Drawing shape outlines and aspect correction
52:09 – SDFs in TouchDesigner with GLSL shaders
56:04 – Exercises