CS 418: Interactive Computer Graphics

Spring 2017

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: 2103 Siebel Center
Office Hour: Th. 2:30-3:30pm or by appointment

Lecture Videos: Are available at this link [VIDEO LINK]

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/fall2017/cs418

Discussion Website: https://courses.engr.illinois.edu/cs418/discussion_content_Spring2017/discussion.html

TA Office Hours:

Apollo Ellis - Tuesday 2:00-3:00pm SC 3238A

Ryan Freedman - Wednesday 12:00-1:00pm SC 0207

Russell Michal - Tuesday 12:15-1:15pm SC 0207

Mary Pietrowicz - Friday 2:00-3:00pm SC 0207

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. If possible we will use the Computer Based Testing Facility. The APPROXIMATE dates of the exams will be the weeks of Feb. 20, March 14, and April 24.

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 through 4.

Language References and Resources

JavaScript/HTML/CSS: http://www.w3schools.com/
Suggested Editors: Brackets, LightTable
Chrome DevTools Overview: https://developers.google.com/web/tools/chrome-devtools/
Matrix Library for WebGL: http://glmatrix.net/
WebGL Tutorial: http://webglfundamentals.org/
WebGL API: https://www.khronos.org/webgl/
OpenGL ES GLSL Version 1.0 (WebGL GLSL) Specification: [PDF]

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

Date	Topic	Materials	Assignments
1/17	Introduction Rasterization WebGL	Lecture 1: Introduction [PDF] Lecture 2: Introduction to WebGL [PDF]	Read Chapter 5: 2D Transformational Geometry by John Hart [PDF]
1/19	WebGL Vertex Shaders Fragment Shaders	Lecture 3: Walking through a WebGL program [PDF] Example Code: HelloTriangle.html	Read Chapter 6: 3D Transformational Geometry by John Hart [PDF]
1/24	2D Affine Transformations Vectors 3D Affine Transformations	Lecture 4: 2D Transformations for Computer Graphics [PDF] Lecture 5: More Mathematics for Computer Graphics [PDF]
1/26	Geometry in WebGL	Lecture 6: Geometric Primitives in WebGL [PDF] Example Code: HelloColor.html Example Code: HelloColor.js	In-class Worksheet 1 [PDF] Solution [PDF] MP1 Due Feb. 10 [link]
1/31	Basic Animation GLSL	Lecture 7: Basic Animation in WebGL [PDF] Example Code: HelloAnimation.html Example Code: HelloAnimation.js Utility code: webgl-utils.js glMatrix library: gl-matrix-min.js Lecture 8: Introduction to GLSL [PDF]	In-class Worksheet 2 [PDF] Solution [PDF] Read Chapter 7: Modeling Transformations by John Hart [PDF]
2/2	Modeling and Viewing	Lecture 9: Hierarchical Modeling [PDF] Example Code: HelloHierarchy.html Example Code: HelloHierarchy.js Lecture 10: Viewing [PDF] Example Code: HelloSolarSystem.html Example Code HelloSolarSystem.js	Read Chapter 8: Viewing by John Hart [PDF] In-class Worksheet 3 [PDF] Solution [PDF]
2/7	Orthographic Projection	Lecture 11: Projection [PDF] Example Code: HelloProjection.html
2/9	Perspective Projection	Lecture 12: Projection [PDF]
2/14	Basic Shading	Lecture 13: Basic Shading [PDF]	In-class Worksheet 4 [PDF] Solution [PDF] Special Bonus Worksheet [PDF] Solution [PDF]
2/16	Transforming Normals Simple Mesh Generation	Lecture 14: Shading in WebGL [PDF] Lecture 15: Transforming Normals [PDF] Lecture 16: Simple Mesh Generation [PDF] Example Code: SolarSystem3.html Example Code: SolarSystem3.js Example Code: simpleModeling.js	In-class Worksheet 5 [PDF] Solution [PDF]
2/21	No Class (EXAM WEEK)
2/23	Terrain Generation	Lecture 17: Terrain Generation[PDF] Example Code: HelloTerrain.html Example Code: HelloTerrain.js Example Code: terrainModeling.js	In-class Worksheet 6 [PDF] Solution [PDF] In-class Worksheet 7 [PDF] Solution [PDF]
2/28	Simple Interaction Quaternions	Lecture 18: Simple Interaction [PDF] Example Code: SolarSystem2.html Example Code: SolarSystem2.js Lecture 19: Quaternions [PDF]	MP 2 Part 1 Due March 6 [link]
3/2	Clipping	Lecture 20: Clipping [PDF]	In-class Worksheet 8 [PDF] Solution [PDF] Read Chapter 13: Images by John Hart [PDF]
3/7	Color	Lecture 21: Color [PDF]	In-class Worksheet 9 [PDF] Solution [PDF]
3/9	Alpha Blending in WebGL	Lecture 22: Blending [PDF]	MP 2 Part 2 Due March 17 [link] In class Worksheet 10 [PDF] Solution [PDF] Read Chapter 14: Rasterization by John Hart [PDF]
3/14	Rasterization	Lecture 23: Rasterization [PDF]	In class Worksheet 11 [PDF] [PDF]
3/16	No Class (EXAM WEEK)
3/21	Spring Break
3/23	Spring Break
3/28	Texture Mapping	Texture Mapping [PDF] Example Code: HelloTexture.html Example Code: HelloTexture.js Texture Image: UIUC_I_mark.png	Read Chapter 15&16: Texture Mapping by John Hart [PDF] In class Worksheet 12 [PDF] Solution [PDF]
3/30	Texture Filtering	Texture Filtering [PDF]	Mipmapping [PDF] (taken from Essential mathematics for games and interactive applications : a programmer's guide by James Van Verth) Read Section 9.8 MP 3 Part 1: Due April 10 at 11:59 [link]
4/4	Environment Mapping	Environment Mapping [PDF]	In class Worksheet 13 [PDF] Solution [PDF] 4 Credit Students MP 2 Extension: Due April 14 at 11:55 [link]
4/6	Bump Mapping	Bump Mapping [PDF]
4/11	Bezier Curves and Surfaces	Bezier Curves [PDF]	Read Chapter 4 Curves and Surfaces for CAGD: A Practical Guide by Gerald Farin [PDF] MP3 Part 2: Due April 18 at 11:55 [link]
4/13	Bezier Curves and Surfaces	Bezier Surfaces [PDF]	Read Bezier Techniques by Dianne Hansford [PDF]
4/18	Mesh Processing	Mesh Processing [PDF]	Worksheet 15 [PDF] Solution [PDF] Worksheet 14 [PDF] Soultion [PDF]
4/20	Subdivision Surfaces	Subdivision Surfaces [PDF]	MP4: Due May 3 at 11:55pm [link] 4 Credit Students MP4 Addition: Due May at 11:55pm [link]
4/25	A Simple Physics Engine	Game Physics [PDF]	Read Chapter 3 Game Physics Engine Development by Ian Millington [PDF] Worksheet 16 [PDF] Solution [PDF]
4/27	No Class (EXAM WEEK)
5/2	No Class (Good luck on your exams)