Liquid Layers

by nmstoker • 2 years ago

525 50 2 years ago

For more context, background see author's posts here: https://twitter.com/kotsoft

Nzen• 2 years ago

tl;dr this is a liquid simulation toy. This starts with four colors of different densities (so they self-organize into layers). Clicking allows scooping up a ball of the liquid. I consider this pretty to watch, like a laval lamp that I can also throw globs of.

TeMPOraL• 2 years ago

You also have a settings UI, where you can change (among many other things) what clicking does. I find it most interesting to switch to "repel" - the repulsion forcefield turns to be an universal tool for mixing and separating the different liquids, depending on how fast and precisely you operate it. Fascinating.

kotsoft11• 2 years ago

With keyboard there are also the shortcuts: 1-4 to emit the different materials a/r to attract repel from mouse x/c to rotate a bit

yayitswei• 2 years ago

Super fun to resize the window and watch the liquid slosh into the new space.

ssl-3• 2 years ago

Super fun on mobile to dig into the settings and turn on the accelerometer and gyro, and give the phone a twist and a shake.

hopfog• 2 years ago

The author is also working on a really impressive voxel physics engine: https://youtu.be/3259aycYcek

pornel2• 2 years ago

I'm surprised the simulation is run on the CPU! This problem has solutions that fit the GPU well, even for grid<>particle conversions.

troglobite3• 2 years ago

this kind of sims are better suited for CPU ;-), gpu are good to work on meshes, not really on pure particles. At GPU are super good for grid based hydro.

BugsJustFindMe• 2 years ago

Are there compressible liquids? I'm seeing the whole thing bounce like the layers are compressing.

pornel2• 2 years ago

This is a common and difficult problem when simulating fluids using particles.

It's possible to simulate using a grid instead, and that computes pressure very precisely, but it has a downside of adding inaccurate viscosity.

And there are tricks that combine both approaches to balance out the errors.

kotsoft11• 2 years ago

Yeah agree. The objective was more to make a physics toy that would run on single core on a phone than something for actual scientific or industrial use. I could add additional iterations or do pressure projection but then there would be complaints about it being slow & choppy.

There are also some large density ratios between the materials which further increased the difficulty, and would also increase the number of pressure projection iterations on a grid. I tried to simulate buoyancy without cheating (e.g. giving different materials different acceleration to gravity)

whisk• 2 years ago

Super fun!

amelius• 2 years ago

Was hoping for accurate simulation of laminar flow.

sBqQu3U0wH• 2 years ago

Cool, the performance is significantly better than the previous time. Or is it a different kind of simulation?

kotsoft11• 2 years ago

This is still the same kind of simulation, based on the Particle-based Viscoelastic Fluid Simulation paper. I updated it to use Wasm SIMD more fully with the help of Clang Vector Extensions, Compiler Explorer and Wasm Analyzer. Compiler explorer to play around with patterns and Wasm Analyzer to double check the final compilation.

eigenvalue• 2 years ago

Really awesome work. The WASM lets you show this off to a massively larger audience than a regular binary. I'd encourage you to make your Voxel project also using WASM, then you can easily turn it into a mobile/tablet game.

imzadi• 2 years ago

This is interesting. I wish the other interactions were as dramatic as the drag one. You have to really crank up the brush size to see anything interesting.

troglobite3• 2 years ago

Awesome!

hermitcrab• 2 years ago

This is really impressive. Especially the performance in a browser.

sphars• 2 years ago

FYI, in the Interaction settings you can enable accelerometer and use gyro. Lots of fun on mobile devices! Works well for me on Android/Firefox

shinze• 2 years ago

Impressive

d--b• 2 years ago

I really wish these were 3D simulations. The 2D ones are always a bit off to me...

CaptainOfCoit• 2 years ago

"3D Liquid WIP Preview" https://kotsoft.github.io/pvfs3d/

From the description of "WebAssembly Liquid Simulator" https://www.youtube.com/watch?v=phXwC6HxWEQ

Incredible stuff.

kotsoft11• 2 years ago

Thanks! With 3D the main challenge might be visualizing the layers separately. Ideally each of the phases would have some kind of metaball effect and also be transparent and even refract. Will be pretty tough to do and will have to fight with uncanny valley effect.

Sometimes for sandbox I feel like 2D can be more fun because people can target particles they interact with better.

Maybe WebXR will be good for the 3D version.

Voltage• 2 years ago

https://david.li/fluid/

miohtama• 2 years ago

iPad accelerometer is 90 degrees off

vanderZwan2• 2 years ago

Wasn't this shared a week/few weeks ago? Not that I mind it being posted again, just that if it was already posted it might be worth linking the old thread, in case there was some interesting discussion there.

kotsoft11• 2 years ago

Yes, the previous one is: https://news.ycombinator.com/item?id=40429878 There are some new features since then and some major speed improvements from using SIMD. I do still see complaints about the compressibility so I still need to work on some improvements for that. (dev)

vanderZwan2• 2 years ago

Thank you for digging up the link! And the bonus "release notes" ;)

fx18011• 2 years ago

https://sandspiel.club is also interesting

dctaflin• 2 years ago

It also takes into account surface tension. Bubbles of denser/lighter materials cling to the interfaces, rather than sinking or rising.

Anotheroneagain• 2 years ago

When you set all materials to the same density, you get a cold surface, with hot matter below it.

anotheryou• 2 years ago

Would be fun to add an emulsifier :) (particles that bond with 2 colors)

wiz21c• 2 years ago

let's do a mayonnaise!!!

kotsoft11• 2 years ago

You actually can adjust the settings for this. In settings>simulation, instead of sameRestDensity being 8 make it 0 and make it higher for diffRestDensity. I recommend doing it with low gravity as well (you can get zero g by clicking enable accelerometer on computers without accel)

butterNaN• 2 years ago

I know this is asking a lot from what is already a bundle of fun, but I wish it also made noises, in fact my brain is already simulating some

It's like a visual stim toy

kotsoft11• 2 years ago

Here's a video of the spatial sounds system from my 3D sims: https://www.youtube.com/watch?v=0HJ5lMpWTXQ

I will see if I can bring it to WebAudio.

kotsoft11• 2 years ago

UPDATE: I've added a "hacker mode" for you all! You can now specify a userUpdate function and it will run it each frame. See my twitter post for a demo of it. https://x.com/kotsoft/status/1806362956294189299

tomcam• 2 years ago

Delightful. Runs like a bat out of hell on my older iPad mini 5th gen.

Liquid Layers

Related Stories