WebAssembly works

I recently helped my friend Louis with his educational mechanical engineering game, StressIt (link).

At first, the game was unusably slow. The earlier levels would take a few seconds to calculate results, while the larger levels would cause my browser to grind to a halt entirely. In performance profiling, we found almost all the time was spent in a large matrix multiply in a finite element method calculation, which was implemented in pure Javascript through math.js.

Through trial and error, I figured out to use WebAssembly to run a C implementation of matrix multiply in the create-react-app project (more details on this in the demo repo). Then Louis moved even more of the computation into the WebAssembly module. The end result was unbelievably snappy and ran orders of magnitude faster: it took just a fraction of a second to run a calculation that previously caused my browser tab to hang forever. Louis was able to add even more complex levels to the game.

For me, this experience was a live demonstration that WebAssembly has incredible value. Without it, the game couldn't exist in the form it does today. Maybe you would need to download a native app, which would drastically increase the barrier to trying it. Or, we would need to set up a backend server to do the calculations, which would make it much more annoying to deploy and maintain. Or, we would need to reduce the scope or resolution of the calculations being done, which would limit its educational benefit.

With WebAssembly, we were able to do heavy numerical computation, super fast, completely client-side in the browser. I'm excited to see what other previously-impossible use cases WebAssembly enables.

Thanks Louis, for doing the real work on StressIt and inviting me to contribute little technical things. Thanks Michael L., Michael H., and Andy for feedback on the react-wasm-demo project.