11 ms·
WebGL Fluid Simulation
- alkonaut 7y agoRe: everyone impressed by how fluid it is with multitouch: The number of touch points doesn't affect the performance of a grid simulation. Using 10 fingers just sets high values at more places in the initial grid. The effort to solve each time step is the same after that. The computational effort scales with the resolution, not the boundary conditions/input.
- DecoPerson 7y agoI'm impressed it handles multitouch without scrolling or zooming the page. Many similar demos I've tried suffer from such issues.
- alkonaut 7y agoThat's true. The actual UI implementation of the multitouch is great.
- jcims 7y agoIt could be in part because the default settings don't let you see the persistent levels of turbulence throughout the entire grid. Set the density to .996 and velocity to 1 and vorticity high and you'll see just how crazy it can get.
- xyproto 7y agoI tried this on my mobile phone, expecting it to not work properly, but everything was super-smooth. Impressive.
- ricardobeat 7y agoYes, works beautifully on mobile! Even supports multi-touch. Awesome job.
- deleted 7y ago[deleted]
- yellowapple 7y agoHoly heck it does. Just tried five fingers and it worked flawlessly.
- vvoyer 7y agoThere's even an app based on the experiment: https://itunes.apple.com/us/app/fluid-simulation/id1443124993 https://itunes.apple.com/us/app/fluid-simulation/id144312499...
- z303 7y agoand for Android: https://play.google.com/store/apps/details?id=games.paveldogreat.fluidsimfree https://play.google.com/store/apps/details?id=games.paveldog...
- onion2k 7y agoMobile phones have quite powerful GPUs even on the lower end devices. Many are based on ARM's Mali GPU series that has up to 28 shader cores. That's not going to compete with the hundreds of cores than a PC GPU has available but it's more than enough for a straightforward (but still very impressive) WebGL shader like the one in the link.
- ct520 7y agoI know right. So then I tried multi touch on my iPhone. Five fingers smooth as can be..
- snazz 7y agoYou can crank up both resolutions to maximum on a recent mobile device and expect 60 FPS. That plus all 10 fingers on an iPad looks pretty cool.
- jxramos 7y agoIndeed! I was doing a five finger control too and made quite a whirlwind of light.
- hyperpallium 7y agoNot on my older phone which lacks OpenGL ES 3.2, usually needed by these webgl fluid sims (they compute by rendering to a float texture). A simpler one, and without fancy lighting, but with a code walkthrough/tute http://jamie-wong.com/2016/08/05/webgl-fluid-simulation/ http://jamie-wong.com/2016/08/05/webgl-fluid-simulation/ ... also doesn't work on my phone. :(
- stabbles 7y agoAmazing project! For what it's worth, the Github page references to the GPU Gems book for this effect: http://developer.download.nvidia.com/books/HTML/gpugems/gpugems_ch38.html http://developer.download.nvidia.com/books/HTML/gpugems/gpug...
- goda90 7y agoCranking all the values up to max makes for quite the show.
- joak 7y agoReally beautiful ! To have it full screen on mobile, you can use the "add to home screen" feature of your browser"
- BeefySwain 7y agoDoes not seem to work on Firefox 66.0.5
- skunkworker 7y agoWorks just fine on 66.0.5 for me (On MacOS).
- weavie 7y agoFirefox 66.0.5 on Ubuntu checking in.
- mrec 7y agoFine for me, same exact version, Win7. Gorgeous and silky smooth at 1920x1080 on my 8-year-old laptop's crappy Intel GPU. This is really beautiful work.
- niyaven 7y agoWorks fine with Firefox 66.0.5 and Win10. Maybe some custom settings in about:config are interfering?
- hippish 7y agoIt depends on google analytics and will break unless ga() is defined. Most adblockers spoof it for you, but if you're only blocking requests to trackers the javascript will fail. (eg pi-hole, uMatrix)
- donutdan4114 7y agoThis is my favorite app on my iPhone. Better than a fidget spinner.
- lph 7y agoYour comment inspired me to install the iphone app. My kids (2 and 4) are going to looooove this. Thanks!
- tlarkworthy 7y agoThe webpage links to an app which allows this to be your wallpaper and lock screen (on Android for sure). Absolutely awesome!
- Areading314 7y agoNicely done. It's impressive how fluid and detailed the graphics are!
- callesgg 7y agoSuper cool on iPad It can track 10 fingers at once did not even know the iPad could do that.
- mfatica 7y agoDoes it go to 11?
- DonHopkins 7y agoThat's not a finger.
- deleted 7y ago[deleted]
- julioneander 7y agoReminds me of those cool visualisations that Winamp had, think they were called Milkdrop?
- AceJohnny2 7y agoIndeed: http://www.geisswerks.com/milkdrop/ http://www.geisswerks.com/milkdrop/ Ryan Geiss' website has some other cool stuff he's worked on: http://www.geisswerks.com http://www.geisswerks.com
- codetrotter 7y agoThere is also the open source reimplementation of Milkdrop called projectM, which might be of interest to you. https://github.com/projectM-visualizer/projectm https://github.com/projectM-visualizer/projectm
- Const-me 7y agoI’ve once tried to port AVS to GPU: https://github.com/Const-me/vis_avs_dx https://github.com/Const-me/vis_avs_dx Already runs ~half of built-in presets. If I’ll have time for that, maybe I should add custom D3D-specific effects there that weren’t there in the original version. Fluid simulation is one of them. BTW it’s easier to implement with compute shaders. WebGL only support them on Chrome/Chromium and only on desktops, that’s why OP used some trickery with fragment shaders instead.
- gulperxcx 7y agoThe effects are very slow on chrome v74, but super smooth in FF v66. I suppose that's Electrolysis[1] in action. [1] https://wiki.mozilla.org/Electrolysis#Overview https://wiki.mozilla.org/Electrolysis#Overview
- frizkie 7y agoI'm on Chrome v74, and the effects are buttery smooth, even at max resolution.
- TazeTSchnitzel 7y agoCheck chrome://gpu
- gulperxcx 7y agohttps://pastebin.com/LDMjLWgn https://pastebin.com/LDMjLWgn I suspect the nouveau video driver is the culprit. I'm currently using Ubuntu 18.04
- rnotaro 7y agoIt's perfectly fluid on my 74.0.3729.157 (Official Build) (64-bit) set-up.
- ElijahLynn 7y agoWOW! Not only is it FAST, it does multi-touch too! Successfully did 4 fingers already, although saw it somewhat slow down but not much. On a beefy system this could probably handle the full 10 point touch no problem! I am doing this on a desktop (Arch + Gnome 3) with an Acer touch display. Well done!
- ehsankia 7y agoWoah, you're right. I just tried it on my Pixelbook screen (keep forgetting it's touch screen), and it handling as many fingers as I could give it (all 10) with no lag.
- noio 7y agoI'm guessing the number of inputs doesn't really influence simulation speed since the shader runs each frame for each pixel anyway. When touching the screen, some pixels are changed to hot/colored, but that doesn't really change the amount of computation needed to simulate the whole screen.
- damuellen 7y ago10 fingers on ipad pro, no slow down.
- tgb 7y agoI'd be a little surprised if multittouch affected performance significantly. It's probably simulating and rendering every cell every frame regardless. I couldn't notice a slowdown on my phone with five fingers.
- holoduke 7y agoWow so cool. Any summary on how the algorithm works roughly?
- starpilot 7y agoThe repo refers to this article: http://developer.download.nvidia.com/books/HTML/gpugems/gpugems_ch38.html http://developer.download.nvidia.com/books/HTML/gpugems/gpug... Looks like it's standard Navier-Stokes.
- theoh 7y agoIf it's based on that, it's essentially an implementation of Jos Stam's "stable fluids" which actually uses some tricks to get plausible results. http://www.dgp.toronto.edu/people/stam/reality/Research/pdf/ns.pdf http://www.dgp.toronto.edu/people/stam/reality/Research/pdf/...
- petschge 7y agoNot quite standard. The trick is to use backward differencing in time, to make it unconditionally stable even for longer time steps. Also the Poisson equation to get the pressure is only solved approximately by doing Jacobi iterations until the solution is "good enough". And of course it is limited to 2d and the incompressible limit.
- joaomacp 7y agoThis is gorgeous. It gives me a sense of joy and power when creating the vortices. The white glow seems to burn my eyes, even when I know my screen is not that bright. Feels like I'm a wizard. Thanks to the creator.
- jcims 7y agoWhoa this is jaw dropping on mobile. Try typing in a density diffusion of .996 and setting velocity diffusion to 1
- martinpw 7y agoEvery so often you get an app that shows you just how fast modern hardware is when unencumbered by the usual endless layers of bloat and inefficiency.
- jahewson 7y agoTo be fair this shader was published in GPU Gems 15 years ago (2004). Back in the days of the GeForce 6 and Windows XP. Though the fact that it now fits in your pocket is cool.
- antoineMoPa 7y agoTo be fair, 2D fluid simulation represents a small quantity of very parallelisable math statements.
- VMG 7y agoIronically OpenGL programming is also often slammed here for being overly verbose and complicated
- afiori 7y agoAs far as I understand it is criticized as having too much hidden state, for a simple (but impressive) application like this it would not be an issue.
- haolez 7y agoAlthough this is just a demo, it's really fun to use! Relaxing, even! Well done.
- vturner 7y agoSuper cool on Firefox on Moto X4! Five fingers!
- joeldo 7y agoImpressive! Works well even with 10 fingers on my touch screen.
- batmansmk 7y agoImpressive demo! WebGL is an awesome piece of tech that only now starts to be largely adopted. I mean, it gives you access to 100s of cores to compute, run, display stuff :). Too bad Apple doesn't move forward with WebGL2 and Google splits the community in 2 with webgpu.
- soup10 7y agoApple has never embraced gaming in any serious way
- pjmlp 7y agoVRML, QuickTime, ActiveX and Flash did it first. WebGL while impressive, still fails to keep up with what native 3D APIs are capable of.
- kbumsik 7y agoBut WebGPU is more like Vulkan (in concepts) and WebGL is pretty much a 1-to-1 port of OpenGL. It's not splitting the community. They needed a new modern API like what people behind Vulkan did.
- pjmlp 7y agoWebGL is kind of OpenGL ES 2.0 and 3.0 subset port, not 1-to-1. And OpenGL ES is already at 3.2.
- batmansmk 7y ago95% of the current games use OpenGL / DirectX 11 over Vulkan/ DirectX 12. Vulkan seems to be a nice to have with lots of potential in my opinion. I have yet to find a killer use case for Vulkan, on the web in particular. With WebGL, in my current projects, the limiting factors are the network, javascript and RAM more than the opengl driver overhead...Maybe the reason behind it is to find common grounds with Apple and supports several investment around Stadia's core technologies?
- pjmlp 7y ago
- ivan_ah 7y agoHere is the "main loop" for the simulation: https://github.com/PavelDoGreat/WebGL-Fluid-Simulation/blob/master/script.js#L1005-L1071 https://github.com/PavelDoGreat/WebGL-Fluid-Simulation/blob/... I don't know enough about fluid dynamics to be the judge, but it seems like the engine is using genuine (2D) physics and it's not just "toy physics." Could someone who knows fluid mechanics comment on this?
- keldaris 7y agoSure. It's a correct implementation of the projection method [1] for solving the 2D incompressible Navier-Stokes equations, so it is in fact using genuine physics. In terms of physical accuracy, there are some caveats - it's using the Jacobi method (chosen for its simplicity) to iteratively solve the diffusion and pressure Poisson equations, so the accuracy will be determined by how many iterations you're willing to do. That approach won't scale to larger systems. There are also some limitations from the choice of collocated (as opposed to staggered) grids and the approximations used for the boundary conditions. Nevertheless, for a small 2D simulation, you can get physically accurate results as long as you use enough Jacobi iterations and have a sufficiently fine grid. [1] https://en.wikipedia.org/wiki/Projection_method_(fluid_dynamics) https://en.wikipedia.org/wiki/Projection_method_(fluid_dynam...
- petschge 7y agoAlso it uses backward differencing, it makes it stable at long timesteps. That is great to run fast for visualization, but it is horribly inaccurate (or possibly even plain wrong) if your system has large gradients in flow speed.
- btrettel 7y agoYes, I've found that computer graphics focused fluid simulations frequently choose stability over physical accuracy. These choices also result in unphysically high numerical viscosity. (I didn't check what finite difference stencil or finite volume scheme the code uses, though I presume it's a lower order accurate one that probably has a fair amount of numerical viscosity.) In principle if you reduce the grid spacing and time step it will converge provided the software doesn't use any tricks like approximate square roots, etc. The numerical methods for solving the PDEs that computer graphics folks use would surely be considered primitive by someone who develops engineering computational fluid dynamics softwares.
- nojvek 7y agoJust makes you appreciate how impressive modern hardware is.
- programmarchy 7y agoI clicked this thinking "yet another fluid simulation" but this is super cool. Played with every single parameter ;) Pausing, then drawing, then unpausing was a surprisingly pleasant effect.
- Rapzid 7y agoDefault settings don't really do it justice IMHO. Try these: Density diffusion: just a hair under 1(visually) velocity diffusion: 0.99 pressure: 0.93 vorticity: 5
- joshdance 7y agoWow, wasn't expecting your settings to be that much different. But love the slower feeling. thanks
- noisy_boy 7y agoI also tried high Density Diffusion - loved the slower movement and that made me think - only if there was a way to export that to a something like a moving wallpaper that I could set to my Ubuntu desktop. Also, just setting Density Diffusion to 1 and leaving makes the movement slow enough to be able to screenshot nice wallpapers.
- duxup 7y agoRemember Microsoft's old "Active Desktop"? It was like a webpage as a wall paper. Maybe ahead of it's time as it crashed constantly...
- rpwverheij 7y agofor trippiness try Density diffusion: just a hair under 1(visually) velocity diffusion: 0.99 pressure: 0.2 vorticity: 30
- nkrisc 7y agoAdd a fullscreen mode and I think this will keep my toddler entertained on occasion.
- nickporter 7y agoIf you guys like this, you'll like Verve (fluid dynamics painting tool): https://www.taron.de/verve/verve_download.html https://www.taron.de/verve/verve_download.html
- mattxxx 7y agoThis is so nice! The pause box makes the whole demo flex really well. Impressive work
- bnjakait1 7y agoThis archivemt will make any user relieved from day to day quarrels with Google or what is your suggestion? To me this is a score settled
- dharma1 7y agoThought the tails/vortex look like curl noise. And after looking at the source, sure enough they are
- SeriousM 7y agoRIP Plasma Pong. Was bought by acclaim but was never sold..
- jspdown 7y agoSuch a nice demo! I'm amazed by how smooth it's running on my phone. Even if we already have seen similar shaders back in 2004, this is running on the web, available to everyone, with no installation. During my 3rd year at uni I played with webgl1 to create a fake fluid simulation, my demo looks crap nowadays http://jspdown.github.io/mod1/ http://jspdown.github.io/mod1/
- z3t4 7y agoColors are amazing. It's weird it triggered smell and feelings from 15-20 years old memories.
- timvisee 7y agoWow, this is so... fluid! Even on a mobile device.
- trollied 7y agoMy cat loves this on the iPad
- daveheq 7y agoI AM A WIZARD
- slx26 7y agothis keeps reappearing, but it never gets old just a random recommendation: I love to connect this from a laptop to a TV screen, connect a wireless/long cable mouse, and play it with my cousins / little kids. it's a one time trick, but they always love it. (you can do the same with other programs / simulations, just enhancing the experience a little bit can do wonders)
- duxup 7y agoI could do this all day....
- transitivebs 7y agoHere's a React version of the above simulation: https://github.com/transitive-bullshit/react-fluid-animation https://github.com/transitive-bullshit/react-fluid-animation
- emilfihlman 7y agoScreenshot capture fails, the download fails with network error. No errors are reported in console or the network tab.
- doyoulikeworms 7y agothis is gorgeous!!
- ohiovr 7y agoThis works with decent smoothness even on my 8 year old 35 dollar iphone 4s. I met a fellow at Nasa Glen in the 90s that worked on fluid simulations using an sgi workstation. I don’t remember how long the simulations took to process but had to be several minutes per frame. I do remember those workstations cost well over 30 grand at the time.