MyPage is a personalized page based on your interests.The page is customized to help you to find content that matters you the most.

I'm not curious

Interactive Computer Graphics with WebGL

Course Summary

Applications of computer graphics are ubiquitous, ranging from animations in movies to computer aided design of mechanical parts. In this course, we will learn how to create three-dimensional interactive applications using WebGL that run within the latest web browsers. We will disucss all aspects of computer graphics from hardware to software to

  • +

    Course 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

  • +

    Recommended Background

    Participants should be proficient in a high-level programming language sich as Java, C++ or JavaScript. Although all examples and assignments will be done in JavaScript, participants should be able to pick up sufficient JavaScript knowledge through the lectures, examples and online resources.

  • +

    Course Format

    The instructor will present short video lectures as well as a full set of slides, coding examples, supplementary code libraries and the figures from the instructor's textbook.  Numerous websites are available that provide examples of WebGL applications and tutorials on JavaScript.  It will include 5-6 practice code assignments and a final project.

  • +

    Suggested Reading

    Although the lectures are designed to be self-contained, we recommend (but do not require) that students refer to the book   E. Angel and D. Shreiner, Interactive Computer Graphics (Seventh Edition), Pearson Education,  2015 (released March 2014).

Course Fee:

Course Type:


Course Status:



1 - 4 hours / week

This course is listed under Development & Implementations and Digital Media & Games Community

Attended this course?

Back to Top

Awards & Accolades for MyTechLogy
Winner of
Top 100 Asia
Finalist at SiTF Awards 2014 under the category Best Social & Community Product
Finalist at HR Vendor of the Year 2015 Awards under the category Best Learning Management System
Finalist at HR Vendor of the Year 2015 Awards under the category Best Talent Management Software
Hidden Image Url

Back to Top