-
OpenGL is the standard application programming interface(API) to graphics systems forboth education and industry. Recent advances in hardware and software have focussed applicationdevelopment on the Web and for mobile devices such as smart phones. Over the past year therehas been enormous interest in WebGL, the version of OpenGL that runs within Web browsers and evenon newer smart phones. Consequently, for the first time both students and practitioners candevelop exciting three-dimensional interactive applications that areindependent of the particularplatform and can be accessed like any other Web application.
In this course, wewill learn how to create three-dimensional, interactive applications usingWebGL that run within thelatest web browsers. By the end of the course, every student will have writtenand tested a completeinteractive three-dimensional application. Because WebGL is the JavaScript implementation ofOpenGL ES 2.0, all code will be developed in JavaScript. No prior knowledge of JavaScript isrequired as long as participants can program in C++, C# or Java. The content of thecourse will be based on the instructor's recent textbook (not required) andcourse which is the firstuniversity course to use WebGL as the API.
-
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
