This course ended
December 7, 2021

CPSC 424: Introduction to Computer Graphics

      Department of Mathematics and Computer Science
      Hobart and William Smith Colleges

      Fall, 2021.

      Instructor:  David J. Eck  (


      Monday, Wednesday, Friday, 1:20–2:20 PM, Room Gulick 2000.
      Lab: Thursday, 10:10–11:40.  Room Rosenberg 009.
Programming Labs
Lab 1, August 26
2D Transforms
Lab 2, September 2
JavaScript and Canvas
Lab 3, September 9
Hierarchical Modeling
Lab 4, September 16
Into 3D
Lab 5, September 23
Lab 6, September 30
Start Midterm Project
Lab 7, October 7
Lab 8, October 14
Three.js Part 1
October 21
Work on Midterm Project
Lab 10, October 28
Three.js Raycaster
Lab 11, November 4
Intro to WebGL and GLSL
Lab 12, November 11
glmatrix and Textures
Lab 13, November 18
3D Modeling with glmatrix
Lab 14, December 2
Procedural Textures
Some sample solutions to lab exercises
Application Labs
August 30: Gimp September 6: Inkscape September 20: Blender 1
October 22: Blender 2 November 1: Blender 3 November 22: Blender 4


Final Project Presentations: December 7.

Presentations for final projects will be held during the regularly scheduled class period, Tuesday, December 7, from 7:00 PM to 10:00 PM in our regular classroom. Since everyone in the class is doing an individual project, presentations will be limited to fifteen minutes. You should aim for at least 10 minutes, and you should allow some time at the end for questions from the audience.

The written part or programming part of your project is due at the same time.

Fifteenth Week: November 29; December 1 and 3.

We will discuss the path tracing algorithm, which is discussed in Section 8.2. After that, we will look at some of the features that have been added to WebGL in WebGL 2.0. Lab 13 is due on Thursday, and for the lab that day, you only need to show up and work on it to get credit.

Remember that you need to meet with me to discuss your final project by December 6 at the latest!

Fourteenth Week: November 22.

On Monday, class will meet in Rosenberg 009 for our fourth Blender lab.

There is no class for the rest of the week because of Thanksgiving break. Happy Thanksgiving!

Thirteenth Week: November 15, 17, and 19.

There is a test on Monday, November 15. A study guide was handed out in class.

On Wednesday, we will continue working on Section 7.2. We will move on to Section 7.3, which covers some new aspects of textures, and maybe Section 7.4, which introduces framebuffers.

Twelfth Week: November 8, 10, and 12.

After finishing up just a few final notes about textures in WebGL 1.0, we will move on to Chapter 7. (I will not cover Section 6.5 in class.) We will cover the matrix math library glmatrix.js and how to use it to implement transformations in WebGL (Section 7.1). This will require talking about the matrix types in GLSL, which I have avoided up until now. We will also spend some time on implementing light and materials in WebGL (Section 7.2).

Your work from Blender Lab 2 and Blender Lab 3 is due by the end of the day this Friday, November 12. Your work for Lab 11 is due as usual on Thursday.

The second test Monday of next week, November 15.

Eleventh Week: November 1, 3, and 5.

On Monday, we meet in Rosenberg 009 for the third Blender lab.

We will continue with Chapter 6. We have covered the material on WebGL 1.0 and GLSL 1.00 from Sections 6.1 to 6.3, but I want to spend a little time talking about the changes in WebGL 2.0 and GLSL 3.00. We will start Section 6.4, which covers textures, and might finish it this week.

Tenth Week: October 25, 27, and 29.

We have already started Chapter 6, which covers the basics of WebGL. The reading for the week is Sections 6.1 and 6.2.

The midterm project, outlined in Lab 6 and Lab 9, is due on Thursday.

Ninth Week: October 18, 20, and 22.

We meet in Rosenberg 009 on Monday for the second Blender lab. I will hand out final project information at the lab.

You can use the regular lab on October 21 to work on your midterm project. The midterm project is due next week, on Thursday, October 28.

The reading for the week is the rest of Chapter 5. We will look at some of the advanced features from Section 5.3, which would be difficult to implement in standard OpenGL. We finish up three.js this week, but there will be another three.js lab next week.

Eighth Week: October 13 and 15.

We finished with Chapter 4 and got a start on Chapter 5 last week. This week, we will continue to work on Chapter 5, three.js. The reading is Section 5.1 and Section 5.2.

Next Monday, we will be in Rosenberg 009 for another Blender lab, which will cover Blender modeling. See Section B.2.

Don't forget that you need to work on your midterm project! The work from this week's lab will not be due until after the midterm project.

Seventh Week: October 4, 6, and 8.

There is a test on Monday, October 1.

On Wednesday and Friday, we will continue work on image textures, and we should finish Chapter 4 after the break.

There is no class on Monday next week because of Fall Break.

Sixth Week: September 27 and 29; October 1.

The reading for the week is Chatper 4, Sections 4.1, 4.2, and 4.3. (We didn't get to 4.1 last week.) Section 4.1 covers the idea of light and material and the simplified "light equation" that is used in OpenGL. It is important that you understand the OpenGL lighting model. Section 4.2 covers the OpenGL functions that are used for lighting and material in OpenGL 1.1 — we will not be interested in the details of that section, and you are not expected to memorize the functions. Section 4.3 introduces image textures. Most of the same image texture functions are still used in WebGL, so we will spend some time on them.

There is a test coming up next Monday, October 4. A study guide is available, and a copy will be handed out in class this Monday.

For the lab this week, you will start work on the midterm project, which will be due on Thursday, October 28.

Fifth Week: September 20, 22, and 24.

Class meets in Rosenberg 009 for our first Blender lab.

Your work from the Inkscape Lab is due on Monday.

The new reading for the week is Section 3.5 and Section 4.1. But in fact, we still need to cover a large part of Section 3.4, which is about indexed face sets and the functions glDrawArrays and glDrawElements. Section 3.5 covers some of the linear algebra that is used in computer graphics. It will be important to know some of the basic facts about vectors. In Section 4.1, we move on to the topic of light and material. The OpenGL 1.1 model for light and material is rather primitive, but it is still important to understand it.

Fourth Week: September 13, 15, and 17.

We will continue looking at OpenGL 1.1 this week, concentrating on geometry and transformations. The reading is Chapter 3, Sections 3.2 to 3.4.

The standard API for OpenGL is designed for C. OpenGL can be used with other programming languages, but the API has to be adapted to match the syntax and capabilites of the language. To help you understand the API documentation, uou might want to look at Appendix A.2, which gives a brief introduction to C.

You will be working with OpenGL for this week's lab. You will have the option of programming in either JavaScript or Java. If you decide to use Java, you will use JOGL, a library that implements OpenGL for Java. See Subsection 3.6.2 for information about using JOGL. Note in particular that if you plan to work in Eclipse, you will need to set up your workspace to access the library.

Third Week: September 6, 8, and 10

On Monday, the class meets once again in Rosenberg 009 for an application lab. This week, the lab uses the vector drawing program, Inkscape.

The reading for the week is Section 2.4 and Section 3.1. Section 2.4 covers hierarchical modeling. We already started that topic last Friday. We will continue on Wednesday, concentrating on implementing scene graphs as data structures. After that, it is time to move on to Chapter 3, OpenGL 1.1, and 3D graphics. We should get into a bit of Section 3.2 by the end of the week.

Second Week: August 30; September 1 and 3

The class meets in Rosenberg 009 on Monday for a lab on the Gimp image processing program.

We will be looking at 2D graphics using the HTML Canvas API. The reading is Section 2.6. Note that general concepts of 2D graphics are covered in Sections 2.1, 2.2, and 2.3, which you should have already read. Section 2.6 shows how those concepts are implemented in the Canvas2D API.

First Week: August 23, 25, and 27

Welcome to the course!

The reading for the week is Chapter 1 and the first three sections of Chapter 2. Chapter 1 is a short overview of computer graphics. You should not expect to understand everything in it, but it will give you an idea of what will be covered in the course. Chapter 2 covers two-dimensional graphics, using several graphics systems.

You should read Section 3 before class on Wednesday. The lab on Thursday will be based on Section 3! You should read Section 1 and Section 2 of Chapter 2 before class on Friday. If you are reading ahead, note that we will not cover Section 2.5 or Section 2.7.

When you read the book, you should pay some attention to the interactive demos, which are meant to help the reader understant the concepts better. You can find them in the web-site version of the book. There are links to the demos in the linked PDF version.