← Back to Courses
Interactive Course
TSL for Beginners: Build a Living Planet
Shaders have a reputation: powerful, gorgeous, and impossible to learn. TSL changes that — you write shaders in plain JavaScript, right inside your Three.js code. This course teaches TSL from absolute zero by building one thing, a living planet, one visible layer per lesson: oceans and continents, drifting clouds, a glowing atmosphere, and real terrain relief.
Lessons10 Lessons
Duration~90 minutes
LevelBeginner
What You'll Learn
Set up the WebGPU renderer and write your first TSL colorNode
Understand the core TSL mental model — nodes are values you do math on
Use UV coordinates to make surface color vary by position
Generate organic continents with MaterialX procedural noise
Carve smooth noise into crisp zones with step() and smoothstep()
Animate a shader over time with the time node
Layer independent effects — a drifting cloud deck — over a base material
Build a glowing Fresnel-based atmosphere rim
Displace real geometry in the vertex stage for physical terrain relief
Bridge JavaScript and your shader with uniform() and wire up live controls
Prerequisites
- Basic JavaScript (variables, functions, objects)
- Enough Three.js to put a mesh on screen — a sphere, a light, a camera
- No shader experience and no advanced math required
Course Overview
10 Lessons
Build a living, breathing planet with TSL — one visible layer per lesson, from your first colorNode to a full control panel.
1
Getting Started
2 lessons
2
Painting by Position
2 lessons
3
Carving the World
2 lessons
4
Layers & Atmosphere
2 lessons
5
Shape & Control
2 lessons
Ready to build a living planet?
Start writing TSL from zero — no shader experience required.