CS 4810: Computer Graphics

This page does not represent the most current semester of this course; it is present merely as an archive.

1 Overview

This assignment is unlike the ones before; in it you should create one or more HTML files that utilize WebGL and the TWGL library.

You may look for example code online; if you use any source other than twgljs.org, document those sources in <!-- HTML comments --> in your submitted files

2 Resources

To assist you in your project, we provide the following code snippets that you are welcome to use:

3 Do both

twomaterials.html

Create a file based on our in-class example but have one of the triangles not use a texture at all while the other still does. To do this, you’ll need two copies of many parts of the program:

Note that you can get the same visual effect with many other solutions; we will look at your code to verify that two fragment shaders are in use.

overview.html

Create a file that has either the red chair or the monkey with a perspective camera that moves around to view it from different angles. Have something that looks like lighting for the model.

The easiest way to do this is to create two uniform mat4 in your vertex program, one modelview and one projection, and use twlg.m4.lookat and twgl.m4.perspective to initialize them in your javascript, changing the parameters to lookat based on the current time.

Lighting is as easy as multiplying color by the dot product of the normal (which you’ll need to make an attribute in the vertex program and a varying in both the vertex and fragment programs) with some arbitrary fixed vector.

4 Do at least one

Implement at least one of the following.

recursion.html

Create a file that uses the HTML canvas in which the webgl is being rendered as the source of a texture. You’ll need to also have some objects that don’t use that texture or you won’t see anything. Have your render function re-set the texture periodically.

Note, if you re-set the texture every single frame then you have a reasonable chance of freezing your computer due to too much CPU/GPU bandwidth, but doing that for a second or two at the beginning of the animation might work well.

fisheye.html

Create a file with a vertex shader that implements a fisheye projection. You’ll need to have several copies of an object in the scene to demonstrate that it is working.

Fisheye is easy to compute: instead of using a projection matrix, divide \(x\) and \(y\) with the length of the \((x, y, z)\) point. For most modelview matrices you’ll also need to adjust \(z\) so that you only see one half of the scene (z -= 1.0 might suffice).

psychedelic.html

Fill the entire canvas with a rendered object. Have the fragment shader color each pixel based on some function of the fragment coordinate and the current time to get some kind of psychedelic color pulse.

TWGL has an example you can work from, though you should write your own fragment shader. Using sines and cosines of polynomial functions of time, x, and y to determine colors is a good way to start.

bouncebox.html
Have some object bounce around inside a box. No need to draw the box.
other.html
Do something else cool. Coolness and novelty to be determined at instructor discretion.
Copyright © 2016 by Luther Tychonievich. All rights reserved.
Last updated 2016-12-09 15:18:02