2024-01-08 ENGINEERING

The <10KB Engine: Bye GPU

How we slashed bundle size by 99% by replacing WebGPU with pure vector math in Rust.

When we started Holi QR, we wanted it to feel premium. We used WebGPU, the most advanced graphics tech on the web. It looked amazing. It had glow, particles and a “Liquid Effect”.

But it came at a cost: 2 Megabytes of WASM.

- wgpu_core.wasm (2.1 MB)
+ holi_qr_svg.wasm (0.02 MB)

The Problem with GPUs for 2D Codes

Using a graphics card to draw black squares (a QR) is like using a rocket ship to cross the street. It works, and it’s impressive, but it’s overkill.

Also: GPU QRs are pixels. Zoom in and they blur. For printing huge posters you want vectors (SVG).

The Solution: the Smart Path

Instead of telling the GPU to draw thousands of triangles, we had Rust compute a single mathematical line.

A QR code is just a matrix of 1s and 0s. We iterate that matrix and build a single <path> SVG.

            
              // Rust (Simplified)
pub fn generate_svg(matrix: &[bool], size: usize) -> String {
    let mut path = String::new();

    for y in 0..size {
        for x in 0..size {
            if matrix[y][x] {
                path.push_str(&format!("M{},{}h1v1h-1z ", x, y));
            }
        }
    }

    format!("<svg ...><path d='{}'/></svg>", path)
}
            
          

Results

Sometimes the best engineering isn’t using the newest tool, but the right one.

Back to Papers