Interactive Computer Graphics: Assignment 5

Viewing, Projection and Flat-Shading

Topics:

• Parallel and Perspective Viewing
• Flat shading
• Triangle mesh models
• Camera motion

1. Develop a web page that loads a 3D triangle mesh model (with at least 100 triangles).

2. You may use the smf models found here.
   You should probably use a model whose bounding box is centered around the origin.

3. The models can be embedded in your html file as a script tag.
   Or read in from a file using the code described in Lecture 9.

4. Calculate a surface normal for each triangle.

5. Normalize the normal and apply absolute value to its components, and set the triangle's color equal to this vector. This will visualize the normal as a color.

6. Implement a rotating camera view of the model using the LookAt function.
   Your camera should rotate on a cylinder around the model.
   Allow the user to interactively change the height, the orbit radius and cylinder angle of the camera via keyboard input.
   Changing the angle should make the camera rotate around and look at the smf model (i.e. your LookAt point stays constant (the model centroid perhaps)).
   The radius should always be positive and have no upper bound.
   Do NOT put any limits on the camera angle or height.
   The camera should only move (incrementally) in response to a keystroke.
   The camera is NOT animated.

   Recall that the Cartesian coordinates of a point (X, Y , Z) defined in cylindrical coordinates (θ, R(adius), H(eight)) is
   X = R * cos(θ)
   Y = R * sin(θ)
   Z = H

   This is for a cylinder aligned along the Z axis. You may have to rearrange the terms to properly view some of the models.

7. Define six keys for adding and subtracting the delta values to/from the camera position parameters.
   Each parameter should have its own delta value.
   The deltas should always be positive.

8. Define six keys for increasing and decreasing the three delta values. Change the values via multiplication.

9. Define a key to reset the camera location and delta values.

10. Allow the user to select either parallel or perspective projection.

11. Set your viewing parameter values to ensure that the model is not clipped during interactive viewing.

12. You should apply the ModelView and Projection matrices to the model vertices in the vertex shader.

13. Print out instructions on your page that describe how to use your interface.

Your flat-shaded models should look something like the ones below.

Your program should look something like this video.

Grading Scheme

1. Reading in and storing an SMF model (1 point)
2. Implementing flat shading (2 points)
3. Interface for interactively changing view of model (1 point)
4. Properly implementing camera movement and viewing (2 points)
5. Implementing parallel projection (2 points)
6. Implementing perspective projection (2 points)

Last modified February 9, 2026.