COS 426: Computer Graphics Spring 2015

Overview

In this assignment you will create a two 3D rendering programs: a rasterizer and a raytracer. You will mainly be working in GLSL, which is the shading language for OpenGL.

Getting Started

As in the previous assignments, the rasterizer 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. The raytracer only works in batch mode, because there are relatively few parameters to specify. 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. You should see the web page that links to the two different renderers.

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.

New GUI features in this Assignment

• The rasterizer GUI should be pretty familiar.
• The raytracer specifies parameters on the command line, for example: raytracer.html?scene=default&width=600&height=400 — this names the scene and sets the dimensions. If you omit the scene name it will use 'default'. The scenes are specified in the file js/scene.js and the default scene (for example) is created by the method Scene.default(). The width and height default to full screen.
• In the raytracer, you can rotate the camera using the mouse, and move forward and backward using the up and down arrow. If the frame rate is too clunky, we recommend reducing the size of the rendering window (see previous bullet in the instructions).
• Pressing the 'I' key (in either program). As before this captures an image of the current rendering. (In different browsers you may get slightly different behavior. In Chrome it should force a download while in some other browsers it may open in a different window or tab.) It should be a PNG file; you may need to rename it adding the file extension '.png'.

Implementing the Renderers

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.

• Rasterizer
  • Vertices and Lighting
    • (0.5) Inflate. The basic shader is mostly provided, but you need to inflate the mesh in the vertex shader by displacing vertices along the vertex normal (and later copy this feature to your other shaders too).
    • (1.0) Gouraud shading. The fragment shader is provided but you need to write a vertex shader to compute per-vertex lighting.
    • (1.0) Phong shading. The vertex shader is provided but you need to write a fragment shader to compute per-pixel lighting.
    • (1.0) Custom lighting. Choose your own per-pixel shading method, e.g. Cook-Torrence.
    • (1.0) Wacky vertex stuff. Add your own shape modification. If you want a parameter to control it, use the "inflate" parameter. It will probably look better if you copy your Phong fragment shader into the Wacky fragment shader.
  • Texture Mapping
    • (0.5) Textures. In your Phong shader, modulate the diffuse color by a texture value.
    • (1.0) Bump maps. Modulate normals by the texture at every pixel.
    • (1.0) Environment maps. Based on the surface normal at every rendered pixel, lookup a texture value by mapping to an infinitely large sphere wrapped around the model (textured by a photo and meant to simulate an environment).

• Ray Tracer
  • Ray Intersection - intersect a ray with various shapes:
    • (0.0) Plane: This is already implemented as an example.
    • (2.0) Sphere
    • (2.0) Box. (axis aligned)
    • (2.0) Cylinder. The code is organized for you as an open cylinder plus two discs that are the end caps.
    • (3.0) Cone. Disc is already done (for cylinder) and the open cone is similar to the open cylinder, but this is still quite difficult!
  • Lighting and Materials:
    • (1.0) Shadows. Cast a single ray to the light.
    • (3.0) Soft shadows. Cast multiple rays towards an area around the light position.
    • (2.0) Transmission rays. Reflected rays are implemented already (one line in GLSL). For glass-like surfaces, you need to calculate refraction rays based on Snell's law.
    • (1.0) Checkerboard. Modulate diffuse color by a checkerboard pattern based on spatial position.
    • (1.0) Phong material. Add the Phong term in the lighting calculation.
    • (1.0) Special material. Add your own, for example incorporate a parametric noise texture (like Perlin noise). Feel free to reuse someone else's GLSL implementation of noise, but list your sources.
  • Art and Other - you can implement these features for one point each, and also submit them to the art contest for possible additional point(s):
    • (1.0) Scene. Model a scene of your choosing. Be careful that there is a maximum number of objects (currently set to 20) and increasing this number will slow the program and can also cause the program to fail if there are too many uniform variables (depending on your graphics system).
    • (1.0) Animation. Animate the scene somehow (you can access the uniform variable "frame" in the fragment shader). To enable this feature you need to add "?animated=1" to the URL. The code base does not save animations, but you can simply provide a link in your submission file and we can see the result. Also, if you really want to save a movie, use screen grab software like quicktime.

The translation filter is already implemented for you as an example. By implementing all the required features (in bold), you get 14 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). It is possible to get more than 20 points for this assignment. Your final score will be calculated by adding:

• your score on the required features (up to 14 points)
• your participation in the art contest (up to 2 points)
• your score on the non-required features, calculated as follows.

The value of non-required features incurs diminishing returns after the first 6 points. For sums of non-required features (n>6), each point over 6 will accrue a value of 2/3 the previous point.

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 rasterizer you should see a dark purple circle (sphere) on a black background, and in 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/*.txt (for the rasterizer) and specifically shaders/Raytrace-frag.txt (for the raytracer). For the raytracer, you may also wish to take a quick look at the file js/scene.js because it has some support code for the raytracer (setting up the scene). You can add your own scene there at the bottom in myScene, or add as many new ones as you like. 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.

Huiwen introduced GLSL shaders in the most recent two precepts. For more tips on learning GLSL see the FAQ below.

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 rasterizer-batch.html or raytracer.html 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:

• Do the simplest operations first! Note, however, there are some dependencies, for example you need to handle mesh traversal before the other analysis and filtering operations.
• Look at the example page.
• Post a message to Piazza if you have questions.
• Take note of the late policy and the collaboration policy.

FAQ

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

• What browsers are supported?
  The code has been pretty heavily tested on Chrome and Firefox runing on MacOSX. It is possible it will not work on some configurations. We have seen some problems in safari. If you load the page and see black from the outset, try a different browser or a different computer.

• Where can I learn more about GLSL?
  There are many resources online, including these:

  • http://aerotwist.com/tutorials/
  • http://learningwebgl.com/blog/?page_id=1217
  • https://www.opengl.org/wiki/Core_Language_%28GLSL%29
  • http://glslsandbox.com/