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.
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?
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.
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.
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?
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.
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.
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!
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.
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.
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.
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 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.
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.
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:
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 :(.
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.
54 comments
[ 2.8 ms ] story [ 118 ms ] threadTiny bit choppier than Chrome but fully working.
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
I'm not sure if this WebGL page is based around this algorithm.
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.
1. https://youtu.be/iDqWLwYhd9Y
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.
Also, last years discussion of this:
https://news.ycombinator.com/item?id=19963640
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/justjake/WebGL-Fluid-Simulation
Great work though, it's gorgeous!
https://sixtyfour.itch.io/fluid
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
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.
[1] https://en.wikipedia.org/wiki/PixelJunk_Shooter
[1] https://github.com/s-macke/Interplanetary-Postal-Service
[2] https://news.ycombinator.com/item?id=17993933
https://github.com/justjake/WebGL-Fluid-Simulation
Be sure to turn up the quality and res.
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
There's a web clone of it here: http://anirudhjoshi.github.io/fluid_table_tennis/
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 :(.
https://jsexperiments.herokuapp.com/sph/
Code: https://github.com/asadm/SPHjs