Skip to content

Simulating Fluids in Flash

January 7, 2011

A thread in the FGL forums got me interested in the simulation of fluids. Of course this topic has seen quite extensive coverage in academic papers but getting it to work in the limitted environment of Flash provides some intersting challenges. Interesting enough for me to give it a try over my christmas break.

I loosely followed a paper Particle-based Viscoelastic Fluid Simulation to implement a sandbox application that simulates and renders a small blob of fluid and allows you to tinker with various parameters. Click the image below and give it a try!

The fluid is represented as a set of ~400 particles that interact with their neighbours and such seem to form a coherent entity.

For rendering I use an oldschool approach: Each particle is represented as a metaball. For a given pixel the force function of every metaball is evaluated, summed up and the final sum is compared with a threshold value to decide whether the pixel is inside or outside of the fluid.

To be able to do that in realtime I precalculate the values that a forcefunction yields for pixels within a relevant range of the particles center as a Bitmap.
Fluid Rendering - Illustration #1
These tiny images (about 40×40 pixels) are rendered at the position of the particle with additive blendmode.
Fluid Rendering - Illustration #2
Now I can decide with a single lookup in the resulting Bitmap if a pixel belongs to the surface or not. That evaluation step is done by a pixel bender shader and instead of just working with a boolean state (inside or outside) I sample a gradient based on the accumulated force value.
Fluid Rendering - Illustration #3
This approach allows me to achieve a variety of styles in the visual appearance of the simulated fluid by just using different gradients.

This technique would unfold it’s real potential if you could use hardware acceleration to accumulate the field functions because that’s a bottle neck in the current implementation.

Not sure if that stuff has any practical relevance, anyway. But the SWF is only 32kb big so people that are into demos (32k, 64k) could maybe make something fancy out of it. 🙂 Here’s the source code released under the MIT license.

Advertisements

From → Research, Tutorials

8 Comments
  1. haden permalink

    Thanks for this awesome article. Releasing the code would be great, especially the pixel bender shader

  2. +1 for release the code. Impressive. I tried to set gravity to 0 and waited a bit to see if the fluid form a sphere. But it isn’t 🙂

  3. Didn’t work in Chrome (swf didn’t load at all) but was fine in Firefox and looked pretty good! I’m not sure it *looked* like a fluid, but it certainly moved like one (a very sticky one!)

  4. I released the source code! (link added to the post above)

    The commentary isn’t extensive so if you got questions feel free to ask. And if you do something cool with it, show me! 🙂

    @Dobos Bence: Yeah I noticed that too. I guess that’s not really a bug but a limitation of the approach. Would love to extend it and use more, smaller particles and a more physically correct simulation but I guess then it’s not interactive anymore. (At least not in Flash)

  5. moi permalink

    I have just a little question : how to apply this awesome work in our project ? In flash CS5.5 ? Merci.

  6. Every class except Atlantis should be compatible and ready to work. You just have to adapt the way the resources are provided (I use the [embed] tag, you use the library) the parameters are set (I build an Interface in code using the MinimalComps API) and the result is displayed.

    Then just replicate what I do in Atlantis.as in your CS5.5 project. Initialize the simulation and renderer once. Add a OnEnterFrame handler to trigger the simulation and rendering process every frame. You can stuff the final rendered buffer into a Bitmap and add it to the stage for example.

  7. moi permalink

    Thanks !

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: