Notes for January 25 class -- Second lecture

Topics we discussed:

Approximating shapes by triangles:

In most modern computer graphics pipelines, smooth shapes (like cylinders and spheres) are created out of triangles. If you want the edges of the shapes to look smooth, you need to use more triangles.

For example, a cylinder is approximated by an polygonal prism. If the approximating prism shape has N sides, then you need 4*N triangles to build it (N for the top cap, N for the bottom cap, and 2 triangles for each "quad" (four sided polygon) that forms a side of the prism).

Similarly, to build an approximation of a sphere out of triangles, you can use a longitude/latitude grid to create an approximating polyhedron. Every quad (four sided polygonal face) of this approximating polyhedron requires two triangles.

Such a shape is said to be parametric, because we can use two parameters, u and v, to create the shape, where 0 ≤ u ≤ 1 and 0 ≤ v ≤ 1. We can think of u and v as lying on an abstract parametric square, which acts as a kind of rubber sheet. We mathemetically distort this rubber sheet to describe the sphere.

We do this as follows: For any point u,v on our parametric square, we define a longitude angle theta, and a latitude angle phi, where:

0 ≤ theta ≤ 2 π
-π / 2 ≤ phi ≤ π / 2
Then any point (x,y,z) on the sphere can be described by:
x = cos(theta) * cos(phi)
y = sin(theta) * cos(phi)
z = sin(phi)
By looping over values of u and v, we can create the little quads that constitute our approximating polyhedron. If we do this in smaller steps, we get a better approximation to the sphere.

Vertex shaders and fragment shaders:

We will build our higher level shapes, like cylinders, spheres, cubes and human faces, on the computer's CPU. But in the low level code, where those shapes are defined as individual triangles, we will use the computer's GPU (graphics processing unit).

The GPU lets us write two kinds of programs:

  • The Vertex shader uses the power of the GPU to place the vertices of our triangles within the final image. Usually this is a very simple program, but sometimes it can be very elaborate.

  • The Fragment shader is where most of the computational intensive work is done by the GPU. There is where we do such computations as shading and texturing, which need to be done on a per-pixel basis. The reason it is called a "fragment shader" and not a "pixel shader" is that we sometimes have two or more fragments of visible geometry within the same pixel of the image (for example, at the edge where two shapes intersect). The GPU needs to do a separate computation for each of those fragments of pixels.
In the next few weeks, we are going to start off programming entirely within a square in the fragment shader, so that you will get used to doing that right away. In order to make that easier for you, I am going to provide you with a library that does much of the heavy lifting for you of making sure that the fragment shader code you write will be visible on your web page.

As I mentioned in class, this means that our geometry will really consist of two triangles. More about that next Tuesday! We watched the following films in class: