Hacker News new | past | comments | ask | show | jobs | submit login
WebGL Fluid Simulation (paveldogreat.github.io)
212 points by maxraz 9 days ago | hide | past | favorite | 50 comments

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

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.

The GitHub WebGL page is based on a GPU Gems article, which was based on Stable Fluids.

The ShaderToy 128³ cube appears to be quite different. I don't entirely follow what it's doing, but the pressure solve seems to be heavily simplified.

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

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.

Parallax occlusion mapping is quite heavy itself, though. Transparent layers stacked on top of each other are also quite expensive due to overdraw.

Probably the cheapest way to add a little bit of 3D-ness would be to write the fluid sim to a texture, use it as a height map, and sample the texture a second time while offsetting the uvs slightly based on height map and camera position. Still not a great solution, and would probably only work if it was a wall of fluid in front of you.

I recently came across EmberGen which seems to offer real-time volumetric fluid simulation [1] and I wonder what's driving it and whether it's down to the hardware, algorithm or something else?

1. https://youtu.be/iDqWLwYhd9Y

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!

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.


I am interested. Thank you very much. Out of curiosity, why LÖVE? For thr added features?

I'm just a big fan of Lua for its simplicity and power, especially LuaJIT. LÖVE makes excellent use of it.



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

2 - https://github.com/keharriso/love-nuklear

macOS is a PITA, maybe with MetalVK or ANGLE there could be less pain; but OpenGL is in a sad state on macOS ever since they started becoming territorial about GPU APIs.

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.


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

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

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.

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

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

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

I tried the app. Why isn’t the animation quality as nice as the web version?

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

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


Code: https://github.com/asadm/SPHjs

Would love to see this as an audio visualizer.

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

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...

Me too! I forked this and started annotating the code with Typescript types to understand it. My intention was to eventually make a music visualizer, but I paused work to focus on other things.


So much yes.

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.

Might use the “SIMPLE” navier stokes algorithm: https://en.m.wikipedia.org/wiki/SIMPLE_algorithm

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

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.

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

I wrote a game based on Jos Stam's Fluid Dynamics approach 2 years ago [1]. But without any GPU acceleration. It was also discussed on Hacker News [2]. There you can also find links of other computer games which uses fluid dynamics.

[1] https://github.com/s-macke/Interplanetary-Postal-Service

[2] https://news.ycombinator.com/item?id=17993933

https://sandspiel.club/ Uses fluid dynamics to simulate air flow

I forked this with the intention of adding a music visualizer. I never got around to the visualization part, but I did add a few more features, a Soundcloud player, and typescript type annotations:


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.

This is really beautifull!!

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 :(.

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

Works fine for me. I'm on 79.0

Me too, on Nightly/Android.

Tiny bit choppier than Chrome but fully working.

My little one approves this app

Screen on fire! Had a good fun

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

Could this be modified to make a lava lamp simulator?

Great multi-touch demo.

Be sure to turn up the quality and res.

Made me smile. The colors are great! :)

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact