WebGL by example

Examples by topic

The examples are sorted in order of increasing difficulty. But rather than just presenting them in a single long list, they are additionally divided into topics. Sometimes we revisit a topic several times, such as when needing to discuss it initially at a basic level, and later at intermediate and advanced levels.

Instead of trying to juggle shaders, geometry, and working with GPU memory, already in the first program, the examples here explore WebGL in an incremental way. We believe that it leads to a more effective learning experience and ultimately a deeper understanding of the underlying concepts.

Explanations about the examples are found in both the main text and in comments within the code. You should read all comments, because more advanced examples could not repeat comments about parts of the code that were previously explained.

Getting to know the rendering context

This example demonstrates how to detect a WebGL rendering context and reports the result to the user.

How to clear the rendering context with a solid color.

How to combine user interaction with graphics operations. Clearing the rendering context with a random color when the user clicks.

A very basic color animation, done by clearing the WebGL drawing buffer with a different random color every second.

Modifying random colors by applying color masking and thus limiting the range of displayed colors to specific shades.

How to draw rectangles and squares with scissoring operations.

The example explores the effect of setting (or not setting) the canvas size to its element size in CSS pixels, as it appears in the browser window.

The example describes repeated pieces of code that will be hidden from now on, as well as defining a JavaScript utility function to make WebGL initialization easier.

Some animation fun with scissoring and clearing operations.

A game that demonstrates clearing with solid colors, scissoring, animation, and user interaction.

Shader programming basics

A very basic shader program that draws a solid color square.

Combining shader programming and user interaction through vertex attributes.

A demonstration of procedural texturing with fragment shaders.

Miscellaneous advanced examples

This example demonstrates how to use video files as textures.

• Next