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. Each new chapter will be published here as it is completed.
From a pixel to a small world.
Read in order. Each chapter uses a skill from the one before it. Planned chapters are listed here without links until they are ready.
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.
- 05Coming next
A Straight Line Between Two Ideas
Move a point or blend a color with a linear combination.
02 / Make directions useful
- 06Planned
How Much Do Two Directions Agree?
Use a dot product to turn alignment into a visible gradient.
- 07Planned
Drop a Shadow onto a Direction
Find the closest point on a line and draw a stroke.
- 08Planned
Turn a Direction Around
Reflect a direction across a surface using its normal.
03 / Transform the space
- 09Planned
Your Own Pair of Axes
Describe the same point in a different coordinate system.
- 10Planned
Put the Axes into a Matrix
Read a mat2 as two basis vectors and predict its result.
- 11Planned
Rotate the Space
Rotate a shape around a chosen pivot.
- 12Planned
Stretch, Squeeze, and Lean
Build scale and shear transforms from their effect on the axes.
- 13Planned
The Order Changes the Result
Choose the right order for a chain of transforms.
- 14Planned
Find the Way Back
Sample a transformed shape in its own local coordinates.
- 15Planned
When Space Flips or Collapses
Detect reflection, area change, and a non-invertible transform.
- 16Planned
Give Translation a Place in the Matrix
Combine movement, rotation, and scale in one affine transform.
04 / Add depth and light
- 17Planned
One More Coordinate
Work with 3D points, directions, and rotations.
- 18Planned
Find a Perpendicular in 3D
Build a perpendicular vector and an orthonormal frame.
- 19Planned
Build a Camera from Three Directions
Build a camera basis and express world points in view space.
- 20Planned
Why Distant Things Look Smaller
Connect field of view, depth, and perspective division.
- 21Planned
Keep the Light Attached to the Surface
Transform normals correctly, even under non-uniform scaling.
05 / Put it together
- 22Planned
Build an Interactive Shader Card
Combine coordinates, transforms, a camera, and lighting in one effect.
A shader you can explain.
We will finish with an interactive shader card: a movable camera, transformed geometry, and light that behaves correctly. More than an effect to copy — a set of tools to build your own.
Continue to chapter 01 →