Show HN: A simple 2D fluid and gravity simulation with WASM and WebGL

Show HN: A simple 2D fluid and gravity simulation with WASM and WebGL(aestuans.github.io)

137 points by aestuans 2 years ago | 24 comments

The little particles will gravitate to your cursor (or touch location), and can even enter stable orbits if the conditions are right!

Mainly an excuse for me to experiment with wasm and WebGL, but it makes for a surprisingly good fidget toy.

vrtnis 2 years ago |

very cool! if you're exploring wasm for graphics, take a look at Wander- lets you create and execute "renderlets" — portable modules containing graphics data and code compiled to wasm https://github.com/renderlet/wander

CSMastermind 2 years ago | |

This is probably a dumb question but I assume anything leveraging WASM can only run on the CPU?

vrtnis 2 years ago | | |

while it's true that wasm was originally designed to run primarily on the cpu(e.g., executed in a sandboxed environment on the main thread, which is generally managed by the cpu), the assumption that wasm only runs on the cpu might be becoming a bit dated. esp. as a result of webgpu and frameworks mentioned above, wasm is increasingly capable of executing on the gpu imho.

jzting 2 years ago |

Nice use of smooth union SDFs :)

I did a similar thing in 3D here: https://generator.artblocks.io/62000470

fidotron 2 years ago |

How did you decide to divide the work between the wasm and webgl?

seanisom 2 years ago |

This is pretty cool - great to see what a small codebase can do with raw WebGL. Have you looked at WebGPU at all?

aestuans 2 years ago | |

I wanted something that can run everywhere and WebGPU support is still behind some flags in Firefox and Safari I think, but I'm pretty excited about trying that as well.

airstrike 2 years ago |

This is great! If you're looking for ideas on how to extend it, I'd love to be able to play with some of the parameters, or have presets to pick from. At some point I tried spinning it like a pizza dough but obviously these are way too liquid for that

numberless 2 years ago |

Very nice! Took me a while to realise it has mouse based gravity but very good! (I clicked directly on the link on a mobile device without checking here)

aestuans 2 years ago | |

Thank you. Yeah mobile support was an oversight from me, I added touch support now.

nand-less 2 years ago |

This is really neat. I bet if you made the blobs follow a target point that moved around randomly it could make a good screensaver animation.

gorjusborg 2 years ago |

https://github.com/aestuans/blob

rcarmo 2 years ago |

This has great potential as a cat toy (provided you get a tough touchscreen)

max_ 2 years ago |

This is interesting. You need to post a write up.

I would read it.

bun_terminator 2 years ago |

aww why does it not follow my finger as it does my cursor? this would be so fun!

aestuans 2 years ago | |

Good point, added touch support :)

rigid 2 years ago |

mobile users should tap the canvas for the particles to move.

mentos 2 years ago | |

or shake the phone

Is the accelerometer data available?

rigid 2 years ago | | |

yep. android 13

justin_kempton 2 years ago |

Beautiful!

tetris11 2 years ago |

super slow on Firefox, naturally

seanisom 2 years ago | |

Working fine for me on Firefox - their WebGL support tends to be good enough, although there are plenty of other resource issues.

taberiand 2 years ago | |

Works without issue on my phone, Android Firefox

mft_ 2 years ago | |

60 fps for me in Firefox, with the processor <1% while running. 3060Ti was working, but not hard.