### Control Keys

move to next slide (also Enter or Spacebar).
move to previous slide.
d  enable/disable drawing on slides
p  toggles between print and presentation view
CTRL  +  zoom in
CTRL  -  zoom out
CTRL  0  reset zoom

Slides can also be advanced by clicking on the left or right border of the slide.

### Notation

Type Font Examples
Variables (scalars) italics $a, b, x, y$
Functions upright $\mathrm{f}, \mathrm{g}(x), \mathrm{max}(x)$
Vectors bold, elements row-wise $\mathbf{a}, \mathbf{b}= \begin{pmatrix}x\\y\end{pmatrix} = (x, y)^\top,$ $\mathbf{B}=(x, y, z)^\top$
Matrices Typewriter $\mathtt{A}, \mathtt{B}= \begin{bmatrix}a & b\\c & d\end{bmatrix}$
Sets calligraphic $\mathcal{A}, B=\{a, b\}, b \in \mathcal{B}$
Number systems, Coordinate spaces double-struck $\mathbb{N}, \mathbb{Z}, \mathbb{R}^2, \mathbb{R}^3$

## Parallel Projection

### Parallel Projection

• With parallel projection, objects with larger distance to the viewer or camera are not getting smaller
• There are no vanishing points
Perspective projection
Parallel projection
Source: 3D Model:Turbosquid (Standard Royalty Free License); Renderer: 3ds Max

### Parallel Projection

projection rays
image plane
$x$
$y$
$z$
$\tilde{\mathbf{P}}$
$\mathbf{P}$
• The projection rays are parallel, i.e., the projection center is located at infinity
• The formula for mapping a 3D point $\mathbf{P}=(p_x,p_y,p_z)^\top$ to a point $\tilde{\mathbf{P}}= (\tilde{p}_x,\tilde{p}_y,\tilde{p}_z)^\top$ located at the image plane of the camera is given by:

$\tilde{\mathbf{P}}= \left(p_x, p_y, 0 \right)^\top$

### Parallel Projection

• Using homogeneous coordinates the parallel projection can be written as a linear mapping using a $4 \times 4$ matrix:

\begin{align}\underline{\tilde{\mathbf{P}}} & = \begin{pmatrix}p_x \\ p_y \\ 0\\ 1\end{pmatrix} = \underbrace{\begin{bmatrix} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 0 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}}_{\mathtt{A}} \begin{pmatrix}p_x \\p_y \\ p_z\\ 1\end{pmatrix}\\ \underline{\tilde{\mathbf{P}}} &=\mathtt{A}\, \underline{\mathbf{P}} \end{align}

### Parallel Projection in OpenGL

• The $x$-, $y$- and $z$- coordinates within viewing volume shall be mapped to the range $[-1;1]$
• To this end, for each coordinate two new parameters $\alpha$ and $\beta$ are added to the linear transformation
$\mathtt{A}$
$x$
$y$
$z$
$x$
$y$
$z$

$\mathtt{A} = \begin{bmatrix} \alpha_x & 0 & 0 & \beta_x \\ 0 & \alpha_y & 0 & \beta_y \\ 0 & 0 & -\alpha_z & \beta_z \\ 0 & 0 & 0 & 1 \end{bmatrix}$

### Parallel Projection in OpenGL

• For example, for the $z$-coordinate of points on the near-plane it should hold:
$p_z=-z_n \quad \mapsto \quad \tilde{p}_z=-1$
and for points on the far-plane
$p_z=-z_f \quad \mapsto \quad \tilde{p}_z=1$

$\underline{\tilde{\mathbf{P}}} = \begin{pmatrix}\alpha_x \, p_x + \beta_x \\ \alpha_y \, p_y + \beta_y \\ -\alpha_z \, p_z + \beta_z \\ 1\end{pmatrix} = \begin{bmatrix} \alpha_x & 0 & 0 & \beta_x \\ 0 & \alpha_y & 0 & \beta_y \\ 0 & 0 & -\alpha_z & \beta_z \\ 0 & 0 & 0 & 1 \end{bmatrix} \begin{pmatrix}p_x \\p_y \\ p_z\\ 1\end{pmatrix} \in \mathbb{H}^3$

• Now $\alpha_z$ and $\beta_z$ can be determined from the conditions for the mapping of the $z$-coordinates:
\begin{align}p_z=-z_n \,&\mapsto \, \tilde{p}_z=-1 \quad \Rightarrow \alpha_z \, z_n + \beta_z = -1 \\ p_z=-z_f \, &\mapsto \, \tilde{p}_z=\ 1 \,\,\,\,\quad \Rightarrow \alpha_z \, z_f + \beta_z = 1\end{align}

### Parallel Projection in OpenGL

$\mathtt{A}$
$x$
$y$
$z$
$x$
$y$
$z$
$x_r$
$x_l$
$y_t$
$y_b$
$z_n$
$z_f$
• Solving the equation system for $\alpha_z$ and $\beta_z$ provides:

\begin{align} \alpha_z &= \frac{2}{z_f-z_n}\\ \beta_z & = -\frac{z_f + z_n}{z_f-z_n}\end{align}

• After analogous calculations for the $x$- and $y$-coordinate, the projection matrix is given by:

$\mathtt{A} = \begin{bmatrix} \frac{2}{x_r-x_l} & 0 & 0 & -\frac{x_r + x_l}{x_r-x_l} \\ 0 & \frac{2}{y_t-y_b} & 0 & -\frac{y_t + y_b}{y_t-y_b} \\ 0 & 0 & \frac{-2}{z_f-z_n} & -\frac{z_f + z_n}{z_f-z_n} \\ 0 & 0 & 0 & 1 \end{bmatrix}$

### Parallel Projection in OpenGL

Generating a $4 \times 4$ parallel projection matrix in OpenGL:

glMatrixMode(GL_PROJECTION);
glOrtho(left, right, bottom, top, near, far);


$\mathtt{A} = \begin{bmatrix} \frac{2}{\mathrm{right}-\mathrm{left}} & 0 & 0 & -\frac{\mathrm{right} + \mathrm{left}}{\mathrm{right}-\mathrm{left}} \\ 0 & \frac{2}{\mathrm{top}-\mathrm{bottom}} & 0 & -\frac{\mathrm{top} + \mathrm{bottom}}{\mathrm{top}-\mathrm{bottom}} \\ 0 & 0 & \frac{-2}{\mathrm{far}-\mathrm{near}} & -\frac{\mathrm{far} + \mathrm{near}}{\mathrm{far}-\mathrm{near}} \\ 0 & 0 & 0 & 1 \end{bmatrix}$

### Orthographic Projection - Principle Views

• Principle views are parallel projections along the 3 main directions of the Cartesian coordinate system
• There are 6 principle views, along $x$, $(-x)$, $y$, $(-y)$, $z$ and $(-z)$-axis (side view, top view, front view)
• Principle views are popular with design drawings (e.g., in engineering or architecture)
• The different principle views can be achieved by an additional rotation of 90 (or 180) degree:

$\mathtt{A} \mathtt{T}_{\mathrm{\small cam}}^{-1} = \mathtt{A} \, \mathtt{T}_R(90^\circ)$

### Orthographic Projection - Axonometric Projection

• In general, a rotation around the axis $\mathbf{n}$ with the angle $\alpha$ can be considered

$\mathtt{A} \mathtt{T}_{\mathrm{\small cam}}^{-1} = \mathtt{A} \, \mathtt{T}_r(\mathbf{n}, \alpha)$

• The resulting mapping is called orthographic projection

### Orthographic Projection - Axonometric Projection

• The classification of projection is given by the lengths of the projected basis vectors of the Cartesian coordinate system:
• 3 axes have the same length: isometric
• 2 axes have the same length: dimetric
• All axes have different lengths: trimetric
isometric
dimetric
trimetric

### Orthographic Projection - Axonometric Projection

• For example, let's consider the rotation around the $y$-axis about angle $\alpha$ and around the $x$-axis about $\beta$
$\mathbf{e}_x$
$\mathbf{e}_y$
$\mathbf{e}_z$
$\tilde{\mathbf{e}}_x$
$\tilde{\mathbf{e}}_y$
$\tilde{\mathbf{e}}_z$
$-\alpha$
$\beta$

### Orthographic Projection - Axonometric Projection

