COS 426:
Computer Graphics
Spring 2019


COS 426 General | Assignment 4


Overview

In this assignment you will create a software rasterizer in javascript. The rasterizer loads meshes with multiple textures and outputs rendered images in (almost) real-time.

Deadline: This assignment is due 11:59pm on Sunday, April 21th.



Getting Started

Like previous assignments, you are able to adjust several parameters using the GUI. The URL also encodes all the parameters and it is ok to refresh when necessary. The only difference is that there is no batch mode in this assignment because your rasterizer is expected to render images on the fly. Besides this, everything else should be familiar.

To get started, download this zip file and unzip it on your computer. Change to the subdirectory cos426-assign4 and run the command python -m SimpleHTTPServer in the terminal. (That command is for python 2.7. In python 3 it should be python3 -m http.server. There are also many other ways to start a web server, for example using php -S localhost:8000 or by installing WAMP or MAMP or Node. Various other options are discussed here.) A web server will be launched locally on your computer, rooted at this directory. Note that our assignments will not work if you simply open the html file in the browser directly using file://... due to the same-origin security policy. Therefore we run a local web server.

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



What's New in the GUI



Implementing the Rasterizer

This assignment is worth 15 points. The following is a list of features that you may implement (listed roughly from easiest to hardest). The number in front of a feature corresponds to how many points the feature is worth for the full implementation. Partial or partially-correct solutions will receive partial credit. Unlike previous assignments, in this assignment, all features are required. Refer to the examples web page for example output images as well as implementation hints. You are encouraged to optimize the performance of your rasterizer as much as possible to achieve satisfactory framerate. For example, an easy optimization of scanning pixels in a triangle is to terminate scanning a line when it hits the right side of the triangle.

By implementing all the features (in bold), you get the full credit for this assignment (15 points). For additional points, you may choose to participate in the contest. You final score will be the sum of all points above (no diminishing returns).



How to Program the Features

All the related functions are in js/renderer.js. Before starting on that, we recommend you take a quick look at coursejs/main.js and coursejs/image.js because they contain some useful definitions. 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.

Three.js

Similar to Assignment 2, this assignment uses Three.js, the Javascript 3D library. In addition to convenient data structure classes Vector2 / Vector3 / Vector4 / Matrix4 , we will use PerspectiveCamera class from Three.js to represent camera. You may refer to those APIs during your implementations of the features to have a better understanding.



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. CS dropbox requires that the size of a single file is below 50MB. You can put a few large files in your own web space / google drive / dropbox and include a link to that in the write-up to save space.

The writeup.html file should be an HTML document demonstrating the effects of the features you have implemented and would like scored. For the features you would like to demonstrate, make sure that you include the required results by replacing placeholder.png(s) with your results. You are encouraged to include more representative results, but extra results only affect your score when your implementation is partially correct. You don't have to show the input images for the required results.

You should start from the the example writeup.html provided. At the top of that file are a list of features that you might implement, linking to the section where you talk about them. Please remove any features that you do not implement from the list as well as the corresponding sections, but otherwise leave this header section intact. When you include an extra result, also include a url that creates that image.

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

A few hints:


FAQ

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


Acknowledgement

Some meshes as well textures are downloaded from https://github.com/ssloy/tinyrenderer. COS426 course staff would like to thank the author Dmitry Sokolov for make the very useful test data available.