CS 418: Interactive Computer Graphics
Tu/Th 9:30 – 10:45 am,
Room 1404 SiebelCenter
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:ThistermwewillbeusingPiazzaforclassdiscussion. Ratherthanemailingquestionstotheteachingstaff,weencourageyoutopostyourquestionsonPiazza.Findourclasspageat: 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%|
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.
- Exam 1 Feb. 15 - Feb. 17
- Exam 2 March 13 - March 15
- Exam 3 April 29 - May 1
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.
LateHomeworkorProjects: Machine problems submittedaftertheduedate lose 10% per day. Inexceptionalcircumstanceswhereextensionmaybereasonable(illness,familyemergencyetc.)arrangementmustbemadewiththeinstructor.
Collaboration:Youshouldcollaborate on the MPs. You should not copy code verbatim from each other or the web.
Commenting Code:All files, classes, methods and properties should be documented with JSDoc comments with the appropriate tags and types.
OtherPolicies:Donotmakeclassmaterial publicly available.Thisincludescopiesoflectures,homework,solutions,handouts,andcodeprovidedbyus.
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):
|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]
|1/22||Lab 1: MP1 and Affine Transformations||Presentation Slides [ppt]|
Lab Code [Lab1.zip]
|MP1: Due Feb. 5 [link]|
Affine Transformations [PDF]
Basic Animation [PDF]
|1/29||Lab 2: MP1 and Vertex Buffers||Presentation Slides [ppt]|
Lab Code [Lab2.zip]
Basic Mesh Data Structures [PDF]
Polyon Mesh Processing by Botsch et al.
|2/1||Viewing Transformation [PDF]|
|2/5||Lab 3: Procedural Generation of a Mesh||Presentation Slides [ppt]|
Lab Code [Lab3.zip]
Orthographic Projection [PDF]
Perspective Projection [PDF]
|2/12||Lab 4: Practice Exam 1|
Perspective Projection [PDF]
MP2 Part 1: Due March 6 [link]
Lecture Canceled (Exam Week)
Lab 5: Terrain Generation
Presentation Slides [PPT]
|2/20||Basic Shading [PPT]|
Transforming Normals [PPT]
Terrain Generation [PPT]
|2/26||Lab 6: Phong Shading|
Presentation Slides [PPT]
|Phong Reflection Model - Wikipedia [link]|
|Rotations in Three Dimensions from|
3D math primer for graphics and game development
by Ian Parberry [link]
Texture Mapping [PPT]
Read Chapter 15&16: Texture Mapping
MP2 Part 2: Due March 16 [link]
Information Visualization (Second Edition)
|3/13||Texture Filtering [PPT]|
MP 2 4-Credit Students Only, Due April 6 [link]
|4/10||Bezier Curves and Surfaces|
Bezier Curves and Surfaces
|4/24||A Simple Physics Engine|
|4/26||Procedural Texture Generation|
Physically Based Rendering
This article will introduce you to the basics of using WebGL. It's assumed that you already have an understanding of the mathematics involved in 3D graphics, and this article doesn't pretend to try to teach you 3D graphics concepts itself. We have a beginner-oriented guide, complete with coding assignments to complete, in our Learning Area: Learn WebGL for 2D and 3D graphics.
The code examples in this tutorial can also be found in the webgl-examples GitHub repository.
Preparing to render in 3D
The first thing you need in order to use WebGL for rendering is a canvas. The HTML fragment below declares a canvas that our sample will draw into.<body> <canvas id="glCanvas" width="640" height="480"></canvas> </body>
Preparing the WebGL context
The first thing we do here is obtain a reference to the canvas, assigning it to a variable named .
Once we have the canvas, we try to get a WebGLRenderingContext for it by calling getContext and passing it the string . If the browser does not support webgl will return in which case we will display a message to the user and exit.
If the context is successfully initialized, the variable is our reference to it. In this case, we set the clear color to black, and clear the context to that color (redrawing the canvas with the background color).
At this point, you have enough code that the WebGL context should successfully initialize, and you should wind up with a big black, empty box, ready and waiting to receive content.
View the complete code | Open this demo on a new page
- An introduction to WebGL: Written by Luz Caballero, published at dev.opera.com. This article addresses that what WebGL is, explains how WebGL works (including the rendering pipeline concept), and introduces some WebGL libraries.
- WebGL Fundamentals
- An intro to modern OpenGL: A series of nice articles about OpenGL written by Joe Groff, providing a clear introduction to OpenGL from its history to the important graphics pipeline concept, and also includes some examples to demonstrate how OpenGL works. If you have no idea what OpenGL is, this is a good place to start.
Document Tags and Contributors
Contributors to this page:stephaniehobson, gmanpersona, etisdew, Sheppy, base-p, infertux, nmve, trusktr, fscholz, chrisdavidmills, skbhardwaj, senders, Will.Fan, kevdonk, rvighne, foxbrush, ScottMichaud, Jeremie, marcusstenbeck, ChaitanyaGSNR, AllenZ, ThePrisoner, yyss, Havvy, arnaudbrousseau, krabsatt, greggman, soswow, ericbock, Bandock, Brettz9
Last updated by:stephaniehobson,