CMPS 160 -- Spring 2016

CMPS 160 -- Lab Assignment 2

Due date:
Midnight, Friday, April 22, 2016
NO LATE SUBMISSIONS ACCEPTED

Objectives:

Learn about transformations and flat shading of 3D objects.

Description

This assignment involves several new things: reading a description of a 3D object from a file, organizing that into an internal data structure, scaling and centering the 3D object, setting up the projection of the 3D object onto a 2D display, rendering the object using flat (also called constant) shading.
Reading the 3D object: A 3D object is defined by a bunch of vertices (stored as a .coor file) and a bunch of polygons (stored as a .poly file) specified as a sequence of vertices. Several examples of 3D objects can be found in our class repository . The README file describes the format in each of these files. Provide an interface to allow users to select one of these objects to read and display.
Transforming the 3D object: Each of the objects is defined in its own coordinate system. Note that they are not necessarilty centered even in their own coordinate system. What you need to do here is to ensure that whatever object is selected will be displayed at the center of the canvas. To accomplish this task, you need to first find out the extents of the 3D objects i.e. the range of values along x, y, z that defines the object. The range gives you the necessary information to know how large the object is, and where it is relative to its coordinate system. You will then use these information to scale and re-center the object to the world coordinate frame.
Setting up scene: Now that the object is transformed and centered at the origin of the world coordinate frame, we can start specifying parameters that will affect how it will look like. First, we need to have a light source. Assume that we have a headlight i.e. the light source will be located wherever the viewer or camera is located. Also assume that the light is white. Next, we need to specify where the viewer is. For this assignment, we will assume that the viewer is at (0, 0, ∞). This is called orthographic projection.
Rendering the object: Finally, we need to specify how the polygonal surfaces of the object will appear. For this assignment, we will simply assign the same color (e.g. red or gray or your favorite color) to each polygon of the object -- this is the material color of the object. The rendered color of each polygon should be based on Lambertian reflectance, and is constant throughout a polygon. This constant color per polygon is called flat shading, and is determined by the angle relationship between the polygon orientation and the light source.
Making your object fit the canvas: The specifications above will result in a projected image whose coordinates are the x and y coordinates of the world coordinate system. Because the canvas has its own separate coordinate system and most likely a very different range of x and y values, the rendered object may only be partially visible and not centered in the canvas. What you want to do here is apply a set of transformations that will ensure that the 3D object, when projected, will be centered and entirely visible on the canvas. This means mapping and scaling the world centered object to the center of the canvas. Ensure that the aspect ratio of the object is preserved. For example, if you are rendering the woman object, you don't want it to appear to skinny or too fat.

Grading:

This lab assignment will form part of your CMPS 160L grade. The other component of CMPS 160L grade is your attendance.

Here's what I told graders about grading this assignment: The header block should contain at least the following information: name, cruzid, date, and brief description of your program. This will be true for all future assignments and programs.

Rubric:


5	header block (name, cruzid, date, brief description of your program)
5	separation of javascript from html
10	inline comments
20	flat shading is correct
20	orthographic projection is correct
20	object is centered on the canvas
20	correct aspect ratio

Who graded your assignment:

Joseph: aassi -- dtoney
John (Andy): dtra24 -- kyjconn
David: legomez -- oysong
Daniel: pdlandis -- zpeterse

Submission:

Your lab assignment should be contained in two files: an index.html file and RenderObject.js. Put both of these in a folder called lab2. Do not include any of the object data files from the class repository. Zip up lab2 before submitting. Submission must be done using the "submit" command from unix.ic.ucsc.edu

submit cmps160-ap.s16 lab2 lab2.zip