⏱️ Lectura: 12 min
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.
📑 En este artículo
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<storage, read_write> data: array<f32>;
@compute @workgroup_size(64)
fn main(@builtin(global_invocation_id) id: vec3<u32>) {
let i = id.x;
if (i < arrayLength(&data)) {
data[i] = data[i] * 2.0;
}
}4. Crear un pipeline y enviar comandos
Un pipeline empaqueta el shader compilado, el layout de los bind groups y la configuración de render. Una vez creado es inmutable: si quieres cambiar parámetros, creas otro. Los comandos se graban en un GPUCommandEncoder, se cierran como un GPUCommandBuffer y se envían en lote al device con device.queue.submit(). Este modelo de “grabar y enviar” reduce el coste por llamada y permite a la GPU procesar miles de operaciones sin volver a JavaScript.
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<storage, read_write=""> data: array<f32>;
@compute @workgroup_size(64)
fn main(@builtin(global_invocation_id) id: vec3<u32>) {
let i = id.x;
if (i < arrayLength(&data)) { data[i] = data[i] * 2.0; }
}
`,
});
const pipeline = device.createComputePipeline({
layout: "auto",
compute: { module, entryPoint: "main" },
});
const bindGroup = device.createBindGroup({
layout: pipeline.getBindGroupLayout(0),
entries: [{ binding: 0, resource: { buffer: gpuBuffer } }],
});
const encoder = device.createCommandEncoder();
const pass = encoder.beginComputePass();
pass.setPipeline(pipeline);
pass.setBindGroup(0, bindGroup);
pass.dispatchWorkgroups(Math.ceil(input.length / 64));
pass.end();
device.queue.submit([encoder.finish()]);</u32></f32></storage,>Ese código lanza workgroups de 64 threads cada uno y procesa todos los elementos del array en paralelo. En una GPU moderna, multiplicar un array de un millón de elementos toma menos de un milisegundo. Para arrays de mil elementos la diferencia con JavaScript puro no se nota; para arrays de millones, la GPU es entre 50 y 200 veces más rápida.
Casos de uso reales en 2026
Inteligencia artificial en el navegador
El caso de uso que más empuja la adopción de WebGPU es la inferencia de modelos de IA en local. Bibliotecas como transformers.js, WebLLM y ONNX Runtime Web usan WebGPU para correr modelos de lenguaje, traducción, generación de imágenes y reconocimiento de voz directamente en la pestaña, sin enviar datos a un servidor. Modelos pequeños tipo Phi, Llama 3.2 1B o Mistral cuantizados a 4 bits caben en GPUs de consumo y responden en tiempo aceptable.
Juegos web de alta gama
Los motores Unreal y Unity ya soportan WebGPU como backend de exportación a la web. La diferencia con WebGL es notable: shaders de iluminación basados en física, sombras dinámicas y geometría compleja que en WebGL exigían trucos costosos, en WebGPU se renderizan con código casi idéntico al de la versión nativa.
Visualización científica y dashboards
Bibliotecas como deck.gl y regl-webgpu permiten dibujar millones de puntos, polígonos o líneas en mapas interactivos sin que el navegador se atasque. Es lo que usan dashboards de telemetría, herramientas de bioinformática y visores de datos satelitales.
Edición de video y audio
Editores de video en el navegador como Clipchamp y herramientas de procesamiento de audio aplican filtros, transcodificación y efectos en tiempo real usando compute shaders, evitando descargar gigabytes a un servidor para procesarlos.
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.
0 Comentarios