Computer Graphics Review

30 Aug 2022


§ Matricies

  • Matrices are useful in computer graphics, as they allow us to define transformations within a space.
  • In graphics, 3D objects are often represented by a mesh -- a collection of vertices and their connectivity.
  • We assume that connectivity is unchanged under transformation.

Transformation

Let TR4×4,pR4×1,pR4×1T \in \mathbb{R}^{4 \times 4}, p \in \mathbb{R}^{4 \times 1}, p' \in \mathbb{R}^{4 \times 1}. Then, a transformation may be expressed via

Tp=p,Tp = p',

where TT is our transformation matrix, pp and pp' are our 3D position in homogeneous coordinates before and after transformation by TT, respectively.

In the case of a composition of transformations, i.e. let A1,A2,,An1,AnR4x4A_1, A_2, \dots, A_{n - 1}, A_n \in \mathbb{R}^{4x4} be transformations, then

p=AnAn1A2A1pp' = A_n A_{n-1} \dots A_2 A_1 p

is composed from right to left, i.e.

p=An(An1((A2(A1(p)))))p' = A_n(A_{n-1}(\dots (A_2(A_1(p)))))

§ Matrix Stack

  • The first element is the identity.
  • All matrix operations are right multiplied
invalid path __generated/assets/animation/review/mtx_stack.svg

Sps. we had two functions defining a square and triangle in model space:

Then, we can draw the following examples

Target Pseudocode
DrawHouse(MV)
{
    MV.Push()
    DrawSquare(MV)
    MV.Translate(0, 1)
    DrawTriangle(MV)
    MV.Pop()
}

Target Pseudocode
DrawHouse2(MV)
{
    // big house
    MV.Push()
    DrawSquare(MV)
    MV.Translate(0, 1)
    DrawTriangle(MV)
    MV.Pop()
    // small house
    MV.Push()
    MV.Translate(3, 0)
    MV.Scale(0.5, 0.5);
    MV.Translate(1, 1)
    DrawHouse(MV)
    MV.Pop()
}

In this example, the point (3.5,1.5)(3.5, 1.5) has world coordinates wp=(3.5,1.5,1)T{}^w\vec{p} = (3.5, 1.5, 1)^T and model coordinates mp=(0,1,1)T{}^m\vec{p} = (0, 1, 1)^T.

For the DrawHouse2(MV) example, there exists a matrix MM satisfying wp=Mmp{}^w\vec{p} = M\,{}^m\vec{p}, i.e.

(3.51.51)=(103010001)Translate(3,0)(0.50000.50001)Scale(0.5,0.5)(101011001)Translate(1,1)(100011001)Translate(1, 0)(011)mp\begin{pmatrix} 3.5\\1.5\\1 \end{pmatrix} = \underbrace{\begin{pmatrix} 1 & 0 & 3\\ 0 & 1 & 0\\ 0 & 0 & 1 \end{pmatrix}}_{\scriptsize\verb|Translate|(3, 0)} \underbrace{\begin{pmatrix} 0.5 & 0 & 0\\ 0 & 0.5 & 0\\ 0 & 0 & 1 \end{pmatrix}}_{\scriptsize\verb|Scale|(0.5, 0.5)} \underbrace{\begin{pmatrix} 1 & 0 & 1\\ 0 & 1 & 1\\ 0 & 0 & 1 \end{pmatrix}}_{\scriptsize\verb|Translate|(1, 1)} \underbrace{\begin{pmatrix} 1 & 0 & 0\\ 0 & 1 & 1\\ 0 & 0 & 1 \end{pmatrix}}_{\scriptsize\verb|Translate(1, 0)|} \underbrace{\begin{pmatrix} 0\\ 1\\ 1 \end{pmatrix}}_{\scriptsize{}^m\vec{p}}

There are two ways to think about these transformations, depending if we read left to right or right to left.

  • L->R: Transforming the coordinate system w.r.t. the latest coordinate system
  • R->L: Transforming the vertex w.r.t. the world coordinate system
invalid path __generated/assets/animation/review/rl_coordinate_xform.svg
invalid path __generated/assets/animation/review/lr_coordinate_xform.svg