Programming Assignment #5

by Eftychios Sifakis on November 4, 2020

Due: Wednesday, November 11th. (see the class late policy on the Syllabus)

Synopsis: You will write a program that visualizes a 3D scene, as viewed from a movable camera, and use 2D Canvas drawing operations to construct a 2D projected view of it on your screen.

Learning Objectives: To familiarize yourselves with the 3D viewing transform pipeline, especially the transforms that relate the camera coordinate system with the world coordinates, and the projection transforms.

Evaluation: Based on the announced evaluation system. You get a check (“3”) if you turn in a viable, and complete submission (even if it just draws a rectangle like the example in the tutorial). “Above and beyond” grades will be awarded for people who make particularly cool pictures.

Hand-in: Will be as a Canvas (the course management system, not the JavaScript drawing library) assignment. [Submission link] Make sure that you turn in all files needed for your program to run. It is acceptable to turn in a single HTML file with your program, but much preferable to separate your code into an .html file and a separate .js file containing the JavaScript code, similar to the examples in our GitHub repository (see, e.g. Demos 0 from Week 5). If you submit anything else than a single HTML file, please put everything in a single ZIP archive. It is not acceptable to submit a link to JSbin for this assignment!


In Week 8 we saw several examples of how to visualize a 3D scene using Canvas drawing instructions (most of which are found in our GitHub repository under Week8/). The general idea was to construct and apply the transforms of a 3D Viewing Pipeline to 3D dimensional points, in such a way as to compute their corresponding canvas/viewport coordinates, that would allow us to “draw” a three-dimensional line/shape/polygon, by essentially drawing the same type of geometric shape but using the projected points onto 2D canvas (i.e. “viewport”) coordinates.

A particularly relevant demo is found under directory Week8/Demo4 our GitHub repository (also in this [JSBin] link) where a moving camera is hovering over our 3D world, and creating a projection that corresponds to its own vantage point, which is visualized in a separate window. The convenient feature of this example is that it clearly demonstrates all transforms involved in the 3D viewing pipeline (model, lookAt, projection, and viewport transforms). What you are asked to do is to create a visualization similar to the “camera” view of this example (the window on the right) where we visualize what the camera “sees” from its vantage point.

One possible way to achieve this objective would be to take one of the projects you crafted for programming assignments #3 or #4, and “lift” it to 3D by having all the drawing (and motion, if you had any) happen on a plane in the 3D world, and setting up a camera so it can move around it and view it from different vantage points. Of course, it would be even more exciting (and advisable) if you modified your code to be natively 3-dimensional: for example, if you had some parametric curves, you could adjust their control points so that they are not all co-planar (so that the curve “escapes” the plane, sort of speak). Or, if you had a hierarchical model included, you could script some of its transformations to be in true 3D, by translating or rotating outside of just the same plane. The following requirements must be satisfied in order to get a satisfactory “3” grade:

  • Requirement #1. You must have a moveable camera. The motion can either be automatic, or triggered by manipulation of a slider. It is ok for the motion of the camera to be relatively simple (i.e. translation along a line, or motion along a curve).
  • Requirement #2. Your 3D world must include a hierarchical model, or a parametric curve (or both!).
  • Requirement #3. Your example should make it apparent that you are observing a 3D scene, as opposed to a 2D object. For example, if you drew everything in the 2D plane (just replacing every coordinate (x,y) with a triple (x,y,0) to “make it 3D”), and just translated the entire drawing up/down (to emulate “moving the camera”), this is really just a 2D drawing exercise, not something that feels like 3D. Having the camera “spin around” an object, having a 3D (non-planar) parametric curve, or having a 3D object are good possibilities for showing off the 3D nature of your program.
  • Requirement #4. You need to use a projection transform. It can be either orthographic or perspective. The aforementioned viewing demo has examples of both, implemented via glMatrix.

As always, you are encouraged to try and exceed these requirements, and if you do well, you can compete for a “4” above-and-beyond grade. Here are some ideas:

  • Create a complex hierarchical object that uses 3-D motion and transforms!
  • Have objects “fly along” complex 3D curves, in ways that control their position and orientation in intricate ways. Think, for example, of an airplane that does a banked turn along a spiral-shaped path …
  • Think about the possibility of having solid-drawn (filled) polygons “hide” each other, if they happen to be in front of one another. For example, think of a cube made up of six square faces; from any vantage point, we should only be able to see three of the six faces (the other three are hidden behind the visible ones). Here’s a thought to consider: you could associate a “normal/perpendicular” vector with each face of such a polyhedron, and ask yourself how this vector is transformed in Camera Coordinates. If the normal vector points towards the camera, maybe this is a “visible” polygon. If it points away, maybe it should be “hidden” (i.e. not drawn).

Leave a Comment

Previous post:

Next post: