WebGPU: cómo programar la GPU desde el navegador en 2026

Durante más de una década, WebGL fue la única forma de pintar gráficos acelerados en un navegador. Funcionaba, pero arrastraba las limitaciones de OpenGL ES 2.0, una API diseñada en 2007 para teléfonos de la época. En 2026, ese capítulo se cerró: WebGPU es ahora la API estándar para acceder a la GPU desde JavaScript, y abre la puerta a algo que WebGL nunca pudo ofrecer bien: computación de propósito general en la GPU dentro del navegador.

Si has oído hablar de Stable Diffusion corriendo en una pestaña sin instalar nada, de modelos de lenguaje pequeños ejecutándose localmente sin enviar datos a un servidor, o de juegos AAA portados directamente a la web, WebGPU es la pieza que lo hace posible. También sirve para simulaciones físicas, visualizaciones científicas, edición de video en el navegador y aceleración de algoritmos que antes requerían WebAssembly con SIMD. Esta guía explica qué es, cómo funciona internamente, qué problemas resuelve respecto a WebGL y cómo escribir tu primer programa de cómputo en GPU desde el navegador. No necesitas saber Vulkan, DirectX ni Metal: WebGPU abstrae las tres APIs nativas detrás de una interfaz unificada y portable.

Qué es WebGPU

WebGPU es una API web estandarizada por el World Wide Web Consortium (W3C) que permite a las aplicaciones web acceder a la GPU del dispositivo para tareas de gráficos y cómputo. La diseñaron Apple, Google, Mozilla, Microsoft e Intel a partir de 2017, alcanzó estabilidad en Chrome 113 en abril de 2023, llegó a Safari 17.4 durante 2024-2025 y entró en Firefox estable a principios de 2026 tras años en banderas experimentales.

A diferencia de WebGL, que es esencialmente una capa delgada sobre OpenGL ES 2.0/3.0, WebGPU se diseñó pensando en las APIs gráficas modernas que ya existen en cada sistema operativo. Por dentro, el navegador traduce cada llamada de WebGPU al backend nativo apropiado: Vulkan en Linux y Android, Metal en macOS e iOS, y Direct3D 12 en Windows. Esa traducción es lo bastante delgada como para conseguir rendimiento cercano al nativo, y lo bastante segura como para ejecutar código no confiable dentro de una pestaña.

💭 Clave: WebGPU no es "WebGL 2.0". Es una API completamente nueva con un modelo mental distinto: no se programa la GPU como una máquina de estados global, sino como un sistema de comandos explícitos y recursos tipados.

La diferencia con WebGL en una analogía

WebGL es como conducir un auto automático de los noventa: cómodo, perdona errores, pero opaco. WebGPU es como conducir un Fórmula 1: tienes que pensar en cada cambio de marcha, pero a cambio obtienes velocidad, control y predictibilidad. WebGL tenía una máquina de estados global: activar un shader, un buffer o una textura eran operaciones implícitas que la GPU procesaba en orden, y si dos partes del código modificaban el mismo estado podían pisarse mutuamente. WebGPU elimina ese problema: todo lo que la GPU necesita ejecutar viene empaquetado en un objeto inmutable llamado pipeline, y los recursos se agrupan en bind groups que se enlazan explícitamente. El resultado es código más predecible, paralelizable y fácil de optimizar.

Cómo funciona WebGPU paso a paso

Para usar WebGPU necesitas seguir cuatro pasos básicos: pedir un dispositivo, crear los recursos, escribir un shader y enviar comandos a la GPU. El flujo a alto nivel se ve así:

graph LR
    A["JavaScript"] --> B["GPUDevice"]
    B --> C["Buffers y Texturas"]
    C --> D["Shader WGSL"]
    D --> E["Pipeline"]
    E --> F["Command Encoder"]
    F --> G["GPU"]

1. Pedir un GPUAdapter y un GPUDevice

El punto de entrada es navigator.gpu. Desde ahí pides un adapter (la GPU física disponible en el equipo) y, a partir del adapter, un device que es el canal lógico por el que envías comandos. El navegador puede entregar varios devices al mismo origen, lo que permite aislar contextos y limitar recursos.

if (!navigator.gpu) {
  throw new Error("WebGPU no está soportado en este navegador");
}

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

2. Crear buffers y texturas

Los buffers son bloques de memoria en la GPU donde guardas datos: vértices, índices, parámetros uniformes o resultados de un cómputo. Cada buffer se crea con un tamaño fijo y un conjunto de banderas de uso (VERTEX, UNIFORM, STORAGE, COPY_SRC, COPY_DST). Las texturas son similares pero con dimensiones 2D/3D y formatos como rgba8unorm o r32float.

3. Escribir un shader en WGSL

WebGPU introduce su propio lenguaje de shaders: WGSL (WebGPU Shading Language). Es similar a Rust en sintaxis y se compila por debajo a SPIR-V en Vulkan, MSL en Metal y HLSL en DirectX. WGSL fue diseñado para ser seguro: prohíbe punteros sin restricciones, exige tipos explícitos y rechaza accesos fuera de rango en tiempo de compilación.

@group(0) @binding(0) var data: array;

