WebGPU

# ¿Qué es WebGPU?

WebGPU es una nueva API web que expone las capacidades gráficas de sistemas modernos, específicamente Direct3D 12, Metal y Vulkan, para realizar operaciones de renderizado y cálculo en una unidad de procesamiento gráfico (GPU).

Este objetivo es similar al de la familia de APIs WebGL, pero WebGPU permite el acceso a funciones más avanzadas de las GPUs. Mientras que WebGL es principalmente para dibujar imágenes, y también se puede utilizar con gran esfuerzo para otros tipos de cálculos, WebGPU proporciona soporte de primera clase para realizar cálculos generales en la GPU.

Después de cuatro años de desarrollo en el grupo comunitario "GPU para la Web" de W3C, WebGPU ya está lista para que los desarrolladores la prueben en Chrome y brinden comentarios sobre la API y el lenguaje de sombreado.

"Tras una década en la que WebGL ha llevado los gráficos 3D a la web y ha permitido todo tipo de nuevas experiencias, ha llegado el momento de actualizar la pila y ayudar a los desarrolladores web a aprovechar al máximo las tarjetas gráficas modernas. ¡WebGPU llega justo a tiempo!" Mr.doob, Creator of Three.js

WebGPU nos acerca al metal y también desbloquea el poder del sombreador de cómputo para desarrolladores web. Hoy se pueden crear nuevas experiencias 3D en [Babylon.js Playground](https://playground.babylonjs.com/#XCNL7Y). David Catuhe, Creator of Babylon.js

# Estado actual

# Cómo usar WebGPU

# Habilitación a través de about: // flags

Para experimentar con WebGPU localmente, sin un token de prueba de origen, habilita #enable-unsafe-webgpu en about://flags.

# Soporte durante la fase de prueba de origen

A partir de Chrome 94, WebGPU está disponible como prueba de origen en Chrome. Se espera que la prueba de origen finalice en Chrome 101 (18 de mayo de 2022).

Origin trials allow you to try new features and give feedback on their usability, practicality, and effectiveness to the web standards community. For more information, see the Origin Trials Guide for Web Developers. To sign up for this or another origin trial, visit the registration page.

# Registrarse para la prueba de origen

1. Request a token for your origin.
2. Add the token to your pages. There are two ways to do that:
   • Add an origin-trial <meta> tag to the head of each page. For example, this may look something like:
     <meta http-equiv="origin-trial" content="TOKEN_GOES_HERE">
   • If you can configure your server, you can also add the token using an Origin-Trial HTTP header. The resulting response header should look something like:
     Origin-Trial: TOKEN_GOES_HERE

# Detección de características

Para verificar si WebGPU es compatible, usa:

if ("gpu" in navigator) {
  // WebGPU is supported! 🎉
}

# Comenzar

WebGPU es una API de bajo nivel, como WebGL. Es muy potente, bastante detallada y requiere comprender conceptos claves antes de sumergirse en ella. Por eso, en este artículo te enlazaré a contenidos existentes de alta calidad para que te inicies en WebGPU.

• Empieza a utilizar GPU Compute en la web
• Una muestra de WebGPU en Firefox
• WebGPU para desarrolladores de Metal, primera parte
• Aprende qué tipos y estructuras de datos clave se necesitan para dibujar en WebGPU
• Explicador de WebGPU
• Mejores prácticas de WebGPU

# Compatibilidad con navegadores

WebGPU está disponible en determinados dispositivos de ChromeOS, macOS y Windows 10 en Chrome 94 y se admitirán más dispositivos en el futuro. La compatibilidad experimental con Linux está disponible ejecutando Chrome con --enable-features=Vulkan. Más adelante habrá más soporte para más plataformas.

La lista completa de problemas conocidos está disponible en el documento de Advertencias de la Prueba de Origin.

En el momento de redactar este artículo, la compatibilidad con WebGPU está en curso en Safari y Firefox.

# Soporte de plataformas

Al igual que en el mundo de WebGL, algunas bibliotecas también implementan WebGPU:

• Dawn es una implementación C++ de WebGPU utilizada en Chromium. Se puede usar para apuntar a WebGPU en aplicaciones C y C++ que luego se pueden portar a WebAssembly usando Emscripten y aprovechar automáticamente WebGPU en el navegador.
• Wgpu es una implementación de Rust de WebGPU utilizada en Firefox. Es utilizado por varias aplicaciones de GPU en el ecosistema de Rust, por ejemplo Veloren, un juego de rol multijugador de voxel.

# Demos

• Muestras de WebGPU
• Metaballs renderizados en WebGPU
• Sombreado directo agrupado de WebGPU

# Seguridad y privacidad

Para garantizar que una página web solo pueda funcionar con sus propios datos, todos los comandos se validan estrictamente antes de que lleguen a la GPU. Consulta la sección Consideraciones sobre el uso malicioso de la especificación de WebGPU para obtener más información sobre las compensaciones de seguridad relacionadas con los errores de los controladores, por ejemplo.

# Comentarios

El equipo de Chrome desea conocer tus experiencias con WebGPU.

# Contanos sobre el diseño de la API

¿Hay algo sobre la API o el lenguaje de sombreado que no funciona como esperabas? ¿O faltan métodos o propiedades que necesitas para implementar tu idea? ¿Tienes alguna pregunta o comentario sobre el modelo de seguridad? Presenta un tema en el repositorio de GitHub correspondiente o agrega tus ideas a un tema existente.

# Informar problemas sobre la implementación

¿Encontraste un error con la implementación de Chrome? ¿O la implementación es diferente de la especificación? Presenta tu error en new.crbug.com. Asegúrate de incluir tantos detalles como puedas, como el contenido de la página interna about:gpu, instrucciones simples para reproducirlo e ingresa Blink>WebGPU en la casilla Componentes. Glitch funciona muy bien para compartir repros rápidos y fáciles.

# Mostrar soporte para WebGPU

¿Estás pensando en utilizar WebGPU? Su apoyo público ayuda al equipo de Chrome a priorizar funciones y mostrar a otros proveedores de navegadores lo importante que es brindarles soporte.

Envía un tweet a @ChromiumDev usando el hashtag#WebGPU y hacenos saber dónde y cómo lo estás usando. También puedes hacer una pregunta en StackOverflow con el hashtag #webgpu.

# Enlaces útiles

• Explicador público
• Especificaciones de API de WebGPU
• Lenguaje de sombreado de WebGPU (WGSL)
• Error de seguimiento de Cromium
• Entrada de ChromeStatus.com
• Componente Blink: Blink>WebGPU
• Revisión de TAG
• Intención de experimentar
• Canal matriz de WebGPU

# Agradecimientos

Imagen de héroe a través de Maxime Rossignol en Unsplash.