source.md

Themes

Set your presentation theme:
Black (default) - White - League - Sky - Beige - Simple
Serif - Blood - Night - Moon - Solarized

H:

Transformations

Jean Pierre Charalambos
Universidad Nacional de Colombia
Presentation best seen online
See also the source code

H:

Index

1. Intro
2. Linear transformations
   • Scaling, rotation & shearing
3. Affine transformations
   • Homogeneous space
   • Translation
   • Scaling, rotation & shearing revisited
   • Inversion
4. Projections
   • Orthographic
   • Perspective
5. References
6. Annex: Matrix orthogonality

H:

Intro

• Affine transformations are key to develop:
  • SceneGraphs
  • Shaders
  • Interactive virtual reality applications
• Read carefully this presentation & these references if you need more detailed explanations:
  • Affine transformations are found in 3D Math primer for Graphics and Game Development – chs. 8 & 9
  • Projections matrices are found in OpenGL projection matrix
• 3D Rotations methods
  • Euler angles (discussed here)
  • Matrix orthogonality (discussed here)
  • Quaternions (best method and the one supported in nub, not yet included in this presentation but discussed in 3D Math primer for Graphics and Game Development – ch. 10)

N:

• Standard = Canonical

H:

Linear transformations: Notion

Property 1 $$F(a+b)= F(a)+ F(b)$$

Property 2 $$F(\lambda a) = \lambda F(a)\rightarrow F(0) = 0$$

Observation 1: Matrix multiplication is always linear

Observation 2: Translation is a nonlinear transformation

V:

Linear transformations: 2d scaling

`$x'= sx*x$`

`$y'= sy*y$`

`$\begin{bmatrix} x' \cr y' \cr \end{bmatrix} = \begin{bmatrix} sx & 0 \cr 0 & sy \cr \end{bmatrix} \bullet \begin{bmatrix} x \cr y \cr \end{bmatrix} $`

$P'= S(sx,sy) \bullet P$

N:

• mirroring and reflections are missed

V:

Linear transformations: 3d scaling

`$x'= sx*x$`

`$y'= sy*y$`

`$z'= sz*z$`

`$\begin{bmatrix} x' \cr y' \cr z' \cr \end{bmatrix} = \begin{bmatrix} sx & 0 & 0 \cr 0 & sy & 0 \cr 0 & 0 & sz \cr \end{bmatrix} \bullet \begin{bmatrix} x \cr y \cr z \cr \end{bmatrix} $`

$P'= S(sx,sy,sz) \bullet P$

N:

• mirroring and reflections are missed

V:

Linear transformations: 2d rotation

$x = rcos \alpha$

$y= rsin \alpha$

$x'= rcos (\alpha+\beta)$ $x'= rcos \alpha cos \beta - rsin \alpha sin \beta$

$y'= rsin (\alpha+\beta)$ $y'= rcos \alpha sin \beta - rsin \alpha cos \beta$

V:

Linear transformations: 2d Rotation

`$\begin{bmatrix} x' \cr y' \cr \end{bmatrix} = \begin{bmatrix} cos\beta & -sin \beta \cr sin\beta & cos \beta \cr \end{bmatrix} \bullet \begin{bmatrix} x \cr y \cr \end{bmatrix} $`

$P'= R(\beta) \bullet P$

V:

Linear transformations: 3d rotation

Euler angles (respect to z-axis)

$z' = z$

`$\begin{bmatrix} x' \cr y' \cr z' \cr \end{bmatrix} = \begin{bmatrix} cos\beta & -sin \beta & 0 \cr sin\beta & cos \beta & 0 \cr 0 & 0 & 1 \cr \end{bmatrix} \bullet \begin{bmatrix} x \cr y \cr z \cr \end{bmatrix} $`

$P'= R_z(\beta) \bullet P$

V:

Linear transformations: 3d rotation

Euler angles (respect to x-axis)

$x' = x$

`$\begin{bmatrix} x' \cr y' \cr z' \cr \end{bmatrix} = \begin{bmatrix} 1 & 0 & 0 \cr 0 & cos\beta & -sin \beta \cr 0 & sin\beta & cos \beta \cr \end{bmatrix} \bullet \begin{bmatrix} x \cr y \cr z \cr \end{bmatrix} $`

