
WebGL Fluid Simulation - maxraz
https://paveldogreat.github.io/WebGL-Fluid-Simulation/?play
======
andybak
I understand why real 3D fluid sim is much harder to do at reasonable speeds
than 2D but I wonder if there's a pseudo-3D version that would look good (I'm
especially thinking of VR here)

A few transparent layers to add depth? Or something akin to parallax occlusion
mapping?

EDIT - this Shadertoy is remarkably awesome despite only running on a
128x128x128 grid:
[https://www.shadertoy.com/view/wlG3RW](https://www.shadertoy.com/view/wlG3RW)

~~~
xioxox
There's this paper which describes a simplified fluid dynamics appropriate for
games: Real-Time Fluid Dynamics for Games by Jos Stam. You can find the paper
and implementations by searching. It's based around numerical stability and
speed, rather than accuracy. I think it would be interesting to put this into
a simcity-like game to get good air pollution maps.

I'm not sure if this WebGL page is based around this algorithm.

~~~
iainmerrick
What does that have to do with 3D versus 2D?

~~~
xioxox
3D is hard to do in real time as you have many more grid points. The method I
linked to is much faster than properly solving the fluid equations, so is
suitable for a 3D interactive simulation.

------
Wowfunhappy
On my iPhone 6S, I turned the quality up to high and played with the
simulation for around five minutes. It kept working smoothly, but holy crap,
I'm not sure if my phone has _ever_ been this hot!

Great work though, it's gorgeous!

------
elpocko
If anyone is interested, I made an implementation of this (based on the GPU
Gems article) in Lua using the LÖVE framework that adds a bunch of effects
like reflections, normal mapping and more.

[https://sixtyfour.itch.io/fluid](https://sixtyfour.itch.io/fluid)

~~~
ergwwrt
macOS?

~~~
elpocko
No.

~~~
jagged-chisel
It was fairly straightforward to get the .love running on macOS. I grabbed
Nuklear[1] and LÖVE-Nuklear[2], built [2] on macOS (had to point at Nuklear's
header), dropped the .so in your /bin, a one-line edit to main.lua,
repackaged, et voila!

Check my profile and drop me a line if you'd like.

1 - [https://github.com/vurtun/nuklear](https://github.com/vurtun/nuklear)

2 - [https://github.com/keharriso/love-
nuklear](https://github.com/keharriso/love-nuklear)

------
29athrowaway
This reminded me of a great game called Plasma Pong.

It was successful but unfortunately it was killed via a Cease and Desist
letter from the Pong people.

[https://en.wikipedia.org/wiki/Plasma_Pong](https://en.wikipedia.org/wiki/Plasma_Pong)

There's a web clone of it here:
[http://anirudhjoshi.github.io/fluid_table_tennis/](http://anirudhjoshi.github.io/fluid_table_tennis/)

~~~
koboll
One of the all-time great tripping activities, along with Rainbox
([http://www.axlrosen.net/rainbox/rainbox-
large.html](http://www.axlrosen.net/rainbox/rainbox-large.html)) and Audiosurf

------
RupertWiser
Feels so smooth on my iPhone. I’m aware these phones have pretty killer SOCs
but I couldn’t have imagined running this on something that fits in my pocket
15 years ago.

~~~
tobyhinloopen
To be fair, first gen iPad also had apps like this. Not 15 years but...

~~~
Wowfunhappy
It had apps like this, but I don't think there was anything as complex.

------
felixr
The author made this also into an iOS app:
[https://apps.apple.com/us/app/fluid-
simulation/id1443124993](https://apps.apple.com/us/app/fluid-
simulation/id1443124993)

~~~
felixr
And android:
[https://play.google.com/store/apps/details?id=games.paveldog...](https://play.google.com/store/apps/details?id=games.paveldogreat.fluidsimfree)

Also, last years discussion of this:

[https://news.ycombinator.com/item?id=19963640](https://news.ycombinator.com/item?id=19963640)

------
montebicyclelo
Beautiful! Would be awesome to have as a desktop background.

------
asadlionpk
Very impressive! Many years ago, I had made a fluid simulation (a different
kind):

[https://jsexperiments.herokuapp.com/sph/](https://jsexperiments.herokuapp.com/sph/)

Code: [https://github.com/asadm/SPHjs](https://github.com/asadm/SPHjs)

------
Jemm
Would love to see this as an audio visualizer.

~~~
Const-me
If you want to make one, and you know C++ and Direct3D 11, you can fork this
and implement one more effect: [https://github.com/Const-
me/vis_avs_dx](https://github.com/Const-me/vis_avs_dx)

It’s a plugin for old winamp so the music part is handled quite well there.
The code already uses non-trivial amount of compute shaders, e.g. gaussian
blur effect: [https://github.com/Const-
me/vis_avs_dx/tree/master/avs_dx/Dx...](https://github.com/Const-
me/vis_avs_dx/tree/master/avs_dx/DxVisuals/Effects/Trans/Blur)

------
microcolonel
The controller in the upper right hand does not support higher resolutions
directly, but you can edit higher resolutions into the select box and it'll
absolutely accept them. I was able to push it up to 2048 no problem, though it
is more interesting at 512 and 1024.

------
peignoir
Might use the “SIMPLE” navier stokes algorithm:
[https://en.m.wikipedia.org/wiki/SIMPLE_algorithm](https://en.m.wikipedia.org/wiki/SIMPLE_algorithm)

------
ergwwrt
Has anyone tried making any games or interactive music videos with this?

~~~
nothis
This is IMO a more relevant question than it seems. You'd think so, but it's
absurdly rare to see real-world uses of demo techniques like this (not only
talking about fluid-sims, here). I long wondered why this is (easy answer:
because it's hard).

These things are often designed to run _very_ efficiently and getting maximum
effect out of limited hardware and memory. It's perfect for, say, a small
indie game looking for a cool background effect or something. I'm sure there's
examples, but I couldn't even come up with one.

~~~
s-macke
The game PixelJunk Shooter [1] is a game that that takes advantage of fluid
dynamics. They use a technique called "Smoothed particle hydrodynamics".
Particle based techniques might be better suited for real time fluid dynamics.

[1]
[https://en.wikipedia.org/wiki/PixelJunk_Shooter](https://en.wikipedia.org/wiki/PixelJunk_Shooter)

------
neotek
The app is well worth downloading, and given how much time I've wasted just
futzing around in it, I was more than happy to pay a few bucks to unlock the
additional features. Really superb.

------
dang
Discussed last year:
[https://news.ycombinator.com/item?id=19963640](https://news.ycombinator.com/item?id=19963640)

------
saurik
I opened this website expecting very little, as I know Apple has refused to
deploy WebGL 2 (Apple is essentially always the stubborn bottleneck) and
particularly as I am still running iOS 12.

It was glorious. It was smooth and responsive and maybe-weirdly _fun_ to play
with given how simple of a toy this little demo of a website itself
represents. I had this momentary feeing of joy.

And then it popped up a dialog asking me to install an app. I think I want to
go cry now about how fucked up the world is and how it is no longer possible
to have good things on the web :(.

------
piyush_soni
Doesn't show anything in Firefox Developer Edition? (Works fine in
Chrome/Brave).

~~~
jillesvangurp
Works fine for me. I'm on 79.0

~~~
petepete
Me too, on Nightly/Android.

Tiny bit choppier than Chrome but fully working.

------
tobyhinloopen
My little one approves this app

------
imvetri
Screen on fire! Had a good fun

------
dmrackateer
This is really beautifull!!

------
runawaybottle
Would be interested in painting with this. Too much fun.

------
offsky
Could this be modified to make a lava lamp simulator?

------
ta17711771
Great multi-touch demo.

Be sure to turn up the quality and res.

------
win66
Made me smile. The colors are great! :)

