Mandelbrot set with WASM

Experimental project to test WASM and WebWorkers https://mandelbrot-wasm.web.app/

Install

    npm install

For rust, make sure you installed Rust lang, then run:

    cargo install wasm-pack
    cargo install wasm-snip

Run locally

    npm run server

then open http://127.0.0.1:8080

Build all render engines

    npm run build

Render engines

Native JS

The baseline implementation of the Mandelbrot set rendering

Native WASM

WASM has human readable text format, the file extension is usually wat. This format must be transformed into binary WASM

• Official site
• Specification
• Old but informative reference
• WAT ot WASM compiler
• Good step by step tutorial

AssemblyScript -> WASM

AssemblyScript is a TypeScript like language what we can compile to WASM

• Project repo
• The AssemblyScript Book

Rust -> WASM

Rust is a modern system language (like C, C++). With wasm-pack we can compile rust code to WASM

• wasm-pack site
• Rust and WebAssembly book
• wasm-snip - wasm optimiser

Limitations / bugs

• The app works only in chromium based browsers right now

Other

More link

• Rust lang site
• WASM by examples
• Webassembly Studio

Takeaways:

• WASM average execution time is a little slower then native JS (with the current implementation of WASM + Mandelbrot is very specific problem the engine can optimise JS very well)
• Naive hand written WASM can not beat the compiled and optimized code
• WASM not start new thread, you have to run it in webWorker for that.