This page contains all the samples, excercises, and demo code from

Practical WebGL from scratch for frontend developers

Full AWWWARDS Course   |   Discord Server   |   GitHub Repository

WebGL has been all the rage for years now when it comes to creative and immersive websites, as nearly every winning website on AWWWARDS uses it in some capacity. It has a lot to offer when it comes to rendering real time graphics, visualisations and interactive animations in the browser.

If one understands how vanilla WebGL itself produces pixels on the screen, she will have a much easier time implementing all the cool, award winning effects with confidence and without relying on other people's code. Furthermore, knowing the internals will give any frontend developer an edge and an intro to any good web agency.

---

Table of Contents and Exercises

The source code for each excercise is available online, and for a detailed explanation, please consult the video course.

1. WebGL drawing fundamentals
   1. App boilerplate
   2. Drawing a point
   3. The WebGL coordinate system
   4. Adding points on mouse click
   5. Drawing lines
   6. Drawing a triangle
   7. Drawing a quad
2. WebGL textures
   1. Texture from an image
   2. Texture from a video
   3. Texture from a HTML5 Canvas
3. Transformations
   1. Translating an element
   2. Translating with matrix
   3. Scaling with matrix
   4. Rotation with matrix
   5. Combining matrices
4. Building a WebGL Slider
   1. Exercise
5. Building an image scroll effect
   1. Exercise
6. Building a camera effect
   1. Exercise
7. Building a particles animation
   1. Exercise