Contents


Five Great Tips

Here are five things to know to help you get the most out of this class:

  1. Everything in this course is downloadable: lesson scripts (see below), videos, code. There's also a handy syllabus of all lessons.
  2. You can speed up or slow down the play speed on YouTube - click on the "Settings" gear icon near the lower right corner of the video. You can also do this with the downloaded videos.
  3. You can activate captions in the YouTube player. Click on the "CC" (closed captions) icon. Note that you can also download subtitles.
  4. Definitely get your hands dirty with the code - the more you experiment, the more you'll know. On Chrome, F12 brings up the debugger, which is infinitely valuable when playing with the downloaded code. (Bonus tip: you can also use the "debugger;" statement to help you debug exercises in this course!)
  5. Don't miss out on the forum. Many lessons have forum posts associated with them, and it's easy to ask questions and help other students out.

WebGL Troubleshooting

See this page for some troubleshooting info if the demos and exercises do not work for you.


Exercise Submission Problems and Solutions

There are a few common errors and known problems when submitting exercises. See if the following hints can fix things for you.

Browser zoom

Make sure your browser's screen is not zoomed; hit Ctrl+0 (zero) (or Cmd+0 on OSX) in most browsers to unzoom.

Retina and other hi-res displays

Are you using a Retina or other high-resolution display? It has a special screen resolution setting:

When you're ready to submit your answer, in the init() function of the exercise change

renderer.setSize( canvasWidth, canvasHeight);

to

var devicePixelRatio = window.devicePixelRatio || 1; // Evaluates to 2 if Retina
renderer.setSize( canvasWidth/devicePixelRatio, canvasHeight/devicePixelRatio);

Original forum thread with the solution.

Other problems

  • Read the "Instructor Notes" in case there was an error in the video; the Discussion section is also worth looking at to see if others have had similar problems.
  • Be careful to assign parameters, not replace them with new objects. See this thread.
  • Are you using Ubuntu? Make sure your drivers are up to date. This is good advice in general.
  • Don't use the onChange method in dat.gui. I believe the grading script will set values directly; please put your own updates in the render() method itself (inefficient as that can be).
  • If there's just a small difference around the fringes, try setting "antialias: false" in the init() method. Things look better with this setting on, but it can cause the grader some problems.
  • Still stuck? Help us help you by posting to the forum. If you're seeing something wrong, please do provide all the information you can: screenshots of what you're seeing, and which browser, operating system, and GPU.

Code Download: Developing Javascript Locally

You can check out from GitHub or download the latest version of our course exercise code from our repository.

For more details on local development, see the official three.js How to run things locally page.

One big advantage of offline development is that you can then easily use a Javascript debugger to see problems. The Chrome built-in debugger is described here, Firefox's Firebug debugger here, Safari here and then here.

We also recommend using JSHint - a tool to detect errors and potential problems in JavaScript code and can be used to enforce coding conventions. Using JSHint is super-easy: go to the page and copy and paste your own code into the window. Problems are then shown in the right column. Also check out its installation instructions and recommendations of code editors that support JSHint as a plugin.

We also recommend the GLSL (shader language) syntax highlighter and validator.


Course Notes

Instructor Notes

  • Notes collection - combined page with all instructor notes and links to additional course materials.

Lesson Scripts

(should be about 95% the same as the published videos)

Demos


Video downloads

If you cannot access YouTube, or just want to watch the videos offline, you can download the videos, zipped by lesson.


Supplementary texts

For JavaScript, Mozilla's page is a good spot for finding online guides. If you know another programming language already, this site may be enough, and the book "JavaScript: The Good Parts" is a help in avoiding the pitfalls. See my full review.

The teaching platform for this course is three.js. Some of the better tutorial sites for this library are Aerotwist's and Lee Stemkoski's codebase. The presentation by Ilmari Heikkinen is a clever runthrough of three.js's features, showing it in action. Find more on the three.js wiki.

The "WebGL: Up and Running" book is focused on three.js. If you want to dig into WebGL itself directly, the "WebGL: Beginner's Guide" is reasonable. In both cases I recommend the Kindle versions, as these are in color and less expensive. See my full reviews, which also include links to their codebases. A wider-ranging and newer book by the same author is "Programming 3D Applications with HTML5 and WebGL".

If you want to get into OpenGL itself or want more education on computer graphics algorithms in general, see our recommended reading list - there are many good books out there, it depends on your own goals. If I had to pick one book to complement the course, I'd probably give the nod to Angel and Shreiner's book - interestingly enough, the next edition will focus on WebGL, but that's not going to be out for awhile.

The book I co-authored, "Real-Time Rendering", is probably best as a book for once you've finished this course, if you want to know more about algorithms and theory. I think of this course as the precursor to this book, sort of like "Star Wars: Episode 1", except it's good.

Two other WebGL books are the (well-rated) "Professional WebGL Programming" and (currently unrated) "Beginning WebGL for HTML5". We have not read these (yet).


Contests

See the contest entries and winners at the bottom of the contest page.


CS291 Syllabus

Detailed Syllabus

Lesson by lesson syllabus is here, with direct links to all.

Lesson 1: Introduction

Motivation and a trip down the graphics pipeline, laying out the fundamental processes

Lesson 2: Points, Vectors, and Meshes

The basics of 3D geometry definition

Lesson 3: Colors and Materials

Color representation, material computations, transparency

Lesson 4: Transforms

Translation, scale, rotate and how to properly combine all these

Lesson 5: Matrices

Transform representation and how to fully control these

Lesson 6: Lights

Directional and point light sources, spotlights, shadows, global illumination

Lesson 7: Cameras

Orthographic and perspective cameras and the transforms needed

Lesson 8: Textures and Reflections

Color and opacity textures, along with reflection and normal mapping

Lesson 9: Shader Programming

An introduction to programming vertex and pixel shaders

Lesson 10: Interaction and Animation

How to select and make objects move