Learning Web Assembly

Web Assembly is a technology that allows code to be compiled to a portable byte code that can be run at near-native performance.

Web Assembly modules can be run by modern browsers and called from within the Javascript of a normal web page.

This offers the tantalizing prospect of creating high-performance code for games that can run on multiple platforms without the need for the user to download or install any ‘apps’.

Mandelbrot Web Assembly

A view from within the Mandelbrot Set

The first full project I have completed using Web Assembly in the browser is a Mandelbrot Fractal Explorer.

This was a good project to learn Web Assembly as it involves a looping procedure that can require many thousands of iterations.

The Mandelbrot Set is implemented in C with a function that can be called from Javascript. There is no shared state between any of the function calls.

You can try the Mandelbrot Explorer here:


The source code is available here – in a repository I’m using to collect the projects I use to learn how to use Web Assembly:


Future Learning

The next project I try with Web Assembly will be a Cellular Automata. This will let me try something with a persistent state inside the Web-Assembly module.

I’d like to try using PixiJS as a renderer to see if it’s possible to speed up the access to the pixel buffer.

The GUI for the Mandelbrot explorer was hacked together in a few days using native Javascript. It is a bit of a pain to keep a DOM form full of data in sync with the data being used to render the image so I may try using a framework such as VueJS for this purpose.

Learning how to render the Mandelbrot set is a lot of fun and it is addictive to mess with the colours and improve performance. I ultimately decided on a limited set of features just to get the project complete as my main goal was to learn Web Assembly – not make the perfect Mandelbrot renderer.

A gallery of screenshots taken during the development process can be found here: