WebAssembly入門

// Loading a .wasm module
const response = await fetch('/my-module.wasm');
const buffer = await response.arrayBuffer();
const module = await WebAssembly.instantiate(buffer, {});
const { memory, add, allocate } = module.instance.exports;

// Read from Wasm memory
const view = new Uint8Array(memory.buffer);
console.log(view[0]);  // byte at offset 0

// Write into Wasm memory
view[100] = 42;

# Install target
rustup target add wasm32-unknown-unknown
cargo install wasm-pack

// src/lib.rs
use wasm_bindgen::prelude::*;

// Exported to JavaScript
#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u64 {
    match n {
        0 => 0,
        1 => 1,
        _ => {
            let mut a = 0u64;
            let mut b = 1u64;
            for _ in 2..=n {
                let c = a + b;
                a = b;
                b = c;
            }
            b
        }
    }
}

// Pass and return strings
#[wasm_bindgen]
pub fn process_json(input: &str) -> String {
    // serde_json works in Wasm
    let v: serde_json::Value = serde_json::from_str(input)
        .unwrap_or(serde_json::Value::Null);
    format!("Processed: {} fields", v.as_object().map(|o| o.len()).unwrap_or(0))
}

wasm-pack build --target web

import init, { fibonacci, process_json } from './pkg/my_module.js';

await init(); // loads and instantiates the .wasm
console.log(fibonacci(40));  // 102334155, runs in ~0.1ms
console.log(process_json('{"a":1,"b":2}'));  // "Processed: 2 fields"

# Install
git clone https://github.com/emscripten-core/emsdk.git
./emsdk/emsdk install latest && ./emsdk/emsdk activate latest
source ./emsdk/emsdk_env.sh

// image_process.c
#include <stdint.h>
#include <stdlib.h>

// Grayscale a pixel buffer in-place
void grayscale(uint8_t* data, int width, int height) {
    int num_pixels = width * height;
    for (int i = 0; i < num_pixels; i++) {
        int idx = i * 4;
        uint8_t r = data[idx], g = data[idx+1], b = data[idx+2];
        uint8_t gray = (uint8_t)(0.299f * r + 0.587f * g + 0.114f * b);
        data[idx] = data[idx+1] = data[idx+2] = gray;
    }
}

emcc image_process.c -o image_process.js \
  -s EXPORTED_FUNCTIONS='["_grayscale", "_malloc", "_free"]' \
  -s EXPORTED_RUNTIME_METHODS='["ccall", "cwrap"]' \
  -O2

const Module = await import('./image_process.js');
await Module.default();

const grayscale = Module.cwrap('grayscale', null, ['number', 'number', 'number']);

// Get pixel data from canvas
const ctx = canvas.getContext('2d');
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

// Copy into Wasm memory
const ptr = Module._malloc(imageData.data.length);
Module.HEAPU8.set(imageData.data, ptr);

// Run C function
grayscale(ptr, canvas.width, canvas.height);

// Copy back
imageData.data.set(Module.HEAPU8.subarray(ptr, ptr + imageData.data.length));
ctx.putImageData(imageData, 0, 0);
Module._free(ptr);

wasm-pack build --release
wasm-opt -O3 -o pkg/my_module_opt.wasm pkg/my_module_bg.wasm