Writing a 213-byte WebAssembly graphics demo with Rust

I worked through the excellent Rust WASM tutorials recently, but I wanted to understand how everything worked without intervening layers like wasm-bindgen and webpack. In case you’re also curious, I wrote up my notes as a tutorial.

In the tutorial, you’ll create a simple animated graphics demo using Rust, that fits in a mere 213 bytes and has no dependencies.

Making really tiny WebAssembly graphics demos

Feedback/corrections/comments wanted! (In this thread or by email.)

12 Likes

Wow, thank you for that!

I had been googling around trying to find out how to get Rust running under node.js for a week. Everything I found seemed ridiculously complex and involved bindgen, webpack and npm and all kinds of junk. I could never get down to the bottom and find out what I really needed or where to look for it.

With your example working in the browser, up to getting the meaning of life at least, I was able to put some other pieces together and run it from node.js.

Basically it's just this JS which I found somewhere, tweaked to run "the_answer()":

const fs = require('fs').promises;
const util = require('util');

async function run() {
    async function createWebAssembly(bytes) {
        const memory = new WebAssembly.Memory({ initial: 256, maximum: 256 });
        const env = {
            abortStackOverflow: (err) => { throw new Error(`overflow: ${err}`); },
            table: new WebAssembly.Table({ initial: 0, maximum: 0, element: 'anyfunc' }),
            __table_base: 0,
            memory,
            __memory_base: 1024,
            STACKTOP: 0,
            STACK_MAX: memory.buffer.byteLength,
      };
      return WebAssembly.instantiate(bytes, { env });
  }

  const result = await createWebAssembly(new Uint8Array(await fs.readFile('./www/bare_metal_wasm.wasm')));
  console.log(util.inspect(result, true, 0));
  console.log(result.instance.exports.the_answer());
}
run();

Now I have something to run with.

By the way, I loved your assembler for the Parallax Propeller MCU back in the day. I would never have looked at that chip were it not for your assembler that I could run on Linux at a time when the Propeller only had a compiler on Windows .

1 Like

This is an awesome guide, thanks !

It looks like the inline demos are not showing here for some reason, though. Browser: Firefox ESR 60.8.0 (Debian Linux), these errors in the console:

Loading failed for the module with source “http://cliffle.com/blog/bare-metal-wasm/examples.js”.
bare-metal-wasm:520
Loading failed for the <script> with source “http://cliffle.com/elasticlunr.min.js”.
bare-metal-wasm:963
Loading failed for the <script> with source “http://cliffle.com/search_index.en.js”.
bare-metal-wasm:964
Loading failed for the <script> with source “http://cliffle.com/search.js”.
bare-metal-wasm:965

It does manage to fetch the files off the server so don't know why this happens. Other webassembly demonstrations (for example funkykarts work !

It's working fine here on Firefox latest update 68.0.1 on Windows 10.