Welcome to CS559!

by Eftychios Sifakis on January 17, 2017

Dear Students,

Welcome to CS559 “Introduction to Computer Graphics”. This web page will be your portal for all announcements related to the class, information about class logistics, and repository of lecture notes and supplemental information.



To get started, make sure to check out the Syllabus page for the most important general class information (including grading and administrative logistics), and the Calendar for a time-indexed view of topics and important special scheduling notices.

You will be getting information on reading materials as we go, but if you want to prefetch some information that will definitely be useful, take a look at the following tutorials/discussions:

That should be a good starting point! Please keep track of the posted deadlines for assignments (summarized in the “Week in 559” window on the right of the main page of the class). Also make sure to verify you have access to the Piazza and Canvas pages (linked for your convenience to the right of the main page). Have a great start to your semester

Grading curve for midterm exam

by Eftychios Sifakis on March 16, 2017

After the grading of your final exams has been completed, the grading curve has been set as follows:

  • Scores between 82-100 correspond to an “A” grade
  • Scores between 75-83 correspond to an “AB” grade
  • Scores between 63-74 correspond to a “B” grade
  • Scores between 54-62 correspond to a “BC” grade
  • Scores between 45-53 correspond to a “C” grade
  • Scores below 44 correspond to a “D” grade

Remember that the final exam is only a small piece of your overall grade – this grade distribution and curve is for your information only and does not reflect your final grade!

Videos of March 10th make-up lecture

by Eftychios Sifakis on March 16, 2017

You can access a video recording of the March 10th make-up lecture through this link.

How to compute a “normalMatrix” in TWGL

by Eftychios Sifakis on March 14, 2017

You might have noticed that shdr.bkcore.com provides a uniform mat3 normalMatrix that can be used to transform normals from local (model) coordinates to Camera coordinates.
Unfortunately, TWGL does not have an explicit function to compute this very useful matrix directly. (Remember that normalMatrix is supposed to be the inverse-transpose of the top leftmost 3×3 block of your 4×4 modelView matrix).
There is, however something that you can do without too much effort to replicate this functionality. It’s based on the fact that (i) if you invert & transpose a 4×4 matrix which doesn’t include a projection, then the top leftmost 3×3 block of the result will be the inverse-transpose of the respective block in your input (modelView) matrix, and (b) TWGL does offer inverse/transpose functions for 4×4 matrices. The syntax you can employ is as follows:

In your JavaScript code:

var m4 = twgl.m4;
var modelViewMatrix = m4 ….    
// A 4×4 matrix, as you would normally construct, e.g. by multiplying the model and camera transform
var normalMatrix = m4.inverse(m4.transpose(modelViewMatrix)); // After this, pass down to the shader the normalMatrix as a 4×4 (mat4) matrix, instead of a 3×3 (mat3) matrix.

In your vertex shader code:

attribute vec3 normal;
uniform mat4 normalMatrix;


Due: Thursday March 16th.
You will create an interactive visualization of a 3D model using WebGL and GLSL shaders. In principle, you will re-create the experience that was asked of you in Program 4, but instead of doing the drawing using the (2D) routines of the HTML5 canvas, you will leverage the WebGL API and provide your own shaders to accomplish that goal. Some of the challenges that Program 4 was based on will not apply in this case (e.g. visibility will be handled using the Z-buffer, not your explicit implementation of painter’s algorithm), while new concepts related to how WebGL works will now require your attention (e.g. interfacing the WebGL context with your custom shaders, communicating attributes and uniforms to your shaders from the JavaScript code, organizing your geometry data into buffers, etc.)

Learning Objectives:
To help you understand how the principles of the graphics pipeline materialize into a concrete drawing task, and understand how WebGL enables you to formalize and orchestrate this process. We hope that Program 5 has familiarized you with shaders themselves; the important next step that you will take in this assignment is to understand how they fit within the broader WebGL API

Lecture rescheduling : March 9th -> March 10th

by Eftychios Sifakis on March 7, 2017

Dear students,

As we have discussed in class, the lecture of March 9th is RESCHEDULED for Friday March 10th, at 3:00pm in CS1240.

Midterm location change

by Eftychios Sifakis on February 28, 2017

Dear students,

Our midterm location has been updated; the exam will now be located at PSYCHOLOGY 113 (March 2nd, 7:15-9:15pm)

Extra instructor office hours

by Eftychios Sifakis on February 26, 2017