\begin{align} \mathtt{A} \mathtt{T}_{\mathrm{\small cam}}^{-1} & = \mathtt{A} \, \mathtt{T}_{r_x}(\beta) \, \mathtt{T}_{r_y}(\alpha)\\ & = \begin{bmatrix} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 0 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} 1 & 0 & 0 & 0 \\ 0& \cos \beta & -\sin \beta& 0 \\ 0 & \sin \beta & \cos \beta & 0 \\ 0 & 0 & 0 &1 \\ \end{bmatrix} \begin{bmatrix} \cos \alpha & 0& \sin \alpha& 0 \\ 0 & 1 & 0 & 0 \\ -\sin \alpha & 0 &\cos \alpha & 0 \\ 0 & 0 & 0 &1 \\ \end{bmatrix} \\ & = \begin{bmatrix} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 0 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} \cos \alpha & 0 & \sin \alpha & 0 \\ \sin \beta \sin \alpha & \cos \beta & -\sin \beta \cos \alpha & 0\\ - \cos \beta \sin \alpha & \sin \beta & \cos \beta \cos \alpha & 0 \\ 0 & 0 & 0 & 1 \\ \end{bmatrix} \\ & = \begin{bmatrix} \cos \alpha & 0 & \sin \alpha & 0 \\ \sin \beta \sin \alpha & \cos \beta & -\sin \beta \cos \alpha & 0\\ 0 & 0 & 0 & 0 \\ 0 & 0 & 0 & 1 \\ \end{bmatrix} \end{align}

### Orthographic Projection - Axonometric Projection

• Thus, the basis vectors are mapped as follows:

$\underline{\tilde{\mathbf{e}}}_x = \begin{pmatrix}\cos \alpha\\ \sin \beta \sin \alpha \\ 0\\ 1\\ \end{pmatrix}, \quad \underline{\tilde{\mathbf{e}}}_y = \begin{pmatrix}0\\ \cos \beta \\ 0\\ 1\\ \end{pmatrix}, \quad \underline{\tilde{\mathbf{e}}}_z = \begin{pmatrix}\sin \alpha\\ -\sin \beta \cos \alpha \\ 0\\ 1\\ \end{pmatrix}$

• From this the lengths of the projected basis vectors may be calculated and the orthographic projection can be classified in isometric, dimetric, or trimetric:

\begin{align} |\tilde{\mathbf{e}}_x| &= \sqrt{\cos^2\alpha + (\sin \beta \sin \alpha)^2}\\ |\tilde{\mathbf{e}}_y| &= \sqrt{\cos^2\beta}\\ |\tilde{\mathbf{e}}_z| &= \sqrt{\sin^2\alpha + (\sin \beta \cos \alpha)^2}\\ \end{align}

### Example: Axonometric Projection in OpenGL

class Renderer {
public:
int mode;
private:
double alpha;
double beta;

public:
Renderer() : mode(1), alpha(0.0), beta(0.0) {}

public:
void display() {
glClearColor(1.0f, 1.0f, 1.0f, 0.0f);
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

glMatrixMode(GL_MODELVIEW);

if(mode == 1) { // isometric
alpha = 45.0;
beta = 180.0 /  M_PI * atan(1.0/sqrt(2.0));
}
if(mode == 2) { // dimetric
alpha= 180.0 /  M_PI * atan(1.0/sqrt(7.0));
beta = 180.0 /  M_PI * atan(1.0/(2.0*sqrt(2.0)));
}
if(mode == 3) { // trimetric
alpha= 30.0;
beta = 35.0;
}

if(mode < 4) {
glRotatef( beta, 1.0, 0.0f, 0.0);
glRotatef(-alpha, 0.0f, 1.0f, 0.0f);
}

if(mode == 4) { // isometric
//alternativ implementation
gluLookAt(1.0, 1.0, 1.0, // eye
0.0, 0.0, 0.0, // look at
0.0, 1.0, 0.0); //up
}

if(mode == 5) { // dimetric
//alternativ implementation
gluLookAt(1.0, 1.0, sqrt(7.0),
0.0, 0.0, 0.0,
0.0, 1.0, 0.0);
}

glColor3f(0.0f, 0.0f, 1.0f);
drawCoordinateAxisZ();
glColor3f(0.0f, 1.0f, 0.0f);
drawCoordinateAxisY();
glColor3f(1.0f, 0.0f, 0.0f);
drawCoordinateAxisX();

drawUnitCube();
}

void init() {
glEnable(GL_DEPTH_TEST);
}

void resize(int w, int h) {
double aspect = float(w)/float(h);
glViewport(0, 0, w, h);
glMatrixMode(GL_PROJECTION);
glOrtho(-2.0*aspect, 2.0*aspect, -2.0, 2.0, -5.0, 5.0);
}

void getAbsLengthXYZ(float& lx, float& ly, float &lz) {
double cb =  cos(beta/180.0*M_PI);
double ca =  cos(alpha/180.0*M_PI);
double sb =  sin(beta/180.0*M_PI);
double sa =  sin(alpha/180.0*M_PI);
lx = sqrt(ca*ca+sb*sb*sa*sa);
ly = sqrt(cb*cb);
lz = sqrt(sa*sa+sb*sb*ca*ca);
}
...
};

