COS 426:
Computer Graphics
Spring 2018


COS 426 General | Assignment 2


Overview

In this assignment you will create a simple 3D modeling program. The operations that you implement will mostly be filters that take an input mesh, process it, and produce an output mesh.


Getting Started

As in the previous assignment, the mesh processing program has two modes: (1) an interactive mode where you can enable/disable various filters, adjust parameters to these filters, and see the result right away; and (2) a batch mode where all the filters and parameters are fixed. Each version runs in a web page, and for the batch mode the filters and parameters are specified in the URL. This section of the instructions are analogous to those of the previous assignment, so by now this should be very familiar.

To get started, download this zip file and unzip it on your computer. Change to the subdirectory cos426-assign2 and run the command python -m SimpleHTTPServer (or python -m http.server for Python V3.0 and up) which will launch a web server on your computer, rooted at this directory. (See the previous assignment description about why we do this instead of opening the files directly.)

Once you have started the local web server, direct your browser to http://localhost:8000. You should see the web page for Assignment 2 showing a cube. Click and drag near the cube (not on it) and you will see that this is a 3D viewer. In the upper right corner is a GUI, and the top two controls let you choose a model and change the display settings of the model -- try it. Below that is a collection of controls. Click on the 'Transformations' folder to open it, and choose the top item -- Translation. Try adjusting the x-translation by pulling that slider around. It should move the model on the x-axis shown in red. Try adjusting adding a rotation slider, and you should see a warning that that feature is not implemented yet. You will be implementing that feature as part of the assignment. Click ok on the warning box.

Using your favorite text/code editor, edit the file js/student.js in that directory and fill in your name and NetID. Reload the web page in your browser, and now your information should appear above the image.



New GUI features in this Assignment

This GUI has several new features:



Implementing the Mesh Processing Filters

The assignment is worth 20 points. The following is a list of features that you may implement. The number in front of the feature corresponds to how many points the feature is worth for the full implementation. Partial or partially-correct solutions will receive partial credit. The features in bold face are required. The other ones are optional. Refer to the examples web page for example output images as well as some implementation hints.

Note that each operataion mentions whether it should be applied on the selected items (if there are any) or to the whole mesh (if no items are selected or if there is no mention or what it should be applied to). See the example implementation for translation and the beginning of each method for how to do this. Also, the triangulation and subdivision operations should propagage selection to the subdivided faces. (Just copy that attribute to the new faces.) For simplicity, you can assume all polygons are planar and convex during the implementation (but not necessarily triangular, of course).

This assignment relies heavily on the "halfedge" mesh data structure, which was discussed briefly near the end of the Polygonal Meshes lecture on 2/22, and extensively during precept 3/1. You can also read about it in Section 3.1 of the Botsch 2007 reading. (Links to these notes and readings are on the Syllabus page.)



How to Program the Filters

To implement the features listed above, you only need to edit the files js/meshStudent.js (for mesh traversal functions) and js/filters.js (for most of the rest). Before starting to edit those files, we recommend you take a quick look at the file js/mesh.js because it has some important helper code relating to vertices, edges, and meshes. You are welcome to look at any of the other files, but it should not be necessary and some of them have some pretty byzantine javascript magic.


Submitting

You should submit your solution via CS dropbox here. The submitted zip file should preserve the directory structure of the skeleton code we provided in the zip file above.

The writeup.html file should be an HTML document demonstrating the effects of the features you have implemented and would like scored. For most features that take an input parameter (e.g., rotation, scale), you should provide a series of images showing at least two settings of the input parameters to demonstrate that your code is working properly. (No need to show inputs for the default models in the obj folder.)

You should start from the the example writeup.html provided. At the top of that file is a list of features that you might implement with links to the section where you can describe them. Please remove any features that you do not implement, but otherwise leave this header section intact. When you include an image, also include a link to the batch.html command that creates that image, as in the last assignment. To save space, please submit images in png format.

Note that you are expected to use good programming style at all times, including meaningful variable names, a comment or three describing what the code is doing, etc. Partial credit may not be assigned for code without comments. We have mostly tried to conform to the idiomatic JS style conventions.



Hints

As in the last assignment:


FAQ

Here are some answers to frequently asked questions. Check back here occasionally, as we may add FAQs to this list: