WebGL Fluid Experiment (2014)
haxiomic.github.ioHey, I feel bad for not updating this demo in 6 years! Back then it wouldn't run on iOS, today it could run with no trouble
For people on iOS, here's another version with rainbow colors and multi-touch https://haxiomic.github.io/demos/rainbow-fluid/index.html
If you like this sort of thing and want to learn more about it I recommend checking out https://www.shadertoy.com/ for more demos and https://thebookofshaders.com/ for tutorials
And if GPU simulations is your thing then I think you'll enjoy what these two amazing guys are doing with shaders:
FWIW the rainbow link gives this console error in Firefox on a Surface Book with Intel graphics:
I assume that means it doesn't support 16-bit float pixel formats; maybe this is something that could be detected and shown as an error message in the page?Uncaught TypeError: rgHalfFloatLinear is nullThe original HN link works great, though, very cool!
Ahh that's a shame, yeah looks like 16-bit float textures aren't supported but 32 bit are. Thanks for the heads up – I should really be checking if either are supported here!
This is beautiful. Can you say how this is different from [0] if at all in terms of implementation?
Similar implementation from a physics perspective – Pavel uses the same technique for simulating Navier–Stokes (Jo Stam Real-Time Fluid Dynamics for Games [0]). Pavel's has an extra step to enhance vorticity which gives you those higher detail swirls and uses a slightly different approach for input
The big difference is in the rendering however, Pavel has added light shafts and bloom which are really neat effects. Additionally, he actually got round to publishing a native app which I think has been great for him!
[0] https://pdfs.semanticscholar.org/847f/819a4ea14bd789aca8bc88...
The iOS demo is amazing and I’m shocked no one is saying so! Thanks for making it.
Is the code up anywhere?
Hey :), full code isn't up yet but I can share the color pattern:
http://thebookofshaders.com/edit.php?log=200806194314
The technique is called "sine puke", and it works by starting with a gradient (in this case a rainbow) and warping the domain when drawing that gradient by sine functions repeatedly (check the for loop)
In the fluid demo I blend new frames with the previous so you get this slower, softer pattern
At first I expected this to be some new version, but nope, it's the original. I love that this repo[0] hasn't been touched significantly in 6 years and it's still going strong.
Given that the original commit is clearly a giant copy&pasta from somewhere else, not surprised there is little development or changes as time goes on
Oh, my bad, this the copy&pasta one https://paveldogreat.github.io/WebGL-Fluid-Simulation/
Trying to figure out what you are suggesting with the copy/paste stuff. I looked at the first few commits in both the PavelDoGreat repo and the haxiomic repo and see no obvious signs of copypaste. PavelDoGreat's initial commits start with initializing WebGL, seems reasonable. haxiomic's starts with a README and then a code drop, again, doesn't seem too unexpected. I also doubt one took from the other since one is Haxe and the other is JS.
That's the one I was thinking of, thank you.
This is fantastic. Runs really smooth, the color and design looks wonderful. I could lose few afternoons playing with this thing.
Looking forward to the app. Would be fun to manipulate the sim by moving my iPad around.
Potentially fun ideas...
Allow me to place shapes/blocks down and lock them in place to see how the fluid moves around them.
Let me put a small 'pump' in the liquid to keep constant or pulsed movement. add a couple dials for pump speed, etc. I want to put two pumps facing one another and watch the interaction where they meet.
Different pool shapes - round, star, sphere?
Allow for particles to reach the edge of the pool to fall off and then let me drop new ones into flowing water.
Loads of fun. Thank you!
There is also this one, and the corresponding iOS app (which I have.) It seems to run a bit faster on my phone.
The README links to the original as a reference!
Nice, the effect reminds me of Powder Game (https://dan-ball.jp/en/javagame/dust/)
At least give me some warning before you link to it; I'm gonna be playing it all day today :)
Man there was some game similar to this called Sand Sand Sand, that I was totally addicted to. I showed my kid recently and he loved it too, timeless fun!
There’s also the stand alone Powder Toy which has more powders and saves and such
And the modern web-based incarnation Sandspiel, which was extremely popular on HN a while ago: https://news.ycombinator.com/item?id=18696291
Awesome!
Tangentially related: For a long time I've always been looking for some software for particle simulations that is free or even open source, easy to get started, and at least somewhat visual. I'm not doing anything like that professionally, just want to play around with a virtual wind tunnel for the fun of it. I'm thinking of something like Blender where I would click together a 3d mesh, "turn on" wind and see what happens.
Does anyone have tips or hints? Are my expectations perhaps unrealistic? I looked into OpenFOAM before but always eventually gave up, as it seems quite heavy on headless, scripted simulation, and would need some significant run-up time.
Specifically for fluid (and similar) you could have a play with mantaflow http://mantaflow.com/ it's relatively easy to build (you will need Qt and Python). Houdini (free apprentice version will work for fun) is great for particle effects and this sort of stuff as well https://www.sidefx.com/
Associate professor in fluid dynamics here. There is typically a split between the people who want good looking simulations for movies/games, and those who need accurate results for engineering. For engineering, you need more effort on how you resolve the complex geometry and how you model the turbulence in the flow. This adds significant complexity both for problem setup and solution time. The only product I’m aware of that is built for real-time, 3D flow design is Ansys Discovery: https://www.ansys.com/products/3d-design/ansys-discovery
OpenFOAM is high quality, but as you’ve seen complex to use. There is a web-based GUI that can lighten the burden to get started somewhat: https://www.simscale.com/ I think they give you ~3000 simulation hours for a trial.
I've been trying to figure out where I should place a shelter belt on my property, as I've heard that the wind will rise up over the belt and then "dump" downwards. I don't want to position the belt so that the wind dumps on my house. I think it's essentially a fluid dynamics problem (I say this as decidedly not an engineer).
I've only looked half-heartedly, but found nothing that can help me.
Damn, the performance on that is really impressive.
It reminds me of http://minimal.be/lab/fluGL/index80000.html
Would be even more fun if such things (including the Powder Game) were also affected by device orientation/gyroscope/accelerometers.
all these simulators out there and still not one remake of plasma pong
http://anirudhjoshi.github.io/fluid_table_tennis/
No good for mobile, but perhaps someone could fix that.
There's a paid Android app linked from that page. You are technically correct that the [free] webpage indeed not work on mobile.
I'm fine with non free thanks both for the links and the tips!
I truly miss this game sometimes. Is it still available anywhere?
The rights owners for pong (Atari?) had it and any mirrors they could find taken down.
A quick search suggests that there are downloadable copies out there. 1.3c was the latest release. Check WayBackMachine from 2007-Sep-13 (https://web.archive.org/web/20070913204145/http://www.plasma...) or older if you want more info, after that the site is an "Atari told us to take this down" message for a while and is currently held by someone else talking about other games.
Discussed at the time: https://news.ycombinator.com/item?id=8502477
just out of curiousity, but how does the algorithm roughly works. does every pixel/particle position gets calculated? or is it optimized by smart grouping? is the GPU used for paralell computing? very interesting stuff to heavily optimize I guess.
The title seems to imply that it needs a touch screen device. It seems to work just fine on my desktop with a mouse.
i'm constantly amazed at what can be done with webgl these day (shame about the iOS support). surprised we don't see more immersive games with this tech!
Doesn’t support iOS
Here’s one that works on iOS. It also has an app. https://paveldogreat.github.io/WebGL-Fluid-Simulation/
Or does iOS not support it?
ha ha ha, outer space is a simulated fluid.
with that assumption, it gets easier to build an eye observing an eye....observing an eye observing a thing.
Neural network learning models are good, but it scales well only when NN watches a NN watching an NN being trained with a data.
To be sure that you're not a NN yourself, I should require you to draw a triangle.
[Triangle is distorted by unseen fluid]
Triangle connected by three eyes.
With 60° fields of view :D
That's very fun and relaxing!
Therapeutic... I mean really.
iOS not supported. Ridiculous that iOS doesn’t support WebGL 2.0
Very satisfying effect.
beautifully made!