Articles

Every lesson, in reading order.

Each article builds on the ones before it. Stuck on a word? Hover it, or an earlier part explains it with a demo.

Series 01

Basics

The math and the Unity bits every other lesson leans on, so start here.

UV, coordinates, graphs
- Part 15 min dose
- Beginner
Where is this pixel?A shader colors one pixel at a time, and its first clue is where that pixel sits. Let's read UV, move the middle to (0, 0) and draw a graph.
Sine, waves, time
- Part 25 min dose
- Beginner
Sine and cosine go round in circlesTwo small functions turn an angle into a point on a circle and a circle into a wave. Shaders use them for waves, pulses, ripples and turning things.
Vectors, dot product, lighting
- Part 36 min dose
- Beginner
Vectors are little arrows made of numbersA vector is a few numbers that travel together, like a position, a direction or a color. Add them, measure them, then let the dot product light a sphere.
Matrices, mul
- Part 47 min dose
- Beginner
Where a matrix sends the arrowsA matrix is a small grid of numbers that turns, stretches and slants every point at once. Read it by its columns, multiply by hand and undo it.
Lerp, remap, saturate
- Part 56 min dose
- Beginner
How lerp, inverse lerp and remap blend numbersSlide from one value to another with lerp, find where a value sits with inverse lerp, and move numbers from one range into another with remap.
Unity, ShaderLab, properties
- Part 68 min dose
- Beginner
What every line of a Unity shader file is forA small Unity shader file read line by line, from the material's settings to both eyes of a headset, plus the tags, render state and Blend lines other shaders use.
Matrices, transforms
- Part 97 min dose
- Beginner
One 4x4 matrix moves the whole meshIn 3D, three columns of a matrix turn and stretch a mesh but can't move it. A fourth column holds the position, and that 4 by 4 matrix tells a shader where your mesh sits.
HLSL, GLSL, Unity, WebGL
- Part 105 min dose
- Beginner
HLSL and GLSL say the same thing in different wordsUnity shaders are written in HLSL, but browsers run GLSL. Let's look at the names that differ, the few rules that bite, and how this site turns one into the other.

Series 02

Foundations

The handful of math tools every shader leans on.

Series 03

VRChat tricks

What a shader can find out inside VRChat, and how it can remember things.