Overview

OpenGL is the standard application programming interface (API) to graphics systems for both education and industry. Recent advances in hardware and software have focussed application development on the Web and for mobile devices such as smart phones. Over the past year there has been enormous interest in WebGL, the version of OpenGL that runs within Web browsers and even on newer smart phones. Consequently, for the first time both students and practitioners can develop exciting three-dimensional interactive applications that are independent of the particular platform and can be accessed like any other Web application.

In this course, we will learn how to create three-dimensional, interactive applications using WebGL that run within the latest web browsers. By the end of the course, every student will have written and tested a complete interactive three-dimensional application. Because WebGL is the JavaScript implementation of OpenGL ES 2.0, all code will be developed in JavaScript. No prior knowledge of JavaScript is required as long as participants can program in C++, C# or Java. The content of the course will be based on the instructor's recent textbook (not required) and course which is the first university course to use WebGL as the API.

Syllabus

Week 1: Introduction and Background
    Lecture 1: Course Overview
    Lecture 2: Outline via Examples
    Lecture 3: Prerequisites and References
    Lecture 4: A Simple WebGL Example
    Lecture 5: Getting Started with WebGL
    Lecture 6: OpenGL and WebGL
    Lecture 7: HTML and Browsers
    Lecture 8: JavaScript
Week 2: WebGL
    Lecture 1: Square Program
    Lecture 2: Shader Execution Model
    Lecture 3: Square Program: The HTML file
    Lecture 4: Square Program: The JavaScript File
    Lecture 5: WebGL Primitves and Viewing
    Lecture 6: Tessellation and Twist
    Lecture 7: The Sierpinski Gasket
    Lecture 8: Moving to Three Dimensions
Week 3: The Open GL Shading Language and Interaction
    Lecture 1: Color
    Lecture 2: GLSL and Shaders
    Lecture 3: Input and Interaction
    Lecture 4: Animation
    Lecture 5: Buttons and Menus
    Lecture 6: Keyboard and Sliders
Week 4: Displaying Geometry in WebGL
    Lecture 1: Position Input
    Lecture 2: Picking
    Lecture 3: Matrices
    Lecture 4: Representation
    Lecture 5: Geometry 1
    Lecture 6: Geometry 2
    Lecture 7: Homogeneous Coordinates
    Lecture 8: Some Caveats
Week 5: Transformations
    Lecture 1: Affine Transformations
    Lecture 2: Rotation, Translation, Scaling
    Lecture3: Concatenating Transformation
    Lecture 4: Transformations in WebGL
    Lecture 5: Representing a Cube
    Lecture 6: Animating the Cube
Week 6: Viewing in WebGL
    Lecture 1: Classical Viewing
    Lecture 2: Positioning the Camera
    Lecture 3: Projection
    Lecture 4: Projection in WebGL
    Lecture 5: Orthogonal Projection Matrices
    Lecture 6: Perspective Projection Matrices
    Lecture 7: Representing and Displaying Meshes
    Lecture 8: Lighting and Shading
    Lecture 9: The Phone Lighting Model
Week 7: Lighting, Shading and Texture Mapping
    Lecture 1: Lighting and Shading in WebGL
    Lecture 2: Polygon Shading
    Lecture 3: Per Vertex vs per Fragment Shading
    Lecture 4: Buffers in WebGL
    Lecture 5: Texture Mapping Overview
    Lecture 6: Approaches to Texture Mapping
    Lecture 7: WebGL Texture Mapping
Week 8: WebGL Texture Mapping
    Lecture 1: WebGL Texture Objects
    Lecture 2: Texture Mapping to the Cube
    Lecture 3: Texture Mapping Variations
    Lecture 4: Reflection and Environment Maps
    Lecture 5: Bump Maps
    Lecture 6: Compositing and Blending
    Lecture 7: Imaging Applications
Week 9: Using the GPU
    Lecture 1: The Mandelbrot Set
    Lecture 2: Generating the Mandelbrot Set in the CPU
    Lecture 3: Generating the Mandelbrot Set in the GPU
    Lecture 4: Framebuffer Objects
    Lecture 5: Renderbuffers
    Lecture 6: Render to Texture
Week: 10: Render-to-Texture Applications
    Lecture 1: Picking by Color
    Lecture 2: Buffer Pingponging
    Lecture 3: Diffusion Example
    Lecture 4: Agent-Based Models