WebGL Fluid Simulation(paveldogreat.github.io)
paveldogreat.github.io
WebGL Fluid Simulation
https://paveldogreat.github.io/WebGL-Fluid-Simulation/
60 comments
This was the first thing I did when I wrote a fluid sim as well - I’ve spent a ton of time and energy pursuing ways to get subtractive color effects (the richness and light-subjectivity of pigment) in digital artifacts and have mostly come up empty, but I take every chance I can get.
Have you checked out mixbox[0]? The outputs do feel intuitively "right" as someone who has dabbled in watercolor, and the paper/videos cover the thinking and Kubelka-Munk theory well.
[0] https://github.com/scrtwpns/mixbox
[0] https://github.com/scrtwpns/mixbox
Spectral.js might also be interesting. It comes with a GLSL implementation of Kubelka-Munk and is MIT.
https://github.com/rvanwijnen/spectral.js
https://github.com/rvanwijnen/spectral.js
Wild! Just saw that at the top of the front page and thought ‘dang is HN reading my mind today??’
Thanks for the link!
Thanks for the link!
oh wow, they have the fluid demo too!!! Thats so much better!
https://scrtwpns.com/mixbox/fluids/
https://scrtwpns.com/mixbox/fluids/
How difficult would it be to prevent the ink from disappearing? Any tips would be appreciated, I'd love to integrate this into a drawing app.
very easy, its a free parameter in the simulation see the "Ink dissipation" slider, you can set it to > 1 for some weird effects.
No such slider on mine. (https://i.imgur.com/m1tODYK.png)
you are looking at the wrong app https://observablehq.com/@tomlarkworthy/ink
Ah, thanks.
You could consider changing your ink to CMYK colors: `mutable ink = [255, 0, 255]`.
I don't know why but I always find these high resolution physics simulations/eye candy to the thing that really blows my mind about how much processing is done inside of a cpu/gpu. I watched a two minute short earlier today from the cockpit of a plane declaring an emergency and needing to take a runway at an airport and it wasn't until right at the end that I realized the video wasn't real...it was from a simulator or video game of some kind. Yet still seeing swirly colors on a screen still is what does it for me.
Weird.
Weird.
I'll always have a soft spot for this earlier implementation which at lower resolutions has a kind of cyberpunk netrunner aesthetic, and at higher resolutions an almost ethereal ghostlike quality: https://haxiomic.github.io/projects/webgl-fluid-and-particle...
hey there's even a comment from 2020 where the creator of that project talks about this project, neat! I always wondered if they were connected in some way or independent applications of the same underlying premise: https://news.ycombinator.com/item?id=24065857
I love playing with it at UltraHigh quality and 1 solver iterations. It reminds me of gradually incorporating one ingredient into another when cooking: like incorporating flour into eggs when making pasta.
Does anyone know of more examples of water simulations in WebGL? I’m looking for ways to implement waves with foam.
I love Evan’s Pool demo. https://madebyevan.com/webgl-water/
I love Evan’s Pool demo. https://madebyevan.com/webgl-water/
Was reading somewhere that one isn't a simulation. Rather super clever tricks to make it look like water, swimming pool, a thing in it.
You're right. Move the ball so it's half-immersed, wait for the water to settle, and then cause a single ripple. The ripple will propagate past the ball, coming out the other side with no diffraction.
Still very, very cool.
Still very, very cool.
Sebastian Lague recently created a related video for those interested in rendering fluids: https://www.youtube.com/watch?v=kOkfC5fLfgE
Lague's videos have been consistently incredible and inspiring. Highly recommend for anyone interested in the space
oimo.io also has a few WebGL fluid simuations, via this thread:
https://news.ycombinator.com/item?id=37026592 - Water (2023-08-06, 133 comments)
https://oimo.io/works/water/
https://oimo.io/works/water3d/
https://oimo.io/works/fluid/
https://news.ycombinator.com/item?id=37026592 - Water (2023-08-06, 133 comments)
https://oimo.io/works/water/
https://oimo.io/works/water3d/
https://oimo.io/works/fluid/
I think this actually produces HDR on my iPhone 15 Pro, which really makes it pop because not a lot of things do
Very cool!
Very cool!
It looks really nice and is very smooth.. But a subscription for a fluid dynamic app, really?
They gave you a free web version. So if they want to try and do a subscription of charge $30 for a one off purchase I think that’s up to them. I’m curious if anyone will ever buy a subscription or spend $30 though.
I tried it as a background on Android but it killed my battery within hours so I stopped. Shame, its so cool.
I bet your phone doubled as a nice hand warmer though
People will fall over themselves to attach a subscription to anything. Pure cancer if you ask me.
The first time I've actually appreciated my laptop's touch screen.
This reminds me of Plasma Pong!
It would be a shame if you implemented a free online version of it ;)
It would be a shame if you implemented a free online version of it ;)
I have an HDR monitor and OMG it's so bright it's almost painful. So beautiful!
I don't think this demo uses your monitor's HDR. You can test by pausing the simulation, then paint your whole screen with the pointer. Your screen is now all white. Compare brightness with a regular white page, it's the same brightness.
I have an OLED display too. SDR content looks really good on OLED displays because of the incredible contrast. It might appear HDR but is SDR.
I have an OLED display too. SDR content looks really good on OLED displays because of the incredible contrast. It might appear HDR but is SDR.
If I stir a cup (or even a rectangle) of water, it will start swirling. Why does this not swirl? Local chaos, dissipates quickly, bulk flow does not sustain.
Swirls on my phone.
I tried phone, similar. I guess it kind of does keep rotating, but you can’t see it. Colors fade faster than flow.
If you dab a finger in the stream at right angles to the flow you made, the splash flows the expected way, but maybe slower than water.
It would be good to visualize any flow. And also to respond to device orientation so you can feed the resonance :)
If you dab a finger in the stream at right angles to the flow you made, the splash flows the expected way, but maybe slower than water.
It would be good to visualize any flow. And also to respond to device orientation so you can feed the resonance :)
Can someone explain what kind of fluid this is simulating? Obviously it implements the general Navier-Stokes fluid equations, but if I twirl some ink in a cup of water it looks nothing like this so I'm confused by the naming.
Is it a scale issue? When I look at the sea it doesn't look much like this either, so I don't think so?
Is there a combination of parameters I could set in the simulation such that it looks like what I see when I pour myself a glass of water, or watch waves at the beach?
Or is it because all the real world examples I'm referencing are 3D, and this is 2d?
Is it a scale issue? When I look at the sea it doesn't look much like this either, so I don't think so?
Is there a combination of parameters I could set in the simulation such that it looks like what I see when I pour myself a glass of water, or watch waves at the beach?
Or is it because all the real world examples I'm referencing are 3D, and this is 2d?
It should look basically accurate, except that the edges absorb momentum. You're looking downward into a pool of water and dragging the mouse is like dragging a finger through the water. Not totally the same, because the mouse is directly imparting momentum into the fluid instead of displacing it- that's why twirling looks wrong. If you move the mouse in a circle it will constantly grab and pull back the fluid, which can't be done in real life.
The fluid has a set lifetime instead of actually mixing, which makes it look different- normally the edges would dissipate faster than the areas that are all ink but instead it just all fades at the same rate.
The simulation is kind of 3d- since it's incompressible, pressure at any point is proportional to the height of the fluid. Advection still happens on a single plane, but if the pressure-related height is relatively large compared to the average depth of the fluid it's not a bad approximation. The viscous losses are also kind of arbitrary, but it's not far from water.
The fluid has a set lifetime instead of actually mixing, which makes it look different- normally the edges would dissipate faster than the areas that are all ink but instead it just all fades at the same rate.
The simulation is kind of 3d- since it's incompressible, pressure at any point is proportional to the height of the fluid. Advection still happens on a single plane, but if the pressure-related height is relatively large compared to the average depth of the fluid it's not a bad approximation. The viscous losses are also kind of arbitrary, but it's not far from water.
Previous discussions: https://news.ycombinator.com/item?id=25031304
Being able to right click, Save image as.. is awesome.
I would love to see a lava lamp simulator with this type of quality. I’ve tried before to make one but alas I don’t have the math.
Reminds me a lot of Smoke Winamp plugin from Geisswerks. Looks almost identical, actually. Pretty sure he used GPU acceleration to write it back when that was a pretty rare feature for 2D effects.
http://www.geisswerks.com/about_smoke.html
http://www.geisswerks.com/about_smoke.html
Shadertoy has plenty of fluid solvers, e.g. here is a 3d solver: https://www.shadertoy.com/view/wlG3RW
This was so cool! I really liked creating a spiral and circling it faster and faster. Maybe this could be visualized with a PC build and the fan airflow?
I want that as live wallpaper on windows with constant light movement
It’s mind blowing how we went from Adobe Flash to this in just 25 years.
How about 3D? Is there at least an equation to solve that yet?
I am utterly amazed by people who can do stuff like this.
Multi-touch support (at least on iOS) is a nice touch
Woah, that's pretty
This is great!
all from Newton's equations...
Is that not navier-stokes ?
You can derive naviger stokes from newtons laws, or I suppose some conversation laws.
Wasn't sure so I checked.
Not a physicist.
If navier-stokes equations can be derived from Newton's laws, then Newton's laws can be derived from Galileo, Archimedes before him, even some older thinkers before them.
Newton ignored viscosity, and density. He made some discoveries on fluid dynamics but his famous laws only apply to solid objects. Same for velocity, he knew about that of course but only worked it out for solids. Ignoring two critical components meant he didn't establish relations between them either.
That's my read.
Not to dismiss credits to Newton, who's is in another league than navier and stokes. In his own league even. He probably would have figured out what was only solved centuries later had he explored further, or had he benefited from perhaps just a few other later discoveries.
But that's dismissive of navier-stokes significant discoveries on fluid dynamics to not simply give them credit for the formula behind this simulation.
Oh, did you mean conservation?
If navier-stokes equations can be derived from Newton's laws, then Newton's laws can be derived from Galileo, Archimedes before him, even some older thinkers before them.
Newton ignored viscosity, and density. He made some discoveries on fluid dynamics but his famous laws only apply to solid objects. Same for velocity, he knew about that of course but only worked it out for solids. Ignoring two critical components meant he didn't establish relations between them either.
That's my read.
Not to dismiss credits to Newton, who's is in another league than navier and stokes. In his own league even. He probably would have figured out what was only solved centuries later had he explored further, or had he benefited from perhaps just a few other later discoveries.
But that's dismissive of navier-stokes significant discoveries on fluid dynamics to not simply give them credit for the formula behind this simulation.
Oh, did you mean conservation?
damn, that's neat
https://observablehq.com/@tomlarkworthy/ink