CSCI 461: Computer Graphics

Middlebury College, Fall 2023

Lecture 07: Rasterization

By the end of today's lecture, you will be able to:

  • project your models from world space to screen space,
  • write vertex shaders to transform and/or pass vertex data through the rasterization pipeline,
  • write fragment shaders to assign pixel colors,
  • rasterize your models with WebGL.

Ray tracing is a pixel-first approach to rendering.

Rasterization is an object-first approach to rendering.

why? good libraries for rasterization - included in your browser!

Figuring out which pixel is covered by a geometric primitive.

We need to first transform into the CAMERA frame of reference.

In ray tracing, we transformed pixel coordinates relative to camera into 3d world coordinates.

In rasterization, we need to go the other way (inverse).
$$ \mathbf{C} = \left[\begin{array}{cccc} u_x & v_x & w_x & e_x \\ u_y & v_y & w_y & e_y \\ u_z & v_z & w_z & e_z \\ 0 & 0 & 0 & 1 \\ \end{array}\right] = \left[\begin{array}{cccc} 1 & 0 & 0 & e_x \\ 0 & 1 & 0 & e_y \\ 0 & 0 & 1 & e_z \\ 0 & 0 & 0 & 1 \\ \end{array}\right]\left[\begin{array}{cccc} u_x & v_x & w_x & 0 \\ u_y & v_y & w_y & 0 \\ u_z & v_z & w_z & 0 \\ 0 & 0 & 0 & 1 \\ \end{array}\right] = \mathbf{T}\mathbf{B}. $$

View Matrix ($\mathbf{M}_v$): transforming from world space into camera space.

$$ \mathbf{C} = \left[\begin{array}{cccc} u_x & v_x & w_x & e_x \\ u_y & v_y & w_y & e_y \\ u_z & v_z & w_z & e_z \\ 0 & 0 & 0 & 1 \\ \end{array}\right] = \left[\begin{array}{cccc} 1 & 0 & 0 & e_x \\ 0 & 1 & 0 & e_y \\ 0 & 0 & 1 & e_z \\ 0 & 0 & 0 & 1 \\ \end{array}\right]\left[\begin{array}{cccc} u_x & v_x & w_x & 0 \\ u_y & v_y & w_y & 0 \\ u_z & v_z & w_z & 0 \\ 0 & 0 & 0 & 1 \\ \end{array}\right] = \mathbf{T}\mathbf{B}. $$
slido.com (event #3097031)

Then we will project vertices onto the image plane.

Oh wait, let me tell you one more thing about homogeneous coordinates: homogenization.

If we remember to always homogenize the result, then we can write a perspective projection matrix.

$$ x_p = x \left(\frac{-d_n}{z}\right), \quad y_p = y \left(\frac{-d_n}{z}\right), \quad z_p = d_n$$

Exercise: return this projection matrix.

$$\mathbf{M}_p = \left[\begin{array}{cccc} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & -1 & 0 \\ 0 & 0 & -\frac{1}{d_n} & 0 \\ \end{array}\right] $$
use $d_n = 1$: what do you notice?

We were projecting EVERYTHING to the same plane. Use a volume instead.

$$ \mathbf{M}_p = \left[\begin{array}{cccc} \frac{1}{a\cdot \tan(\frac{1}{2}\alpha)} & 0 & 0 & 0 \\ 0 & \frac{1}{\tan(\frac{1}{2}\alpha)} & 0 & 0 \\ 0 & 0 & \frac{(d_f + d_n)}{d_n - d_f} & \frac{2d_f d_n}{d_n - d_f} \\ 0 & 0 & -1 & 0 \\ \end{array}\right] $$
now try this matrix: use $d_n = 10^{-3}$, $d_f = 1000$, $a = 1$, $\alpha = \frac{1}{2}\pi$.

  • what if $d_n = 1$ and $d_f = 1.5$?
  • or you can use mat4.perspective from glMatrix 🙂

Last transformation: from viewing (clip) volume to screen (WebGL will do this one for us).

$$ \mathbf{M}_s = \left[\begin{array}{cccc}\frac{n_x}{2} & 0 & 0 & \frac{n_x}{2} \\ 0 & -\frac{n_y}{2} & 0 & \frac{n_y}{2} \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{array}\right] $$

Nomenclature: Model-View Matrix & MVP matrix.

Introduction to WebGL: GPU-based rasterization API.
Example GLSL syntax with vectors & matrices:

Moving forward: always ask which frame of reference you're in.

When doing a lighting calculation in camera space, the normal vector (originally defined in object space), should be transformed by:

Summary

  • Use mat4.lookAt for View Matrix
  • Use mat4.perspective for Perspective Projection Matrix
  • MVP matrix: $\mathbf{M}_p \mathbf{M}_v \mathbf{M}_m$.
  • Model-View matrix: transforms model points into camera space (where we will do lighting calculations).
  • Normals to camera space? Transform by $(\mathbf{M}_v\mathbf{M}_m)^{-T}$.

Practice with GLSL: a ray tracer in a rasterizer?