CPSC 314 Computer Graphics

This course provides an introduction to the exciting field of computer graphics. It is the first in our computer graphics sequence. Please see the official UBC course description, for prerequisites and schedules.

We will focus on the modern programmable graphics pipeline, using the OpenGL Shading Language (GLSL), with vertex and fragment shaders. We will use JavaScript and the WebGL API (which is closely related to the OpenGL API, and uses the same shading language). We will use a required textbook throughout the course (for theory), and some examples presented in class will use Python.

IMPORTANT NOTE for 2023 WT2  (Spring 2024) OFFERING:
The official course page is now on Canvas. 
The information below is not updated for this term.

Course Organization

Instructor: Dinesh K. Pai, Computer Science, UBC.  Office Hour: TBD.

TAs: To contact the TAs, please use the Piazza discussion board or visit one of the scheduled labs.

Lectures: MWF 10-10:50am.  Classes will be in person.

Labs: There are several scheduled labs. Attendance is not mandatory but highly recommended. TAs will be available in the labs to answer questions about the programming assignments, and to help with graphics concepts. Drop-ins are welcome in any of the labs.

Communication: We will use Piazza for all public communication and discussions. The link is also accessible from Canvas.

Grades: These will be returned using Canvas. If you have any issues with an assigned grade, please use a private posting to the Instructors on Piazza to request a review (do not email an instructor directly; this will not get faster review).

Textbook: Foundations of 3D Computer Graphics by Steven J. Gortler, MIT Press, 2012.
This is a required text and we will assign reading and other work from it. The good news is that it is very good, compact, and relatively inexpensive. Even better news: it’s available online from UBC library, free to UBC students. No limits on access, everyone in the class can access the book at the same time. Caveat: the examples in the book are in OpenGL, not WebGL. We will use the book mainly for further reading to understand the theory.

Lecture Notes: Available on Canvas.

Course Work

Programming Assignments (40%): There will be 4 programming assignments, requiring the use of GLSL, WebGL, Three.js, and JavaScript. Assignments must be done individually. The focus will be on implementing graphics concepts learned in class using GLSL (GL Shading Language), the WebGL API, and the Three.js library. You will be expected to pick up JavaScript on your own (there are several excellent sources available, due to the popularity of this language).

We will use “face-to-face grading,” i.e., you will be required to demonstrate that you understand why your program works. You must get a passing grade in assignments to pass the course.

Written Exams (60%): There will be two in-class quizzes (10% each), one in-class midterm exam (15%) and one final exam (25%).  You must get a passing grade in the final exam to pass the course.

Schedule: See Syllabus. Final TBD (see official UBC schedule).

Handback: Exams will be returned electronically through Canvas.

The marks distribution is summarized in this table:

marks % work
40 programming assignments (4)
20

15

 quizzes (2)

midterm exam
25 final exam

Policies

We take cheating very seriously. Briefly: don’t do it. Please read the CS department policy. For further clarification, please read this document and the course specific guidelines prepared by Prof. Munzner.

Important considerations for in-person teaching during the COVID-19 pandemic.
This information may be updated from time to time, as we receive new guidelines from the University. In case of ambiguity, follow the official University and Provincial Guidelines.

Covid Safety in the Classroom and Labs

Masks: Masks are required for all indoor public spaces on campus, including classrooms and labs, as per the BC Public Health Officer orders and UBC policy. For our in-person meetings in this class, it is important that all of us feel as comfortable as possible engaging in class activities while sharing an indoor space. For the purposes of this order, the term “masks” refers to medical and non-medical masks that cover our noses and mouths. Masks are a primary tool to make it harder for Covid-19 to find a new host. You will need to wear a medical or non-medical mask for the duration of our class meetings, for your own protection, and the safety and comfort of everyone else in the class. You may be asked to remove your mask briefly for an ID check for an exam, but otherwise, your mask should cover your nose and mouth. Please do not eat in class. If you need to drink water/coffee/tea/etc, please keep your mask on between sips.
Students who need to request an exemption to the indoor mask mandate must do so based on one of the grounds for exemption detailed in the PHO Order on Face Coverings (COVID-19). Such requests must be made through the Center for Accessibility (info.accessibility@ubc.ca).
Mask wearing protects you as well as others in your environment. Let’s do everything we can as a community to stop the spread of this virus.

Vaccination: If you have not yet had a chance to get vaccinated against Covid-19, vaccines are available to you, free, and on campus https://planning.ubc.ca/news/how-get-covid-19-vaccine-clinic-ubc. The higher the rate of vaccination in our community overall, the lower the chance of spreading this virus. You are an important part of the UBC community. Please arrange to get vaccinated if you have not already done so.

Seating in class: To reduce the risk of COVID transmission, do not use the first row from the front unless other available seating is occupied. Please sit in a consistent area of the classroom each day. This will minimize your contacts and will help me to recognize you.

Your personal health

If you’re sick, it’s important that you stay home – no matter what you think you may be sick with (e.g., cold, flu, other).
● A daily self-health assessment is required before attending campus. Every day, before coming to class, complete the self-assessment for Covid symptoms using this tool: https://bc.thrive.health/covid19/en
● Do not come to class if you have Covid symptoms, have recently tested positive for Covid, or are required to quarantine. You can check this website to find out if you should self-isolate or self-monitor: http://www.bccdc.ca/health-info/diseases-conditions/covid-19/self-isolation#Who.
● Your precautions will help reduce risk and keep everyone safer. In this class, the marking scheme is intended to provide flexibility so that you can prioritize your health and still be able to succeed. Two quizzes will be held online but synchronously, on Zoom; ID cards will be checked.

