#WEBGL FLUID SIMULATION FULL#

We probably need more precision than a single byte color offers, so I’m going to use the OES_float_texture extension for WebGL, that lets us have 4 byte per color floating point textures. There are two main steps to the algorithm – streaming the particles according to their velocity, and then gather particles in each grid cell and rotate them around the grid’s average velocity.Įach particle has an x and y coordinate as well as an x and y velocity. You can however get some spectacular bugs when you try.īecause we’re basically going to be simulating particles on the GPU, we have to take a step back and think about how we’re going to pack the data in. its difficult to model something like surface tension). The main downside of SRD is that its somewhat hard to do anything other than a simple uniform fluid with it (e.g. It serves to let particles influence each other in a general way without worrying about the details of the interactions. This process is basically the ‘particle-based’ version of the collision step in the Lattice-Boltzmann algorithm. So in the limit of the continuum fluid, it doesn’t matter all that much what we do to this distribution so long as it doesn’t persist on long timescales.

So, why does this work? Basically, by removing the average component of their velocities, what’s left is something that is ignored anyhow by continuum fluid approaches – a specific distribution of fluctuations around the average. The randomized collisions are implemented by taking all of the particles within a certain region of space (a grid cell, lets say) and rotating their velocities relative to the center of mass velocity of the cell by a random amount. This means that all of the particles can move ballistically, which is much simpler to compute. The idea behind this method is to model the fluid with particles, but to replace the complex collisions between individual particles with a randomized interaction. In this article, we will construct a WebGL-based set of shaders that uses SRD to simulate a fluid. It has the nice property that no matter what you do to it, it is unconditionally stable (you may get weird results, but you will never have the simulation blow up on you). I am going to focus on a little-known algorithm called Stochastic Rotation Dynamics (SRD).

#WEBGL FLUID SIMULATION FULL#

Part of this is due to the work of clever shader writers who have put fluid dynamics simulations into the GPU (check out this lovely shader for example), but there are also a number of approximate algorithms that are much faster than doing the full Navier-Stokes equation.

Alternate approaches to fluid dynamics on GPUĪlternate approaches to fluid dynamics on GPUįluid effects are starting to become cheap enough that they can be used extensively in realtime applications such as games.

Webgl fluid simulation