In light of your upcoming midterm, the instructor will be available during two additional periods of office hours this week:

  • Monday 3:00-3:45pm
  • Wednesday 11:00-11:45am

Location : CS6387 as usual.

(this is in addition to the regular Tuesday 3:00-3:45pm office hours, and the Thursday 12:15-1:00pm in-class help session).

Midterm study guide

by Eftychios Sifakis on February 24, 2017

In order to facilitate your review for your midterm, we have compiled a list of most important topics from your readings. It should be made clear that this is not an exhaustive list of what you should know for the midterm (this would be: all the assigned readings, plus the information discussed in lectures), but is just meant to highlight topics that are particularly important.

From Foundations of Computer Graphics :

  • From Chapter 4 [Link] : You can primarily focus on Section 4.5
  • From Chapter 6 [Link] : Section 6.1 (excluding 6.1.2 & 6.1.6). Section 6.2 (you may exclude the derivations in section 6.2.1 — but 6.2.2 is relevant). Sections 6.3-6.5 are important too.
  • From Chapter 7 [Link] : This is a very important chapter overall. You may exclude Section 7.4. Also, you do not need to memorize the exact mathematical form of the perspective transform (page 152, or page 155). It is more important to understand the concepts, rather than memorize the matrices.
  • From Chapter 8 [Link] : It is OK to skip Sections 8.1.1, 8.2.6 (we’ll discuss texturing later), and Section 8.3. Section 8.1.3 you can skim through.
  • From Chapter 18 [Link] : You can read through this as a

Previous and past midterm exams

by Eftychios Sifakis on February 23, 2017

In preparation for your midterm exam, you might find the following resources useful:

  • The midterm from Spring 2016 can be downloaded here.
  • The midterm from Fall 2015 can be downloaded here. Note that some questions, colored RED (mostly dealing with textures) are excluded from your readings this year.
  • An additional practice midterm can be downloaded here. Note that some questions, colored RED (mostly dealing with textures) are excluded from your readings this year. IMPORTANT: This practice midterm, by design, is much harder than the actual exam should be expected to be. You can tackle it as an “extra challenge” to help with your preparation, but the actual exam will be easier.


Reading Assignment #3 : Graphics pipeline and intro to shaders

February 23, 2017

Due: Sunday, March 5th Synopsis: Our discussion will revolve around how to program the graphics hardware so we can draw quickly. Your readings will cover the concept of the graphics pipeline, how to program it using GLSL shaders, and an introductory discussion on shading (so you can generate interesting effects). Evaluation: Check/No Check based on passing […]

Read the full article →

Programming Assignment #5 : Shaders

February 21, 2017

Due: Sunday, March 5th (UPDATED!) Synopsis: You Get to write some shaders! Learning Objectives: To help you understand how shaders work by writing some. We’ll write them independently of the programs that connect to them so we can focus on the shaders themselves. Evaluation: According to our 5-point scale. You get a satisfactory grade (“3”) if you turn […]

Read the full article →

Programming Assignment #4 : A complete 3D viewing pipeline, plus visibility

February 8, 2017

Due: Sunday, February 19th (see the class late policy on the Syllabus) Synopsis: You will create 3D animation using the JavaScript 2D canvas. We have approached this goal before, in our previous assignments, but this time you will be exposed to all pieces of the pipeline (3D transformations, viewing transformation, visibility, etc) even more thoroughly. This […]

Read the full article →

Reading assignment #2 : Transforms in 3D, hierarchical modeling, introduction to viewing

February 2, 2017

Due: Thursday, February 9th Synopsis: Although we are using a 2D medium (the HTML5 canvas) and still seemingly rely on 2D drawing operations, we have already ventured into the question of how do we capture 2D imprints of the 3-dimensional world. The following readings cover important topics, including the representation and combination of transforms, hierarchical […]

Read the full article →

Programming Assignment 3 : Hierarchical Modeling and Transforms (via TWGL) in 3D

January 31, 2017

Due: Tuesday, February 7th (see the class late policy on the Syllabus) Synopsis: You will create a three-dimensional object such that it can be animated, and create a 2D visualization of this animation. Learning Objectives: To see how transformations and hierarchical objects are employed in 3 dimensions, and experiment with a linear algebra library (such as TWGL) […]

Read the full article →

Lecture notes – Week 1 (Jan 17-19)

January 25, 2017

Slides from in-class presentation [PDF – Jan 17] [PDF – Jan 19] Code examples: L-shape & axes [JSBin link] Combining more than one transform [JSBin link] Quadrant [JSBin link]

Read the full article →