1 Interactive Computer Graphics

In Fall 2024, CS 418 Interactive Computer Graphics is being offered in a way designed specifically to cater to our online MCS program. As such, both in-person and online students will be expected to consume course material in an asynchronous digital form. Office hours will also be held online, are optional, and will be the only synchronous component of the course.

1.1 Course operation

The course consists of the following components:

Pre-recorded lecture material

Available on the course content site, these are mostly fairly dense videos; I regularly distilled 3 hours of class into 1 hour of video by removing the Q&A and other interactive content. Please make notes of questions as you watch them and post those questions on CampusWire. I may answer them there or record videos explaining the answers and post them as supplementary content.

Pre-written lecture notes

Available on the course content site, these have roughly the same content as the videos, but often differ in level of detail. Some video content (such as coding demonstrations) have no corresponding notes.

Please make notes of questions as you read them and post those questions on CampusWire. I may answer them there or write up longer explanations and post them as supplementary content.

Per-module retakable quizzes

Lecture material is split into modules, each with a quiz. These quizzes are intended primarily as a self-assessment of learning and may be retaken as often as desired.

I understand that some students find quizzes annoying, but experience has shown me they they do help students find and fix gaps in understanding.

These quizzes are administereed on Coursera. You can activate your Illinois Coursera account as described in https://online.illinois.edu/online-courses/moocs/private and then visit https://www.coursera.org/learn/cs418-interactive-computer-graphics/home to access quizzes.

Machine problems (MPs)

There are five primary MPs, plus a sixth one required for 4-credit students but not required for 3-credit students. There are also two low-weight warm-ups intended primarily to smooth the way for subsequent MPs.

Machine problems are submitted on a custom course submission site that provides some limited automated feedback (mostly of the form did it run on our server); they are graded primarily by hand.

I expect each MP to take the average student between 10 and 20 hours to complete.

The 4cr MP typically takes a bit longer than the others, so 4cr students may wish to begin it early by viewing the raytracing videos and notes earlier than the 3cr schedule recommends.

No Final

This class has no final exam/quiz/project/assessment.

1.2 Course content

Computer graphics studies how computers can create images. Interactive computer graphics creates images quickly enough that a new image can be created in response to every user action. In principle any image-creation algorithm could be interactive, given adequate hardware, but in practice it usually refers to a specific family of workflows involving the interaction of the CPU and GPU. That family of workflows will be our primary topic in this class.

This course teaches the following in enough detail to implement them yourself:

• How 3D computer graphics works, including both rasterization and raytracing.
• How to use WebGL2, a popular GPU API, to create interactive 3D graphics.
• How to generate your own 3D geometry, render it, texture map it, move it, and move the camera around it, with all of the underlying math and algorithms.
• How to basic graphical motion simulation and particle effects.

This course teaches various other topics at a lower level of detail, including:

• Shadow maps
• Deferred shading
• Keyframe animation and tweening
• Various fractals
• Various texture mapping techniques
• Physically-based rendering techniques
• Inverse kinematics
• Rigid-body, soft-body, and fluid dynamics

1.2.1 Related topics

This course does not teach

• OpenGL, Direct3D, Metal, Vulkan
  • WebGL2 is related to them and will help you understand them too.
• Artistic content such as 3D modeling, animation, rigging, texture creation, light setups, etc.
  • ARTS 340 is related to these topics, but hasn’t been offered in some time.
  • Parkland College has a sequence of computer animation courses, including a certficate program in 3D animation software.
  • The UIUC chapter of SIGGRAPH (part of the ACM RSO) sometimes teaches Blender, a tool used for 3D modeling and animation
  • CS 445 requires students to use Blender for one of the assignments.
• Allegro, Banshee, C4, CryEngine, Godot, Intrinsic, OGRE, SDL, Serious, Source, Torque, Unity, Unreal, UX3D, Xenko, XNA, …
  • We discuss techniques used to build these tools, but not how to use them.
  • CS 415 uses one of theses.
  • The GameBuilders RSO often uses these tools.
• Computer game design
  • CS 415 teaches this, as do all GSD courses.
  • The GameBuilders RSO focuses on this.
• Computer vision
  • CS 444 covers this topic
• 2D graphics
  • We’ll mention some topics in passing, but CS 445 is more relevant
