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:
A set of arrays representing the Blender monkey model with smooth-shading surface normals.
Two sets of arrays representing a simple easel and canvas with texture coordinates for the canvas
A set of arrays representing the red chair with flat-shading surface normals
A set of arrays representing an icosahedron with normals and texture coordinates (see d20.png and ico.png for example texture maps)
A set of arrays representing an cube with normals and texture coordinates (see dice.png for example texture maps)
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:
two different fragment shaders, one that uses textures and one that does not
two copies of anything that refers to a fragment shader (two programInfos, two drawing codes, etc)
two sets of arrays, one for each triangle, since we only want to pass one to each shader
two drawing sequences (from gl.useProgram through gl.drawElements) inside the render function
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.
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:
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.
Create a file that uses the 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.
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.
