Video

Thanks! Handling different window sizes properly is an important thing to keep in mind when developing a responsive web site.

Thanks! Definitely the base algorithm from Particle based Viscoelastic Fluid Simulation (Simon Clavet) could be implemented. But yeah I think JS+Wasm is a pretty amazing combination for getting near native performance but being easy to hack around on.

There is the nbody checkbox under the simulation tab which might be helpful lol

Yeah I use WebAssembly with simd but if you multiply by substeps mine is only 20k at 240fps so I guess GPU 10 times faster

I have some free demos on itchio: kotsoft.itch.io/ But the one with the worms needs a pretty extreme computer. I have also started working on a less demanding physics simulator in WebAssembly: grantkot.com/

Yeah, great ideas! Thanks for reminding about the hover hints. Will try to get those in soon.

Yes this is definitely something I need to look into. It gets a bit difficult in my case I think because I have many objects interacting with and poking into the water, sometimes thin objects too like the demo with the bamboo. And then there is the multimaterial aspect of things.

I didn't put up the steam page yet for the 3d sandbox. I just tried out the webassembly simulator on there but the experience is not great as for some reason the browser doesn't seem to enable multitouch and accelerometer. I think I'll try to compile a native version of Liquid Layers to put on Steam. My 3D stuff I probably need to lower down the minimum requirements. Gotta get it at least 60fps on the Steam Deck.

Actually, multitouch does work with the browser demo on Steam Deck. I think I just hadn't used it in a while and had to do some things to get the touchscreen working.

Especially in the 3d version!

Hi, Firefox should be able to run this. Would you be able to press F12 while on the page so the inspector pops up, then reload and see if any errors pop up in the bottom? It does use some newer features like WebAssembly and WebGL2 so maybe also check your FF version in settings (search "updates" to get to relevant section). I am currently trying it out on FF 127.0.2.

Thanks! The base liquid algorithm can pretty much be fully implemented just by following the paper Particle-based Viscoelastic Fluid Simulation. The method I recommend for spatial hashing can be found here: github.com/DiligentGraphics/DiligentSamples/tree/master/Tutorials/Tutorial14_ComputeShader

@@GrantKot I've been working on implementing the paper for a few days now, it's coming along nicely. Thank you so much for your inspiring work!

is it intentional that i can drag the window to shake the fluid? 😅

@basiliotornado yeah dragging and resizing the window are supported. On mobile accelerometer and multitouch is also supported.

I don't have the SIMD optimized version available to public, only a JS version so far: github.com/kotsoft/particle_based_viscoelastic_fluid/ If there are features you would like to see let me know and I can also potentially add them.

I think the liquid heating one was reasonably optimized. With it I resolved the multithreading and cache issues that were plaguing me when I moved up to the 5900X. Its main slowdown is the tracking of the full 3x4 deformation gradient. And sending it to the GPU as all floats. In the newer one, with the sand, I only send a byte for each of the 3x3 deformation gradient elements.

​@@GrantKot interesting, because something i realized with the liquid heating is that it runs at 20 fps (1 million particles i think it is?), and it does not matter if my cpu is clocked at either 4ghz or at 2ghz it runs at the same fps, possibly memory bottle necked, since you said that you made the particle memory size smaller, maybe it should run at 40 fps now? because for example the one i have, i managed to get it running at 18 fps (1 million) after doing manual simd with avx2 as you suggested which thanks btw. but the cpu has to be clocked at 4ghz otherwise it lowers based on clock speed, for example 2ghz will make it run at 9 fps.

@Theawesomeking4444 yeah could be memory bandwidth related. Does your machine support resizable bar? I think I relied on it too much. I am on the way to get things multithreaded with webassembly as well

@@GrantKot resizable bar? ive never heard of that, what is it for?

@Theawesomeking4444 it allows you to write directly to GPU memory from the cpu. Instead of having to use an upload buffer. Started with nvidia 3000 series.

Thanks yeah, would be cool to audio sync different things. Maybe a heightfield collider on the ground, or maybe bass could control some repulsion force fields. I think it is possible to use the WebAudio analyzer node to do this.

I have started adding some of this. To preview static colliders you can now use the C, V, B, G keys to have the liquid collide with basic shapes around the mouse. Will allow placing of these as soon as I update the renderer to render the shapes. You can lock particles in the brush radius in place with the tilde ` key. I hope to polish this stuff up this week.

@@GrantKot that’s great, thanks! By the way, I was hoping you could add a purely anti-gravity button for mobile users, as when using the accelerometer makes it so you need to have your screen flat to the ground.

For zero g you can also now use the gravX and gravY (set to 0) settings in the Simulation tab. Kind of unfortunate they’re not in same tab

@@GrantKot Got it. All good!

Check out latest vid/demo. For collisions

I will try to add that feature soon. I don't have the latest SIMD optimized version available to public but I do have a JavaScript implementation: github.com/kotsoft/particle_based_viscoelastic_fluid/

I added a "sculpt mode" which you can toggle with S key. There's also the vortex forces from x and c that you can use while in this mode. Or attract/repel. Would also recommend playing around with the sameRestDensity/diffRestDensity/stiffness parameters in this mode.

ooo this is very interesting!! thank you for doing this!! (: