WebAssembly Beyond the Hype: When It Actually Makes Sense | Akousa

rust

use wasm_bindgen::prelude::*;
 
#[wasm_bindgen]
pub fn process_image(
    pixels: &[u8],
    width: u32,
    height: u32,
    brightness: f32,
) -> Vec<u8> {
    let mut output = Vec::with_capacity(pixels.len());
    for chunk in pixels.chunks(4) {
        let r = (chunk[0] as f32 * brightness).min(255.0) as u8;
        let g = (chunk[1] as f32 * brightness).min(255.0) as u8;
        let b = (chunk[2] as f32 * brightness).min(255.0) as u8;
        let a = chunk[3];
        output.extend_from_slice(&[r, g, b, a]);
    }
    output
}

typescript

// AssemblyScript - looks like TS, is not TS
export function processPixels(ptr: usize, len: i32, brightness: f32): void {
  for (let i: i32 = 0; i < len; i += 4) {
    let r = load<u8>(ptr + i);
    let g = load<u8>(ptr + i + 1);
    let b = load<u8>(ptr + i + 2);
    store<u8>(ptr + i, u8(min(f32(r) * brightness, 255.0)));
    store<u8>(ptr + i + 1, u8(min(f32(g) * brightness, 255.0)));
    store<u8>(ptr + i + 2, u8(min(f32(b) * brightness, 255.0)));
  }
}

javascript

const memory = new WebAssembly.Memory({ initial: 256, maximum: 512 });
const instance = await WebAssembly.instantiate(wasmModule, {
  env: { memory },
});
 
// Read data from WASM's memory
const buffer = new Uint8Array(memory.buffer);
const result = buffer.slice(outputPtr, outputPtr + outputLen);

javascript

const view = new Uint8Array(memory.buffer);
// ... call a WASM function that allocates memory and triggers growth ...
instance.exports.process_data(inputPtr, inputLen);
// view is now DETACHED - accessing it throws or returns garbage
// You must re-create the view:
const freshView = new Uint8Array(memory.buffer);

rust

use wasm_bindgen::prelude::*;
use serde::{Serialize, Deserialize};
 
#[derive(Serialize, Deserialize)]
pub struct ProcessingResult {
    pub width: u32,
    pub height: u32,
    pub histogram: Vec<u32>,
    pub dominant_color: [u8; 3],
}
 
#[wasm_bindgen]
pub fn analyze_image(pixels: &[u8], width: u32, height: u32) -> JsValue {
    let result = ProcessingResult {
        width,
        height,
        histogram: compute_histogram(pixels),
        dominant_color: find_dominant(pixels),
    };
    serde_wasm_bindgen::to_value(&result).unwrap()
}

javascript

const sharedMemory = new WebAssembly.Memory({
  initial: 256,
  maximum: 512,
  shared: true,
});
 
// Both workers see the same memory
worker1.postMessage({ memory: sharedMemory, task: "processTop" });
worker2.postMessage({ memory: sharedMemory, task: "processBottom" });

javascript

// Load the WASM module once at startup
import init, { processImage } from "./image_processor_bg.wasm";
 
await init();
 
// Call into WASM for the heavy work
function applyFilter(imageData, filterType) {
  const pixels = new Uint8Array(imageData.data.buffer);
  const result = processImage(pixels, imageData.width, imageData.height, filterType);
  return new ImageData(new Uint8ClampedArray(result), imageData.width, imageData.height);
}

javascript

// worker.js
import init, { processChunk } from "./processor_bg.wasm";
 
let initialized = false;
 
self.onmessage = async (event) => {
  if (!initialized) {
    await init();
    initialized = true;
  }
 
  const { pixels, width, height, taskId } = event.data;
  const result = processChunk(pixels, width, height);
 
  self.postMessage(
    { taskId, result },
    [result.buffer], // Transfer ownership, zero-copy
  );
};

javascript

// main.js
const worker = new Worker(new URL("./worker.js", import.meta.url), {
  type: "module",
});
 
function processImageAsync(imageData) {
  return new Promise((resolve) => {
    const taskId = crypto.randomUUID();
    const handler = (event) => {
      if (event.data.taskId === taskId) {
        worker.removeEventListener("message", handler);
        resolve(event.data.result);
      }
    };
    worker.addEventListener("message", handler);
    worker.postMessage(
      {
        taskId,
        pixels: imageData.data.buffer,
        width: imageData.width,
        height: imageData.height,
      },
      [imageData.data.buffer],
    );
  });
}

javascript

let wasmProcessor = null;
 
async function initProcessor() {
  try {
    const module = await import("./wasm_processor_bg.wasm");
    await module.default();
    wasmProcessor = module;
  } catch (error) {
    console.warn("WASM unavailable, using JS fallback");
  }
}
 
function processData(input) {
  if (wasmProcessor) {
    return wasmProcessor.process(input);
  }
  return jsProcessFallback(input);
}

wit

package image:processor@1.0.0;
 
interface types {
    record image {
        width: u32,
        height: u32,
        pixels: list<u8>,
    }
 
    enum filter {
        grayscale,
        blur,
        sharpen,
        edge-detect,
    }
 
    record processing-result {
        image: image,
        processing-time-ms: u64,
    }
}
 
world processor {
    import types;
 
    export apply-filter: func(img: image, filter: filter) -> processing-result;
}

javascript

