Descubre cómo WebGPU libera la potencia de la GPU para lograr un rendimiento más rápido del aprendizaje automático y una mejor renderización de gráficos.
La nueva API de WebGPU ofrece mejoras de rendimiento masivas en gráficos y cargas de trabajo de aprendizaje automático. En este artículo, se explora cómo WebGPU es una mejora con respecto a la solución actual de WebGL, con un adelanto de los desarrollos futuros. Pero primero, proporcionemos un contexto sobre el motivo por el que se desarrolló WebGPU.
Contexto en WebGPU
WebGL se instaló en Chrome en 2011. Al permitir que las aplicaciones web aprovechen las GPU, WebGL brinda experiencias increíbles en la Web, como Google Earth, videos musicales interactivos, explicaciones de bienes raíces en 3D y mucho más. WebGL se basó en la familia de APIs de OpenGL desarrollada por primera vez en 1992. ¡Eso es hace mucho tiempo! Puedes imaginar que el hardware de la GPU evolucionó significativamente desde ese momento.
Para mantenerse al día con esta evolución, se desarrolló un nuevo tipo de APIs con el objetivo de interactuar de manera más eficiente con el hardware de GPU moderno. APIs como Direct3D 12, Metal y Vulkan Estas nuevas APIs admitieron casos de uso nuevos y exigentes para la programación de GPU, como la explosión del aprendizaje automático y los avances en los algoritmos de renderización. WebGPU es el sucesor de WebGL y permite incorporar los avances de esta nueva clase de APIs modernas a la Web.
WebGPU desbloquea muchas posibilidades nuevas de programación de GPU en el navegador. Refleja mejor cómo funciona el hardware de GPU moderno y sienta las bases para capacidades de GPU más avanzadas en el futuro. La API se integra en el grupo "GPU para la Web" de W3C desde 2017 y es una colaboración entre muchas empresas, como Apple, Google, Mozilla, Microsoft e Intel. Y ahora, después de 6 años de trabajo, nos complace anunciar que una de las incorporaciones más grandes a la plataforma web ya está disponible.
WebGPU está disponible hoy en Chrome 113 en ChromeOS, macOS y Windows, y próximamente en otras plataformas. Muchas gracias a los demás colaboradores de Chromium y, en particular, a Intel, que ayudaron a hacer esto realidad.
Ahora veamos algunos de los interesantes casos de uso que WebGPU habilita.
Desbloquea nuevas cargas de trabajo de GPU para la renderización
Las funciones de WebGPU, como los sombreadores de cómputos, permiten que las nuevas clases de algoritmos se transfieran a la GPU. Por ejemplo, algoritmos que pueden agregar más detalles dinámicos a las escenas, simular fenómenos físicos y mucho más. Hay incluso cargas de trabajo que antes solo se podían realizar en JavaScript y que ahora se pueden mover a la GPU.
En el siguiente video, se muestra cómo se usa el algoritmo de los cubos en marcha para triangular la superficie de las metabolas. En los primeros 20 segundos del video, el algoritmo, cuando se ejecuta en JavaScript, tiene dificultades para seguir el ritmo de la página que solo se ejecuta a 8 FPS, lo que provoca bloqueos en la animación. Para mantener su rendimiento en JavaScript, tendríamos que reducir mucho el nivel de detalles.
Hay una diferencia de día y de noche cuando muevemos el mismo algoritmo a un sombreador de cómputos, que se ve en el video después de 20 segundos. El rendimiento mejora de forma drástica, ya que la página ahora se ejecuta a 60 FPS de forma fluida y todavía hay mucho margen de rendimiento para otros efectos. Además, el bucle principal de JavaScript de la página se libera por completo para otras tareas, lo que garantiza la capacidad de respuesta de las interacciones con la página.
WebGPU también habilita efectos visuales complejos que antes no eran prácticos. En el siguiente ejemplo, creado en la popular biblioteca Babylon.js, se simula la superficie marina por completo en la GPU. La dinámica realista se crea a partir de muchas ondas independientes que se agregan entre sí. Pero simular cada ola directamente sería demasiado costoso.
Es por eso que la demostración utiliza un algoritmo avanzado llamado Fast Fourier Transform. En lugar de representar todas las ondas como datos posicionales complejos, se usan los datos espectrales, que son mucho más eficientes para realizar cálculos. Luego, cada marco usa la transformación Fourier para convertir los datos espectrales en los datos posicionales que representan la altura de las olas.
Inferencia de AA más rápida
WebGPU también es útil para acelerar el aprendizaje automático, que se ha convertido en un uso importante de las GPU en los últimos años.
Durante mucho tiempo, los desarrolladores de creatividades han reutilizado la API de renderización de WebGL para realizar operaciones que no son de renderización, como los cálculos de aprendizaje automático. Sin embargo, esto requiere dibujar los píxeles de los triángulos como una forma de iniciar los cálculos, y empaquetar y desempaquetar cuidadosamente los datos del tensor en textura en lugar de los accesos a la memoria de uso más general.
Para usar WebGL de esta manera, los desarrolladores deben ajustar de manera incómoda su código a las expectativas de una API diseñada solo para dibujar. Junto con la falta de funciones básicas, como el acceso a la memoria compartida entre los cálculos, esto genera un trabajo duplicado y un rendimiento deficiente.
Los sombreadores de cómputos son la nueva función principal de WebGPU y quitan estas dificultades. Los sombreadores de cómputos ofrecen un modelo de programación más flexible que aprovecha la naturaleza masivamente paralela de la GPU y no está limitado por la estructura estricta de las operaciones de renderización.
Los sombreadores de cómputos dan más oportunidades de compartir datos y resultados de cómputos dentro de grupos de trabajo de sombreadores para lograr una mejor eficiencia. Esto puede generar ganancias significativas en comparación con los intentos anteriores de usar WebGL para el mismo fin.
Como ejemplo de las ganancias de eficiencia que esto puede generar, un puerto inicial de un modelo de difusión de imágenes en TensorFlow.js muestra una mejora de rendimiento 3 veces mayor en una variedad de hardware cuando se traslada de WebGL a WebGPU. En parte del hardware probado, la imagen se renderizó en menos de 10 segundos. Y, como este fue un puerto inicial, creemos que hay aún más mejoras posibles en WebGPU y TensorFlow.js. Consulta Novedades de Web ML en 2023 sesión de Google I/O.
Pero WebGPU no solo se trata de incorporar funciones de GPU a la Web.
Diseñada primero para JavaScript
Las funciones que habilitan estos casos de uso han estado disponibles desde hace un tiempo para los desarrolladores de computadoras de escritorio y dispositivos móviles específicos de cada plataforma, y nuestro desafío ha sido exponerlas de una manera que se sienta como una parte natural de la plataforma web.
WebGPU se desarrolló con el beneficio de la retrospectiva de más de una década de desarrolladores que realizan trabajos increíbles con WebGL. Pudimos tomar los problemas que se encontraron, los cuellos de botella que se produjeron y los problemas que plantearon y canalizaron todos esos comentarios a esta nueva API.
Vimos que el modelo de estado global de WebGL hacía que la creación de bibliotecas y aplicaciones sólidas y componibles fuera difícil y frágil. Por lo tanto, WebGPU reduce drásticamente la cantidad de estado del que los desarrolladores deben realizar un seguimiento cuando envían los comandos de la GPU.
Sabemos que depurar aplicaciones de WebGL era molesto, por lo que WebGPU incluye mecanismos de manejo de errores más flexibles que no bloquean tu rendimiento. Además, nos esforzamos por garantizar que cada mensaje que recibas de la API sea fácil de comprender y de usar.
También vimos que, con frecuencia, la sobrecarga de realizar demasiadas llamadas de JavaScript era un cuello de botella para las aplicaciones complejas de WebGL. Como resultado, la API de WebGPU es menos contundente, por lo que puedes lograr más con menos llamadas a función. Nos enfocamos en realizar una validación pesada desde el principio y mantener el bucle de dibujo crítico lo más eficiente posible. Además, ofrecemos nuevas APIs, como los Paquetes de renderización, que te permiten grabar grandes cantidades de comandos de dibujo por adelantado y volver a reproducirlos con una sola llamada.
Para demostrar la drástica diferencia que puede marcar una función como los paquetes de renderización, esta es otra demostración de Babylon.js. Su procesador WebGL 2 puede ejecutar todas las llamadas de JavaScript para renderizar esta escena de esta galería de arte alrededor de 500 veces por segundo. Lo cual es bastante bueno.
Sin embargo, su procesador WebGPU habilita una función que llaman Renderización de instantáneas. Esta función, creada a partir de los paquetes de renderización de WebGPU, permite enviar la misma escena más de 10 veces más rápido. Esta reducción significativa de la sobrecarga permite que WebGPU renderice escenas más complejas y, al mismo tiempo, permite que las aplicaciones hagan más tareas con JavaScript en paralelo.
Las APIs de gráficos modernas tienen fama de complejidad, intercambiando la simplicidad por oportunidades de optimización extremas. WebGPU, por otro lado, se enfoca en la compatibilidad multiplataforma y maneja temas tradicionalmente difíciles, como la sincronización de recursos, de forma automática en la mayoría de los casos.
Esto tiene el efecto secundario de que WebGPU es fácil de aprender y usar. Se basa en las funciones existentes de la plataforma web para tareas como la carga de imágenes y videos, y se basa en patrones conocidos de JavaScript, como las promesas, para las operaciones asíncronas. Esto ayuda a mantener la cantidad de código estándar necesaria al mínimo. El primer triángulo que aparece en pantalla puede mostrarse en menos de 50 líneas de código.
<canvas id="canvas" width="512" height="512"></canvas>
<script type="module">
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const context = canvas.getContext("webgpu");
const format = navigator.gpu.getPreferredCanvasFormat();
context.configure({ device, format });
const code = `
@vertex fn vertexMain(@builtin(vertex_index) i : u32) ->
@builtin(position) vec4f {
const pos = array(vec2f(0, 1), vec2f(-1, -1), vec2f(1, -1));
return vec4f(pos[i], 0, 1);
}
@fragment fn fragmentMain() -> @location(0) vec4f {
return vec4f(1, 0, 0, 1);
}`;
const shaderModule = device.createShaderModule({ code });
const pipeline = device.createRenderPipeline({
layout: "auto",
vertex: {
module: shaderModule,
entryPoint: "vertexMain",
},
fragment: {
module: shaderModule,
entryPoint: "fragmentMain",
targets: [{ format }],
},
});
const commandEncoder = device.createCommandEncoder();
const colorAttachments = [
{
view: context.getCurrentTexture().createView(),
loadOp: "clear",
storeOp: "store",
},
];
const passEncoder = commandEncoder.beginRenderPass({ colorAttachments });
passEncoder.setPipeline(pipeline);
passEncoder.draw(3);
passEncoder.end();
device.queue.submit([commandEncoder.finish()]);
</script>
Conclusión
Es emocionante ver todas las nuevas posibilidades que ofrece WebGPU a la plataforma web y esperamos ver todos los nuevos casos de uso geniales que encontrarás para WebGPU.
Se compiló un ecosistema dinámico de bibliotecas y frameworks en torno a WebGL, y ese mismo ecosistema está ansioso por adoptar WebGPU. La compatibilidad con WebGPU está en curso o ya está completa en muchas bibliotecas populares de JavaScript WebGL y, en algunos casos, aprovechar los beneficios de WebGPU puede ser tan simple como cambiar una sola marca.
Esta primera versión de Chrome 113 es solo el comienzo. Si bien nuestra versión inicial es para Windows, ChromeOS y MacOS, planeamos llevar WebGPU a las plataformas restantes, como Android y Linux, en un futuro cercano.
Y no solo el equipo de Chrome ha estado trabajando en el lanzamiento de WebGPU. Además, las implementaciones también están en curso en Firefox y WebKit.
Además, en W3C ya se están diseñando nuevas funciones que se pueden exponer si están disponibles en hardware. Por ejemplo: En Chrome, pronto planeamos habilitar la compatibilidad con números de punto flotante de 16 bits en sombreadores y la clase de instrucciones DP4a para mejorar aún más el rendimiento del aprendizaje automático.
WebGPU es una API extensa que proporciona un rendimiento asombroso si inviertes en ella. Actualmente, solo podríamos analizar sus beneficios a un alto nivel, pero si quieres comenzar a usar WebGPU, consulta nuestro codelab introductorio, Tu primera app de WebGPU. En este codelab, compilarás una versión GPU del clásico Juego de la vida de Conway. En este codelab, se explica el proceso paso a paso para que puedas probarlo incluso si es la primera vez que haces desarrollo de GPU.
Los ejemplos de WebGPU también son un buen lugar para conocer la API. Estas varían desde el “triángulo hello” hasta las canalizaciones de procesamiento y procesamiento más completas, lo que demuestra una variedad de técnicas. Por último, consulta nuestros otros recursos.