Time for Action: Orthographic and Perspective Projections

Let's look at an example covering the different types of projections:

1. Open the ch04_06_projection-modes.html file in your browser.
2. This exercise is very similar to the previous one. However, there are two new options under Projection Mode: Perspective and Orthogonal Projection. As you can see, Perspective is activated by default.
3. Change the camera type to Orbiting.
4. Change the projective mode to Orthographic.
5. Explore the scene. Notice the lack of the depth cues characteristic of orthogonal projections:

6. Switch to Perspective mode:

7. Explore the source code. Go to the updateTransforms function:

function updateTransforms() {
  const { width, height } = canvas;
  
  if (projectionMode === PERSPECTIVE_PROJECTION) {
    mat4.perspective(
      projectionMatrix, 
      fov, 
      width / height, 
      10, 
      5000
    )...