@compute @workgroup_size(64)
fn main(@builtin(global_invocation_id) id: vec3) {
  let i = id.x;
  if (i El pipeline de WebGPU empaqueta shader, recursos y configuración en un objeto inmutable.

## Ejemplo práctico: duplicar un array en la GPU

Veamos un ejemplo end-to-end que toma un array de números, lo sube a la GPU, lo multiplica por dos en paralelo y lo descarga de vuelta a JavaScript. Es el "hello world" del cómputo en GPU:

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

const input = new Float32Array([1, 2, 3, 4, 5, 6, 7, 8]);

const gpuBuffer = device.createBuffer({
size: input.byteLength,
usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC | GPUBufferUsage.COPY_DST,
});
device.queue.writeBuffer(gpuBuffer, 0, input);

const module = device.createShaderModule({
code: `
@group(0) @binding(0) var data: array;
@compute @workgroup_size(64)
fn main(@builtin(global_invocation_id) id: vec3) {
let i = id.x;
if (i WebGPU permite cómputo general en la GPU, algo que WebGL nunca soportó nativamente.

Ventajas y desventajas de WebGPU

Ventajas

• Cómputo general nativo — los compute shaders abren la puerta a IA, simulaciones y procesamiento de datos en GPU.
• Mejor rendimiento — overhead por llamada mucho más bajo que WebGL, lo que permite escenas con miles de objetos.
• Errores explícitos — los recursos están tipados y validados, los shaders se compilan en una pasada y los errores aparecen donde corresponde.
• Portabilidad real — el mismo código corre sobre Vulkan, Metal y DirectX 12 sin cambios.
• WGSL seguro — diseñado para ejecutar código no confiable sin abrir vectores de ataque a la GPU.

Desventajas

• Curva de aprendizaje — más conceptos que WebGL: pipelines, bind groups, layouts explícitos.
• Más código boilerplate — un "hola triángulo" en WebGPU son 100 líneas; en WebGL eran 30.
• Compatibilidad incompleta — algunas GPUs antiguas o de smartphones de gama baja no lo soportan, aunque la cobertura ya supera el 85% en 2026.
• Documentación dispersa — al ser una API joven, los tutoriales aún están desactualizados o incompletos.

⚠️ Ojo: si tu aplicación necesita soportar navegadores antiguos o iPhones previos a iOS 17, sigues necesitando un fallback a WebGL. La detección con if (navigator.gpu) es obligatoria antes de cualquier llamada.

WebGPU vs WebGL vs CUDA

Para situar a WebGPU respecto a sus alternativas: WebGL sigue siendo el lowest common denominator y el único soporte universal a 2026; WebGPU es la API moderna pensada para hardware de la última década; y CUDA es la API propietaria de NVIDIA que solo corre en sus GPUs y solo fuera del navegador. WebGPU no compite con CUDA en términos de rendimiento absoluto en data centers, pero sí lo hace en accesibilidad: cualquier desarrollador con un navegador puede ejecutar cómputo en GPU sin instalar drivers ni compiladores nativos. Para machine learning ligero, gráficos en tiempo real y procesamiento de datos en aplicaciones web, WebGPU es ya la opción por defecto.

📖 Resumen en Telegram: Ver resumen

Preguntas frecuentes

¿WebGPU reemplaza completamente a WebGL?

No de inmediato. WebGL sigue funcionando y los navegadores lo mantendrán durante años por compatibilidad. Sin embargo, todo desarrollo nuevo de gráficos avanzados o cómputo en GPU debería empezar con WebGPU y dejar WebGL como fallback solo si necesitas soportar dispositivos antiguos.

¿Necesito una GPU dedicada para usar WebGPU?

No. WebGPU funciona sobre GPUs integradas (Intel UHD, AMD Radeon Vega, Apple Silicon) y sobre GPUs discretas. Las integradas tendrán menos rendimiento, pero la API es exactamente la misma. Lo único que necesitas es un navegador reciente y un sistema operativo con soporte para Vulkan, Metal o DirectX 12.

¿Funciona en móviles?

Sí. Chrome y Safari en Android e iOS modernos soportan WebGPU. La cobertura de iPhone llega hasta el modelo 11 (Apple A13) y en Android depende de que el fabricante mantenga drivers Vulkan actualizados, lo que ya es estándar en gama media-alta.

¿Cómo es WGSL comparado con GLSL?

WGSL es más estricto: tipos explícitos obligatorios, sin coerciones implícitas, sin punteros libres y con sintaxis más cercana a Rust que a C. La curva inicial es ligeramente mayor, pero los errores son más claros y el código resulta más portable entre plataformas.

¿Puedo usar WebGPU para entrenar modelos de IA?

Para inferencia es ideal. Para entrenamiento serio sigue siendo más práctico usar CUDA o ROCm en un servidor: WebGPU no expone primitivas de bajo nivel como tensor cores y los modelos grandes no caben en VRAM de consumo. Para fine-tuning ligero o experimentos educativos, sí es viable.

¿Qué frameworks soportan WebGPU en 2026?

Three.js, Babylon.js, Unity, Unreal Engine, transformers.js, WebLLM, ONNX Runtime Web, TensorFlow.js, deck.gl y PlayCanvas tienen soporte estable. La adopción siguió creciendo a lo largo de 2025 y 2026 conforme Safari y Firefox lo habilitaron por defecto.

Referencias

• MDN Web Docs — WebGPU API — referencia oficial completa con guías y ejemplos.
• W3C — WebGPU Specification — especificación normativa de la API.
• W3C — WGSL Specification — especificación del lenguaje de shaders WGSL.
• GitHub — gpuweb/gpuweb — repositorio oficial donde se discute la evolución del estándar.
• Wikipedia — WebGPU — historia, contexto y estado de soporte por navegador.

📱 ¿Te gusta este contenido? Únete a nuestro canal de Telegram @programacion donde publicamos a diario lo más relevante de tecnología, IA y desarrollo. Resúmenes rápidos, contenido fresco todos los días.