$P'= R_x(\beta) \bullet P$

V:

Linear transformations: 3d rotation

Euler angles (respect to y-axis)

$y' = y$

`$\begin{bmatrix} x' \cr y' \cr z' \cr \end{bmatrix} = \begin{bmatrix} cos\beta & 0 & sin \beta \cr 0 & 1 & 0 \cr -sin\beta & 0 & cos \beta \cr \end{bmatrix} \bullet \begin{bmatrix} x \cr y \cr z \cr \end{bmatrix} $`

$P'= R_y(\beta) \bullet P$

V:

Linear transformations: 2d shearing

`$x'= x + h*y$`

`$y'=y$`

`$\begin{bmatrix} x' \cr y' \cr \end{bmatrix} = \begin{bmatrix} 1 & h \cr 0 & 1 \cr \end{bmatrix} \bullet \begin{bmatrix} x \cr y \cr \end{bmatrix} $`

$P'= D_y(h) \bullet P$

V:

Linear transformations: 2d shearing

`$x'= x$`

`$y'=y + h*x$`

`$\begin{bmatrix} x' \cr y' \cr \end{bmatrix} = \begin{bmatrix} 1 & 0 \cr h & 1 \cr \end{bmatrix} \bullet \begin{bmatrix} x \cr y \cr \end{bmatrix} $`

$P'= D_x(h) \bullet P$

V:

Linear transformations: 3d shearing

`$x'=x+az$`

`$y'=y+bz$`

`$z'=z$`

`$\begin{bmatrix} x' \cr y' \cr z' \cr \end{bmatrix} = \begin{bmatrix} 1 & 0 & a \cr 0 & 1 & b \cr 0 & 0 & 1 \cr \end{bmatrix} \bullet \begin{bmatrix} x \cr y \cr z \cr \end{bmatrix} $`

$P'= D_z(a,b) \bullet P$ (goto 2d translation)

V:

Linear transformations: 3d shearing

...don't forget $P'= D_x(a,b) \bullet P$ and $P'= D_y(a,b) \bullet P$

H:

Affine transformations

Non-linearity of translation

`$x'= x + dx$`

`$y'=y + dy$`

`$\begin{bmatrix} x' \cr y' \cr \end{bmatrix} = \begin{bmatrix} dx \cr dy \cr \end{bmatrix} + \begin{bmatrix} x \cr y \cr \end{bmatrix} $`

$P'= T(dx,dy) + P$

V:

Affine transformations: Notion

Linear transformations $+$ Translation $\rightarrow P' = M\ast P + T $

V:

Affine transformations: Homogeneous space $\rightarrow$ 2d

Homogeneous w-coordinate: $(x,y,w)$

Homogeneous space $\rightarrow$ 2d

$(x,y,1) \rightarrow (x,y)$, for $w=1$

In general: $(x,y,w) \rightarrow (x/w,y/w)$

V:

Affine transformations: Homogeneous space $\rightarrow$ 3d

$(x,y,z,1) \rightarrow (x,y,z)$, for $w=1$

In general: $(x,y,z,w) \rightarrow (x/w,y/w,z/w)$

V:

Affine transformations: Translation

`$x'= x + dx$`

`$y'=y + dy$`

`$w'=w=1$`

`$\begin{bmatrix} x' \cr y' \cr w' \cr \end{bmatrix} = \begin{bmatrix} 1 & 0 & dx \cr 0 & 1 & dy \cr 0 & 0 & 1 \cr \end{bmatrix} \bullet \begin{bmatrix} x \cr y \cr w \cr \end{bmatrix} $`

$P'= T(dx,dy) \bullet P$ (goto 3d shearing)

V:

Affine transformations: Translation

`$x'= x + dx$`

`$y'=y + dy$`

`$z'=z + dz$`

`$w'=w=1$`