• Advanced raytracing, path tracing, importance sampling, and other movie-quality graphics content
  • CS 419 teaches this, but is offered infrequently.

1.3 Grading

My goal in this class is that you learn. As it is an elective, I hope most of you are taking it for the same reason. But I do have a duty to assign grades, so here’s how we’ll do it.

Numbers are converted to letters linearly with the A−/B+ cut-off at 90% and the C−/D+ cutoff at 70%; more precisely

const letter_grade = (percentage_earned) => {
    if (percentage_earned <= 60) return 'F'
    let letter = 'DCBA'[Math.floor(percentage_earned/10 - 6)]
    if (letter != 'A' && percentage_earned % 10 > 20/3) letter += '+'
    if (percentage_earned % 10 < 10/3) letter += '-'
    return letter
}

MP points come in two groups: core and elective. Core MP components are mostly things that every graphics students should know, with some additions that are prerequisite for many other tasks. Elective MP components go beyond the minimum, and you’ll get to pick and chose which ones you do. The number of MP points of each type you will need, together with a list of MPs, can be found on the MPs overview page

1.4 Collaboration

Collaboration includes

• Giving information to others, such as by tutoring, working together, or posting solutions online.
• Receiving information from others, such as from AI systems, websites, tutors, or other students.

My goal in this course is not to have you create working solutions (I already have working solutions, I wrote them before the course began) but rather to have you learn enough to be able to create your own working solutions. As such, you may collaborate on MPs but must obey the following limitations on your collaboration:

• Do not collaborate on quizzes; limit your sources to course material, other pre-made content, and your own work.

• Quizzes have unlimited retakes. Please still think about each question rather than just randomly guessing.

• Type all code yourself; no copy-paste or AI-typed code from others.

• Design and understand all your code.

• If you use any source, pre-existing or dynamic, that was not provided by this course in writing code, cite that source in a comment in your code.

1.5 Prerequisites

Listed prereqs in the course catalog are

CS 225 Data Structures

Needed for

• Experience with C or C++. We won’t use those languages, but GLSL which we will use is based on them.
• Comfort with the idea of pointers, binary encoding of data, and memory.
• At least three semester of programming experience.

A linear algebra class

Needed for

• Familiarity with matrices and vectors. We’ll use vectors to represent 3D points and matrices to transform them, and also use vectors to represent lists of properties of a point.

We will discuss using large sparse matrices to represent systems of equations and variants of conjugate gradient to solve them. That is rarely usable at interactive speeds, so we won’t talk about then in much detail in this class.

MATH 241 Calculus III

Needed for

• Comfort with Euclidean space and the 3D vectors
• experience thinking in 3D that multivariable calculus provides

There is some calculus in graphics, but mostly as theoretic background for algorithms that do not themselves use the calculus. We’ll not need any integral-solving or related by-hand calculus computations in this course.

Analysis of past student performance leads us to identify the following as optional but recommended prerequisites:

CS 340 Introduction to Computer Systems or CS 341 Systems Programming

This is a programming-heavy course, and these courses provide valuable extra training an experience with programming.

We also deal with how the CPU and GPU interact, a topic made much easier if you have had prior computer systems training.

CS 357 Numerical Methods 1

This course involves considerable mathematical reasoning; taking CS 357 before it increases increase your experience with mathematically-based programming and is recommended.

1.6 Course Staff

Instructor

Name	Luther Tychonievich
Office	2340 Siebel
Phone	+1 217 333 8609
Email	luthert@... Include 418 or graphics in the subject line

Assistants

Sean Koo, Ben Guan, Arthur Wang

This is a smaller staff of assistants than I’ve had in the past. As such, there may be fewer help hours than you’d otherwise hope; if you generally use instructor or assistant help in most programming assignments, this course may not be ideal for you this semester.

CampusWire

By invitation only. I get daily roster change update digests and enter them into CampusWire when I do.

Office Hours

Schedule
Location	Zoom meeting 853 6085 8537 passcode 418

1.7 Textbook

Readings are hosted for free on https://cs418.cs.illinois.edu. There is no other textbook required.

2 Content Outline

This page provides a list of videos and notes with the intent that following them in the order presented here will result in a cohesive approach to the subject of interactive computer graphics.

In general, the intent is that for a given topic the video and notes will provide equivalent explanations of the material; however, that intent is not always completely achieved. The notes often have more formal definitions and more mentions of ancillary topics than the videos. The videos often have additional commentary and exposition than the nodes. When the video is using an interactive example or discussing or developing code samples, the notes often just have the example or code without commentary.

How things appear videos are included after each section but in generally have no direct correlation with the section itself, and are generally not tested by any of the course’s assessments. I include them because computer graphics is the process of trying to simulate how the world looks, so I assume you’ll be interested in understanding how the world looks. Feel free to message me with additional appearances you’d like me to describe, either general phenomena or specific images; there are more interesting visual phenomena than I have any hope of fully enumerating.

Videos are hosted on ClassTranscribe, a tool that allows variable-speed video playback, transcription search, and collaborative editing of subtitles and transcripts. Backup copies are available through Coursera. With a few exceptions, notes are written by Luther Tychonievich and hosted directly on this website.

A recommended weekly schedule follows. MPs are listed in the week where the relevant content has been presented; it is expected most students will start them then and complete them a week or two later; that delay is why there are not MPs listed for the last two weeks. Electives vary significantly in complexity and time required, as noted by their differing point values. You only need to do some electives, and if 3cr only some core. See the MPs page for more.

Experience has taught me that getting behind on lecture material or MPs is usually a sign that additional instructor/student interaction is needed. If you are more than a week behind the schedule given here, please contact me.

2.1 Graphics Preliminaries

How things appear: The Student, the Fish, and Agassiz by The Student and Mirages and total internal reflection

2.2 Rasterization

2.2.1 DDA and related algorithms

How things appear: Refraction

2.2.2 Emulating 3D with depth

How things appear: Fresnel effect

2.2.3 Related concepts

How things appear: Diffraction rainbows

2.3 Using the GPU with WebGL2

2.3.1 Enough JavaScript to get by

How things appear: Dispersion rainbow

2.3.2 Starting with WebGL2 coding

How things appear: Exposure noise

2.3.3 Mathematics of interactive 3D graphics

How things appear: Lens bloom

2.3.4 Multi-part coding example

How things appear: Subsurface scattering

2.3.5 Lighting on the GPU

How things appear: Rayleigh scattering

2.4 Creating and animating geometry

2.4.1 Fractals

How things appear: Shiny hair

2.4.2 Animation

How things appear: Brushed metal

2.4.3 Multi-part coding example

How things appear: Mirrors and one-way mirrors

2.4.4 Optional deep-dive content

2.5 Texture mapping

How things appear: Retroreflectors

2.6 Raytracing

How things appear: Scale and depth of field and Peach fuzz

2.7 Simulating dynamics

How things appear: Optical illusions from relative color perception

2.8 Faster and prettier rasterization

How things appear: Sunbeams

2.8.1 Optional deep-dive content

3 Course Policies

3.1 Absences

Lecture attendance is not required and not part of your grade; hence absences from lecture are permitted at any time for any reason.

Any scheduled as an in-person assessments must be taken as scheduled; exceptions must be arranged in advance and in most cases will be rescheduled at a time before the usual assessment time. As of 2022-08-19 there is only one scheduled in-person assessment (the final quiz), and we reserve the right to change it to a less-restrictive format such as the CBTF or an online quizzing tool, offered in a time window that includes the currently scheduled time.

3.2 Academic Integrity

The University of Illinois at Urbana-Champaign Student Code should also be considered as a part of this syllabus. Students should pay particular attention to Article 1, Part 4: Academic Integrity. Read the Code at the following URL: http://studentcode.illinois.edu/.

Academic dishonesty may result in a failing grade. Every student is expected to review and abide by the Academic Integrity Policy: https://studentcode.illinois.edu/article1/part4/1-401/. Ignorance is not an excuse for any academic dishonesty. It is your responsibility to read this policy to avoid any misunderstanding. Do not hesitate to ask the instructor(s) if you are ever in doubt about what constitutes plagiarism, cheating, or any other breach of academic integrity.

As a course in the department of Computer Science, every student in this course is expected to review and abide by the Honor Code and Academic Integrity policy: https://cs.illinois.edu/academics/honor-code. To assist in clarifying that for this course, we define three terms and a set of policies for each type of graded assessment in this course.

3.2.1 Definitions

Static content existed in its entirety with no input from students and no reference to this course nor to the assignment in question. Most textbooks, websites, and recordings are static content.

Interactive content is created, in part or in whole, in response to the course, assignment, or students. Live help from tutors or peers is always interactive, as are Q&A and discussion forums with student contributors and any content that refers to an assignment directly.

Overfitted content addresses the answer (what to select on a quiz question, what to type in a program, etc.) rather than the knowledge the assignment was designed to build or measure. If the content fails to teach you both (a) why an answer works and (b) how to complete different assessments based on the same principle, then the content is overfitted.

3.2.2 Assignment-specific Policies

Online Quizzes

Online quizzes will be administered throughout the semester.

Information Source	Policy
Your memory from before you viewed the quiz, regardless of source	OK
A calculator or computer program you wrote	OK
Course-provided recordings or readings	OK
Other static, not-overfitted content	Cite*
Interactive help from course staff	Cite*
Other interactive or overfitted help.	Prohibited

A quiz may explicitly allow additional information sources in its lead-in text on the quizzing site.

* To cite sources, give a link (or other descriptor for non-web content) in the comments box for the question. If a quiz question does not have a comments box, Cite sources may be used without citation on that question. Comments boxes may also be used for non-citation comments, for example to explain the reasoning behind your answer.

Programming assignments

Graded homework programming assignments will be due throughout the semester.

Information Source	Policy
Your memory from before you viewed the quiz, regardless of source	OK
A calculator or computer program you wrote	OK
Course-provided recordings or readings	OK
Interactive help from course staff	OK
Language and API documentation and help (static or dynamic)	OK
Non-overfitted static help	Cite**
Non-overfitted dynamic help that does not include code (neither written nor described)	Cite**
Interactive help that includes code	Prohibited
Overfitted sources	Prohibited

A programming assignment may explicitly allow more collaboration in its lead-in text on the homework description site.

** To cite sources, give a link (or other descriptor for non-web content) in comments in your code.

3.3 Community of Care

