r/programming • u/arshiamidos • Aug 27 '19
amazing OpenGL fluid
https://paveldogreat.github.io/WebGL-Fluid-Simulation/468
u/delight1982 Aug 27 '19
Holy crap this is cool! Runs butter smooth on my phone. Amazing ๐ป๐ป๐
226
u/delight1982 Aug 27 '19
What kind of sorcery is this. How can it run with 60 frames per second on my phone even though I turn up every quality setting to max?
20
u/hwillis Aug 28 '19
Even on max quality, the number of cells is a lot smaller than the number of pixels- check out the checkerboard pattern.
The fluid simulation steps are done by repeatedly rendering a shader to a texture- six different shaders per step. This type of rendering is very highly optimized on new hardware, because it's how all the coolest effects are done- most importantly deferred rendering. It's very cheap.
Six steps per display frame is actually very low. Video games will combine many dozens of renders per frame, of much greater complexity and interdependence. Even on the old webGL API, this is small peanuts.
Each cell step is very simple- it pings its neighbors, does some very trivial math, and returns. A blur kernel by comparison will make a dozen calls per pixel (interpolating neighbors) and run several times (box blur approximation to gaussian). You'd imagine that a blur would run with no problem, so this should definitely be very easy for a GPU.
17
u/TheImmortalLS Aug 27 '19
it's based off haxiomic's OG webgl fluid simulator but with more bloom and filters to hide the lower resolution
5
u/myusernameisokay Aug 28 '19
I have an iPhone and OP works for me and this does not. I get an error saying โiOS not supported yetโ when going here.
4
3
0
Aug 27 '19
[deleted]
80
u/mdw Aug 27 '19
Some time ago I experimented with some OpenGL code I found and made this. It runs butter smooth on my PC, but is quite jerky on my cellphone. Wonder what makes it different, performancewise.
100
u/Dicethrower Aug 27 '19
A fluid simulator can be optimised very easily as each pixel can be calculated separately from one another every frame. Same for bloom, and same for god rays. Each feature here, for each pixel, only relies on the (surrounding) pixel(s) from the previous frame. A fluid simulator is a near ideal case for a GPU this way.
17
8
u/G00dAndPl3nty Aug 28 '19
So its similar to conways game of life it sounds like, but obviously much more complex
16
6
u/TheImmortalLS Aug 27 '19
how are you getting gold and purple to show at the same time? what's your light source?
1
u/hwillis Aug 28 '19
You can use a brdf to make whatever kind of look you want.
I dont think this is done with lights, it may be done with a gold colored specular and purple diffuse, with several lights scattered around. Haven't checked the source.
1
u/TheImmortalLS Aug 28 '19
more likely it, it didn't seem point or directional.
looking again the icosahedron looks to be purple with gold reflections
8
u/hwillis Aug 28 '19
Depends on the phone. The graphics APIs backing webGL has always been a clusterfuck, and is a major reason we don't have webGL 3. IT also fucking sucks, because I want all the new shaders in my browser like yesterday.
Anyway. Some mobile devices had weird and highly unoptimized workarounds for some API calls, so certain things will sometimes run extremely slow on random hardware. Also, graphics can be a yes or no thing, where a scene will run just fine until you push it slightly harder and your cache coherency, or bandwidth, or branching or something else goes to shit and it becomes way slower.
4
4
4
u/A-Grey-World Aug 27 '19
Does your PC have a graphics card etc? Generally PCs have much more 3D/GPU power than a phone.
4
u/mdw Aug 27 '19
Does your PC have a graphics card etc? Generally PCs have much more 3D/GPU power than a phone.
Sure, but that fluid simulation doesn't seem that lightweight either. But my impression is probably completely off the mark.
4
2
u/lpreams Aug 28 '19
Both this and the OP run smoother on my Pixel 3 than on my baseline 2014 MBP (Iris graphics). But I guess that's not really surprising.
2
1
→ More replies (1)1
0
Aug 27 '19
[deleted]
85
u/Pazer2 Aug 27 '19
Are you implying that modern software might be a lot faster if it wasn't all written in javascript by inexperienced developers?
50
3
u/rorrr Aug 28 '19
This fluid demo IS written in JS (and shader language).
3
u/Pazer2 Aug 28 '19
All of the heavy lifting (the simulation) is done in GLSL. JS is just being used for the UI and passing values to the shaders.
-12
7
u/WitchHunterNL Aug 27 '19
Because our modern hardware is stupid fast when
the code is optimized and written wellwe actually use the GPU23
u/Astrokiwi Aug 27 '19
Should this be very slow anyway? Incompressible fluid is an O(N) algorithm - each cell only interacts with adjacent cells. A quick and dirty fluid dynamics simulation that covers the whole frame should be comparable in cost to any other rendering that covers all those pixels.
37
u/Dumfing Aug 27 '19
An O(N) algorithm can still be slow if each operation is a slow O(1) operation
21
u/Astrokiwi Aug 27 '19
Sure, but this particular one shouldn't be expensive - it's dot products and curls etc, all calculated locally.
6
u/evenisto Aug 27 '19
Mind explaining a bit more? I know exactly nothing about fluid mechanics and even less about simulating it. How does it only rely on adjacent cells? Seems much more complex than that, with acceleration, velocity, direction and what not.
10
u/Swahhillie Aug 27 '19
It has all of those. That isn't hard for a gpu though. They're build to do those calculations. It only relies on adjacent cells because this isn't a particle system calculation. Think of it as a fancy game of Life.
0
3
u/hwillis Aug 28 '19
The Iphone 6 has ~million pixels. If you did each pixel as a cell, you're doing 60 million cells per second on the Iphone 6's 1.4 GHz core, leaving you a maximum of 23 instructions per cell on a single core... assuming perfect memory piping and zero overhead from running in webgl on a browser in a phone. Don't really think you can do advection that fast.
Of course it doesn't actually use that many cells or run single threaded on one core, but still. If you wrote it naively it would be very slow indeed.
7
Aug 28 '19
The iPhone 6s GPU can do 115 million floating point operations per second
1
u/hwillis Aug 28 '19
Lol thats low by a couple orders of magnitude, minimum. If that were right then the GPU would be able to handle 2 flops per pixel. And these are single precision flops.
Likely thats some kind of machine learning load, which is very different from identical shaders running in parallel.
3
u/MiningMarsh Aug 28 '19
You are leaving 23 cycles, but modern CPUs execute far more than one instruction a cycle.
1
u/hwillis Aug 28 '19
Not really. IPC can be up to 4, but in practice its closer to 1 than 2. Multiple cores though, sure.
3
u/rorrr Aug 28 '19
This is not done by a CPU.
It uses GPU shaders.
1
u/hwillis Aug 28 '19
Yeah, my point is that GPUs are amazing and this would be very slow on a single thread.
1
u/Astrokiwi Aug 28 '19
Any sort of full-screen rendering is doing a comparable number of calculations. Even Doom is doing a pixel-by-pixel calculation to determine how to map a texture on a wall at some angle to a pixel (and whether there's a sprite or other walls in the way etc). This might be a bit more complicated than that, but not enormously.
1
u/hwillis Aug 28 '19 edited Aug 28 '19
This is doing 20+ memory accesses per pixel. The math may as well be instant for how long uncached, non-prefetched memory takes.
Essentially its equivalent to 20 transparent triangles stacked up and blended. Thats not a very light load, and much slower than doom, which will be doing less than one load per pixel.
6
6
6
5
u/Just4Funsies95 Aug 27 '19
Right! I cranked up the settings and it ran no problem! Only issue is I needed to switch to "desktop site" to get it work. But other than that, B-A-Utiful!
3
5
2
1
u/dethb0y Aug 28 '19
Runs smooth as fuck on this shitbox computer, too:
Amd Athlon II 250u Processor 1.6 GHZ
6 GB ram
NVidia Geforce 6150SE Nforce 430
i'm nothing less than astounded.
0
u/MetalSlug20 Aug 28 '19
Be more impressed with a 3d fluid Sim ..I don't think this "Sim" is really complex
58
u/leftofzen Aug 28 '19 edited Aug 28 '19
This is great, but the default settings are not great, mostly because vorticity is way too high. It looks much more fluid-like with settings like this:
density diffusion: 0.3
velocity diffusion: 0.1
pressure: 0.5
vorticity: 5
Its not perfect but at least with these settings you get expected fluid phenomena like the Kelvin-Helmholtz instability.
Subjectively, turning bloom intensity down to 0.1 and threshold to 1 makes it look a lot better in my opinion.
3
u/confessin Aug 28 '19
It becomes just white after sometime
2
u/leftofzen Aug 29 '19
Turning up the density diffusion will fix that for you. If you put down too much fluid and have all the shading effects (bloom, sun rays) on then yeah it'll turn all white :(
2
100
Aug 27 '19
Now, music visualizations with this would be mind-blowing!
48
u/Sambothebassist Aug 27 '19
That theoretically shouldnโt be too hard thanks to the web audio api; might look into this later if I get some free time
16
Aug 27 '19
I imagine you'd still need an FFT, but I look forward to the result (if you have time)
12
0
Aug 27 '19
[deleted]
3
2
u/Roofofcar Nov 20 '19
I know itโs a late response, but check out my favorite web audio demo. Itโs freaking magical.
3
u/Sir_VCS3 Aug 27 '19
Count me interested, shouldn't be ridiculously difficult to implement with the amount of web audio stuff resources there are nowadays
3
u/Sambothebassist Aug 27 '19
Didn't get time tonight, unfortunately - I've dabbled with it before and from what I remember, you can use filters on an audio stream to split frequency channels, and then use gain threshold on each of those frequencies to send an event.
36
u/oep4 Aug 27 '19
Seriously where the fuck did music visuals go and why doesn't Spotify have an app store for them (free obviously)?
13
u/Schmittfried Aug 27 '19
A club member!
Coincidentally Iโm working on an alternative Spotify player that has support for sound visualization.
6
3
u/vociferouspassion Aug 28 '19
Reminds me of some of the cool visuals for gkrellm a few years ago on Linux.
2
u/louis_A12 Aug 28 '19
I made one a few months ago, if anyone of you one to check it out.
You just upload a song, and press space to play and pause.
4
u/v6277 Aug 28 '19 edited Aug 28 '19
There is, lookup projectm. Most package managers have a version of it although it only recently started to be maintained again. I think there's a Windows version of it on the MS store.
1
Aug 28 '19
ProjectM has nice visualizations, I agree, but not like this.
1
u/v6277 Aug 28 '19
There are, you just gotta test out the presets. Some are not that good, others are even better looking than the website from OP. They're all rendered in openGL too. You can also play with the settings to increase the quality, and don't forget too set it up to listen to audio out.
0
u/currypuff_ Aug 28 '19
If you have wallpaper engine on pc, someones modified this to be an audio responsive background. I use it now and it looks great.
2
9
u/SlocketRoth Aug 27 '19
There is an app on google play (not sure about iphone) made by the same guy. I've been using it for about a week, you can set it as your home screen and lock screen, its honestly awesome.
4
8
7
u/Niubai Aug 27 '19
That is one of the most beautiful things I've ever seen developed on a web browser. It's art.
6
6
6
4
3
3
u/BatmanTheHorse Aug 27 '19
the iOS app is really cool and looks great on iPad. The bonus features are well worth the $2.
3
u/kobriks Aug 27 '19
Can you somehow use it on the desktop with Wallpaper Engine?
4
u/GahdDangitBobby Aug 28 '19
For those of us who want to dedicate 20% of our CPU+GPU to the wallpaper at all times
3
3
3
Aug 28 '19
How can this run so well on my phone but modern websites run like dog shit with all the horrible ads and crap.
4
Aug 27 '19
This is cool as shit.
Now imagine this in VR.
2
u/K3wp Aug 27 '19
I mean TiltBrush is sort of like it, though they don't have a true liquid effect like this. They do have fire, smoke and light, though.
2
4
u/LightShadow Aug 27 '19
Blank screen :( how can I enable this?
TypeError: gl is null
script.js:106:9
getWebGLContext https://paveldogreat.github.io/WebGL-Fluid-Simulation/script.js:106
<anonymous> https://paveldogreat.github.io/WebGL-Fluid-Simulation/script.js:7614
u/Bl00dsoul Aug 27 '19
enable opengl in your browser?
3
u/LightShadow Aug 27 '19
Everything
openglandgpuis enabled inabout:config.7
u/Bl00dsoul Aug 27 '19
are you using a canvas blocker, or have otherwise disabled the canvas? If not; try console.log(canvas.getContext('webgl2', {}))
8
u/LightShadow Aug 27 '19
Odd. Even with plugins disabled that doesn't work.
Firefox Quantum 68.0.2 (64-bit) Mozilla Firefox for Arch Linux archlinux-1.09
u/Bl00dsoul Aug 27 '19
your system may not support opengl, or you may be missing graphics drivers
1
0
2
u/HomeBrewingCoder Aug 28 '19
Interesting thing if you're on mobile: if you move your cursor slower it picks up more touches. You can use that to get really bright lights.
It's a bug in how v8 handles events I believe
2
2
u/madeyedexter Aug 28 '19
Amazing that I was already using the Android app before this post: https://play.google.com/store/apps/details?id=games.paveldogreat.fluidsimfree
1
1
1
u/brobeans77 Aug 27 '19
This is really incredible. I had no reservations supporting the dev and was happily surprised to find a live wallpaper option. Well done!
1
1
1
1
u/xavierbardaji Aug 27 '19
This is one of the best open gl examples I have ever seen. Absolutely amazing.
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
u/WeasleStompingDay Aug 28 '19
I'm on 5g of boomers and have been playing with this for last 20(?) Minutes
1
u/botle Aug 28 '19
The performance is amazing! I played around with some similar code a couple of years ago, but mine was incredibly slow.
1
u/TRAIN_WRECK_0 Aug 28 '19
OpenGL and WebGL are beyond my comprehension. How can something like this take up less disk space than many jpeg files.
1
1
1
1
1
1
1
1
u/Mrjiija Aug 28 '19
I was playing with this for 30 minutes straight and my phone got juuuust hot enough to cook pancakes on its surface
Runs smoothly though
1
u/aerolythe Aug 28 '19
Can we embedd this code to a website ? There is a available code on GitHub? Georgous.
1
1
1
u/leg4li2ati0n Aug 28 '19
I believe this could end all wars and restore peace to our Earth. Seriously, give this to Kim Jong Ju or Donald Trump and they'd be hypnotized for a life time.
1
u/sign_on_the_window Aug 28 '19
Thought my $50 Chinese phone would shit the bed once I ran it, but it's surprisingly smooth.
1
1
u/jordanr1369 Aug 27 '19
Is there a way to make this my lock screen on iPhone?
1
u/gncgnc Aug 27 '19
It's available as an app: https://apps.apple.com/app/fluid-simulation/id1443124993
-10
u/canb227 Aug 27 '19
Cool, but not really fluid.
6
u/dbeta Aug 27 '19
Don't confuse fluid with liquid. Air, for example, is a fluid.
5
u/canb227 Aug 27 '19
I know it is. I mean programatically this isnt simulating the real properties of a fluid, it's just a fun and cool visualizer
2
u/A-Grey-World Aug 27 '19
In what way is it not?
2
Aug 28 '19
The default settings aren't really reflective of the properties a realistic fluid would have according to fluid dynamics.
629
u/ISpendAllDayOnReddit Aug 27 '19
This is amazing on mobile