Show HN: WASM and WebGL Fluid Simulation

Author here. This demo showcases liquidfun-wasm[0], my effort to revive liquidfun[1] (a fork which adds fluid simulation and soft-body physics to Box2D[2]).<p>to make liquidfun-wasm, I repurposed my existing box2d-wasm[3] and pointed it at a different release of Box2D — a commit obtained by rebasing liquidfun over 7 years of upstream Box2D changes[4]. the end result is that liquidfun is now distributed in WebAssembly and with TypeScript typings for the first time. The TypeScript typings are generated from WebIDL bindings via my webidl-to-ts[5] compiler.<p>this demo in particular aims to bring to the Web the shaders from the liquidfun EyeCandy demo[6], and show how fast JS can run if you avoid incurring the garbage collector (the main loop tries not to allocate objects). the demo repurposes gravity and drag calculations that I&#x27;d used previously in my Lunar Survey experiment[7] (a Mario Galaxy homage).<p>[0] <a href="https:&#x2F;&#x2F;github.com&#x2F;Birch-san&#x2F;box2d-wasm&#x2F;releases&#x2F;tag&#x2F;liquidfun-v6.0.4-lf.1" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;Birch-san&#x2F;box2d-wasm&#x2F;releases&#x2F;tag&#x2F;liquidf...</a><p>[1] <a href="http:&#x2F;&#x2F;google.github.io&#x2F;liquidfun&#x2F;" rel="nofollow">http:&#x2F;&#x2F;google.github.io&#x2F;liquidfun&#x2F;</a><p>[2] <a href="https:&#x2F;&#x2F;github.com&#x2F;erincatto&#x2F;box2d" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;erincatto&#x2F;box2d</a><p>[3] <a href="https:&#x2F;&#x2F;github.com&#x2F;Birch-san&#x2F;box2d-wasm" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;Birch-san&#x2F;box2d-wasm</a><p>[4] <a href="https:&#x2F;&#x2F;github.com&#x2F;Birch-san&#x2F;box2d-wasm&#x2F;releases&#x2F;tag&#x2F;v4.0.0-liquidfun.0" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;Birch-san&#x2F;box2d-wasm&#x2F;releases&#x2F;tag&#x2F;v4.0.0-...</a><p>[5] <a href="https:&#x2F;&#x2F;github.com&#x2F;Birch-san&#x2F;box2d-wasm&#x2F;tree&#x2F;master&#x2F;webidl-to-ts" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;Birch-san&#x2F;box2d-wasm&#x2F;tree&#x2F;master&#x2F;webidl-t...</a><p>[6] <a href="https:&#x2F;&#x2F;github.com&#x2F;google&#x2F;liquidfun&#x2F;blob&#x2F;master&#x2F;liquidfun&#x2F;Box2D&#x2F;EyeCandy&#x2F;engine.cpp" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;google&#x2F;liquidfun&#x2F;blob&#x2F;master&#x2F;liquidfun&#x2F;Bo...</a><p>[7] <a href="https:&#x2F;&#x2F;birchlabs.co.uk&#x2F;lunar-survey&#x2F;" rel="nofollow">https:&#x2F;&#x2F;birchlabs.co.uk&#x2F;lunar-survey&#x2F;</a>

Compared to the original liquidfun tests, e.g. the wave tank, this looks a lot more unstable and has more of a tendency to form solid-like crystal structures inside the liquid, which damp out total momentum faster than you want. I suspect you could improve the realism quite a bit by tuning either time step size (downwards) or the particle interaction strength. Or there is a bug introduced somewhere in the rebasing process.

<a href="http:&#x2F;&#x2F;madebyevan.com&#x2F;webgl-water&#x2F;" rel="nofollow">http:&#x2F;&#x2F;madebyevan.com&#x2F;webgl-water&#x2F;</a> is a decade old but still impresses me. The water caustics are particularly neat.

Awesome! Does it use wasm-simd? If it does do you know how much impact it has on the performance?

I worked on this at Google!<p>We built another open source example app called Voltair based on LiquidFun:<p><a href="https:&#x2F;&#x2F;github.com&#x2F;google&#x2F;VoltAir" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;google&#x2F;VoltAir</a>

Nice to see such a high performance demo running on web technologies, gives me trust that we can finally do more complex and jitter-free graphics on web-applications.<p>Thanks for sharing and creating this.

Could you train a ML model that fills in the gaps in the fluid simulation like they do in ray tracing?

This looks great - I like how the &quot;simple shader&quot; version gives a sense for how it works under the hood.<p>Is the implementation of it related to real-world mechanisms, or is it all smoke-and-mirrors that happens to look like real-world liquids? (Or, is the distinction non-important?!)

&gt; Built with box2d-wasm&#x27;s liquidfun release.<p>Very nice! How does this relate to the Google official release of Liquidfun, and the mainline release of Box2D?

Very impressed by how well this works on mobile.

It works on iphone 7 but the page does a refresh 2 seconds in to a fallback page then again to s “problem occured” page

Could you train a ML model that smoothes out the fluid simulation like they do with ray tracing?

What is the total size of the webpage that is downloaded to the user system?

It looks really good! Gravity, drag and temporal blend make nice visual effects.

Is this faster than a regular JS+WebGL version?

Looks amazing!

This is cool!