COS 426:
Computer Graphics
Spring 2018


COS 426 General | Assignment 3


Overview

In this assignment, you will create a raytracer program. You will mainly be working in GLSL, which is the shading language for OpenGL.


Getting Started

This section of the instructions are analogous those of the previous assignments, 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-assign3 and run the command python -m SimpleHTTPServer which will launch a web server on your computer, rooted at this directory. (See 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.

Using your favorite text/code editor, edit the file ls 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.

Driver Setup: Most machines should be ready to go without any additional steps. However, if you are running macOS High Sierra and have an NVIDIA graphics card, there is a bug in the latest built-in graphics drivers that will break this assignment. If you have an affected machine (likely a high end Macbook Pro or iMac from 2014 or earlier), you must do one of the following three things:

If you have any doubts as to whether one of the fixes above has been correctly applied, please come to Kyle's office hours. If it hasn't been patched then correct code will sometimes, but not always, work.


New GUI features in this Assignment



Implementing the Raytracers

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.

The plane intersection method is already implemented for you as an example. By implementing all the required features (in bold), you get 13 points. Full credit for this assignment is 20 points, so to complement the required features you may choose from the optional features listed above and participate in the art contest (which yields one point for participation and two for winning). Your final score is based on the following factors:

Final score will be rounded to the nearest 0.5. The formula in javascript is:
Math.round((Math.min(R, r) + Math.min(N, n) + d * (1 - Math.pow(d, Math.max(n - N, 0))) / (1 - d) + a) * 2.0) / 2.0

Score Calculator:
my score on the required features
my score on the non-required features
my score on the art contest
total score


How to Program the Shaders

Before getting started with coding, make sure the downloaded code works on your Computer/OS/Browser. When you launch the raytracer you should see red-green-blue walls and a white floor and you should be able to move around with the mouse. In order to get this relatively advanced functionality out of the graphics engine, unfortunately, we are working in a relatively new software interface, and there are variations among browsers and operating systems. It may require some experimentation to find a computer/browser combination that works for you. If you cannot find a good development combination on your own computer, try a cluster computer. We have tested heavily on Chrome and Firefox on MacOS and these seem to work well.

To implement the features listed above, you only need to edit the files shaders/fragmentShader.glsl. For the raytracer, you may also wish to take a look at or try to edit the scenes file scenes/*.json because it helps create your own scenes. You are welcome to look at any of the other files, but it should not be necessary.

Except for adding a scene in javascript, the coding is entirely in GLSL. It is a powerful language, but tricky to debug. So we recommend making small, incremental changes to the code as you edit, reloading the page often. A compiler error in the shader code will pop up as an alert in javascript.

For some tips on GLSL see the FAQ below and the precept slide.



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 some features (e.g., sharpen), you can simply show the input and output of your program. (No need to show inputs for the default images in the images folder.) However, for features that take an input parameter (e.g., blur), you should provide a series of images showing at least two settings of the input parameter to demonstrate that your code is working properly.

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, but otherwise leave this header section in tact. As in previous assignments, When you include an image, also include a link to the index 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

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: