WebGL by example is a series of live samples with short explanations that showcase WebGL concepts and capabilities.
The examples are sorted according to topic and level of difficulty, covering the WebGL rendering context, shader programming, textures, geometry, user interaction, and more.
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.
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 simple 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 simple game that demonstrates clearing with solid colors, scissoring, animation, and user interaction.
A very basic shader program that draws a solid color square.
Combining shader programming and user interaction through vertex attributes.
A simple demonstration of procedural texturing with fragment shaders.
This example demonstrates how to use video files as textures.
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/By_example