WebGL

This page is an exploration of WebGL.

The material began as assignments from a free online course offered on Coursera, called "Interactive Computer Graphics with WebGL", taught by Edward Angel from the University of New Mexico. The course is no longer available on Coursera, but there is a textbook he wrote and based the course on called, "Interactive Computer Graphics - A Top-Down Approach with WebGL".

I have expanded on the assignments and tried to turn them into a quasi tutorial. When the examples load, I provide some basic explanations of what is being done and then the intention is to view the source code to learn more.

Some of the material grew into little applications: a 2D drawing program, a 3D modeling tool and a pretty cool implementation of a Rubik's Cube™ style puzzle. Most of them are still in their infancy and are buggy, but the Mixed Cube is a mostly complete little app that is fun to play with, it works with swipe and on mobile devices too!

2D Examples

This page demonstrates basic WebGL functionality by applying a twist transformation to a polygon.

This page demonstrates the different draw modes in WebGL and allows interaction with the mouse.

This page demonstrates drawing lines in WebGL with different line widths, segment sizes and colors.

This page demonstrates some WebGL concepts: multiple attributes, drawing partial buffers, sub-buffering, manipulating objects and the use of basic matrix transformations.

3D Examples

This page demonstrates some WebGL concepts: 3-dimensional orthographic and perspective viewing, depth test hidden surface removal and more complex matrix transformations.

This page demonstrates some WebGL concepts: creating meshes for 3-dimensional objects, basic shading and transparency, culling, polygon offset and more functionality in the vertex shader.

This page demonstrates more complex WebGL vertex and fragment shader functionality, multiple shaders and lighting effects comparing the GPU versus the CPU.

This page demonstrates texturing in the WebGL shader, assigning texture coordinates with different algorithms and some of the texture options available.

This page demonstrates bump and normal mapping in WebGL.

Apps

A WebGL implementation of a Rubik's Cube™ style puzzle.

A simple WebGL 3 dimensional modeling program. Still a work in progress.

A simple WebGL 2 dimensional drawing program. Still a work in progress.

The very first iteration of the Maze Walker engine! Checkout the new version to see how it has progressed!

Resources

WebGLFundamentals.org | Tutorials

LearningWebGL.com | Tutorials

MDN | WebGL | Tutorials & Reference