Learn Threejs Shading Language and Signed Distance Fields

Channel:

SBCODE

Subscribers:

24,800

Published on May 8, 2025 11:25:51 AM ● Video Link: https://www.youtube.com/watch?v=VOEtE_tNX8s

Duration: 0:00

35 views

1

Playlist :    • Three.js Shading Language (TSL)  
Documentation : https://sbcode.net/tsl/
Udemy Coupons : https://sbcode.net/coupons

In this course we will learn all about using the Three.js Shading Language with Signed Distance Fields.

You can draw anything with Signed Distance Fields, and TSL makes that more accessible for developers, especially those without deep knowledge of low-level GLSL, WGSL or graphics programming.

In the course we will cover,

Basic environment development setup,
Importing the required libraries,
Using import Maps or a bundler / build tool,
Discuss the prerequisites of a TSL scene,
Fragment Shader coordinates,
Create several animated patterns from easy to more advanced,
Draw various styles of lines,
Implement uniforms and uniform array,
Interact with our scenes using a GUI,
Learn the basics of sign distance Fields,
Draw distance lines using SDF information,
Colouring and animating 2D SDFs,
Practice by building something and adding keyboard interactivity,
Learn the basics of Ray marching,
Lighting 3D SDFs,
Using Lambertian, Ambient and Phong specular,
Using hard and soft shadowing,
Implement SDF reflections,
Implement adaptive device pixel ratio,
Colouring and animating 3D SDFs,
Add atmospheric Scattering,
Implement, Ambient Occlusion,
And apply Fresnel Effect,
Learn all about Fractal Brownian Motion,
Add Water,
Add Clouds,
Doman Repetition
and much more

#three
#threejs
#tsl
#threejsshadinglanguage
#threeshaderlanguage
#signeddistancefields