
WebGL Fluid Simulation - joshdance
https://paveldogreat.github.io/WebGL-Fluid-Simulation/
======
xyproto
I tried this on my mobile phone, expecting it to not work properly, but
everything was super-smooth. Impressive.

~~~
ricardobeat
Yes, works beautifully on mobile! Even supports multi-touch. Awesome job.

~~~
yellowapple
Holy heck it does. Just tried five fingers and it worked flawlessly.

------
stabbles
Amazing project!

For what it's worth, the Github page references to the GPU Gems book for this
effect:
[http://developer.download.nvidia.com/books/HTML/gpugems/gpug...](http://developer.download.nvidia.com/books/HTML/gpugems/gpugems_ch38.html)

------
martinpw
Every so often you get an app that shows you just how fast modern hardware is
when unencumbered by the usual endless layers of bloat and inefficiency.

~~~
jahewson
To be fair this shader was published in GPU Gems 15 years ago (2004). Back in
the days of the GeForce 6 and Windows XP. Though the fact that it now fits in
your pocket is cool.

~~~
kyberias
That is actually amazing. I mean the fact about 2004.

~~~
enriquto
Yes, we were such illiterate savages back then.

------
alkonaut
Re: everyone impressed by how fluid it is with multitouch: The number of touch
points doesn't affect the performance of a grid simulation. Using 10 fingers
just sets high values at more places in the initial grid. The effort to solve
each time step is the same after that. The computational effort scales with
the resolution, not the boundary conditions/input.

~~~
DecoPerson
I'm impressed it handles multitouch without scrolling or zooming the page.
Many similar demos I've tried suffer from such issues.

~~~
alkonaut
That's true. The actual UI implementation of the multitouch is great.

------
Rapzid
Default settings don't really do it justice IMHO. Try these:

Density diffusion: just a hair under 1(visually)

velocity diffusion: 0.99

pressure: 0.93

vorticity: 5

~~~
noisy_boy
I also tried high Density Diffusion - loved the slower movement and that made
me think - only if there was a way to export that to a something like a moving
wallpaper that I could set to my Ubuntu desktop.

Also, just setting Density Diffusion to 1 and leaving makes the movement slow
enough to be able to screenshot nice wallpapers.

~~~
duxup
Remember Microsoft's old "Active Desktop"?

It was like a webpage as a wall paper.

Maybe ahead of it's time as it crashed constantly...

~~~
noisy_boy
I do. Coming from Win 3.1 and due to restrictions on internet connectivity in
our office then, at first I had no idea how to use it and thought it was some
advanced feature.

------
batmansmk
Impressive demo! WebGL is an awesome piece of tech that only now starts to be
largely adopted. I mean, it gives you access to 100s of cores to compute, run,
display stuff :).

Too bad Apple doesn't move forward with WebGL2 and Google splits the community
in 2 with webgpu.

~~~
kbumsik
But WebGPU is more like Vulkan (in concepts) and WebGL is pretty much a 1-to-1
port of OpenGL.

It's not splitting the community. They needed a new modern API like what
people behind Vulkan did.

~~~
batmansmk
95% of the current games use OpenGL / DirectX 11 over Vulkan/ DirectX 12.
Vulkan seems to be a nice to have with lots of potential in my opinion. I have
yet to find a killer use case for Vulkan, on the web in particular.

With WebGL, in my current projects, the limiting factors are the network,
javascript and RAM more than the opengl driver overhead...Maybe the reason
behind it is to find common grounds with Apple and supports several investment
around Stadia's core technologies?

~~~
pjmlp
You are missing NVN, GX2, libGNM and libGCN there, as OpenGL isn't a thing on
consoles.

