Three.js Shading Language and Signed Distance Fields

Unlock advanced visual effects in Three.js with the Three.js Shading Language (TSL)! This course simplifies shader development, making it accessible even if you lack deep knowledge of GLSL or WGSL. We'll explore Signed Distance Fields (SDFs), a powerful technique for creating scenes and animations using mathematical functions – essentially, you can draw anything with SDFs!

Here's what you'll learn:

• Setup & Foundations:

  • Basic environment development setup for TSL.
  • Importing necessary libraries and utilizing import Maps/bundlers.
  • Understanding the prerequisites for a TSL scene.
  • Mastering Fragment Shader coordinates.

• Animated Patterns & Styling:

  • Creating a variety of animated patterns, progressing from simple to complex.
  • Drawing diverse line styles.
  • Implementing uniforms and uniform arrays for dynamic control.
  • Building interactive scenes with a GUI.

• Deep Dive into Signed Distance Fields:

  • Learning the fundamentals of Signed Distance Fields (SDFs).
  • Drawing distance lines using SDF information.
  • Coloring and animating 2D SDFs.
  • Hands-on practice building projects with keyboard interactivity.

• Ray Marching & Lighting:

  • Understanding the basics of Ray Marching.
  • Implementing lighting with Lambertian, Ambient, and Phong specular models.
  • Utilizing hard and soft shadows.
  • Creating realistic SDF reflections.
  • Implementing Adaptive Device Pixel Ratio (DPR) for optimal visuals.

• Advanced SDF Techniques:

  • Coloring and animating 3D SDFs.
  • Adding Atmospheric Scattering.
  • Implementing Ambient Occlusion.
  • Applying the Fresnel Effect.

• Fractal Fun:

  • Exploring Fractal Brownian Motion (FBM).
  • Creating captivating water effects using the Gerstner/Trochoidal algorithm.
  • Adding realistic Clouds.
  • Implementing Domain Repetition.
  • Generating stunning visuals with Mandelbulb, Juliabulb & Kleinian Inversion fractals.
  • And much more!

TSL's Node-Based Shader Graph System: Create and manage shaders visually, eliminating the need for complex manual GLSL/WGSL coding.

Renderer-Agnostic: Shaders work seamlessly across WebGL and WebGPU.

Developer-Friendly: Leverage IDE features like IntelliSense, code formatting, and linting, plus benefit from tree shaking during production.

Join this Three.js Shading Language (TSL) and Signed Distance Fields course to elevate your 3D graphics skills!