WebGPU

WebGPU permite gráficos 3D de alto rendimiento y cálculo paralelo de datos en La web.

Published on Updated on

Translated to: English, Português

¿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).

Architecture diagram showing WebGPUs connection between OS APIs and Direct3D 12, Metal, and Vulkan.
Diagrama de arquitectura WebGPU

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
Una demostración en Babylon.js de la simulación de un mar embravecido utilizando la capacidad de sombreado de cómputo de WebGPU.

Estado actual

PasoEstado
1. Crear un explicadorCompleto
2. Crear borrador inicial de especificaciónEn curso
3. Recoger opiniones y repetir el diseñoEn curso
4. Prueba de origen

En curso

5. IniciarSin comenzar

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! 🎉
}
Precaución

El adaptador de GPU devuelto por navigator.gpu.requestAdapter() puede ser null.

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.

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

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

Agradecimientos

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

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.