Interactive 3D Graphics

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?


Contents


Course Resources

Reference Sheet and Instructor Notes

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.

Written scripts for all lessons are available for download. In the syllabus listing after each unit are links for PDF, ODT, and DOCX format versions of the lessons.

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, videos, code. There's also a handy syllabus of all lessons and reference sheet for methods in three.js.
  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. 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. See this thread for what's worked for some students.

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);

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.

Original forum thread with the code 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.
  • If you get "TypeError: Cannot read property 'getExtension' of null", especially on code you haven't changed, it's probably your browser or GPU. Try closing and restarting your browser. If that doesn't clear it up, try the steps here.
  • 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. You may also find our three.js reference sheet useful as you work through the course.

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.

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.

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 page or this 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.

Despite the title, the book "WebGL: Up and Running" is focused on three.js and is a reasonable overview. The book "Learning Three.js: The JavaScript 3D Library for WebGL" is meatier and newer; see the book's website for the table of contents and sample chapters, and the author's site for code samples. For both these books, I recommend the Kindle versions, as these are in color and less expensive.

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.

Contests

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

Course Syllabus

Detailed Syllabus

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

Demos

Direct links to all demo programs.

Lesson 1: Introduction

PDF - ODT - DOCX

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

Lesson 2: Points, Vectors, and Meshes

PDF - ODT - DOCX

The basics of 3D geometry definition

Lesson 3: Colors and Materials

PDF - ODT - DOCX

Color representation, material computations, transparency

Lesson 4: Transforms

PDF - ODT - DOCX

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

Lesson 5: Matrices

PDF - ODT - DOCX

Transform representation and how to fully control these

Lesson 6: Lights

PDF - ODT - DOCX

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

Lesson 7: Cameras

PDF - ODT - DOCX

Orthographic and perspective cameras and the transforms needed

Lesson 8: Textures and Reflections

PDF - ODT - DOCX

Color and opacity textures, along with reflection and normal mapping

Lesson 9: Shader Programming

PDF - ODT - DOCX

An introduction to programming vertex and pixel shaders

Lesson 10: Interaction and Animation

PDF - ODT - DOCX

How to select and make objects move

Final Project

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:

  • Create simple objects directly using primitives - points, vectors and meshes.
  • Create objects using tree.js built in geometrical functions
  • Use colors and transparency
  • Use transforms and rotations. Also transform and rotate in regards to parent-child object relationship.
  • Use cameras and lights
  • Use textures/reflections
  • Use animation
  • Use custom shaders

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