Home

Real-Time Fluid Simulation on the GPU

This is a WebGL-based fluid simulator inspired by Inspecto's video. The algorithm is entirely based on Jos Stam's 2003 paper Real-Time Fluid Dynamics for Games. The implementation was guided by NVIDIA's GPU Gems chapter on GPU implementation of Stam's algorithm.

Prerequisites

This guide assumes basic knowledge of HTML and JavaScript as well as a familiarity with C-like syntax (because it will appear in our GLSL shader code). Graphics-specific knowledge is not required -- we will explain concepts as they come up.

In order to actually run the simulation, you'll need a browser that supports WebGL (most do nowadays) as well as a way to run a local server. If you have python, that will work!

Purpose

This repository is meant to be a guided project for students learning about computer graphics. It was developed for UIUC's SIGGraph student chapter. By implementing this project can expect to learn:

• The fundamentals of the WebGL API
• Basic GLSL syntax
• When and how to apply parallel computation
• User events in JavaScript for interactivity

Using this Wiki

Check the sidebar for each step of the process. Each step's page will have details on the algorithm and implementation. However, the purpose of this guide is not to be a copy-and-paste repository. While each chapters's tagged commit will have its content fully implemented, we recommend not checking ahead even if you are stuck on a bug. The best way to learn is to figure it out yourself, so give yourself some time to think before checking the solutions.

We welcome suggestions to improve this guide -- please submit an issue with any suggestions!