13 ms·
WebGL Fluid Simulation
- RupertWiser 6y agoFeels 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 6y agoTo be fair, first gen iPad also had apps like this. Not 15 years but...
- Wowfunhappy 6y agoIt had apps like this, but I don't think there was anything as complex.
- tobyhinloopen 6y agoMy little one approves this app
- runawaybottle 6y agoWould be interested in painting with this. Too much fun.
- piyush_soni 6y agoDoesn't show anything in Firefox Developer Edition? (Works fine in Chrome/Brave).
- jillesvangurp 6y agoWorks fine for me. I'm on 79.0
- petepete 6y agoMe too, on Nightly/Android. Tiny bit choppier than Chrome but fully working.
- montebicyclelo 6y agoBeautiful! Would be awesome to have as a desktop background.
- imvetri 6y agoScreen on fire! Had a good fun
- andybak 6y agoI 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 6y agoThere'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 6y agoWhat does that have to do with 3D versus 2D?
- xioxox 6y ago3D 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.
- slavik81 6y agoThe 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.
- imjasonmiller 6y agoI 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 https://youtu.be/iDqWLwYhd9Y
- felixr 6y agoThe 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 6y agoAnd android: https://play.google.com/store/apps/details?id=games.paveldogreat.fluidsimfree https://play.google.com/store/apps/details?id=games.paveldog... Also, last years discussion of this: https://news.ycombinator.com/item?id=19963640 https://news.ycombinator.com/item?id=19963640
- TruthSHIFT 6y agoI tried the app. Why isn’t the animation quality as nice as the web version?
- Jemm 6y agoWould love to see this as an audio visualizer.
- sam1r 6y agoSo much yes.
- Const-me 6y agoIf 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/DxVisuals/Effects/Trans/Blur https://github.com/Const-me/vis_avs_dx/tree/master/avs_dx/Dx...
- jitl 6y agoMe 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. https://github.com/justjake/WebGL-Fluid-Simulation https://github.com/justjake/WebGL-Fluid-Simulation
- Wowfunhappy 6y agoOn 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 6y agoIf 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
- fartcannon 6y agoI am interested. Thank you very much. Out of curiosity, why LÖVE? For thr added features?
- elpocko 6y agoI'm just a big fan of Lua for its simplicity and power, especially LuaJIT. LÖVE makes excellent use of it.
- ergwwrt 6y agomacOS?
- elpocko 6y agoNo.
- jagged-chisel 6y agoIt 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
- microcolonel 6y agomacOS 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.
- deleted 6y ago[deleted]
- neotek 6y agoThe 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.
- ergwwrt 6y agoHas anyone tried making any games or interactive music videos with this?
- nothis 6y agoThis 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 6y agoThe 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
- bouk 6y agohttps://sandspiel.club/ https://sandspiel.club/ Uses fluid dynamics to simulate air flow
- deleted 6y ago[deleted]
- s-macke 6y agoI 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 https://github.com/s-macke/Interplanetary-Postal-Service [2] https://news.ycombinator.com/item?id=17993933 https://news.ycombinator.com/item?id=17993933
- 6y ago
- ta17711771 6y agoGreat multi-touch demo. Be sure to turn up the quality and res.
- offsky 6y agoCould this be modified to make a lava lamp simulator?
- 29athrowaway 6y agoThis 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 6y agoOne 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
- win66 6y agoMade me smile. The colors are great! :)
- peignoir 6y agoMight use the “SIMPLE” navier stokes algorithm: https://en.m.wikipedia.org/wiki/SIMPLE_algorithm https://en.m.wikipedia.org/wiki/SIMPLE_algorithm
- saurik 6y agoI 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 :(.
- iphone_elegance 6y agois this posted like every other sunday?
- dang 6y agoDiscussed last year: https://news.ycombinator.com/item?id=19963640 https://news.ycombinator.com/item?id=19963640
- microcolonel 6y agoThe 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.
- asadlionpk 6y agoVery 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
- deleted 6y ago[deleted]
- dmrackateer 6y agoThis is really beautifull!!