# Inviscid and incompressible Navier-Stokes equations in 2D implemented in Julia and compiled to WASM

**URL:** <https://discourse.julialang.org/t/inviscid-and-incompressible-navier-stokes-equations-in-2d-implemented-in-julia-and-compiled-to-wasm/97474>\
**Category:** Geo\
**Tags:** webapps, wasm\
**Created:** [April 14, 2023, 12:54pm UTC](https://discourse.julialang.org/t/inviscid-and-incompressible-navier-stokes-equations-in-2d-implemented-in-julia-and-compiled-to-wasm/97474 "2023-04-14T12:54:05Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Alexander-Barth](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/alexander-barth/32/3692_2.png) [@Alexander-Barth](https://discourse.julialang.org/u/Alexander-Barth)\
**Post date:** [April 14, 2023, 12:54pm UTC](https://discourse.julialang.org/t/inviscid-and-incompressible-navier-stokes-equations-in-2d-implemented-in-julia-and-compiled-to-wasm/97474/1 "2023-04-14T12:54:05Z")

</div>

I recently made an online demo of the 2D Navier-Stokes equation running in a web-browser.

[https://alexander-barth.github.io/FluidSimDemo-WebAssembly/](https://alexander-barth.github.io/FluidSimDemo-WebAssembly/)

My kids like to play with it to build dams and other obstacles in the flow which you can do via the mouse 🙂

I took some notes here to get the WASM part to work:

> **[GitHub - Alexander-Barth/FluidSimDemo-WebAssembly](https://github.com/Alexander-Barth/FluidSimDemo-WebAssembly)**
>
> Contribute to Alexander-Barth/FluidSimDemo-WebAssembly development by creating an account on GitHub.

Basically, I allocate all arrays in JavaScript and use the array type from StaticTools.jl (MallocArray). GPUCompiler is used to generate the WASM output. Only a small subset of julia can currently be used this way, but enough for fluid simulations. The upside is that the WASM binary is very small and the demo loads quickly.

---

<div class="post-metadata">

**Author:** ![PetrKryslUCSD](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/petrkryslucsd/32/215825_2.png) [@PetrKryslUCSD](https://discourse.julialang.org/u/PetrKryslUCSD)\
**Post date:** [April 14, 2023, 1:33pm UTC](https://discourse.julialang.org/t/inviscid-and-incompressible-navier-stokes-equations-in-2d-implemented-in-julia-and-compiled-to-wasm/97474/2 "2023-04-14T13:33:12Z")

</div>

Very impressive!

---

<div class="post-metadata">

**Author:** ![Raf](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/raf/32/3383_2.png) [@Raf](https://discourse.julialang.org/u/Raf)\
**Post date:** [April 14, 2023, 1:48pm UTC](https://discourse.julialang.org/t/inviscid-and-incompressible-navier-stokes-equations-in-2d-implemented-in-julia-and-compiled-to-wasm/97474/3 "2023-04-14T13:48:53Z")

</div>

Thats a pretty slick demo! Good to see how much you can do already in WASM.

Now if we can somehow integrate this with WGLMakie.jl…

---

<div class="post-metadata">

**Author:** ![Alexander-Barth](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/alexander-barth/32/3692_2.png) [@Alexander-Barth](https://discourse.julialang.org/u/Alexander-Barth)\
**Post date:** [April 15, 2023, 7:22am UTC](https://discourse.julialang.org/t/inviscid-and-incompressible-navier-stokes-equations-in-2d-implemented-in-julia-and-compiled-to-wasm/97474/4 "2023-04-15T07:22:55Z")

</div>

Yes that would be awesome! But that won’t be for tomorrow… Currently only elementary math operations work. Named tuples worked too because they could be optimised-out after in-lining all function calls.

---

<div class="post-metadata">

**Author:** ![mkitti](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mkitti/32/12459_2.png) [@mkitti](https://discourse.julialang.org/u/mkitti)\
**Post date:** [April 21, 2023, 11:14am UTC](https://discourse.julialang.org/t/inviscid-and-incompressible-navier-stokes-equations-in-2d-implemented-in-julia-and-compiled-to-wasm/97474/5 "2023-04-21T11:14:42Z")

</div>

> [@Alexander-Barth](#):
>
> CPUCompiler is used to generate the WASM output

What is CPUCompiler? or do you mean GPUCompiler.jl?

---

<div class="post-metadata">

**Author:** ![Alexander-Barth](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/alexander-barth/32/3692_2.png) [@Alexander-Barth](https://discourse.julialang.org/u/Alexander-Barth)\
**Post date:** [April 21, 2023, 11:36am UTC](https://discourse.julialang.org/t/inviscid-and-incompressible-navier-stokes-equations-in-2d-implemented-in-julia-and-compiled-to-wasm/97474/6 "2023-04-21T11:36:02Z")

</div>

yes, indeed. I corrected the typo. Thanks!  
(ironically, nothing runs on the GPU actually).

---

<div class="post-metadata">

**Author:** ![Alexander-Barth](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/alexander-barth/32/3692_2.png) [@Alexander-Barth](https://discourse.julialang.org/u/Alexander-Barth)\
**Post date:** [May 3, 2023, 2:34pm UTC](https://discourse.julialang.org/t/inviscid-and-incompressible-navier-stokes-equations-in-2d-implemented-in-julia-and-compiled-to-wasm/97474/7 "2023-05-03T14:34:06Z")

</div>

Here is another example of the shallow water equations (for example long waves on the surface of the ocean, like tides)

[https://alexander-barth.github.io/FluidSimDemo-WebAssembly/ShallowWater/](https://alexander-barth.github.io/FluidSimDemo-WebAssembly/ShallowWater/)

---

<div class="post-metadata">

**Author:** ![PetrKryslUCSD](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/petrkryslucsd/32/215825_2.png) [@PetrKryslUCSD](https://discourse.julialang.org/u/PetrKryslUCSD)\
**Post date:** [May 3, 2023, 3:44pm UTC](https://discourse.julialang.org/t/inviscid-and-incompressible-navier-stokes-equations-in-2d-implemented-in-julia-and-compiled-to-wasm/97474/8 "2023-05-03T15:44:39Z")

</div>

That is interesting. Do you know what sort of fakery is involved in transferring the field to the new domain after a hole had been made?

---

<div class="post-metadata">

**Author:** ![Alexander-Barth](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/alexander-barth/32/3692_2.png) [@Alexander-Barth](https://discourse.julialang.org/u/Alexander-Barth)\
**Post date:** [May 3, 2023, 3:51pm UTC](https://discourse.julialang.org/t/inviscid-and-incompressible-navier-stokes-equations-in-2d-implemented-in-julia-and-compiled-to-wasm/97474/9 "2023-05-03T15:51:58Z")

</div>

When you make a hole, the corresponding grid cells are set to zero velocity and zero surface elevation which creates these kind of shock waves that you are seeing to adjust the flow field.

---

<div class="post-metadata">

**Author:** ![SteffenPL](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/steffenpl/32/206270_2.png) [@SteffenPL](https://discourse.julialang.org/u/SteffenPL)\
**Post date:** [May 3, 2023, 3:53pm UTC](https://discourse.julialang.org/t/inviscid-and-incompressible-navier-stokes-equations-in-2d-implemented-in-julia-and-compiled-to-wasm/97474/10 "2023-05-03T15:53:21Z")

</div>

I was dreaming of some Julia/WASM project like that. Thanks you so much for sharing, I will study your code in detail now 🙂 (I hope I can use a similar strategy for my projects too.)

I was about to go to sleep 💤 Now I cannot sleep. 💥

---

<div class="post-metadata">

**Author:** ![Alexander-Barth](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/alexander-barth/32/3692_2.png) [@Alexander-Barth](https://discourse.julialang.org/u/Alexander-Barth)\
**Post date:** [May 3, 2023, 4:02pm UTC](https://discourse.julialang.org/t/inviscid-and-incompressible-navier-stokes-equations-in-2d-implemented-in-julia-and-compiled-to-wasm/97474/11 "2023-05-03T16:02:20Z")

</div>

To me the most difficult part is to figure-out how to pass data between javascript and julia… But this example might be useful then.

Yes these waves look a bit hypnotic sometimes 🙂