Computer Graphics: Cheatsheet

Because I'm always forgetting this stuff

Will Perkins
Will Perkins
Share:

Homogeneous coordinates

Adding a fourth term: \(w\) makes it easier to work in 3D euclidian space. $$({x \over w},{y \over w},{z \over w}) \Rightarrow (x,y,z,w)$$

Why? Here's a long list of reasons, but a couple key points:

  • 3D scaling, rotation, and translation operations can be represented as a single linear transform (4x4 matrix)
  • A direction (Infinity) can be represented in 3D space: (x,y,z,0)

Transformations

Translation

for a point \(p\): $$ T(t)p = \begin{bmatrix} 1 & 0 & 0 & t_x\\ 0 & 1 & 0 & t_y\\ 0 & 0 & 1 & t_z\\ 0 & 0 & 0 & 1\\ \end{bmatrix} \begin{bmatrix} p_x\\ p_y\\ p_z\\ 1\\ \end{bmatrix} = \begin{bmatrix} p_x + t_x\\ p_y + t_y\\ p_z + t_z\\ 1\\ \end{bmatrix} $$ for a vector \(v\): $$ T(t)v = \begin{bmatrix} 1 & 0 & 0 & t_x\\ 0 & 1 & 0 & t_y\\ 0 & 0 & 1 & t_z\\ 0 & 0 & 0 & 1\\ \end{bmatrix} \begin{bmatrix} v_x\\ v_y\\ v_z\\ 0\\ \end{bmatrix} = \begin{bmatrix} v_x\\ v_y\\ v_z\\ 0\\ \end{bmatrix} $$ inverse transform: \(T^{-1}(t) = T(-t)\)

Scaling

$$ S(t)p = \begin{bmatrix} s_x & 0 & 0 & 0\\ 0 & s_y & 0 & 0\\ 0 & 0 & s_z & 0\\ 0 & 0 & 0 & 1\\ \end{bmatrix} \begin{bmatrix} p_x\\ p_y\\ p_z\\ 1\\ \end{bmatrix} = \begin{bmatrix} s_xp_x\\ s_yp_y\\ s_zp_z\\ 1\\ \end{bmatrix} $$

Rotation

When applying individual rotations (yaw, pitch, roll), the order of rotation operations is important. To get around this problem use axis-angle representation.

If you only need to rotate around a single axis, then applying the rotation transform can be straightforward. $$ R_z(\alpha) = \overset{\text{yaw}}{ \begin{bmatrix} \cos\alpha & -\sin\alpha & 0 & 0\\ \sin\alpha & \cos\alpha & 0 & 0\\ 0 & 0 & 1 & 0\\ 0 & 0 & 0 & 1 \end{bmatrix}} R_y(\beta) = \overset{\text{pitch}}{ \begin{bmatrix} \cos\beta & 0 & \sin\beta & 0\\ 0 & 1 & 0 & 0\\ -\sin\beta & 0 & \cos\beta & 0\\ 0 & 0 & 0 & 1 \end{bmatrix}} $$ $$ R_x(\gamma) = \overset{\text{roll}}{ \begin{bmatrix} 1 & 0 & 0 & 0\\ 0 & \cos\gamma & -\sin\gamma & 0\\ 0 & \sin\gamma & \cos\gamma & 0\\ 0 & 0 & 0 & 1 \end{bmatrix}} $$ The inverse of a rotation matrix corresponds to its transpose $$R_x^{-1} = R_x^T \qquad R_y^{-1} = R_y^T \qquad R_z^{-1} = R_z^T$$

Shear

add math & graphics

Coordinate Systems

Local space, World space, View space, Clip space, Screen space (todo: figs & transforms)

The relationships between the various spaces - Source: LearnOpenGL.com

Model Coordinates

The space where the model resides.

Move the box around its local space

Using the Model Matrix, you can get to world coordinates

World Space

We use the Model Matrix to get from Local Space to World Space

Move the box around world space

Using the View Matrix you can get to Camera coordinates

View Space

using the Projection Matrix, you can get to Clip Space (or Homogeneous Coordinates)

Clip Space

Orthographic Projection

Perspective Projection

Perspective vs Orthographic Projection

perspective / orthographic projection. near plane / far plane. clipping.

Move the slider to see orthographic vs perspective projection

Screen Space

You can use the Viewport Tranform to get to Screen Space (actual pixels)

Combining Transformations

To transform a vertex coordinate to clip coordinates: $$V_\text{clip} = M_\text{projection}\cdot{M_\text{view}}\cdot{M_\text{model}}\cdot{V_\text{local}}$$

Other Useful References

ARKit

ARKit Device Coordinate System - Source: ARKit docs

OpenCV

Unity

OpenGL

Will Perkins
Will Perkins
Share:

Get our stories delivered

From us to your inbox weekly.