`$\begin{bmatrix} x' \cr y' \cr z' \cr w' \cr \end{bmatrix} = \begin{bmatrix} 1 & 0 & 0 & dx \cr 0 & 1 & 0 & dy \cr 0 & 0 & 1 & dz \cr 0 & 0 & 0 & 1 \cr \end{bmatrix} \bullet \begin{bmatrix} x \cr y \cr z \cr w \cr \end{bmatrix} $`

$P'= T(dx,dy,dz) \bullet P$

V:

Affine transformations: Shearing (r)

`$x'=x+az$`

`$y'=y+bz$`

`$z'=z$`

`$w'=w=1$`

`$\begin{bmatrix} x' \cr y' \cr z' \cr w' \cr \end{bmatrix} = \begin{bmatrix} 1 & 0 & a & 0 \cr 0 & 1 & b & 0 \cr 0 & 0 & 1 & 0 \cr 0 & 0 & 0 & 1 \cr \end{bmatrix} \bullet \begin{bmatrix} x \cr y \cr z \cr w \cr \end{bmatrix} $`

$P'= D_z(a,b) \bullet P$

V:

Affine transformations: Scaling (r)

`$x'= sx*x$`

`$y'= sy*y$`

`$z'= sz*z$`

`$w'=w=1$`

`$\begin{bmatrix} x' \cr y' \cr z' \cr w' \cr \end{bmatrix} = \begin{bmatrix} sx & 0 & 0 & 0 \cr 0 & sy & 0 & 0 \cr 0 & 0 & sz & 0 \cr 0 & 0 & 0 & 1 \cr \end{bmatrix} \bullet \begin{bmatrix} x \cr y \cr z \cr w \cr \end{bmatrix} $`

$P'= S(sx,sy,sz) \bullet P$

V:

Affine transformations: 3d rotation (r)

Euler angles (respect to z-axis)

$z' = z$

`$w'=w=1$`

`$\begin{bmatrix} x' \cr y' \cr z' \cr w' \cr \end{bmatrix} = \begin{bmatrix} cos\beta & -sin \beta & 0 & 0 \cr sin\beta & cos \beta & 0 & 0 \cr 0 & 0 & 1 & 0 \cr 0 & 0 & 0 & 1 \cr \end{bmatrix} \bullet \begin{bmatrix} x \cr y \cr z \cr w \cr \end{bmatrix} $`

$P'= R_z(\beta) \bullet P$

V:

Affine transformations: 3d rotation (r)

Euler angles (respect to x-axis)

$x' = x$

`$w'=w=1$`

`$\begin{bmatrix} x' \cr y' \cr z' \cr w' \cr \end{bmatrix} = \begin{bmatrix} 1 & 0 & 0 & 0 \cr 0 & cos\beta & -sin \beta & 0 \cr 0 & sin\beta & cos \beta & 0 \cr 0 & 0 & 0 & 1 \cr \end{bmatrix} \bullet \begin{bmatrix} x \cr y \cr z \cr w \cr \end{bmatrix} $`

$P'= R_x(\beta) \bullet P$

V:

Affine transformations: 3d rotation (r)

Euler angles (respect to y-axis)

$y' = y$

`$w'=w=1$`

`$\begin{bmatrix} x' \cr y' \cr z' \cr w' \cr \end{bmatrix} = \begin{bmatrix} cos\beta & 0 & sin \beta & 0 \cr 0 & 1 & 0 & 0 \cr -sin\beta & 0 & cos \beta & 0 \cr 0 & 0 & 0 & 1 \cr \end{bmatrix} \bullet \begin{bmatrix} x \cr y \cr z \cr w \cr \end{bmatrix} $`

$P'= R_y(\beta) \bullet P$

V:

Affine transformations: Inversion

Definition

Let $M$ be an affine transformation matrix such that:

$$P'=MP$$

Let $M^{-1}$ be the inverse of $M$. Observe that:

$$M^{-1}P'=M^{-1}MP=(M^{-1}M)P=IP=P$$

V:

Affine transformations: Inversion

Affine inverse matrices

Transformation	Direct	Inverted
Translation	$T(dx,dy,dz)$	$T(-dx,-dy,-dz)$
Shearing	$D_z(a,b)$	$D_z(-a,-b)$
Scaling	$S(sx,sy,sz)$	$S(1/sx,1/sy,1/sz)$
Rotation	$R_z(\beta)$	$R_z(-\beta) (=R_z(\beta)^{T})$