### Oblique Projection

$\mathbf{e}_x$
$\mathbf{e}_y$
$\tilde{\mathbf{e}}_z$
$\mathbf{e}_z$
cavalier projection
cabinet projection
1
1
1
1
1
0.5
$\alpha$
$\beta$
• Oblique projections allow an additional shearing
• In classic oblique projections two coordinate axes are not changed by the mapping and a shearing is applied to the third
• The projection direction of the third axis is given by two angles $\alpha$ and $\beta$ (see figure)
• The angle $\alpha$ is preserved in the projection and corresponds to the angle between the projected $z$- and $x$-axis. The angle $\beta$ controls the ratio:
• Cavalier projection $x:z=1:1$
• Cabinet projection: $x:z=2:1$

### Oblique Projection

• General oblique projection:

$\mathtt{A} \mathtt{T}_{\mathrm{\small cam}}^{-1} = \begin{bmatrix} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 0 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} 1 & 0 & \frac{-\cos \alpha}{\tan \beta} & 0 \\ 0 & 1 & \frac{\sin \alpha}{\tan \beta} & 0 \\ 0 & 0 & \frac{-1}{\sin \beta} & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix} =\begin{bmatrix} 1 & 0 & \frac{-\cos \alpha}{\tan \beta} & 0 \\ 0 & 1 & \frac{\sin \alpha}{\tan \beta} & 0 \\ 0 & 0 & 0 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}$

### Oblique Projection

• In case of a cavalier projection: $\beta$ = 45 degrees

$\mathtt{A} \mathtt{T}_{\mathrm{\small cam}}^{-1} = \begin{bmatrix} 1 & 0 & -\cos \alpha & 0 \\ 0 & 1 & \sin \alpha & 0 \\ 0 & 0 & 0 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}$

• In case of a cabinet projection: $\beta$ = 63,4 degrees

$\mathtt{A} \mathtt{T}_{\mathrm{\small cam}}^{-1} = \begin{bmatrix} 1 & 0 & \frac{-\cos \alpha}{2} & 0 \\ 0 & 1 & \frac{\sin \alpha}{2} & 0 \\ 0 & 0 & 0 & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix}$

### Example: Oblique Projection in OpenGL

class Renderer {
public:
int mode;
double alpha;

public:
Renderer() : mode(1), alpha(-45.0) {}

public:
void display() {
glClearColor(1.0f, 1.0f, 1.0f, 0.0f);
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

glMatrixMode(GL_MODELVIEW);
float m[16]; // identity
glGetFloatv(GL_MODELVIEW_MATRIX, m);
float angle = (M_PI / 180.0f) * alpha;
if(mode == 1) { // cavalier
m[2*4+0] = -cos(angle);
m[2*4+1] = sin(angle);
}
if(mode == 2) { // cabinet
m[2*4+0] = -cos(angle)/2.0f;
m[2*4+1] = sin(angle)/2.0f;
}
glMultMatrixf(m);

glColor3f(0.0f, 0.0f, 1.0f);
drawCoordinateAxisZ();
glColor3f(0.0f, 1.0f, 0.0f);
drawCoordinateAxisY();
glColor3f(1.0f, 0.0f, 0.0f);
drawCoordinateAxisX();

drawUnitCube();
}

void init() {
glEnable(GL_DEPTH_TEST);
}

void resize(int w, int h) {
double aspect = float(w)/float(h);
glViewport(0, 0, w, h);
glMatrixMode(GL_PROJECTION);
};