Learn Computer Graphics using WebGL

This interactive textbook will teach you how to create interactive 3D computer graphics content that can be viewed and manipulated in a web browser. As you learn computer graphic concepts you will apply them using WebGL – a version of OpenGL (Open Graphics Library) that works in most web browsers.

IMPORTANT

To master the material in this textbook you must interact with its examples, demos, and self-assessments to verify that you understand the concepts being presented. Each lesson builds on the previous lessons. Therefore, please don’t continue to the next lesson until you have a solid understanding of the lesson you just studied.

To understand how this textbook is interactive, please consider the following examples.

An Example Interactive Matrix Equation

The matrix equation below can be manipulated in the following ways:

  • Clicking on any operator (e.g, * or =) in the equation will cause the operation to be performed and the results displayed below the equation.
  • In the results of an operation, clicking the “-” button will simplify the matrix terms, while clicking on the “X” button will remove the generated equation from the web page.
  • Any element in a matrix that displays an edit box can be modified and the operations performed again. This allows you to experiment and learn!
1
0
0
0
1
0
0
0
0
-c2
-1
0
c1
0
*x
y
z
1
=x'
y'
z'
w'
 Eq1

An Example WebGL Program

The HTML canvas below contains an example WebGL program. Notice the HTML controls below the graphics that can be used to modify the 3D rendering. Try out the controls. Also click and drag your mouse cursor inside the canvas window to rotate the object in arbitrary directions. Pretty cool, don’t you think? When you finish this textbook you will know exactly how to create such 3D interactive graphics.

An example of uniform scaling where the object is centered about the origin.

Please use a browser that supports "canvas"
Animate
Scale 1.00 : 0.3 2.0

Open this webgl demo program in a new tab or window

How to use this Interactive Textbook

  • Study the lessons in the order they are presented in the table of contents.
  • Spend time experimenting with each example and demo program.
  • Answer the self-assessment questions at the end of each lesson and only proceed to the next lesson after all the questions have been answered correctly. If any of the material in the lesson is unclear, please study the lesson again.

Proceed to the Table of Contents

Contacts and Acknowledgements

  • If you have questions about this interactive textbook please contact the author at: wayne@brown37.net.
  • This textbook is open source and the files used to build it are available for free at learnwebgl2.
  • This textbook would not be possible without the tremendous work of Brad Miller and his group of developers that have created the “runestone interactive textbook development system.” Check out the runestone project on github.com.