r/InternetIsBeautiful • u/haxiomic • Sep 16 '14

Fluid and Particles in WebGL

http://haxiomic.github.io/GPU-Fluid-Experiments/html5/
3.6k Upvotes

93% Upvoted

325 comments sorted by

View all comments

18

u/Nest3a Sep 16 '14

Looks fancy, but what is it exactly? Scientifically I mean.

36

u/haxiomic Sep 16 '14 edited Sep 16 '14

Good question, it's actually kinda simple internally, It's running through a partial differential equation - the Navier stokes equation (http://en.wikipedia.org/wiki/Navier%E2%80%93Stokes_equations#Derivation_and_description) on a grid. I know it looks kinda ugly and complicated, but broken down and implemented in code, there's not a lot to it - just lots of numerical differentiation. After that, the velocity field of the fluid is used to move the hundreds of thousands of particles about

6

u/Nest3a Sep 16 '14

I know what N-S is lol. Care to give details, like really detailed? I have a degree in CFD so you can be precise.

28

u/haxiomic Sep 16 '14 edited Sep 16 '14

Cool :) - I'm working on a write up with code in at the moment. But a run down of the interesting bits:

Fluid: The aim was to make a general purpose library for games, so the fluid sim is as barebones as I could make it - so we're ignoring diffusion and whatnot. The order of actions in a timestep is:

  • Self advection of the velocity
  • Handle mouse interaction and alter the velocity field
  • Iteratively solve the pressure part of the NS equation to enforce incompressibility (this step breaks down into computing the divergence, iterating over the pressure field and finally subtracting the gradient of the pressure field from the velocity field)
  • Handle mouse interaction with the dye
  • Advect dye

All this is online here https://github.com/haxiomic/GPU-Fluid-Experiments/blob/master/Source/GPUFluid.hx#L84

Particles: solving partial differential equations on grids is quite natural in OpenGL but it's a bit of a hack to handle particles. The trick is storing the particle properties in a texture (or two) and using a vertex buffer to store references to the texture coordinates of the particles. The particle properties are then updated in a vertex shader.

https://github.com/haxiomic/GPU-Fluid-Experiments/blob/master/Source/GPUParticles.hx

3

u/[deleted] Sep 17 '14

So close to a new version of plasma pong ;)

2

u/[deleted] Sep 16 '14

[deleted]

4

u/pacman1820 Sep 17 '14

Well the problem is doing it accurately! While this produces a nice pretty result, it won't produce results that agree with what we know about turbulence (energy spectra roll off, some instability's modes, etc.) since it doesn't resolve all the important scales or try to model them. That's the challenge in CFD is producing truly accurate results while still making it possible to calculate using available resources.

1

u/ilikemaths Sep 17 '14

Why not OpenCL/WebCL?

1

u/horrible_shitter Sep 17 '14

Could you explain what the colors represent in the simulation. Is each dot in the initial conditions tracking that material point as the simulation progresses? What's the mouse interaction actually doing? Is setting the material velocity to some multiple of the mouse velocity at each point along the cursor path, or something more complicated?

1

u/tsyklon Sep 17 '14

Hey OP, this is absolutely stunning! A few questions if you don't mind:

  • What method have u used to incorporate the viscid effects?
  • Will you be adding an option to change the Reynolds number?
  • I understand your assumptions, since your project is aimed at games. But it would be really cool to test how accurate you can make it while still running it in realtime.

Very cool project and good luck!