As members of the Illinois community, we each have a responsibility to express care and concern for one another. If you come across a classmate whose behavior concerns you, whether in regards to their well-being or yours, we encourage you to refer this behavior to the Student Assistance Center (217-333-0050 or http://odos.illinois.edu/community-of-care/referral/). Based on your report, the staff in the Student Assistance Center reaches out to students to make sure they have the support they need to be healthy and safe.

Further, as a Community of Care, we want to support you in your overall wellness. We know that students sometimes face challenges that can impact academic performance (examples include mental health concerns, food insecurity, homelessness, personal emergencies). Should you find that you are managing such a challenge and that it is interfering with your coursework, you are encouraged to contact the Student Assistance Center (SAC) in the Office of the Dean of Students for support and referrals to campus and/or community resources.

3.4 CS Code of Conduct

As a member of the Illinois Computer Science community, you are expected to know and abide by the Illinois Computer Science Values & Code of Conduct (URL: https://cs.illinois.edu/about/values). If you come across a classmate whose behavior concerns you in regards to this code of conduct, we encourage you to refer this behavior to the CS CARES Committee: https://cs.illinois.edu/about/cs-cares.

3.5 Disruptive Beavior

Behavior that persistently or grossly interferes with classroom activities is considered disruptive behavior and may be subject to disciplinary action. Such behavior inhibits other students’ ability to learn and an instructor’s ability to teach. A student responsible for disruptive behavior may be required to leave class pending discussion and resolution of the problem and may be reported to the Office for Student Conflict Resolution (https://conflictresolution.illinois.edu; conflictresolution@illinois.edu; 333-3680) for disciplinary action.

3.6 Emergency Response Recommendations

Emergency response recommendations and campus building floor plans can be found at the following website: https://police.illinois.edu/em/run-hide-fight/. I encourage you to review this website within the first 10 days of class.

3.7 Mental Health

Significant stress, mood changes, excessive worry, substance/alcohol misuse or interferences in eating or sleep can have an impact on academic performance, social development, and emotional wellbeing. The University of Illinois offers a variety of confidential services including individual and group counseling, crisis intervention, psychiatric services, and specialized screenings which are covered through the Student Health Fee. If you or someone you know experiences any of the above mental health concerns, it is strongly encouraged to contact or visit any of the University’s resources provided below. Getting help is a smart and courageous thing to do for yourself and for those who care about you.

• Counseling Center (217) 333-3704
• McKinley Health Center (217) 333-2700
• National Suicide Prevention Lifeline (800) 273-8255
• Rosecrance Crisis Line (217) 359-4141 (available 24/7, 365 days a year)

If you are in immediate danger, call 911.

This statement is approved by the University of Illinois Counseling Center

3.8 Religious Observances

Illinois law requires the University to reasonably accommodate its students’ religious beliefs, observances, and practices in regard to admissions, class attendance, and the scheduling of examinations and work requirements. Students should complete the Request for Accommodation for Religious Observances form should any instructors require an absence letter in order to manage the absence. In order to best facilitate planning and communication between students and faculty, students should make requests for absence letters as early as possible in the semester in which the request applies.

Part of my religion discourages me from participating in work-related activities on Sundays. As such, I will generally not respond to course-related communications on those days.

3.9 Sexual Misconduct Reporting Obligation

The University of Illinois is committed to combating sexual misconduct. Faculty and staff members are required to report any instances of sexual misconduct to the University’s Title IX and Disability Office. In turn, an individual with the Title IX and Disability Office will provide information about rights and options, including accommodations, support services, the campus disciplinary process, and law enforcement options.

A list of the designated University employees who, as counselors, confidential advisors, and medical professionals, do not have this reporting responsibility and can maintain confidentiality, can be found here: https://wecare.illinois.edu/resources/students/#confidential.

Other information about resources and reporting is available here: https://wecare.illinois.edu.

3.10 Students with Disabilities

To obtain disability-related academic adjustments and/or auxiliary aids, students with disabilities must contact the course instructor as soon as possible and provide the instructor with a Letter of Academic Accommodations from Disability Resources and Educational Services (DRES). To ensure that disability-related concerns are properly addressed from the beginning, students with disabilities who require assistance to participate in this class should apply for services with DRES and see the instructor as soon as possible. If you need accommodations for any sort of disability, please speak to me after class, or make an appointment to see me or see me during my office hours. DRES provides students with academic accommodations, access, and support services. To contact DRES, you may visit 1207 S. Oak St., Champaign, call 217-333-1970, e-mail disability@illinois.edu or visit the DRES website at http://www.disability.illinois.edu/. Here is the direct link to apply for services at DRES, https://www.disability.illinois.edu/applying-services.

Of particular note: by university policy, services recommended by DRES are not retroactive, applying only from the date of their being granted forward. If you believe you may benefit from such services, please contact DRES before the services are needed.

This course is almost entirely about how things look. If you have an uncorrected visual impairment, a light-induced disability, or any form of optical diversity or abnormality (for example: complete or partial blindness, uncorrected myopia or hyperopia, color blindness, monocular vision, flashing-light-induced seizures, scotophobia, etc.), please visit one-on-one with the course instructor to discuss how these may interact with the course.

3.11 Computer Access

I assume that most students will have their own computer, but sometimes they crash or otherwise fail for a time.

The Engineering Workstations have several of the most populat programming languages used in this class pre-installed.

Grainger runs a loaner laptop program.

Loaner laptops may be borrowed for up to 10 days from the Scholarly Commons at the 3rd floor of the U of I Main Library (Room 0306).

Files you’ve submitted you may download from the submissions page. Files you’ve not submitted I cannot help you recover.

3.12 Code on public repositories

Per the student code §1-401 a.1.

It is the responsibility of each student to refrain from infractions of academic integrity, …

Using code you find online instead of writing your own code is such an infraction.

… from conduct that may lead to suspicion of such infractions, …

Consulting a source without citing it in your code is likely to lead to such suspicion.

… and from conduct that aids others in such infractions.

Sharing code for assignments in this class in a way that is readily discoverable by other current or future students in this class qualifies as such aid.

If you are proud of the code you created for this class and want to share it with others, please do so with specific people rather than the general public in a way that cannot be found via search engines; for example in direct messages, a private repository, a password-protected website, or an unlisted website with noindex HTTP response headers or meta tags.