00 Prologue: how a GPU paints
You will write this planet yourself
It is drawn by one vertex shader and one fragment shader. Drag the canvas to spin it.
Exercise
Drag numbers, or edit the code
This course is for people who know JavaScript or C/C++ but have never written a shader. Every lesson shows a live picture on the left and the code that draws it on the right: drag any number in the code, or edit the code itself.
- 01Fragments and data
- 02Drawing shapes with math
- 03Time, interaction and repetition
- 04Textures and noise
- 05Data becomes vertices
- 06Space, camera and depth
- 07Surfaces and light
- 08What Three.js writes for you
- 09Drawing in several passes
- 10Other fragment outputs
- 11GPU quirks
- 12From picture to recipe
- 13Capstone
- AAppendix
JS side
The whole course takes this planet apart: data → vertices → rasterization → fragments → output. In the last lesson you rewrite it yourself.
Try it
- Look at the peaks and the water: the shading comes in bands, not a smooth gradient
- Start from any chapter in the contents; you can always come back