An interactive course for frontend developers
Learn shaders by building a coastal scene.
Start with coordinates and color. Finish with moving ocean water, terrain, atmosphere, lighting, and a coastal observatory rendered from math. Every lesson pairs a live Three.js TSL shader with its WGSL equivalent.
Sign in to start
30–45 minutes per lesson
- Course
- 55 lessons in three connected projects
- Tools
- Three.js TSL and WGSL with vgpu
- Source studies
- 30 open-source Paper shaders dissected
Signed distance fieldSurface → normal → light
One shader, rendered in real timeMove to relight