This course ended on

May 6, 2012

## CPSC 424:

Computer GraphicsDepartment of Mathematics and Computer Science Hobart and William Smith Colleges Spring 2012. Instructor: David J. Eck (eck@hws.edu) Course Handout: http://math.hws.edu/eck/courses/cpsc424_s12.html Monday, Wednesday, Friday, 12:20 -- 1:15, Lansing 301. Lab: Thursday, 11:55 -- 1:30, Lansing 310.

Student Web PortfoliosKerui Chazoi Jake Alex Kieran Shaun Matt

## Some Links:

- WebGL at Khronos.org, the official WebGL site, including the WebGL 1.0 Specification, the WebGL Wiki and a list of WebGL resources and examples. Also see the OpenGL ES 2.0 Specification and the GLSL ES Specification.
- The WebGL Quick Reference Card
- w3schools.com -- a good place to find on-line references for Web technologies, including JavaScript.
- LearningWebGL.com, a web site with a nice set of lessons on WebGL.
- gl-matrix, a JavaScript library vectors and matrices that we will use in some projects.
- Three.js, a higher level 3D framework, including many examples.
- Blender, the 3D modeling and animation program, with a gallery.
- The Blender 2.6 documentation wiki
- Pov-ray, the ray-tracing program, with some stunning examples.
- Gimp, the Gimp (2D) image-processing program.

## Week 1: January 18 and 20

Welcome to Computer Graphics. This first shortened week will be an introduction to computer graphics and to WebGL.

The first lab of the course meets on Thursday at 1:30, in Gulick 208. Since we haven't had time to cover anything about WebGL, the first lab will be on the GNU Image Processing Program, Gimp.

## Week 2: January 23, 25, and 27

Last Friday was an overview of WebGL. This week, we take introductory looks at the shading language and at the JavaScript API that is used for programming WebGL. We will see how attribute, uniform, and varying variables are actually used in shaders, and how values for attributes and uniforms are specified in JavaScript. There will be a first look at vector and matrix types in the shading language. You will work on some examples in this week's lab. For this lab and the next two labs, you will be working with two-dimensional graphics.

## Week 3: January 30; February 1 and 3

The topic for the week is

geometric transforms. We are still working in two dimensions. On Monday, we will look at the basic transforms -- scaling, rotation, translation -- and how they can be implemented using matrix multiplication. On Wednesday, the topic is hierarchical graphical modeling and how it can be implemented using a stack of transforms. On Friday, we will continue this topic. If we have time, we will move on to the next big idea: textures.

## Week 4: February 6, 8, and 10

The topic for the week is

textures. Mostly, we will talk about usingimage texturesin WebGL, but the idea ofprocedural texturewill also be mentioned. Image textures in WebGL are rather complicated, involving such things as: texture coordinates, texture objects, texture units, texture wrap modes, mipmaps, and min/max filters. We'll also use thegl.POINTSprimitive for the first time and see how to use textures on points.

## Week 5: February 13, 15, and 17

Finally, this week, we move on to 3D. In lab this week, you will do some modeling with Blender. Monday's class will also meet in the lab for a preliminary look at Blender. In class on Wednesday, we will start talking about features unique to 3D, starting with normal vectors and what they have to do with lighting. As we talk about 3D features, we will also discuss how they can be implemented in WebGL.

## Week 6: February 20, 22, and 24

We will talk about some aspects of representing 3D objects in WebGL. We will look at the

gl.drawElementsfunction, indexed face sets, and OBJ files. After that, we will be moving on to transformations in 3D. This will require some general knowledge about linear algebra, vectors, and matrices, but you will not need to know how to do the computations by hand. We will use a JavaScript library called gl-matrix to do vector and matrix math for WebGL.It looks like we won't get to gl-matrix.js this week. On Friday, there will be a Blender animation demo, with some examples of animations produced by students in the past.

## Week 7: February 27 and 29; March 2

There is a test on Wednesday, February 29. An information sheet is available.

Aside from that, we will start talking about gl-matrix.js. We will discuss the idea of a "ModelView" transformation, and the camera model for setting up the viewing transform.

## Week 8: March 5, 7, and 9

We should finish up most of the "geometric" aspects of WebGL by looking at projection transformations and the functions available to create projection matrices of various kinds. You'll also learn what homogeneous coordinates are.

Research projects are due on Friday, and we will spend class on Friday doing project presentations. That will be carried over to Monday if necessary.

There is no lab due this week. Next week, both the blender animation lab and the WebGL modeling lab (Labs 6 and 7) are due.

## Week 9: March 12, 14, and 16

Next week is Spring Break! Have fun! Do some graphics!

After finishing up geometric transformations, we will spend the rest of the week talking about lighting and materials.

Labs 6 and 7 are due before break. I expect to grade them on Saturday. Lab 8 is our last Blender lab. Lab 8 will not be graded, but your final Blender project is due on April 13.

## Week 10: March 26, 28, and 30

To start the week, we will talk about implementing the lighting equation in the WebGL shading language. From that, we'll turn to scene graphs and hierarchical graphics in 3D. We will look at two WebGL examples, world1.html and world2.html. These examples implement the lighting equation as we discussed it before Spring break (which is not necessarily the most efficient implementation).

You need to select a final programming project by next Wednesday, April 4. We will talk about this in class, and you should probably come in to talk about your ideas with me.

## Week 11: April 2, 4, and 6

We will start the week by looking at the POV-Ray ray tracing program and, in particular, at its scene description language. In lab this week, you will make a couple of images with POV-Ray.

Wednesday will be devoted to the final project. We have decides that the class will work together to produce a higher-level API for WebGL, and we need to discuss how to procede with that.

Starting Friday, I will start filling in some parts of WebGL that we haven't yet covered.

## Week 12: April 9, 11, and 13

After a look at some old-fashioned OpenGL 1.0 code, we spent most of the week thinking about the final project.

## Week 13: April 16, 18, and 20

We continue with the final project on Monday and in lab. On Wednesday, we will cover framebuffers and some pixel manipulation methods in WebGL.

There is a test next Monday, April 23. A information sheet is available.

## Week 14: April 23, 25, and 27

We have a test on Monday. We will discuss the test on Wednesday, and then spend the rest of Wednesday and Thursday's lab on the final project. On Friday, I will talk about some advanced rendering techniques.

## End of Semester: April 30 and May 6

Monday, April 30 is the last day of classes. We will wrap up the course and discuss how to complete the final project. The project is due during the scheduled final exam period, Sunday morning, May 6. We will meet in our regular classroom at 11:00 AM on that day for a final discussion and look at the project. After that, you are invited to go out to lunch with me.