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.

Course Organization

Instructor: Dinesh K. Pai, Computer Science, UBC.

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

Lectures: MWF 10-11am Dempster 110.

Labs: There are 5 scheduled labs, held in ICICS 005. 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.

Discussions: We will use Piazza for optional discussions. The course URL is http://piazza.com/ubc.ca/winterterm12017/cpsc314/home.

Grades and Email Announcements: These will be posted on Connect. Please log in at the beginning of the term, and read the instructions there.

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.

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 three in-class quizzes (11% each) and one final exam (27%). You must get a passing grade in the final exam to pass the course.

Schedule: Quiz 1 on Sep 22 (F), Quiz 2 Oct 18 (W), Quiz 3 Nov 17 (F). Final TBD.

Handback: Exams will be returned electronically. Log in to the following site using your ugrad CSID: https://www.ugrad.cs.ubc.ca/~cs314/handback/

The marks distribution is summarized in this table:

marks % work
40 programming assignments (4)
33 quizzes (3)
27 final exam


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

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


Assignment 1 is now available, due midnight September 17th. The assignment spec (a1.pdf)and starter template can be downloaded from from the course git repository. You can log in with your CS undergrad id.

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.



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.


Useful tutorials on the web

Similar Courses

 Courses using the same textbook