First we looked at how what look like 3D shapes can be approximated by triangles. For example, as you can see in the example below left, what looks like a cylinder is actually approximated by many flat triangles.

Similarly, in the example below right, when you mouse over the cube you can see that it is approximated by 12 triangles.

For rounded shapes like cylinders, you can create different levels of detail (LOD). The more triangles you use, the more closely your collection of triangles approximates the shape of a cylinder.

Real time computer games use this technique to render complex scenes without using too many triangles, which helps to make sure that frame rates don't get too slow. Nearby objects are rendered with a high LOD, whereas objects that are far away are rendered with a lower LOD.

These triangles are sent from the CPU to the GPU, which then renders them to create the image that the user sees.

Fragment shaders

We looked at a simple WebGL framework for writing fragment shaders. The code we started with, packaged as a zip file, is HERE

There are lots of functions you can call in your fragment shader, like cos(), floor(), min(), max(), sqrt(), and step(), in addition to the sin() function I showed in class.

HERE is a quick reference to all of the things you can call. Look especially at the list of Built-in Functions.

Homework 1

Due next Tuesday before the start of class

NOTE: You do not need to email your homework to anyone each week. You just need to post your homework to the website that you use for this course.

Replace the simple fragment shader from my example with something for more exciting, visually interesting, thought provoking or aesthetically pleasing.

Have fun with this assignment. Go crazy with it. Create something wild and original. Don't hold back!