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.
Course Organization
Instructor:Dinesh K. Pai, Computer Science, UBC. Office Hour: Mondays 12:30-1:20 on Zoom. Please use the queue to enter your questions, and join the Zoom waiting room
TAs: To contact the TAs, please use the discussion board or visit one of the scheduled labs.
Lectures: MWF 10-11am, online using Zoom via Canvas. Direct link: https://canvas.ubc.ca/courses/58974
Labs: There are 7 scheduled labs, held online. 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 course URL is http://piazza.com/ubc.ca/winterterm22020/cpsc314/home. Please sign up.
Grades: These will be returned using the CS handback system (details coming soon). If you have any issues with an assigned grade, please use the CPSC 314 2020WT2 Grade Disputes Web Form to request a 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.
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: Quiz 1 on January 29 (F), Midterm on Feb 24 (W), Quiz 2 on March 19 (F). Final TBD, set by UBC.
Handback: Exams will be returned electronically. Log in to the following site using your CWL: https://www.ugrad.cs.ubc.ca/~cs314/handback/
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.
Lecture Notes, Videos, and Assignments are now posted on Canvas.
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:
- Eloquent JavaScript by Marijn Haverbeke. Third Edition available from the author’s website.
- JavaScript: the good parts by Douglas Crockford.
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
- OpenGL Programming Guide, 8th Edition (Red Book). This is the official guide, and includes GLSL. Try to get the latest edition, since OpenGL has changed a lot. The 7th edition may be OK, but earlier ones are not useful for this course.
- OpenGL Superbible (Blue Book). A more tutorial introduction to OpenGL.
- OpenGL 4.0 Shading Language Cookbook. Particularly useful if you already know “old style” OpenGL.
Useful tutorials on the web
- OpenGL.org has latest documentation and reference material.
- http://www.lighthouse3d.com/tutorials/glsl-core-tutorial/
- http://www.arcsynthesis.org/gltut/
Similar Courses
MOOCs
- Udacity, Eric Haines, Autodesk. Note: this course uses WebGL.
- edX (BerkeleyX), Prof. Ramamoorthi
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 |