Linear algebra.
Made visible.
Linear Algebra for GLSL Shaders
Vectors, matrices, and all those things that look complicated — until we put them in a shader and see what happens.
Let’s take something familiar: a circle. We already know how to draw one in a shader. Measure the distance from the center, choose a radius, and give the pixels inside it a color. So far, so good.
Now imagine that we want this circle to lean to one side. We could start adding numbers to the formula until something looks right. But what if we changed the space around the circle instead?
That is the idea behind the playground below. The shape stays a circle in its own little world. We change the two directions that describe that world, and the image changes with them.
Try Shear, then move the Y axis · x slider. The circle leans. Try Rotate. The axes turn, but the circle stays round. There is a useful question hiding here: what did we change, and what stayed the same?
Same circle. Different space.
This browser cannot run WebGL 2. The explanation and shader source are still available.
Change the axes
Loading shader…X axis
Y axis
The axes describe a valid 2D space.
Open the shader edit · run · experiment
The complete fragment shader, using the axes above as uniforms. Change a color, run it, and see the result.
The orange arrow is the new horizontal direction. The green arrow is the new vertical direction. Together they form a basis. A matrix is a convenient way to put those two arrows in one place.
mat2 basis = mat2(xAxis, yAxis);
vec2 screenPoint = basis * localPoint;For each screen pixel, the shader needs the opposite question: where is this pixel in the circle’s own coordinates? That is why you will find inverse(basis) in the source. We will build up to it, one small step at a time.
Try making the two arrows point along the same line. The space becomes flat, and there is no unique way back. The playground pauses that part of the drawing and tells you why. Later, we will learn how a single number — the determinant — lets us catch this case.
You do not need to understand every line yet. For now, the useful part is that you can change a mathematical idea and immediately see what it does.
Start with Identity. Set X axis · x to 0.8, then to 1.6. The circle becomes twice as wide. Does its height change? Now predict what happens when the X axis points left. Try it before reading the matrix.
One new skill.
One visible result.
Every chapter starts with something we want to make. We build the smallest working version, change one thing, look at the result, and then explain the mathematics behind it. You get an editable shader, a few controls, and a small task to try yourself.
You should be comfortable with variables, functions, and a basic fragment shader. We will introduce the mathematics as we need it. The examples run here in your browser; notes at the end will connect GLSL back to Android’s AGSL.
This is a practical course in the linear algebra behind shader effects: coordinates, directions, transforms, cameras, and surface normals. All 22 chapters are ready to read, ending with a shader card you can build and debug.
From a pixel to a small world.
Read in order. Each chapter uses a skill from the one before it. All 22 chapters include a live shader and a practical experiment.
01 / Meet the vectors
- 01Read chapter ↗
Give Every Pixel an Address
Build a coordinate system that keeps a circle round on any screen.
- 02Read chapter ↗
From Points to Vectors
Move a shape by separating its position from its displacement.
- 03Read chapter ↗
How Far Is That Pixel?
Turn a distance into a circle, a ring, and a soft edge.
- 04Read chapter ↗
Keep the Direction, Change the Length
Control direction independently of speed or distance.
- 05Read chapter ↗
A Straight Line Between Two Ideas
Move a point or blend a color with a linear combination.
02 / Make directions useful
- 06Read chapter ↗
How Much Do Two Directions Agree?
Use a dot product to turn alignment into a visible gradient.
- 07Read chapter ↗
Drop a Shadow onto a Direction
Find the closest point on a line and draw a stroke.
- 08Read chapter ↗
Turn a Direction Around
Reflect a direction across a surface using its normal.
03 / Transform the space
- 09Read chapter ↗
Your Own Pair of Axes
Describe the same point in a different coordinate system.
- 10Read chapter ↗
Put the Axes into a Matrix
Read a mat2 as two basis vectors and predict its result.
- 11Read chapter ↗
Rotate the Space
Rotate a shape around a chosen pivot.
- 12Read chapter ↗
Stretch, Squeeze, and Lean
Build scale and shear transforms from their effect on the axes.
- 13Read chapter ↗
The Order Changes the Result
Choose the right order for a chain of transforms.
- 14Read chapter ↗
Find the Way Back
Sample a transformed shape in its own local coordinates.
- 15Read chapter ↗
When Space Flips or Collapses
Detect reflection, area change, and a non-invertible transform.
- 16Read chapter ↗
Give Translation a Place in the Matrix
Combine movement, rotation, and scale in one affine transform.
04 / Add depth and light
- 17Read chapter ↗
One More Coordinate
Work with 3D points, directions, and rotations.
- 18Read chapter ↗
Find a Perpendicular in 3D
Build a perpendicular vector and an orthonormal frame.
- 19Read chapter ↗
Build a Camera from Three Directions
Build a camera basis and express world points in view space.
- 20Read chapter ↗
Why Distant Things Look Smaller
Connect field of view, depth, and perspective division.
- 21Read chapter ↗
Keep the Light Attached to the Surface
Transform normals correctly, even under non-uniform scaling.
05 / Put it together
- 22Read chapter ↗
Build an Interactive Shader Card
Combine coordinates, transforms, a camera, and lighting in one effect.
Reference / Appendices A–D
- A–DRead reference ↗
Keep beside your editor
The GLSL we need, a 2D port to AGSL, a shader math debugging checklist, and five next projects.
A shader you can explain.
The final project combines an interactive shader card, a movable camera, transformed geometry, and light that behaves correctly. Use the diagnostic views to explain each space and repair three deliberate mistakes.
Continue to chapter 01 →