If you do miss class because of illness:
● Make a connection early in the term to another student or a group of students in the class. You can help each other by sharing notes. If you don’t yet know anyone in the class, post on the discussion forum to connect with other students.
● Consult the class resources on Canvas. We will post all the slides for each class day.
● Use the online Piazza discussion forum for help.
● Come to the lab hours or virtual office hours.

If you are sick on a midterm exam day, please email the instructor as soon as you are confident you should not come to the scheduled exam. We would strongly prefer that you contact us to make an alternate arrangement than for you to come to the exam while you are ill. If you do show up for an exam and you are clearly ill, you will not be able to write the exam and we will make alternate arrangements with you. It is much better for you to email ahead of time and not attend. Remember to include your full name and student number in your message.

If you are sick on a final exam day, do not attend the exam. You must follow up with your home faculty’s advising office to apply for deferred standing:
https://students.ubc.ca/enrolment/academic-learning-resources/academic-advising. Students who are granted deferred standing write the final exam/assignment at a later date.

If you’re a Science student, you must apply for deferred standing (an academic concession) through Science Advising no later than 48 hours after the missed final exam/assignment. Learn more and find the application online:https://science.ubc.ca/students/advising/concession.

For additional information about academic concessions, see the UBC policy here: http://www.calendar.ubc.ca/vancouver/index.cfm?tree=3,329,0,0

Instructor health

If I (the instructor) am sick: I will do my best to stay well, but if I am ill, develop Covid symptoms, or test positive for Covid, then I will not come to class. If that happens, here’s what you can expect:
● If I am well enough to teach, but am taking precautions to avoid infecting others, we may have a synchronous online session or two. If this happens, you will receive an announcement in Canvas telling you how to join the class. You can anticipate that this would very likely be a last-minute email. Our classroom will still be available for you to sit and attend an online session, in this (hopefully rare) instance.
● You may receive a message from me with a recording of the lecture material for you to watch on your own time.

Acknowledgments: the above guidelines have been adapted from the unofficial but very helpful compilation at https://phas.ubc.ca/~james/teachingdocs.html

Three.js Resources

The official Three.js documentation is the best resource. Start with this introduction.

See the wiki for more information, including pointers to several tutorials on the Web.

You can code and run small programs immediately using this html editor.

An excellent interactive demo of the transformations in the OpenGL/WebGL graphics pipeline is here: http://www.realtimerendering.com/udacity/transforms.html

JavaScript resources

There are a huge number of resources available, due to the widespread use of this language. We will just need basic working knowledge.

Books:

Tutorials:

OpenGL Resources

We are not dirctly using OpenGL in this course. However, since OpenGL is older, there are a lot of resources available. GLSL programs there should be directly relevant to us.

Books

Useful tutorials on the web

Similar Courses

 Courses using the same textbook

MOOCs

Previous Similar Offering’s Lecture Notes (Fall 2017)
Warning: there will be significant changes in Spring 2020 (2019WT2)

Lecture Date Topics Notes Text Chapter
1 09-06 Course Intro L1.pdf 1
2 09-08 OpenGL pipeline, Assignment 1 L2.pdf 1
3 09-11 Nuts and Bolts, Assignment 1 L3.pdf
4 09-13 Geometry 1: Points, Vectors L4.pdf 2
5 09-15 Geometry 1: Vectors,Transforms L5.pdf 2
6 09-18 Geometry 1: Affine spaces 1 L6.pdf 3
7 09-20 Geometry 1: Translation, Frames L7.pdf 3
8 09-25 Geometry 1: Rotation L8.pdf 2.5,3
9 09-27 Geometry 1: Rotation, Frame Transformations L9.pdf 4, 5
10 09-29 Frames in Graphics I L10.pdf 5
11 10-02 Frames in Graphics II L11.pdf 5
12 10-04 Cameras and Projection I L12.pdf 10
13 10-06 Cameras and Projection II L13.pdf 10
14 10-11 Projection and Depth L14.pdf 10, 11
15 10-13 Projection wrapup, Vertex to Pixel L15.pdf 12
16 10-16 Lighting and Shading L16.pdf 14
17 10-20 Guest lecture – Real-time Rendering L17.pdf
18 10-23 Lighting and Shading 2 L18.pdf 14
19 10-25 Lighting and Shading 3, Normals L19.pdf 14, 3.6
20 10-27 Texture mapping 1 L20.pdf 15, A4
21 10-30 Texture mapping 2 L21.pdf 15, A4
22 11-01 Texture mapping 3, Q2 discussion L22.pdf 15, A4
23 11-03 Texture mapping 4, Interpolation intro L23.pdf 15, 9
24 11-06  Interpolation L24.pdf 9
25 11-08  Depth and Shadows L25.pdf 11
26 11-10  Projector textures, Sampling Intro L26.pdf 15.4,16
27 11-15  Sampling 2 L27.pdf 12.3, 16
28 11-20  Coverage L28.pdf 16
29 11-22  Reconstruction L29.pdf 17
30 11-24  Resampling L30.pdf 18
31 11-27  Review L31.pdf
32 11-29  Review, Next Steps in Graphics L32.pdf