2024-01-08 ENGINEERING

El Motor <10KB: Adiós GPU

Cómo redujimos el tamaño del bundle en un 99% reemplazando WebGPU con matemáticas vectoriales puras en Rust.

Cuando empezamos Holi QR, queríamos que fuera espectacular. Usamos WebGPU, la tecnología gráfica más avanzada de la web. Lucía increíble. Tenía brillos, partículas y "Efecto Líquido".

Pero tenía un precio: 2 Megabytes de WASM.

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

El Problema con la GPU para códigos 2D

Usar una tarjeta gráfica para dibujar cuadrados negros (un QR) es como usar un cohete espacial para cruzar la calle. Funciona, y es impresionante, pero es excesivo.

Además, los QRs generados por GPU son píxeles. Si haces zoom, se ven borrosos. Para imprimir gigantografías, necesitas vectores (SVG).

La Solución: "El Camino Inteligente"

En lugar de decirle a la GPU que dibuje miles de triángulos, le dijimos a Rust que calculara una sola línea matemática.

Un código QR es solo una matriz de 1s y 0s. Iteramos esa matriz y construimos un <path> SVG.

            
              // Rust (Simplificado)
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] {
                // Mueve al punto, dibuja 1x1
                path.push_str(&format!("M{},{}h1v1h-1z ", x, y));
            }
        }
    }

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

Resultados

A veces, la mejor ingeniería no es usar la herramienta más nueva, sino la más adecuada.

Back to Papers