← Back to Courses
Interactive Course
Learn Practical TSL
Early access $25$35Not a typical beginner-to-advanced course. Each lesson teaches one concept through a visual effect you can actually use — marble, hologram, GPU particles, glass, dissolve. You understand it because you built it.
Lessons48 Lessons
Duration~6 hours
LevelBeginner → Advanced
What You'll Learn
Write GPU shaders in plain JavaScript — no GLSL, no cryptic syntax
Animate materials with time, noise, UV, and procedural patterns
Displace geometry in real time for water, breathing, and morphing effects
Build convincing surface finishes with metalness, roughness, and Fresnel
Create dissolve, hologram, emissive, and bloom effects from scratch
Assemble every technique into a portfolio-ready animated energy portal
Understand GPU compute shaders and why they unlock a different class of effect
Spawn and animate hundreds of thousands of GPU particles at 60 fps
Build physics-driven simulations with velocity, gravity, and curl-noise flow fields
Connect JavaScript values to live shaders with uniforms and interactive events
Drive 3D with scroll and mouse — lerp, GSAP ScrollTrigger, camera paths, and parallax
Ship a complete scroll-driven 3D landing page combining all four volumes
Recreate the Stripe gradient — horizontal plane, large-scale noise, grazing camera angle
Build wave and interference surfaces using sine displacement on a flat plane
Prerequisites
- Basic JavaScript (variables, functions, objects)
- Passing familiarity with Three.js (putting a mesh on screen is enough)
Course Overview
48 Lessons
Master TSL shaders in your Three.js projects — no GLSL required.
1
Foundations
3 lessons
2
Position & Patterns
2 lessons
3
Texture & Motion
2 lessons
4
Advanced Composition
2 lessons
5
Capstone I
1 lessons
6
Edge & Shape
2 lessons
7
Textures & Layering
2 lessons
8
Dissolve & Reuse
2 lessons
9
Full Effects
2 lessons
10
Post-processing & Capstone II
2 lessons
11
GPU Compute Basics
2 lessons
12
Particles on Screen
2 lessons
13
Physics & Flow
2 lessons
14
Lifecycle & Interaction
2 lessons
15
Capstone III
2 lessons
16
The Uniform Bridge
2 lessons
17
Smooth Motion
2 lessons
18
Mouse & Reveals
2 lessons
19
Camera & Transitions
2 lessons
20
Capstone IV
2 lessons
21
Planes & Surfaces
2 lessons
22
Surface Craft
2 lessons
23
Shape Math & Integration
2 lessons
24
Production Polish
2 lessons
Ready to write your first shader?
Start building with TSL — no GLSL required.
Early access $25$35