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.

**IMPORTANT CLASSROOM LOCATION CHANGE:**

**OUR CLASS MEETINGS HAVE BEEN RELOCATED TO COMPUTER SCIENCES AUDITORIUM 1240 – EFFECTIVE IMMEDIATELY!**

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

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!

by Eftychios Sifakis on March 16, 2017

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

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;

**varying**

by Eftychios Sifakis on March 7, 2017

**Due:** Thursday March 16th**.**

**Synopsis:**

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

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.

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)

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).

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

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.**