H:

Projections: Orthographic

View volume: Eye and Clip spaces

[Orthographic Volume and Normalized Device Coordinates (NDC)](http://www.songho.ca/opengl/gl_projectionmatrix.html#ortho)

Let $P_e$ be a point in eye space and $P_c$ a point in clip space, we seek:

$$P_e = [x_e,y_e,z_e]\xrightarrow{\text{map}}P_c = [x_c,y_c,z_c]$$

$$x_e \in [l,r] \rightarrow x_c \in [-1,1], y_e \in [b,t] \rightarrow y_c \in [-1,1], z_e \in [n,f] \rightarrow z_c \in [-1,1]$$

V:

Projections: Orthographic

View volume: Re-mapping a variable among ranges (general case)

            |---------------*---------|          ->           |-------------------*--------------|
           min              u        max                     min'                 u'            max'

The linear conversion is given by:

$$u' = min'+(u-min)(\Delta u')/(\Delta u)$$

where $\Delta u=max-min$, and $\Delta u'=max'-min'$

which may be re-written as:

$$u' = uS_u + T_u$$ $$S_u=\Delta u'/\Delta u$$ $$T_u=(min'\Delta u - min\Delta u')/\Delta u$$

V:

Projections: Orthographic

View volume: Re-mapping a variable among ranges (our case)

            |---------------*---------|          ->           |-------------------*--------------|
           min              u        max                     -1                   u'             1

$$u' = uS_u + T_u$$ $$S_u=2/(max-min)$$ $$T_u=-(max+min)/(max-min)$$

V:

Projections: Orthographic

Matrix form: formulation

`$$u' = uS_u + T_u$$`

$$[x_e,y_e,z_e]\xrightarrow{\text{map}}[x_c,y_c,z_c]$$ $$x_e \in [l,r] \rightarrow x_c \in [-1,1], y_e \in [b,t] \rightarrow y_c \in [-1,1], z_e \in [n,f] \rightarrow z_c \in [-1,1]$$

`$\begin{bmatrix} x_c \cr y_c \cr z_c \cr w_c \cr \end{bmatrix} = \begin{bmatrix} S_{x_e} & 0 & 0 & T_{x_e} \cr 0 & S_{y_e} & 0 & T_{y_e} \cr 0 & 0 & S_{z_e} & T_{z_e} \cr 0 & 0 & 0 & 1 \cr \end{bmatrix} \bullet \begin{bmatrix} x_e \cr y_e \cr z_e \cr w_e(=1) \cr \end{bmatrix} $`

`$P_c = Ortho(S_{x_e/y_e/z_e},T_{x_e/y_e/z_e}) \bullet P_e$`

V:

Projections: Orthographic

Matrix form: solution

`$$u' = uS_u + T_u$$` `$$S_u=2/(max-min)$$` `$$T_u=-(max+min)/(max-min)$$`

$$[x_e,y_e,z_e]\xrightarrow{\text{map}}[x_c,y_c,z_c]$$ $$x_e \in [l,r] \rightarrow x_c \in [-1,1], y_e \in [b,t] \rightarrow y_c \in [-1,1], z_e \in [n,f] \rightarrow z_c \in [-1,1]$$

`$\begin{bmatrix} x_c \cr y_c \cr z_c \cr w_c \cr \end{bmatrix} = \begin{bmatrix} 2 \above 1pt (r-l) & 0 & 0 & -(r+l) \above 1pt (r-l) \cr 0 & 2 \above 1pt (t-b) & 0 & -(t+b) \above 1pt (t-b) \cr 0 & 0 & -2 \above 1pt (f-n) & -(f+n) \above 1pt (f-n) \cr 0 & 0 & 0 & 1 \cr \end{bmatrix} \bullet \begin{bmatrix} x_e \cr y_e \cr z_e \cr w_e(=1) \cr \end{bmatrix} $`

`$P_c = Ortho(l,r,b,t,n,f) \bullet P_e$`

V:

Projections: Orthographic

Example

Adapted from [ortho](https://p5js.org/reference/#/p5/ortho)

V:

Projections: Orthographic

Example code

var sketch = function( p ) {
    p.setup = function() {
      p.createCanvas(600, 600, p.WEBGL);
      // define an orthographic matrix projection
      p.ortho(-p.width / 2, p.width / 2, p.height / 2, -p.height / 2, 0, 1000);
    };

    p.draw = function() {
        p.background(100);
        p.orbitControl(); // interactively modifies the view matrix with the mouse
        p.strokeWeight(2);
        p.stroke(255, 0, 0);
        p.fill(0, 255, 255, 125);
        for (var i = -1; i < 2; i++) {
            for (var j = -2; j < 3; j++) {
                p.push(); // saves current matrix transform (ortho * view)
                p.translate(i * 160, 0, j * 160); // same as: ortho * view * translate
                p.box(80, 80, 80);
                p.pop(); // restores the top of the matrix stack: ortho * view
            }
        }
    };
};

V:

Projections: Orthographic

Matrix form: Symmetrical viewing volume ($l=-r$ and $b=-t$)

`$$u' = uS_u + T_u$$` `$$S_u=2/(max-min)$$` `$$T_u=-(max+min)/(max-min)$$`

$$[x_e,y_e,z_e]\xrightarrow{\text{map}}[x_c,y_c,z_c]$$ $$x_e \in [-r,r] \rightarrow x_c \in [-1,1], y_e \in [-t,t] \rightarrow y_c \in [-1,1], z_e \in [n,f] \rightarrow z_c \in [-1,1]$$

`$\begin{bmatrix} x_c \cr y_c \cr z_c \cr w_c \cr \end{bmatrix}

\begin{bmatrix} 1 \above 1pt r & 0 & 0 & 0 \cr 0 & 1 \above 1pt t & 0 & 0 \cr 0 & 0 & -2 \above 1pt (f-n) & -(f+n) \above 1pt (f-n) \cr 0 & 0 & 0 & 1 \cr \end{bmatrix} \bullet \begin{bmatrix} x_e \cr y_e \cr z_e \cr w_e(=1) \cr \end{bmatrix} $`

`$P_c= Ortho(r,t,n,f) \bullet P_e$`

V:

Projections: Perspective

View volume

[Perspective Frustum and Normalized Device Coordinates (NDC)](http://www.songho.ca/opengl/gl_projectionmatrix.html#perspective)

Let $P_e$ be a point in eye space and $P_n$ a point in NDC, we seek:

$$P_e = [x_e,y_e,z_e,w_e(=1)]\xrightarrow{\text{map}}P_c = [x_c,y_c,z_c,w_c(\neq 1)]$$

$$P_c = [x_c,y_c,z_c,w_c(\neq 1)]\xrightarrow[\text{divide}]{\text{perspective}}P_n = [x_n(=x_c/w_c),y_n(=y_c/w_c),z_n(=z_c/w_c),1]$$

V:

Projections: Perspective

Near plane projection of $x_e,y_e \xrightarrow {\text{onto}} x_p,y_p$

Top view of frustum

$${x_p\above 1pt x_e}= {-n\above 1pt z_e}$$ $$x_p= {nx_e\above 1pt -z_e}$$

V:

Projections: Perspective

Near plane projection of $x_e,y_e \xrightarrow {\text{onto}} x_p,y_p$

Side view of frustum

$${y_p\above 1pt y_e}= {-n\above 1pt z_e}$$ $$y_p= {ny_e\above 1pt -z_e}$$

V:

Projections: Perspective

Near plane projection of $x_e,y_e \xrightarrow {\text{onto}} x_p,y_p$

`$$x_p= {nx_e\above 1pt -z_e},y_p= {ny_e\above 1pt -z_e}$$`

which means ${\color{red} {w_c}}=-z_e$

`$$\begin{bmatrix} x_c \cr y_c \cr z_c \cr w_c \cr \end{bmatrix}

\begin{bmatrix} . & . & . & . \cr . & . & . & . \cr . & . & . & . \cr 0 & 0 & {\color{red} {-1}} & 0 \cr \end{bmatrix} \bullet \begin{bmatrix} x_e \cr y_e \cr z_e \cr w_e(=1) \cr \end{bmatrix} $$`

V:

Projections: Perspective

$x_e$,$y_e$ coordinate mapping (using our ortho matrix)

`$${\color{green} {x_p}}= {nx_e\above 1pt -z_e},{\color{green} {y_p}}= {ny_e\above 1pt -z_e},w_c=-z_e$$`

`$$\begin{bmatrix} {\color{blue} {x_n}} \cr {\color{blue} {y_n}} \cr z_c \cr w_c \cr \end{bmatrix}

\begin{bmatrix} 2 \above 1pt (r-l) & 0 & 0 & -(r+l) \above 1pt (r-l) \cr 0 & 2 \above 1pt (t-b) & 0 & -(t+b) \above 1pt (t-b) \cr . & . & . & . \cr . & . & . & . \cr \end{bmatrix} \bullet \begin{bmatrix} {\color{green} {x_p}} \cr {\color{green} {y_p}} \cr z_e \cr w_e(=1) \cr \end{bmatrix} $$`

solving for ${\color{blue} {x_n,y_n}}$ we get: ${\color{blue} {x_n}}= {2{\color{green} {x_p}}\above 1pt r-l}-{r+l\above 1pt r-l},{\color{blue} {y_n}} = {2{\color{green} {y_p}}\above 1pt t-b}-{t+b\above 1pt t-b}$

since ${\color{blue} {x_n}}={x_c\above 1pt w_c}$ and ${\color{blue} {y_n}}={y_c\above 1pt w_c}$ , solving for ${\color{red} {x_c,y_c}}$ in terms of $x_e,y_e,z_e$ , we get: ${\color{red} {x_c}}= {2nx_e\above 1pt r-l}+{(r+l)z_e\above 1pt r-l},{\color{red} {y_c}}= {2ny_e\above 1pt t-b}+{(t+b)z_e\above 1pt t-b}$

V:

Projections: Perspective

$x_e$,$y_e$ coordinate mapping

`$${\color{red} {x_c}}= {2nx_e\above 1pt r-l}+{(r+l)z_e\above 1pt r-l},{\color{red} {y_c}}= {2ny_e\above 1pt t-b}+{(t+b)z_e\above 1pt t-b},w_c=-z_e$$`

`$\begin{bmatrix} x_c \cr y_c \cr z_c \cr w_c \cr \end{bmatrix}

\begin{bmatrix} 2n \above 1pt r-l & 0 & r+l \above 1pt r-l & 0 \cr 0 & 2n \above 1pt t-b & t+b \above 1pt t-b & 0 \cr . & . & . & . \cr 0 & 0 & -1 & 0 \cr \end{bmatrix} \bullet \begin{bmatrix} x_e \cr y_e \cr z_e \cr w_e(=1) \cr \end{bmatrix} $`

V:

Projections: Perspective

$z_e$ coordinate mapping

`$\begin{bmatrix} x_c \cr y_c \cr z_c \cr w_c \cr \end{bmatrix}

\begin{bmatrix} 2n \above 1pt r-l & 0 & r+l \above 1pt r-l & 0 \cr 0 & 2n \above 1pt t-b & t+b \above 1pt t-b & 0 \cr 0 & 0 & {\color{green} A} & {\color{green} B} \cr 0 & 0 & -1 & 0 \cr \end{bmatrix} \bullet \begin{bmatrix} x_e \cr y_e \cr z_e \cr w_e(=1) \cr \end{bmatrix} $`

`$z_n=z_c/w_c={Az_e+Bw_e\above 1pt -z_e}={Az_e+B\above 1pt -z_e}$`

To find $A$ and $B$, use the map relation `$z_e \in [n,f] \rightarrow z_n \in [-1,1]$` and replace them above (twice)

V:

Projections: Perspective

$z_e$ coordinate mapping

`$\begin{bmatrix} x_c \cr y_c \cr z_c \cr w_c \cr \end{bmatrix}

\begin{bmatrix} 2n \above 1pt r-l & 0 & r+l \above 1pt r-l & 0 \cr 0 & 2n \above 1pt t-b & t+b \above 1pt t-b & 0 \cr 0 & 0 & -(f+n) \above 1pt f-n & -2fn \above 1pt f-n \cr 0 & 0 & -1 & 0 \cr \end{bmatrix} \bullet \begin{bmatrix} x_e \cr y_e \cr z_e \cr w_e(=1) \cr \end{bmatrix} $`

`$P_c = Persp(l,r,b,t,n,f) \bullet P_e$`

V:

Projections: Perspective

Z-Fighting

Comparison of Depth Buffer Precisions

V:

Projections: Perspective

Alternative form: Symmetrical viewing volume ($l=-r$ and $b=-t$)

`$$l=-r$$` `$$b=-t$$`

`$\begin{bmatrix} x_c \cr y_c \cr z_c \cr w_c \cr \end{bmatrix} = \begin{bmatrix} n \above 1pt r & 0 & 0 & 0 \cr 0 & n \above 1pt t & 0 & 0 \cr 0 & 0 & -(f+n) \above 1pt f-n & -2fn \above 1pt f-n \cr 0 & 0 & -1 & 0 \cr \end{bmatrix} \bullet \begin{bmatrix} x_e \cr y_e \cr z_e \cr w_e(=1) \cr \end{bmatrix} $`

`$P_c = Persp(r,t,n,f) \bullet P_e$`

V:

Projections: Perspective

Alternative form: Symmetrical viewing volume ($l=-r$ and $b=-t$)

`$$l=-r$$` `$$b=-t$$` `$$n/t = 1/\tan(fov/2)$$`

(Vertical) field-of-view (fov)

V:

Projections: Perspective

Alternative form: Symmetrical viewing volume ($l=-r$ and $b=-t$)

`$$l=-r$$` `$$b=-t$$` `$$n/t = 1/\tan(fov/2)$$` `$$n/r = 1/\tan(hfov/2)$$`

`$\begin{bmatrix} x_c \cr y_c \cr z_c \cr w_c \cr \end{bmatrix} = \begin{bmatrix} 1 \above 1pt \tan (hfov/2) & 0 & 0 & 0 \cr 0 & 1 \above 1pt \tan (fov/2) & 0 & 0 \cr 0 & 0 & -(f+n) \above 1pt f-n & -2fn \above 1pt f-n \cr 0 & 0 & -1 & 0 \cr \end{bmatrix} \bullet \begin{bmatrix} x_e \cr y_e \cr z_e \cr w_e(=1) \cr \end{bmatrix} $`

`$P_c = Persp(hfov,fov,n,f) \bullet P_e$`

V:

Projections: Perspective

Alternative form: Symmetrical viewing volume ($l=-r$ and $b=-t$)

`$$l=-r$$` `$$b=-t$$` `$$aspectRatio=screenWidth/screenHeight$$` `$$1/\tan(hfov/2) = 1/(\tan(fov/2) * aspectRatio)$$`

`$\begin{bmatrix} x_c \cr y_c \cr z_c \cr w_c \cr \end{bmatrix} = \begin{bmatrix} 1 \above 1pt \tan (fov/2) * aspectRatio & 0 & 0 & 0 \cr 0 & 1 \above 1pt \tan (fov/2) & 0 & 0 \cr 0 & 0 & -(f+n) \above 1pt f-n & -2fn \above 1pt f-n \cr 0 & 0 & -1 & 0 \cr \end{bmatrix} \bullet \begin{bmatrix} x_e \cr y_e \cr z_e \cr w_e(=1) \cr \end{bmatrix} $`

`$P_c = Persp(fov,aspectRatio,n,f) \bullet P_e$`

V:

Projections: Perspective

Alternative form: Symmetrical viewing volume ($l=-r$ and $b=-t$)

Vertical field-of-view (fov)

V:

Projections: Perspective

Example

Adapted from [perspective](https://p5js.org/reference/#/p5/perspective)

V:

Projections: Perspective

Example code

var sketch = function( p ) {
    p.setup = function() {
      p.createCanvas(600, 600, p.WEBGL);
      var fov = 60 / 180 * p.PI;
      var cameraZ = p.height / 2.0 / p.tan(fov / 2.0);
      // define a perspective matrix projection
      p.perspective(60 / 180 * p.PI, p.width / p.height, cameraZ * 0.1, cameraZ * 10);
    };

    p.draw = function() {
        p.background(100);
        p.orbitControl(); // interactively modifies the view matrix with the mouse
        p.strokeWeight(2);
        p.stroke(0, 255, 0);
        p.fill(255, 0, 255, 125);
        for (var i = -1; i < 2; i++) {
            for (var j = -2; j < 3; j++) {
                p.push(); // saves current matrix transform (perspective * view)
                p.translate(i * 160, 0, j * 160); // same as: perspective * view * translate
                p.box(80, 80, 80);
                p.pop(); // restores the top of the matrix stack: perspective * view
            }
        }
    };
};

H:

References

• Math primer for graphics and game development
• Proscene: A feature-rich framework for interactive environments
• Processing 2d transformations tutorial
• OpenGL projection matrix
• The Perspective and Orthographic Projection Matrix

H:

Annex: Matrix orthogonality

Definition

A matrix $$M = \begin{bmatrix} m_{11} & m_{12} & m_{13} \cr m_{21} & m_{22} & m_{33} \cr m_{31} & m_{32} & m_{33} \cr \end{bmatrix}$$

is orthogonal iff:

$$MM^{T} = I$$

This is equivalent to:

$$M^{-1} = M^{T}$$

V:

Annex: Matrix orthogonality

Geometric Interpretation

Let

$$r_{1} = \begin{bmatrix} m_{11} & m_{12} & m_{13} \end{bmatrix}$$ $$r_{2} = \begin{bmatrix} m_{21} & m_{22} & m_{23} \end{bmatrix}$$ $$r_{3} = \begin{bmatrix} m_{31} & m_{32} & m_{33} \end{bmatrix}$$

then

$$r_{1} \cdot r_{1} = r_{2} \cdot r_{2} = r_{3} \cdot r_{3} = 1 $$ $$r_{i} \cdot r_{j} = 0\ \ i=1,2,3 \ \ j=1,2,3 \ \ i\ne j$$

V:

Annex: Matrix orthogonality

Geometric Interpretation

We can conclude that:

• Each row of the matrix must be a unit vector
• The rows of the matrix must be mutually perpendicular
• Vectors $r_{1}, \,r_{2}, \,r_{3}$ are orthonormals

Note 1: that $r_1$, $r_2$ and $r_3$ form a non-canonical basis

Note 2: that a rotation matrix is always orthogonal

N:

• Orthogonality is used in both: euler angles (composition) and rodrigues formula

V:

Annex: Matrix orthogonality

Mnemonic 1 examples: 3D Rotation $T(x_1,y_1,z_1) * R_u(\beta) * T(-x_1,-y_1,-z_1)$

Using orthogonality to compute $R_y(\lambda) * R_x(\alpha)$

Suppose $u$ is part of a non-canonical basis $x', y', z'$

V:

Annex: Matrix orthogonality

Mnemonic 1 examples: 3D Rotation $T(x_1,y_1,z_1) * R_u(\beta) * T(-x_1,-y_1,-z_1)$

Using orthogonality to compute $R_y(\lambda) * R_x(\alpha)$

`$ R_y(\lambda) * R_x(\alpha) = \begin{bmatrix} u_{x'1} & u_{x'2} & u_{x'3} & 0 \cr u_{y'1} & u_{y'2} & u_{y'3} & 0 \cr u_{z'1} & u_{z'2} & u_{z'3} & 0 \cr 0 & 0 & 0 & 1 \cr \end{bmatrix} $`

where

`$u_{z'}=u$`

`$u_{x'}$` is _any_ orthogonal vector to `$u_{z'}$`

`$u_{y'} = u \times u_{x'}$`

</ul>

N:

missing:

1. Affine transformations: Rotation: use orthogonality to compute R_y(\lambda) * R_x(\alpha)
2. Affine transformations: Rotation: Quaternions magic
3. Affine transformations: Rotation: Rodrigues' rotation formula