Here are five things to know to help you get the most out of this class:
See this page for some troubleshooting info if the demos and exercises do not work for you.
There are a few common errors and known problems when submitting exercises. See if the following hints can fix things for you.
Make sure your browser's screen is not zoomed; hit Ctrl+0 (zero) (or Cmd+0 on OSX) in most browsers to unzoom.
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);
var devicePixelRatio = window.devicePixelRatio || 1; // Evaluates to 2 if Retina renderer.setSize( canvasWidth/devicePixelRatio, canvasHeight/devicePixelRatio);
For more details on local development, see the official three.js How to run things locally page.
(should be about 95% the same as the published videos)
If you cannot access YouTube, or just want to watch the videos offline, you can download the videos, zipped by lesson.
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.
See the contest entries and winners at the bottom of the contest page.
Lesson by lesson syllabus is here, with direct links to all.
Motivation and a trip down the graphics pipeline, laying out the fundamental processes
The basics of 3D geometry definition
Color representation, material computations, transparency
Translation, scale, rotate and how to properly combine all these
Transform representation and how to fully control these
Directional and point light sources, spotlights, shadows, global illumination
Orthographic and perspective cameras and the transforms needed
Color and opacity textures, along with reflection and normal mapping
An introduction to programming vertex and pixel shaders
How to select and make objects move
Once you have finished the course, you can get your certificate. Click on "My Courses" on the upper right corner, then expand the appropriate entry and on the right side there should be a link to download the certificate. To get a certificate you need to finish the exam. To get the higher levels of certificates, you also need to do some programming exercises in the problem sets.
There are four levels of mastery: