Web-GL-Series

A collection of code examples for a step-by-step WebGL 2 tutorial series, ranging from a basic full-screen quad (Article 2) up to a real-time fluid simulation (Article 6).

Article 2: WebGL 2 Basics:

• Medium

• Tech Notes

• Demo

  Article 3: Rendering to Textures with Framebuffers

• Medium

• Tech Notes

• Demo

  Article 4 Stateful Rendering with the Ping-Pong Technique

• Medium

• Tech Notes

• Demo

  Article 5: Fluid Simulation in WebGL - The Advection Step

• Medium

• Tech Notes

• Article 5 Demo

  Article 6: WebGL Fluid Simulation: Pressure Solving

• Medium

• Tech Notes

• Demo

Each folder contains a self-contained example for its corresponding article.

Running a Local Server

To load shaders from external files, run a minimal HTTP server. From the project root:

cd web-gl-series
python3 -m http.server 8000

Then open an example in your browser:

http://localhost:8000/<article-name>/index.html