function adjustBrightness(imageData, brightness, contrast) {
  const pixels = imageData.data;
  const len = pixels.length;
  const factor = (259 * (contrast + 255)) / (255 * (259 - contrast));
 
  for (let i = 0; i < len; i += 4) {
    // Apply contrast
    let r = factor * (pixels[i] - 128) + 128;
    let g = factor * (pixels[i + 1] - 128) + 128;
    let b = factor * (pixels[i + 2] - 128) + 128;
 
    // Apply brightness
    r += brightness;
    g += brightness;
    b += brightness;
 
    // Clamp to 0-255
    pixels[i] = r < 0 ? 0 : r > 255 ? 255 : r;
    pixels[i + 1] = g < 0 ? 0 : g > 255 ? 255 : g;
    pixels[i + 2] = b < 0 ? 0 : b > 255 ? 255 : b;
    // Alpha channel (i+3) unchanged
  }
 
  return imageData;
}

rust

use wasm_bindgen::prelude::*;
 
#[wasm_bindgen]
pub fn adjust_brightness(
    pixels: &mut [u8],
    brightness: f32,
    contrast: f32,
) {
    let factor = (259.0 * (contrast + 255.0)) / (255.0 * (259.0 - contrast));
 
    let len = pixels.len();
    let mut i = 0;
 
    while i < len {
        // Apply contrast
        let r = factor * (pixels[i] as f32 - 128.0) + 128.0;
        let g = factor * (pixels[i + 1] as f32 - 128.0) + 128.0;
        let b = factor * (pixels[i + 2] as f32 - 128.0) + 128.0;
 
        // Apply brightness and clamp
        pixels[i] = ((r + brightness).clamp(0.0, 255.0)) as u8;
        pixels[i + 1] = ((g + brightness).clamp(0.0, 255.0)) as u8;
        pixels[i + 2] = ((b + brightness).clamp(0.0, 255.0)) as u8;
        // Alpha unchanged
 
        i += 4;
    }
}

rust

#[cfg(target_arch = "wasm32")]
use core::arch::wasm32::*;
 
#[wasm_bindgen]
pub fn adjust_brightness_simd(
    pixels: &mut [u8],
    brightness: f32,
    contrast: f32,
) {
    let factor = (259.0 * (contrast + 255.0)) / (255.0 * (259.0 - contrast));
 
    #[cfg(target_arch = "wasm32")]
    {
        let brightness_vec = f32x4_splat(brightness);
        let factor_vec = f32x4_splat(factor);
        let offset_vec = f32x4_splat(128.0);
        let zero = f32x4_splat(0.0);
        let max_val = f32x4_splat(255.0);
 
        let chunks = pixels.len() / 4;
        for i in 0..chunks {
            let base = i * 4;
            if base + 3 >= pixels.len() { break; }
 
            // Load 4 bytes as f32x4
            let rgba = f32x4(
                pixels[base] as f32,
                pixels[base + 1] as f32,
                pixels[base + 2] as f32,
                pixels[base + 3] as f32,
            );
 
            // Apply contrast: factor * (pixel - 128) + 128
            let contrasted = f32x4_add(
                f32x4_mul(factor_vec, f32x4_sub(rgba, offset_vec)),
                offset_vec,
            );
 
            // Apply brightness
            let brightened = f32x4_add(contrasted, brightness_vec);
 
            // Clamp
            let clamped = f32x4_max(zero, f32x4_min(max_val, brightened));
 
            // Store back (skip alpha)
            pixels[base] = f32x4_extract_lane::<0>(clamped) as u8;
            pixels[base + 1] = f32x4_extract_lane::<1>(clamped) as u8;
            pixels[base + 2] = f32x4_extract_lane::<2>(clamped) as u8;
            // Leave alpha unchanged
        }
    }
}

toml

# Cargo.toml
[package]
name = "image-processor"
version = "0.1.0"
edition = "2021"
 
[lib]
crate-type = ["cdylib"]
 
[dependencies]
wasm-bindgen = "0.2"
 
[profile.release]
lto = true
opt-level = 3
strip = true

javascript

import init, { adjust_brightness } from "./pkg/image_processor.js";
 
// Initialize the WASM module
await init();
 
// Get image data from canvas
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
ctx.drawImage(sourceImage, 0, 0);
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
 
// Process with WASM
const pixels = new Uint8Array(imageData.data.buffer);
adjust_brightness(pixels, 30.0, 20.0);
 
// Put the modified pixels back
ctx.putImageData(imageData, 0, 0);

What WebAssembly Actually Is at the Binary Level

Why It Is Fast (When It Is Fast)

Why It Is Not Always Faster Than JavaScript

Real Benchmarks: When WASM Wins and When V8 Catches Up

Matrix Multiplication (1024x1024, f64)

JSON Parsing (10MB file)

SHA-256 Hashing (100MB buffer)

Image Convolution (4K image, 5x5 kernel)

Fibonacci (n=45, recursive)

The Toolchain Reality: Choosing Your Source Language

Rust

C/C++

AssemblyScript

Go

My Recommendation

Memory Management: The Part Nobody Explains Well

Linear Memory

Passing Complex Data

The GC Proposal

Shared Memory and Atomics

Practical Use Cases That Actually Justify the Complexity

Image and Video Processing

Cryptography

Physics Engines and Simulations

Codec Implementations

Porting Existing Native Libraries

Integration Patterns with JavaScript

The "Heavy Computation Offload" Pattern

Web Workers + WASM

The "Progressive Enhancement" Pattern

WASI and the Server-Side Story

The Runtime Landscape

Where WASI Makes Sense Today

Where WASI Is Not Ready

The Component Model and the Future of WASM Interoperability

When NOT to Use WebAssembly

The Decision Framework

A Real Example: Image Brightness Processor

The JavaScript Version

The Rust + WASM Version

The Build Pipeline

Benchmark Results

The Honest Cost Assessment

Looking Forward

Related Posts

Regex Cheat Sheet 2026 — Regular Expressions Made Simple

How to Compress Images Without Losing Quality: The Complete 2026 Guide