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
perspektivische Projektion
Perspective projection
Parallelprojektion
Parallel projection
Source: 3D Model:Turbosquid (Standard Royalty Free License); Renderer: 3ds Max

Parallel Projection

parallelprojection
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
glortho
$\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

glortho
$\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);
glLoadIdentity();
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}$

Classification of Planar Projections

projection_classification_en

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
axonometic
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$
axonometic_ab
$\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

opengl_axonometric

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);
    glLoadIdentity();

    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);
    glLoadIdentity();
    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

oblique
$\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

opengl_oblique

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);
    glLoadIdentity();
    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);
    glLoadIdentity();
    glOrtho(-2.0*aspect, 2.0*aspect, -2.0, 2.0, -5.0, 5.0);
  }
...
};

Are there any questions?

questions

Please notify me by e-mail if you have questions, suggestions for improvement, or found typos: Contact

More lecture slides

Slides in German (Folien auf Deutsch)