------
ivan_ah
Here is the "main loop" for the simulation:
[https://github.com/PavelDoGreat/WebGL-Fluid-
Simulation/blob/...](https://github.com/PavelDoGreat/WebGL-Fluid-
Simulation/blob/master/script.js#L1005-L1071)

I don't know enough about fluid dynamics to be the judge, but it seems like
the engine is using genuine (2D) physics and it's not just "toy physics."
Could someone who knows fluid mechanics comment on this?

~~~
keldaris
Sure. It's a correct implementation of the projection method [1] for solving
the 2D incompressible Navier-Stokes equations, so it is in fact using genuine
physics. In terms of physical accuracy, there are some caveats - it's using
the Jacobi method (chosen for its simplicity) to iteratively solve the
diffusion and pressure Poisson equations, so the accuracy will be determined
by how many iterations you're willing to do. That approach won't scale to
larger systems. There are also some limitations from the choice of collocated
(as opposed to staggered) grids and the approximations used for the boundary
conditions. Nevertheless, for a small 2D simulation, you can get physically
accurate results as long as you use enough Jacobi iterations and have a
sufficiently fine grid.

[1]
[https://en.wikipedia.org/wiki/Projection_method_(fluid_dynam...](https://en.wikipedia.org/wiki/Projection_method_\(fluid_dynamics\))

~~~
petschge
Also it uses backward differencing, it makes it stable at long timesteps. That
is great to run fast for visualization, but it is horribly inaccurate (or
possibly even plain wrong) if your system has large gradients in flow speed.

~~~
btrettel
Yes, I've found that computer graphics focused fluid simulations frequently
choose stability over physical accuracy. These choices also result in
unphysically high numerical viscosity. (I didn't check what finite difference
stencil or finite volume scheme the code uses, though I presume it's a lower
order accurate one that probably has a fair amount of numerical viscosity.) In
principle if you reduce the grid spacing and time step it will converge
provided the software doesn't use any tricks like approximate square roots,
etc.

The numerical methods for solving the PDEs that computer graphics folks use
would surely be considered primitive by someone who develops engineering
computational fluid dynamics softwares.

~~~
petschge
Don't get me wrong: Doing all the approximations to get a fast, visually
appealing animation is perfect for what this demo aims to do.

Fluid simulations for science or engineering (think airflow around the next
Boeing design or simulations of planet formation) are still very hard. And
that is not because physicists are stupid, bad at coding or easily replaced
with machine learning.

~~~
btrettel
Sorry, I was unclear. I agree that the demo does what it intended to do. I was
just listing a few additional reasons to believe it may not be physically
accurate as-is. I know from previous discussions on HN that many readers are
interested in this.

~~~
petschge
Totally good idea to do that. I just want other readers to be aware for what
applications that is useful and for what applications other techniques are
more appropriate.

------
julioneander
Reminds me of those cool visualisations that Winamp had, think they were
called Milkdrop?

~~~
codetrotter
There is also the open source reimplementation of Milkdrop called projectM,
which might be of interest to you.

[https://github.com/projectM-visualizer/projectm](https://github.com/projectM-
visualizer/projectm)

------
programmarchy
I clicked this thinking "yet another fluid simulation" but this is _super_
cool. Played with every single parameter ;) Pausing, then drawing, then
unpausing was a surprisingly pleasant effect.

------
joak
Really beautiful !

To have it full screen on mobile, you can use the "add to home screen" feature
of your browser"

------
tlarkworthy
The webpage links to an app which allows this to be your wallpaper and lock
screen (on Android for sure). Absolutely awesome!

------
donutdan4114
This is my favorite app on my iPhone. Better than a fidget spinner.

~~~
lph
Your comment inspired me to install the iphone app. My kids (2 and 4) are
going to looooove this. Thanks!

------
goda90
Cranking all the values up to max makes for quite the show.

------
nickporter
If you guys like this, you'll like Verve (fluid dynamics painting tool):

[https://www.taron.de/verve/verve_download.html](https://www.taron.de/verve/verve_download.html)

------
jspdown
Such a nice demo! I'm amazed by how smooth it's running on my phone. Even if
we already have seen similar shaders back in 2004, this is running on the web,
available to everyone, with no installation.

During my 3rd year at uni I played with webgl1 to create a fake fluid
simulation, my demo looks crap nowadays
[http://jspdown.github.io/mod1/](http://jspdown.github.io/mod1/)

------
ohiovr
This works with decent smoothness even on my 8 year old 35 dollar iphone 4s.

I met a fellow at Nasa Glen in the 90s that worked on fluid simulations using
an sgi workstation. I don’t remember how long the simulations took to process
but had to be several minutes per frame. I do remember those workstations cost
well over 30 grand at the time.

------
dharma1
Thought the tails/vortex look like curl noise. And after looking at the
source, sure enough they are

------
z3t4
Colors are amazing. It's weird it triggered smell and feelings from 15-20
years old memories.

------
ElijahLynn
WOW! Not only is it FAST, it does multi-touch too! Successfully did 4 fingers
already, although saw it somewhat slow down but not much.

On a beefy system this could probably handle the full 10 point touch no
problem!

I am doing this on a desktop (Arch + Gnome 3) with an Acer touch display.

Well done!

~~~
ehsankia
Woah, you're right. I just tried it on my Pixelbook screen (keep forgetting
it's touch screen), and it handling as many fingers as I could give it (all
10) with no lag.

~~~
noio
I'm guessing the number of inputs doesn't really influence simulation speed
since the shader runs each frame for each pixel anyway. When touching the
screen, some pixels are changed to hot/colored, but that doesn't really change
the amount of computation needed to simulate the whole screen.

------
mattxxx
This is so nice! The pause box makes the whole demo flex really well.
Impressive work

------
haolez
Although this is just a demo, it's really fun to use! Relaxing, even! Well
done.

------
joaomacp
This is gorgeous. It gives me a sense of joy and power when creating the
vortices. The white glow seems to burn my eyes, even when I know my screen is
not that bright. Feels like I'm a wizard.

Thanks to the creator.

------
callesgg
Super cool on iPad

It can track 10 fingers at once did not even know the iPad could do that.

~~~
mfatica
Does it go to 11?

~~~
DonHopkins
That's not a finger.

------
holoduke
Wow so cool. Any summary on how the algorithm works roughly?

~~~
starpilot
The repo refers to this article:
[http://developer.download.nvidia.com/books/HTML/gpugems/gpug...](http://developer.download.nvidia.com/books/HTML/gpugems/gpugems_ch38.html)

Looks like it's standard Navier-Stokes.

~~~
petschge
Not quite standard. The trick is to use backward differencing in time, to make
it unconditionally stable even for longer time steps. Also the Poisson
equation to get the pressure is only solved approximately by doing Jacobi
iterations until the solution is "good enough". And of course it is limited to
2d and the incompressible limit.

------
SeriousM
RIP Plasma Pong. Was bought by acclaim but was never sold..

------
slx26
this keeps reappearing, but it never gets old

just a random recommendation: I love to connect this from a laptop to a TV
screen, connect a wireless/long cable mouse, and play it with my cousins /
little kids. it's a one time trick, but they always love it. (you can do the
same with other programs / simulations, just enhancing the experience a little
bit can do wonders)

------
vturner
Super cool on Firefox on Moto X4! Five fingers!

------
jcims
Whoa this is jaw dropping on mobile. Try typing in a density diffusion of .996
and setting velocity diffusion to 1

------
nkrisc
Add a fullscreen mode and I think this will keep my toddler entertained on
occasion.

------
Areading314
Nicely done. It's impressive how fluid and detailed the graphics are!

------
transitivebs
Here's a React version of the above simulation:
[https://github.com/transitive-bullshit/react-fluid-
animation](https://github.com/transitive-bullshit/react-fluid-animation)

------
joeldo
Impressive! Works well even with 10 fingers on my touch screen.

------
nojvek
Just makes you appreciate how impressive modern hardware is.

------
timvisee
Wow, this is so... fluid! Even on a mobile device.

------
BeefySwain
Does not seem to work on Firefox 66.0.5

~~~
skunkworker
Works just fine on 66.0.5 for me (On MacOS).

~~~
weavie
Firefox 66.0.5 on Ubuntu checking in.

------
emilfihlman
Screenshot capture fails, the download fails with network error. No errors are
reported in console or the network tab.

------
trollied
My cat loves this on the iPad

------
duxup
I could do this all day....

------
doyoulikeworms
this is gorgeous!!

------
daveheq
I AM A WIZARD

------
gulperxcx
The effects are very slow on chrome v74, but super smooth in FF v66. I suppose
that's Electrolysis[1] in action.

[1]
[https://wiki.mozilla.org/Electrolysis#Overview](https://wiki.mozilla.org/Electrolysis#Overview)

~~~
TazeTSchnitzel
Check chrome://gpu

~~~
gulperxcx
[https://pastebin.com/LDMjLWgn](https://pastebin.com/LDMjLWgn)

I suspect the nouveau video driver is the culprit.

I'm currently using Ubuntu 18.04

