CATALOG DESCRIPTION: First in a 3-course series to teach the core principles, ideas & math behind all forms of computer-assisted picture-making; complementary/compatible with computer-game design interests. After this course you can write your own programs to depict animated 2D and 3D objects that respond to mouse and keyboard inputs, yet run in any modern web browser. We write WebGL programs in Javascript to create GPU-driven high-performance 3D graphics in any up-to-date web browser (Skeptical? try http://www.chromeexperiments.com/webgl/ , http://www.marky.pl/vector-field/)

  • This course satisfies the project requirement.

instructor-course-page-button

Don’t worry if you know C/C++ but not Javascript – the course helps you through the transition. We use the Google Chrome browser on any operating system (Windows, OS-X, Linux, etc.) which gives you a very nice debugging and tracing tools, and the course supplies you with already-working ‘starter code’ examples to help you through the tough and/or confusing parts. You can always begin with starter code.

We will ‘learn by doing’: no exams. Instead, you’ll design your own programs in these 4 projects: 1) Moving Shapes From Math: colored points, lines & triangles moved interactively by matrix transforms; 2) Graceful 3D Views: Quaternions & Scene Graphs let us fly over a colorful scene filled with moving shapes. 3) Better Lights & Materials: compute, pose & move 3D lights for surface materials both diffuse and shiny;
4) Textures & Buffer tricks; Learn to ‘paint’ photos onto 3D surfaces to add details & richness.

COURSE GOAL: Comfort and ease in programming any desired interactive 2D or 3D shapes using OpenGL.

PREREQUISITES: EECS 214 (was 311) or permission from instructor. Interested? Ask! I want fewer reqmts…

COURSE COORDINATOR: Prof. Jack Tumblin, Rm 3-341, Ford Engineering Design Center, 2133 Sheridan Road, Evanston IL 60208. jet@cs.northwestern.edu, Office: 847 467 2129

REQUIRED TEXTBOOKS:  

"WebGL Programming Guide: Interactive 3D Graphics Programming with WebGL (OpenGL)" By Kouichi Matsuda and Rodger Lea. (First edition) Addison-Wesley, © 2013 Pearson Education, Inc. (Paperback or Kindle E-book – either is OK).

Also Required: Several miscellaneous PDFs to be posted on CANVAS throughout the quarter.

OTHER GOOD BOOKS: (Recommended but NOT REQUIRED)

          --"Mathematics for 3D Game Programming and Computer Graphics" (3rd Edition) By Eric Lengyel Cengage Learning, ©2012 Course Technology (Paperback or Kindle E-Book – either is OK) (Also used in "Intermediate Graphics" course).

          --Website: Learningwebgl.com : free, quick, terse but complete tutorial with user comments/additions

          --Website: OpenGL.org : full of goodies! tutorials, FAQs, msg boards, complete OpenGL reference pages.

DETAILED COURSE TOPICS: Webpage Basics, Javascript Basics, WebGL within HTML-5 Canvas; keyboard and mouse control. Vector math, Homogeneous Coords, matrix transforms in a scene graph. Shape description with points, lines and polys. Viewing and camera matrices. GLSL basics, vertex shaders, fragment shaders; vertex colors and fragment shaders. Quaternions and trackball controls. ‘LookAt’, frustum & 3D projections. Lights attached to moving objects. Phong lighting model, Phong shading model, surface normals. Specular reflection in shaders. Texture map basics. Antialiasing.

COMPUTER USAGE: Yes; required. Must be familiar and comfortable programming in C/C++ and/or JavaScript (Course assumes you have no background in JavaScript).

HOMEWORK ASSIGNMENTS: 3 or 4 take-home quizzes. In-class exercises; reading to prep for class discussions; recommended problem sets from book..

LABORATORY PROJECTS: Four guided programming projects aided by ‘starter code’.

GRADES:

  • 4 projects with in-class demo and report
  • 4 quizzes+class participatio
  • No Midterm or Final Exam.