Hands on Matrices for 3D programming

Antoine Fortin
4 min readDec 13, 2021

--

When it comes to 3D programming, matrices are everywhere. While we might not directly handle them, mostly as using a lot of predefined stuff in the vertex shader and so on, reviewing the basic of matrices and especially how they work, all on the CPU would make more sense on how they work. This article is not about performances, is not about making some fancy shaders or dissecting the GPU pipeline, but a simple go to on “how does a Matrix affect the vertices”.

Getting started

A review of the basic matrices such as rotation, scaling, translation… At the end of your reading, I hope you will have a better understanding on how it works. :) We will use basic Debug struff in Unity to demonstrate the idea of matrices with visual references and realtime manipulation.

We will use a simple triangle as our starting point. A triangle is composed of 3 vertices we xyz coordinates. Each of these vertices represent a point in 3D space, that we can manipulate, rotate, move etc… To translate, rotate and scale a triangle, we will use 4x4 matrices and the vertices of the triangles. Each vertices will be affect by the computation we will operate on them with the matrix.

Here is a simple triangle and 3 vertices.

Each vertices has a xyz value.

Also: To represent a simple vertex, I will display them in in Unity using Gizmos cube. So we will need a bit of our imagination to see those cube as vertices(I know, this is not rigorous at all but the concept here is to build a tool to play around with vertices and matrices, so bare with it.).

Simply bind this script to a game object:

So let’s simply imagine that this cube is a vertices of that triangle we want to manipulate with matrices.

3 vertices for a triangle.

To demonstrate how the matrices works with vertices, I will create more than one vertices. We will use 3, as a triangle is simply composed of 3 vertices.

Then inside of draw function, we need to draw a cube representing each of these vertices. I simply made a list of vertices and push them.

This gives us these 3 cubes representing the vertices of our triangle.

Let’s add a bit of lines between or “cube-vertices”. Simple enough, we draw lines between vertices we previously defined.

The framework

Has I mentionned, the goal of this article is not to be “shader-driven” but simply show how it works. We now have a tool to draw vertices as cube, and lines between them, it seems enough for me, as we do not need anything else than manipulating the “vertices”-cubes in 3D space. The vertices are showned as cube, then we need to manipulate every of the position of the vertices with matrices.

Here is how we will manipulate the vertices we declared:

In short, we simply apply a translation on every vertex :) Note that we pass the vertex, so once a vertex is passed into the translation function, it actually change the initial value.

Translation matrice

Now that we have a tool to visualize our vertices, we want to manipulate them. Let’s start with a basic translation, meaning we will change the position of our vertices on x y and z axis.

The translation matrices looks like that.

From what we have defined earlier, I will simply pass every vertices into this function and change the original value to be driven by the translation matrices. 0

Scaling matrice

For every vertex manipulation for scaling we need to multiply the vertex by this matrix.

Rotatioin matrices

Next article in this serie will be on rotation :)

--

--

Antoine Fortin

In between Montreal and London, I love to write, read, learn and explore.