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.  Office Hour:  by appointment

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

Lectures: MWF 10-11am Dempster 310.

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.

Communication: We will use Piazza for all public communication and discussions. The course URL is http://piazza.com/ubc.ca/winterterm22018/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 2018WT2 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.

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 January 30 (W), Quiz 2 on March 1 (F), Quiz 3 on March 22 (F). Final TBD set by UBC.

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

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 and Assignments are now posted on Piazza, in the Resources section.

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)

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