⏱️ Lectura: 11 min
La guía Learn WebGPU for C++ suma ya cinco idiomas y cubre, con capítulos marcados en verde como listos para producción, cómo levantar una aplicación gráfica 3D nativa en Windows, macOS y Linux sin depender de un navegador. El proyecto lo mantiene el desarrollador francés Elie Michel y documenta, capítulo a capítulo, cómo usar WebGPU nativo fuera del contexto para el que nació: JavaScript dentro del navegador.
📑 En este artículo
Su valor no es solo didáctico. Al usar el mismo backend, wgpu-native o Dawn, que corre dentro de Firefox y Chrome, el código C++ de la guía funciona igual en escritorio que compilado a WebAssembly para la web, con cambios mínimos.
TL;DR
- Learn WebGPU for C++ es documentación open source para programar gráficos 3D nativos en C++, sin pasar por el navegador.
- Cubre Windows, macOS y Linux con CMake y dos backends intercambiables: wgpu-native (Mozilla, Rust) y Dawn (Google, C++).
- La versión estable de referencia del proyecto es webgpu-distribution v0.2.0, marcada con el ícono verde en cada capítulo listo.
- El flag
-DWEBGPU_BACKEND=WGPUo-DWEBGPU_BACKEND=DAWNen CMake elige el backend nativo a compilar. - Cada capítulo usa un semáforo de cuatro colores para indicar qué tan actualizado está frente al spec de WebGPU.
- El mismo código C++ compila nativo o a WebAssembly vía Emscripten gracias al apéndice “Building for the Web”.
- La documentación está traducida a inglés, francés, ruso, chino y ucraniano.
- Capítulos avanzados como raytracing, sombras y árbol de escena siguen marcados TODO, sin fecha pública de entrega.
Introducción
WebGPU nació como sucesora de WebGL para dar acceso moderno a la GPU desde JavaScript, pero su diseño interno, una capa fina sobre Vulkan, Metal y Direct3D 12, la hace igual de útil fuera del navegador. Learn WebGPU for C++ enseña exactamente eso: usar WebGPU nativo, con los mismos conceptos de adaptador, dispositivo y cola de comandos, para escribir aplicaciones gráficas en C++ puro.
El proyecto está pensado como curso progresivo: arranca en “Project setup” y, cuando esté completo, termina en técnicas avanzadas como raytracing y sombras dinámicas.
Qué pasó
La documentación organiza sus capítulos con un semáforo de colores: verde significa que el capítulo usa la última versión estable de webgpu-distribution, hoy en v0.2.0; amarillo indica contenido válido pero con una versión anterior de la API; naranja marca capítulos en progreso, legibles pero incompletos; y rojo son secciones que apenas tienen esqueleto.
Los bloques fundamentales (instancia, adaptador, dispositivo, cola de comandos, ventana con GLFW, primer color en pantalla, wrapper en C++) ya están en verde. También lo está toda la sección de geometría de entrada: buffers, atributos de vértice, index buffer y carga de mallas desde archivo. Las secciones de compute shaders, procesamiento de imágenes (generación de mipmaps, filtros de convolución) y RAII siguen en amarillo o naranja, señal de que el proyecto sigue activo pero incompleto en los capítulos más avanzados.
⚠️ Ojo: un capítulo marcado en amarillo puede compilar contra una versión vieja de wgpu-native y fallar con la última release. Antes de mezclar código de varios capítulos, revisá qué versión de webgpu-distribution pide cada uno.
Contexto e historia
WebGPU es el resultado del trabajo del W3C GPU for the Web Community Group, que buscaba reemplazar a WebGL, basado en OpenGL ES y con más de una década de antigüedad, por algo alineado con las GPUs modernas. La especificación vive en el repositorio gpuweb/gpuweb y su documento de referencia lo publica el W3C.
Detrás de cada navegador hay una implementación nativa de WebGPU escrita en C++ o Rust: Chrome usa Dawn, el proyecto de Google escrito en C++; Firefox usa wgpu, escrito en Rust por Mozilla y expuesto a C con bindings llamados wgpu-native. Learn WebGPU for C++ deja elegir cuál de los dos usar como backend nativo, algo que ningún navegador expone directamente al desarrollador.
El propio autor documenta esta decisión en el apéndice “Teaching native graphics in 2023”: el objetivo no es enseñar WebGPU como fin en sí mismo, sino usarlo como vehículo simplificado para enseñar conceptos de GPU (pipelines, buffers, shaders) que antes exigían lidiar con la verbosidad de Vulkan o el ecosistema cerrado de DirectX. Esa decisión editorial explica por qué la guía dedica capítulos enteros a temas que un tutorial de navegador da por sentados, como la creación manual de la superficie de dibujo con GLFW.
Detalles técnicos: cómo funciona WebGPU nativo en C++
El flujo de arranque de cualquier programa hecho con la guía es siempre el mismo: crear una instancia de WebGPU, pedir un adaptador (la GPU física o virtual disponible), solicitar un dispositivo lógico a partir de ese adaptador y, con el dispositivo, obtener una cola de comandos para enviar trabajo a la GPU.
flowchart TD
A["Instancia WebGPU"] --> B["Adaptador (GPU)"]
B --> C["Dispositivo logico"]
C --> D["Cola de comandos"]
D --> E[("Swap chain / superficie")]La API en C sin envolver (webgpu.h) obliga a manejar structs y punteros a mano. Por eso la guía introduce webgpu.hpp, un wrapper de solo cabeceras que agrega constructores, destructores automáticos y sobrecarga de tipos con RAII sin costo extra en tiempo de ejecución.
// vanilla webgpu.h
WGPUInstanceDescriptor desc = {};
desc.nextInChain = nullptr;
WGPUInstance instance = wgpuCreateInstance(&desc);
if (!instance) {
std::cerr << "No se pudo crear la instancia WebGPU" << std::endl;
return 1;
}// con el wrapper webgpu.hpp
#include <webgpu/webgpu.hpp>
wgpu::InstanceDescriptor desc = {};
wgpu::Instance instance = wgpu::createInstance(desc);
if (!instance) {
std::cerr << "No se pudo crear la instancia WebGPU" << std::endl;
return 1;
}El segundo bloque hace exactamente lo mismo que el primero, pero wgpu::Instance libera sus recursos automáticamente al salir de scope, sin necesitar un wgpuInstanceRelease explícito.
| Backend | Cuándo usarlo | Ventaja | Limitación |
|---|---|---|---|
| wgpu-native (Rust, Mozilla) | Proyectos que priorizan portabilidad y el mismo motor que usa Firefox | Se distribuye como librería precompilada por release, build más liviano | Algunas herramientas de diagnóstico avanzado de Dawn no están disponibles |
| Dawn (C++, Google) | Proyectos que ya integran Chromium o necesitan validación estricta | Mensajes de error más detallados durante el desarrollo | Build más pesado, exige el toolchain de Google para compilar desde fuente |
Cómo empezar
El proyecto se compila con CMake y usa GLFW como capa de ventana multiplataforma. Los pasos son casi idénticos en las tres plataformas, solo cambia cómo se instalan las dependencias del sistema.
# Windows (con Visual Studio y CMake instalados)
git clone --recurse-submodules https://github.com/eliemichel/LearnWebGPU-Code.git
cd LearnWebGPU-Code
cmake -B build -DWEBGPU_BACKEND=WGPU
cmake --build build --config Release
# macOS (con Homebrew)
brew install cmake ninja
git clone --recurse-submodules https://github.com/eliemichel/LearnWebGPU-Code.git
cd LearnWebGPU-Code
cmake -B build -G Ninja -DWEBGPU_BACKEND=WGPU
cmake --build build
# Linux (Debian/Ubuntu)
sudo apt install cmake ninja-build libglfw3-dev libxinerama-dev libxcursor-dev libxi-dev
git clone --recurse-submodules https://github.com/eliemichel/LearnWebGPU-Code.git
cd LearnWebGPU-Code
cmake -B build -G Ninja -DWEBGPU_BACKEND=WGPU
cmake --build buildCambiar WGPU por DAWN en el flag -DWEBGPU_BACKEND recompila el mismo código contra la implementación de Google en vez de la de Mozilla, sin tocar una línea del programa.
Para confirmar qué backend terminó enlazado en el binario, pedí las propiedades del adaptador apenas lo obtengas:
WGPUAdapterProperties props = {};
wgpuAdapterGetProperties(adapter, &props);
std::cout << "Backend: " << props.backendType << std::endl;
std::cout << "GPU: " << props.name << std::endl;💡 Tip: si más adelante vas a compilar para la web, empezá directamente con el wrapper webgpu.hpp. El código queda casi idéntico al que exige Emscripten y te ahorrás reescribir toda la inicialización.
Impacto y análisis
Para un desarrollador en Latinoamérica que quiere escribir un motor gráfico propio, WebGPU nativo resuelve un problema concreto: aprender Vulkan desde cero implica cientos de líneas de configuración antes de dibujar un triángulo. WebGPU, diseñado para ser más simple que Vulkan pero igual de moderno, reduce esa fricción sin sacrificar acceso a compute shaders ni a pipelines programables.
La guía también sirve de puente hacia otros usos: el mismo conocimiento (adaptador, dispositivo, buffers, bind groups) aplica directamente a motores como Bevy, escrito en Rust, o a integraciones dentro de aplicaciones de visualización científica, donde no siempre conviene arrastrar un motor de juego completo como Unity o Unreal solo para renderizar datos.
La disponibilidad del contenido en cinco idiomas (inglés, francés, ruso, chino y ucraniano) también dice algo sobre dónde está creciendo el interés en WebGPU nativo: fuera del círculo tradicional de desarrollo de motores en inglés. Para equipos chicos en la región, esto reduce la barrera de entrada frente a documentación dispersa en foros y ejemplos sueltos de GitHub.
Qué sigue
Los capítulos marcados en rojo todavía no tienen fecha pública de entrega: instanced drawing, shadow maps, tesselation, raytracing, árbol de escena y deferred shading siguen pendientes. La sección de compute shaders, clave para simulaciones y procesamiento de imágenes en GPU, está en naranja y ya cubre generación de mipmaps y filtros de convolución.
El autor pide feedback activo en cada capítulo marcado como work in progress, y el repositorio acepta issues y pull requests directamente en GitHub.
📖 Resumen en Telegram: Ver resumen
Probalo vos: cloná LearnWebGPU-Code, corré cmake -B build -DWEBGPU_BACKEND=WGPU && cmake --build build y tenés un triángulo en pantalla en menos de cinco minutos.
Preguntas frecuentes
¿Necesito saber Vulkan o Metal para usar WebGPU nativo?
No. WebGPU abstrae esas APIs de bajo nivel; el objetivo explícito de la guía es enseñar conceptos de GPU sin la verbosidad de Vulkan.
¿El código de la guía corre igual en Windows, macOS y Linux?
Sí, usa CMake y GLFW como capa de ventana multiplataforma; solo cambian las dependencias del sistema que hay que instalar antes de compilar.
¿Puedo usar el mismo código para compilar a WebAssembly?
Sí, con Emscripten. El apéndice “Building for the Web” documenta los ajustes necesarios para que el mismo código nativo compile también al navegador.
¿Qué diferencia hay entre wgpu-native y Dawn?
Son dos implementaciones independientes de la misma especificación WebGPU: wgpu-native está escrito en Rust por Mozilla, Dawn en C++ por Google. La guía deja elegir cuál usar con un flag de CMake.
¿La guía está terminada?
No. Varios capítulos avanzados (raytracing, sombras, árbol de escena) siguen marcados como TODO, aunque el núcleo (ventana, geometría, uniforms, texturas, iluminación básica) ya está completo.
¿En qué idiomas está disponible?
Inglés, francés, ruso, chino y ucraniano, además de la versión original.
Referencias
- Learn WebGPU for C++: documentación oficial del proyecto, con todos los capítulos y su estado de avance.
- eliemichel/LearnWebGPU en GitHub: código fuente de la documentación y canal para reportar issues.
- gfx-rs/wgpu-native: bindings en C del backend wgpu de Mozilla, uno de los dos backends soportados por la guía.
- Dawn: implementación de WebGPU en C++ mantenida por Google, el otro backend soportado.
- Especificación WebGPU del W3C: el estándar de referencia que ambos backends implementan.
- WebGPU API en MDN: documentación de la API tal como se expone en el 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.
Imagen destacada: Foto de Thomas Foster en Unsplash
0 Comentarios