Time for action – orthographic and perspective projections

1. Open the file ch4_ProjectiveModes.html in your HTML5 Internet browser.

2. This exercise is very similar to the previous one. However, there are two new buttons: Perspective and Orthogonal. 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 depth cues that is characteristic of orthogonal projections:

   

6. Now switch to Perspective mode:

   

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

   function updateTransforms(){
       if (projectionMode == PROJ_PERSPECTIVE){
           mat4.perspective(30, c_width / c_height, 10, 5000, pMatrix);
       }
       else{
           mat4.ortho(-c_width, c_width, -c_height, c_height, -5000, 5000, pMatrix);
       }
   }

8. Please take a look at the parameters that we are using to set up the projective view.

9. Let's modify the field of view. Create a global variable right before the updateTransforms function:

   var fovy...