CS 418: Interactive Computer Graphics

Fall  2017

Lecture: MWF   9 - 9:50 am 
Room 1404 Siebel Center

University of Illinois at Urbana-Champaign,
Department of Computer Science
Instructor : Eric Shaffer
Office: 2209 Siebel Center
Office Hour: M 2:00-3:00pm or by appointment

Lecture Videos: Are available at this link [VIDEO LINK] Use the "LOG IN VIA INSTITUTION" button.

Book:  There is no book for the class. Notes and other materials will be posted online.

Piazza: This term we will be using Piazza for class discussion. Rather than emailing questions to the teaching staff, we encourage you to post your questions on Piazza. Find our class page at: piazza.com/illinois/fall2017/cs418/home

TA Office Hours:

Grading: The course grade for the class is broken down among the following items:

Machine Problem 1  15%
Machine Problem 2  15%
Machine Problem 3  15%
Machine Problem 4  10%
Exam 1  15%
Exam 2   15%
Exam 3  15%






Machine Problems: There will be 4 machine problems during the semester. Assignments will be announced in class and on Piazza. Homework submission will be done electronically through Compass. The required files and acceptable file formats for submission will be specified in the assignment.

Exams: There will be three exams. We will use the Computer Based Testing FacilityThe dates of the exams will be

Extra Credit: At 3 lectures during the semester, I will take attendance. If you attended that lecture, you will receive 0.5% of the total course grade as extra credit. This means there is a total of 1.5% of the grade available as extra credit, which could easily be the difference between letter grades. This will be the only extra credit opportunity offered during the course.

Extra Credit for Online Students: Online students obviously can't attend the lectures...so you will be offered an equivalent opportunity related to online participation. The details will be communicated via e-mail.

Late Homework or Projects: Machine problems submitted after the due date lose 10% per day. In exceptional circumstances where extension may be reasonable (illness, family emergency etc.) arrangement must be made with the instructor.

Collaboration: You should collaborate on the MPs. You should not copy code verbatim from each other or the web. 

Software:  We will use HTML/JavaScript/WebGL and GLSL for the programming assignments. No prior knowledge of these is required for the class.

Commenting Code: All files, classes, methods and properties should be documented with JSDoc comments with the appropriate tags and types.
                                  Details can be found in the Google JavaScript Style Guide.

Other Policies: Do not make class material publicly available. This includes copies of lectures, homework, solutions, handouts, and code provided by us.

4 Credit Option: If you are taking the course for 4 credits, you will complete extra work on Machine Problems 2 and 3.

Language References and Resources

Tentative Schedule (Note that slides and topics for future lectures may change):

Date Topic Materials Assignments
8/28 Introduction



  • Lecture 1: Introduction to CS 418 [PDF]

Chapter 5: 2D Transformational Geometry
by John Hart [PDF]


Vertex Shaders
Fragment Shaders

Chapter 6: 3D Transformational Geometry
by John Hart [PDF]

Take a look at http://jsfiddle.net/2x03hdc8/

Play with the vertex coordinates to understand what the default view volume looks like....



  • Lecture 3: Introduction to Rendering [PDF]

9/4 No Lecture:
Labor Day Holiday

Geometry in WebGL


MP 1 Due Sept. 20 [LINK]

Discussion Section Presentation: [PPT]

Discussion Section Code:[Demo Code]

Discussion Section Solution: [Demo Code Solution]


Affine Transformations

  • Lecture 5:  2D Transformations for Computer Graphics [PDF]

In-class Worksheet 1 [PDF]
Solution [PDF]

Chapter 7: Modeling Transformations
by John Hart [PDF]

9/11 Basic Animation
  • Lecture 7: Intro to GLSL [PDF]​

Chapter 8: Viewing
by John Hart [PDF]


Hierarchical Modeling



Discussion: Using Chrome Dev Tools [PPT]
Discussion: Animation [PPT]

Discusssion: Demo Code [code.zip]

In-class Worksheet 2 [PDF]
Solution [PDF]



View Transformation

In-class Worksheet 3 [PDF]
Solution [PDF]

9/18 More View Transformation
  • Lecture 10: Viewing [PDF


9/20 Projection 

Discussion: Viewing and Projection [ppt]
Discussion: HelloView-Exercise.zip
Discussion: HelloView-Solution.zip

Special Bonus Worksheet [PDF]
Solution [PDF]



  • Lecture 12: Basic Shading [PDF]




  • Lecture 13: Shading in WebGL [PDF]


Transforming Normals

In-class Worksheet 4 [PDF]
Solution [PDF]


Simple Mesh Generation

  • Lecture 15: Simple Mesh Generation [PDF]

In-class Worksheet 5 [PDF]
Solution [PDF]


Terrain Generation

Simple Interaction







MP2 Part 1: Due Oct. 13 11:55pm [link

Discussion: Phong Shading [ppt]
Discussion: HelloPhongDemo.zip
Solution: [link]

In-class Worksheet 7 [PDF]
Solution [PDF]

10/6 No Lecture    
10/9 Clipping
  • Lecture 18: Clipping [PDF]
In-class Worksheet 8 [PDF]
Solution [PDF]

Chapter 13: Images
by John Hart [PDF]


  • Lecture 19: Quaternions [PDF]

Discussion: Tips for Shading the MP2 Terrain [ppt]

10/13 Quaternions
  • Lecture 19: Quaternions [PDF]

MP2 Part 2: Due Oct. 20 11:55pm [link

Rotations in Three Dimensions from
3D math primer for graphics and game development by Ian Parberry [link]

10/16 Color
  • Lecture 21: Color [PDF]
10/18 Alpha Blending in WebGL
  • Lecture 22: Blending [PDF]

Discussion: Tips for Fog and Flying in MP2 [ppt]
Read Chapter 14: Rasterization
by John Hart [PDF]

10/20 Alpha Blending in WebGL
  • Lecture 22: Blending [PDF]

In-class Worksheet 9 [PDF]
Solution [PDF]
In class Worksheet 10 [PDF]
Solution [PDF]

10/23 Rasterization
  • Lecture 23: Rasterization [PDF]

Texture Mapping

  • Texture Mapping 1 [PDF]

In-class Worksheet 11 [PDF]
Solution [PDF]


Texture Filtering

Read Chapter 15&16: Texture Mapping
by John Hart [PDF]

Mipmapping [PDF](taken from Essential mathematics for games and interactive applications : a programmer's guide by James Van Verth) 
Read Section 9.8

In class Worksheet 12 [PDF]
Solution [PDF]
10/30 No Lecture    

Texture Coordinates


  • Texture Mapping 3 [PDF]

MP3 Part 1 Due November 14 [link]

Discussion: Getting started with MP3 [ppt]

In class Worksheet 13 [PDF]
Solution [PDF]

11/3 Environment Mapping
  • Environment Mapping [PDF]


11/6 Bump Mapping
  • Bump Mapping [PDF]
4 Credit Students: Extension to MP2 [link] Due Nov. 29
11/8 Bezier Curves and Surfaces
  • Bezier Curves [PDF]

Discussion: Multiple Shaders and Toon Shading [ppt]
Discussion: HelloToon.zip
Solution: [link]

Read Chapter 4 Curves and Surfaces for CAGD: A Practical Guide 

by Gerald Farin

11/10 Bezier Curves and Surfaces
  • Bezier Surfaces [PDF]
Read Bezier Techniques by Dianne Hansford [PDF]
Worksheet 14 [PDF]
Solution [PDF]
11/13 Mesh Processing
  • Mesh Processing [PDF]
Worksheet 15 [PDF]
Solution [PDF]
11/15 Mesh Processing
  • Mesh Processing [PDF]

MP3 Part 2 Due November 30 [link] 

11/17 No Lecture    
11/20 Fall Break    
11/22 Fall Break    
11/24 Fall Break    
11/27 Spline Curves
  • Splines [PDF]
Worksheet 16 [PDF]
Solution [PDF]

4 Credit Students: Extension to MP3 [link
11/29 Spline Curves and Surfaces
  • B-Splines [PDF]
Worksheet 17 [PDF]
Solution [PDF]

Discussion: MP4 Hints [ppt]

MP4 Due December 13 [link]
12/1 Spline Curves and Surfaces
  • B-Splines [PDF]
Worksheet 18 [PDF]
Solution [PDF]...scan isn't great quality but you should be able to figure out answers
12/4 A Simple Physics Engine
  • Game Physics [PDF]
Read Chapter 3 Game Physics Engine Development
by Ian Millington [PDF]

12/6 Subdivision Surfaces
  • Subdivision Surfaces [PDF]
12/8 Subdivision Surfaces
  • Subdivision Surfaces [PDF]
Worksheet 19 [PDF]
Solution [PDF]
12/11 Procedural Methods 
  • Procedural Textures [PDF]
Building Worlds Using Math(s) by Sean Murray [video link]

No Lecture