3D graphics

Introduction

This is an introduction into how 3d graphics work on your computer. I think there is some quite interesting maths behind it, but it can be hard to visualise, so I have decided to explain it using a 2d to 1d pipeline.

Please keep in mind that the graphics pipeline is heavily reliant on matrix transformations, which we have not covered on the course yet, but I would think that a decent portion of you have done it in further maths or some other form.

Affine Transformations

Depending on your understanding of matrices, you may know that regular matrix transformations allow us to do reflections, stretches, rotations, but they do not allow us to do translations. We can overcome this fundemental limitation by using homogeneous coordinates. \[ \begin{pmatrix} x \\ y \\ z \end{pmatrix} \to \begin{pmatrix} x \\ y \\ z \\ w \end{pmatrix} \] And to convert back to normal coordinates, you divide each term by \(w\): \[ \begin{pmatrix} x \\ y \\ z \\ w \end{pmatrix} \to \begin{pmatrix} x/w \\ y/w \\ z/w \\ 1 \end{pmatrix} \to \begin{pmatrix} x/w \\ y/w \\ z/w \end{pmatrix} \] Now we can perform transformations using matrices: \[ \begin{pmatrix} x \\ y \\ z \\ 1 \end{pmatrix} \cdot \begin{bmatrix} 1 & 0 & 0 & \Delta x \\ 0 & 1 & 0 & \Delta y \\ 0 & 0 & 1 & \Delta z \\ 0 & 0 & 0 & 1 \end{bmatrix} = \begin{pmatrix} x + 0 + 0 + \Delta x \\ 0 + y + 0 + \Delta y \\ 0 + 0 + z + \Delta z \\ 0 + 0 + 0 + 1 \end{pmatrix} = \begin{pmatrix} x + \Delta x \\ y + \Delta y \\ z + \Delta z \\ 1 \end{pmatrix} \]

Models

As you may already know, 3d models are stored on a computer as a collection of faces, or vertices and indices. You have a large array of 3d points in space and you also store triplets of indices in the vertex array that make up faces. Vertices can store other things such as color, normals and UV coordinates, but we will only consider position for now.

In this demo I will use 2d points and pick combinations of 2 of them to make the sides of various shapes.

Model and Camera view Matrix

Models are usually stored relative the the origin of the 3d coordinate space. You usually keep this throughout the program and use something called the Model matrix. The model matrix is a series of affine matrix transformations, a combination of scale, rotations, and translation matrices, usually applied in that order. When you render you use this to get the model into world space, the space where all of the models exist positionally relative to each other.

There is also usually a camera in the scene, through which you see the world. When rendering, you transform all the models by the camera view matrix, basically the reverse of the cameras own model matrix, to get all of the models relative to the camera, such that the camera is at the origin and looking either down the positive or negative \(z\)-axis (This solely depends on which graphics api you use. In OpenGL and derivatives it is \(-z\) and in DirectX it is \(+z\) and in Unreal engine \(+x\) is the forward direction).