Lab 4: Navigation CS 445: Computer Graphics, Fall 2017

---

Goals

• Understand the camera projection matrix.
• Understand the camera view matrix.
• Understand how to implement a camera "fly-through" (as might be found in a game)
• Understand how to implement the Dolly, Pan, and Tumble camera controls (as are found in Maya).

References

• SIGGRAPH University : "An Introduction to OpenGL Programming" , start at around time 1:41:00.
• Coordinate Systems in OpenGL

Overview

Camera controls enable a user to navigate around the 3D scene. There are various ways of doing this. For example, a "fly-through" allows the user to move through a scene as though one was at the controls of an airplane. Another approach is to allow the user to "dolly, tumble, and track" which are the typical navigation tools used in Maya. In this assignment, you will first implement the fly-through controls using keyboard presses. You will then implement dolly, tumble, and track using mouse controls. In class, we will talk about the view matrix transform (called V) which transforms vertices from World to Camera coordinates. This is the product of a rotation and translation. In the code, the global variable "viewRotation" is the rotation component of V. It is initialized in the calcUVN method based on the values of VPN and VUP. The variable called "eye" is the location of the camera in World coordinates which can be used to generate the translational component of V: View matrix: V = viewRotation * EyeTranslation In the display method, you need to initialize model view matrix (mv) to the value of V.

All of the camera controls (key or mouse) operate by updating only two variables: the camera location stored in the variable "eye" and the camera orientation, stored in "viewRotation"!

Starter Code

Download the program Lab4Navigation.zip. This program is similar to what you did on Lab 3: Run the program. It should look like the image on the left. Navigation instructions are included in the html window. Right now they don't work. Your job in this lab is to get these working! The actions of the cameraSetup function which was previously in render_scene.js has been moved to the Camera class. The Camera class contains the eye and viewRotation variables. The camera is controlled by mouse and key events. The setKeyEventHandler function which was previously in render_scene.js has been removed from render_scene.js and replaced by eventHandlers.js which, in turn, calls functions in the camera class. The code you need to modify is mostly in Camera.js and the render function in render_scene.js.

Part 1: Fly Through Controls

In this part of the lab, you will implement the fly through keyboard controls. Look for the "TO DO" comments in the code.

• At the moment, Lab4Navigation just displays a cube. Copy over your objects, e.g. the disk, etc (and your partner's) from the previous lab, resolving duplicates from your partner. Replace the cube display (in the render method) with your composite object to make a more interesting scene to look at. Before proceeding, run the code to make sure it still works.

• Begin by implementing the calcUVN function. It calculates the initial value of viewRotation. To do this, first compute u, v, n based on the values of VPN and VUP. Then use u, v, n to construct the viewRotation matrix.

• Next, implement the calcViewMat function. It calculates and returns the View matrix: V = viewRotation * EyeTranslation. You will need to use the variable "eye" to generate the EyeTranslation matrix. This method will be called from render() (in render_scene.js) to calculate the initial value of the view matrix (viewMat).

• Implement the fly-through controls in the function keyAction case statement (in Camera.js). Look for the "IMPLEMENT" comments in the code. The needed controls are:

  • move the camera forward/backward
  • turn the camera up/down
  • turn the camera left/right
  • roll (bank) the camera left/right

  The keyAction function is called from the setKeyEventHandler function (in eventHandlers.js). You don't need to make any changes to setKeyEventHandler, but take a look at it so you see what it is doing. In class, we will go over how to calculate the actions by updating the eye and viewRotation variables. Each control only requires a couple of lines of code. If you understand the concepts, the coding should be easy.

Part 2: Maya Mouse Controls

In this part of the lab, you will implement the mouse controls for dolly, tumble, and track that are found in the motion function in Camera.js :

• Track (slides camera horizontally or vertically)
• Dolly (moves camera forward/back - similar to what was done in keySpecial, but here you do this with a mouse rather than key presses)
• Tumble (rotate around a "center of interest"). For this lab, the "center of interest" will be the origin of the world coordinate system. Tumble is tricky to do and will take some reading to understand what is going on. Detailed notes are here. Dragging the mouse up and down rotates in a direction parallel to the Camera's x-axis, while dragging the mouse left/right rotates the camera around the World's y-axis. These are very different operations which take place in different coordinate systems and thus at different points in the transformation sequence.

The mouse controls are set up as follows:

• Right mouse drag up/down, left/right to Track
• Left mouse drag up/down, left/right to Tumble
• Middle mouse drag to Dolly

In class, we will open up Maya to see how they work. The Track and Dolly are quite easy. The Tumble is difficult and will take a bit of thinking!

To Hand In

By the beginning of lab on the due date above, be ready to demonstrate your finished program.

• Be sure your code is clean, formatted, and well commented. Both you and your partner's names should be at the top of the render_scene code.
• Zip together your Lab4 folder (please delete old or unused files) and submit via WISE (only one partner needs to do this). One should be able to run your code by placing the unzipped folder into a Netbeans project that already contains the Common folder.
• Add your partner's name to the inline portion of the WISE Lab 4 assignment.

---