Thank you for signing up for the course! We look forward to working with you and hearing your feedback in our forums.
Need help getting started?
Three.js Reference Sheet - a reference sheet for the syntax of three.js methods used in this course.
Notes Collection - collection of all instructor notes and links to additional course materials.
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. If you click "Test Run" and get an error about being zoomed, your browser may need a little more adjustment: try Ctrl+"-" (hold down "Control" and then tap the "minus" key, or Cmd+"-" on Mac), which will zoom out. Try "Test Run" again. If you still get the warning, try it again - you can always use Ctrl+0 again to get back to normal. If this procedure doesn't work, one other factor is font size, at least on Chrome. Set the font size to 100% and go through the Ctrl+0 and Ctrl+"-" and Test Run procedure again.
Are you using a Retina or other high-resolution display? It has a special screen resolution setting, which you can turn off or workaround in various ways.
Turn off high resolution: you can select Safari from /Applications and CMD-I it or right click and choose Get Info. Within the info screen you can choose a checkbox "Open in Low Resolution". Overall, it will look slightly blurry but will solve any Retina exercise grading issues.
Yet another method is to change the exercise's code. First unzoom, as above, using Cmd+0. Then, when you're ready to submit your code, 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);
One other possibility is to turn down Retina's resolution, via Apple Icon > About This Mac > Displays > Display Preferences - I haven't confirmed that this works, though.
For more details on local development, see the official three.js How to run things locally page.
Finally, "use strict"; has been added to the downloadable files, which will catch a number of common typographical errors. On Chrome don't forget hitting "F12" and going to the Console tab will show you execution errors.
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.
If you want to dig into WebGL itself directly, "WebGL Programming Guide" looks to be comprehensive. Find more information at the book's website, or download their table of contents and sample chapters.
An excellent text on interactive computer graphics in general, and WebGL in particular, is the new "Interactive Computer Graphics with WebGL (7th Edition)". This textbook is much like this course, it teaches the principles of computer graphics through the use of WebGL. See the publisher's site for more information, and the author's site has code and other elements for instructors.
If you want to get into OpenGL or DirectX, 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 helped write, "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.
Direct links to all demo programs.
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
The Final Project for the Interactive 3D Graphics course consists of making an interactive 3D program of your choice for your portfolio. The topic of your portfolio project is completely open, but there are some technical requirements:
The portfolio project should be implemented using three.js library and use at least 6 of the following 8 techniques:
For some inspiration you can check out what other students have created after taking this class.
Make sure to complete the auto-graded Final Exam. Here is the link to the full Final Project Guideline and Rubric