CSCI-UA-0480-006
Undergraduate Computer Graphics

719 Broadway, Room 1221
Tuesdays and Thursdays, 11am-12:15pm

Office hours: Tuesday, 4-5pm

What we will cover:

There are many courses that can teach you how to use commercial computer graphics packages and APIs. This course, in contrast, will teach you how to build 3D computer graphics from the ground up. This will include 3D modeling, animation, and rendering. At the end of the semester you will have built your own complete working real-time 3D computer graphics systems that runs in web browsers.

What you should already know:

If you are already familiar with JavaScript, that's great. If you are already familiar with Java, C++ or any similar high level language, you will not have any trouble picking up enough JavaScript to do this course.

Since this is an advanced course, I will assume that you are already an experienced programmer. If you are not, then I do not suggest you take this course, as there will be weekly programming assignments, and you would not be able to keep up.

Computer graphics uses a lot of matrix math and some calculus. During the semester we will go over all of the matrix and vector math that you will need.

Text:

Class notes (so make sure you come to class!), will be posted on-line after each lecture.

A useful (but not required) reference: Computer Graphics: Principles and Practice (3rd Edition)

Graders:

Sebastian Herscher

Discussion list:

TBA

Rough outline of possible topics (this may change):

Setting up your web site to post assignments for this class:

It turns out that the instructions I gave in class for hosting your work on-line will not work, because NYU Pages does not allow you to create your own html content and sub-folders. :-(

So instead, I have signed you all up for Courant computer accounts, which will give you complete technical flexibility to create whatever structure and content you like. If you don't already have a Courant account, then some time in the next day or so you should receive an invite email telling you that your account has been set up. If you don't receive such an email, it probably means that you already have a Courant computer account (perhaps from a class you took in some previous semester). If that is the case, and you don't remember your password, you can reset it by going to the passwords reset page:

https://cims.nyu.edu/webapps/password/reset

Once you have your Courant web site set up, then to post assignments you should set up a subdirectory of your web site. Name this subdirectory "graphics". It should have a main "index.html" file, and that file should link to the various homework assignments. After the first class, you will send the grader an email, with subject line "graphics", telling him the URL.

If you are on a Unix or Linux system (eg: you're on a Mac running OSX), one way to upload files from your computer to the NYU server is via the command line in a terminal window:

scp FILE USER@access.cims.nyu.edu:public-html/PATH/FILE
where:

  • FILE is the name of your file;
  • USER is your user login name on your CIMS account;
  • PATH is whatever is the path from your public-html folder down to where you want the file to end up.

If you are on a Windows machine, you can either user the free program winSCP, or you can download pscp from putty.org.

You can also log into your CIMS account, where you can then run Unix commands right there, such as create subdirectories. To log in remotely:

ssh USER@access.cims.nyu.edu

Introductory Lecture

We go over, at a high level, the topics we will cover in the class. I show the following videos:

Then we break into small groups where people brainstorm about possible future computer graphic interfaces they might create, should Moore's Law continue for another few decades.

Your assignment for next Tuesday is to:

  • Create or choose a web site for this class, as per the instructions above;

  • Send me an email with the title "GRAPHICS", giving me the URL of that web site.

  • Post an essay on that page, telling me why you are taking the class, what you hope to get out of it, and any particular topics you would like me to discuss. You should call this essay "Assignment 0".

February 2: Introduction to shaders

The notes and assignment for this class are here.

February 9: Introduction to ray tracing, part 1

The notes and assignment for this class are here.

February 11: Introduction to ray tracing, part 2

The notes and assignment for this class are here.

Reminder: If you've made something cool in Unity, please send me an email about it.

February 16: Ray tracing: Phong shading and some plumbing

The notes and assignment for this class are here.

Reminder: If you've made something cool in Unity, please send me an email about it.

February 18: Ray tracing: Shadows, Reflection and Refraction

The notes and assignment for this class are here.

February 23: Fun with procedural textures

The notes and assignment for this class are here.

March 1-3: Working with a 2D canvas

The notes and assignment for this class are here.

March 8: Notes on matrices

We had a very cool guest lecture by Jaron Lanier.

Meanwhile, I am providing some notes to get you started on your next assignment, which will be about implementing and using transformation matrices.

The notes and assignment for this class are here.

March 10: Building and demonstrating the Matrix class

The notes and assignment for this class are here.

March 22-24: The Matrix class, continued

The notes and assignment for this class are here.

March 29: Introduction to parametric surfaces

The notes and assignment for this class are here.

April 5: Introduction to splines

The notes and assignment for this class are here.

April 7: Various things

The notes and assignment for this class are here.

April 12: Object hierarchies and parametric curves

The code we wrote in class is example_code.js.

April 14: Using a 3D Modeling Package

The notes and assignment for this class are here.

April 19: Using a 3D Modeling Package, part 2

The code and examples we reviewed in class on Tuesday April 19 are in code6.zip.

Note: When you run this example locally on your computer, you will not see the textures. That is because your Web browser does not have permission to read local files from your computer. When you run the same example from your website, the textures will indeed show up, because then those image files will be coming from a web server.

April 21: Various topics

The notes and assignment for this class are here.

May 4: Last class

Some of you asked for a more complete example of the use of the IMU together with my modeler. You can use the following code as a template: 

CT.imu = { alpha:null, beta:null, gamma:null };
if (window.DeviceOrientationEvent)
   window.addEventListener('deviceorientation', function(event) {
      CT.imu.alpha = event.alpha;  // PHONE DIRECTION IN DEGREES
      CT.imu.beta  = event.beta;   // TILT FRONT-BACK IN DEGREES
      CT.imu.gamma = event.gamma;  // TILT LEFT-RIGHT IN DEGREES
   });

...

   if (CT.imu.alpha != null)
      root.identity().rotateX( CT.imu.gamma * Math.PI / 180 + Math.PI/2)
                     .rotateZ( CT.imu.beta  * Math.PI / 180)
                     .rotateY(-CT.imu.alpha * Math.PI / 180);