CS 418: Interactive Computer Graphics

Spring  2018

Tu/Th     9:30  10:45 am,
Room 1404 Siebel Center

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

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: https://piazza.com/illinois/spring2018/cs418

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 Facility

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.

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
1/16 Introduction to Rendering [PDF]




Walking through a WebGL Program [PDF]

SIGGRAPH 2017 Papers Trailer [link]
SIGGRAPH 2017 Animation Trailer [link]
WebGL Demo 1 [link]
WebGL Demo 2 [link]


HelloColor.html [link]
HelloColor.js [link]



1/22 Lab 1: MP1 and Affine Transformations Presentation Slides [ppt]
Lab Code [Lab1.zip]
MP1: Due Feb. 5 [link]

Affine Transformations [PDF]

HelloProjection.html [link]
HelloProjection.js [link]
gl-matrix-min.js [link]
webgl-utils.js [link]

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


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

Worksheet 1: 2D Geometry [PDF]
Solution [PDF]


Basic Animation [PDF]
Hierarchical Modeilng [PDF]


Chapter 7: Modeling Transformations
by John Hart [PDF]

1/29 Lab 2: MP1 and Vertex Buffers Presentation Slides [ppt]
Lab Code [Lab2.zip]

Basic Mesh Data Structures [PDF]



Worksheet 2:
3D Geometry and Mesh Data Structures [PDF]
Solution [PDF]


Polyon Mesh Processing by Botsch et al.
Chapter 2: Mesh Data Structure [PDF]

2/1 Viewing Transformation [PDF]  

Chapter 8: Viewing
by John Hart [PDF]

2/5 Lab 3: Procedural Generation of a Mesh Presentation Slides [ppt]
Lab Code [Lab3.zip]

Orthographic Projection [PDF]


Chapter 9: Projection
by John Hart [PDF]


Perspective Projection [PDF]


Worksheet 3:
Viewing and Hierarchical Modeling [PDF]

Solution [PDF]

2/12 Lab 4: Practice Exam 1    

Perspective Projection [PDF]


MP2 Part 1: Due Feb. 28  March 6 [link]


Lecture Canceled (Exam Week)


Worksheet 4:
More on Affine Transformations [PDF]

Solution [PDF]


Lab 5: Terrain Generation 

Presentation Slides [PPT]
Lab Code [Lab5.zip]

2/20 Basic Shading [PPT]    

Transforming Normals [PPT]

Terrain Generation [PPT]

2/26 Lab 6: Phong Shading

Presentation Slides [PPT]
Lab Code [Lab6.zip]

Phong Reflection Model - Wikipedia [link]  

Quaternions [PPT]


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

Worksheet 5:
Shading [PDF]
Solution [PDF]
3/1 Interaction [PPT]      

Texture Mapping [PPT]

Lab 7: Fog and Flying [PPT]

HelloTexture.html [link]
HelloTexture.js [link]
UIUC_I_mark.png [link]

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

MP2 Part 2: Due March 16 [link]


Color [PPT]


Information Visualization (Second Edition) 
Perception for Design
by Colin Ware
Chapter 4: Color [PDF]

3/13 Texture Filtering [PPT]  

Worksheet 6:
Color [PDF]
Solution [PDF]


No Class 


MP 2 4-Credit Students Only, Due April 6 [link


Spring Break



3/22 Spring Break 

3/26 Lab 8: Loading a Mesh from a File
Presentation Slides [PPT]
Lab Code [Lab8.zip]

3/27 Texture Filtering [PPT]  

Worksheet 7:
Texture Mapping [PDF]
Solution [PDF]

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


Environment Mapping [PPT]


Worksheet 8:
Mipmapping [PDF]
Solution [PDF]

MP 3 Part A Due April 9 [link]

4/2 Lab 9: Making a Cube Map in WebGL Presentation Slides [PPT]
Lab Code [Lab9.zip]
4/3 Normal Mapping [PPT]  

Worksheet 9: 
Environment Mapping [PDF]
Solution [PDF]

4/5 Compositing [PPT]   Worksheet 10:
Normal Mapping [PDF]
Solution [PDF]
4/9 Lab 10: MP 3 Help!    
4/10 Rasterization [PPT] Multiple Shader Example

MP 3 Part B Due April 16 [link]

MP 3 4-Credit Students Only, Due April 27 [link]

Read Chapter 14: Rasterization
by John Hart [PDF]

Worksheet 11:
Compositing [PDF]
Solution [PDF]


Bezier Curves [PDF]


Worksheet 12:
Rasterization [PDF]
Solution [PDF]

Read Chapter 4 Curves and Surfaces for CAGD: A Practical Guide 
by Gerald Farin [PDF]

Read Bezier Techniques by Dianne Hansford [PDF]

4/16 Lab 10: MP 3 Help!    

Bezier Surfaces [PDF]


MP 4: Due May 2 [link]

Worksheet 13:
Bezier Curves [PDF]
Solution [PDF]

A Simple Physics Engine [PPT]
  Read Chapter 3 Game Physics Engine Development
by Ian Millington [PDF]

Worksheet 14:
Bezier Patches [PDF]
Solution [PDF]

4/23 Lab 11: Practice Exam    
4/24 Subdivision Surfaces[PDF]  

OpenSubdiv [link]
Pixar Animation Studios Open Subdivision Technology Review [video]
Meet the Experts: Pixar Animation Studios, The OpenSubdiv Project [video]

4/26 Procedural Texture Generation [PDF]


Worksheet 15:
Subdivision Surfaces &

Simulating Simple Physics [PDF]
Solution [PDF]

Mesh Data Structures [PDF]

Building Worlds Using Math(s) by Sean Murray [video link]

4/30 Lab 12: MP 4 Help!    

Lecture Canceled
(Exam Week)