Learning shaders when AI can write them for you

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

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

Made by @huozhi