¿Qué puedes hacer con WebGPU?

Hola a todos, y gracias por unirse a mí en esta sesión de ¿Qué puedes hacer con WebGPU? Mi nombre es Omar, trabajo como ingeniero gráfico en Snapchat. Actualmente estoy en Ithaca, Nueva York, y solía hacer juegos en Flash en el pasado.

Así que quiero hablar sobre WebGPU. ¿Qué es, cuál es su estado actual y cuándo estará ampliamente disponible? También quiero mostrar algunas de las cosas nuevas en WebGPU que puedes hacer con él y que no puedes hacer hoy. Además, quiero compartir un montón de enlaces y recursos para ayudarte a orientarte en la dirección correcta. También compartiré un enlace a estas diapositivas, porque tienen muchos enlaces. Así que los tendrás disponibles.

Entonces, ¿qué es WebGPU? Es una próxima API web para acceder a bajo nivel a la GPU. Básicamente, es el siguiente paso del sucesor de WebGL. A simple vista, la gran diferencia es que WebGPU te brinda un acceso más directo a la GPU. A diferencia de WebGL, que era más una abstracción alrededor de OpenGL, no se trataba tanto de cómo funciona el hardware. WebGPU es más una API gráfica moderna. Similar a cómo Vulkan, Metal y DirectX 12 funcionan, te brinda un control más directo sobre lo que el hardware puede hacer. En general, esto significa un mejor rendimiento. También puedes utilizar nuevas técnicas que de otra manera no estarían disponibles, de las cuales hablaré un poco más. Además, esto lo hace más a prueba de futuro, ya que significa que a medida que el hardware realice más funciones como el trazado de rayos, esas funciones se pueden exponer directamente en lugar de tener que crear una nueva capa de API envolvente para que los desarrolladores la utilicen. Esto es muy emocionante. En cuanto al estado actual, se puede utilizar. Se puede habilitar en Chrome o Firefox detrás de una bandera. También se puede utilizar a través de un ensayo de origen, lo que significa que te registras para obtener un token y luego tus usuarios pueden tener habilitado WebGPU en tu URL o dominio, por lo que no tienen que activar una bandera, y estará ampliamente disponible para todos en Chrome en septiembre. Algunos de los motores que lo admiten, Babylon es el más maduro que he visto. Todos estos enlaces llevan a páginas que explican cómo activar WebGPU en estos motores. 3GS, creo que tiene mucho soporte, pero aún no se ha lanzado oficialmente como parte de él, pero aún puedes usarlo hoy. Y luego Play Canvas está actualmente en desarrollo para admitir WebGPU. Los Compute Shaders son la característica más significativa. Esto significa que tienes la capacidad de escribir esencialmente una computación general en una GPU. En lugar de antes, si querías ejecutar cualquier cálculo en la GPU en la web, tenías que ejecutarlo a través de un fragment shader y luego ejecutar los resultados en una textura.

Y luego algo más tendría que leer esa textura. Así que eso fue un poco molesto. Entonces esto es simplemente más fácil, pero también podría ser mucho más rápido porque al hacer esto tienes mucho más control sobre la sincronización de memoria y el enhebrado aquí.

Un ejemplo aquí es el renderizado de nubes de puntos. Las nubes de puntos son, en lugar de una malla 3D hecha de triángulos, simplemente millones o a veces miles de millones de puntos. Este es un artículo que habla sobre cómo obtener un renderizado significativamente más rápido utilizando un compute shader en lugar del pipeline tradicional. Puedes ver aquí abajo a la izquierda, con el Vertex y FractShader, obtienes 10 FPS en esta escena y con el compute obtienes alrededor de 300 FPS. Esa es una gran diferencia. Básicamente, lo que están haciendo aquí es saltarse el pipeline de Vertex y Fract. Su compute shader toma los vértices como un búfer y luego escribe los píxeles en otro búfer, los datos de color, y luego se renderiza en la pantalla con un FractShader. Y una técnica interesante que puedes hacer aquí que de otra manera no podrías hacer, como con un FractShader regular, es que como tienen muchos puntos que se renderizan en el mismo píxel, en lugar de mostrar solo el más cercano a la cámara, promedian los colores para hacerlo... En cierto modo, te muestra lo que hay dentro si tienes una nube de puntos compleja que describe un volumen. Y así promedian todos los puntos. Esto es algo que podemos hacer porque tenemos control total sobre cómo se sincronizan los hilos cuando todos escriben en el mismo píxel, pero no es algo sobre lo que tengamos mucho control en un FractShader. Y la otra razón por la que es muy rápido es porque, en general, si estás escribiendo cosas muy pequeñas, como puntos o cuadrados muy pequeños, un enfoque de rasterizador de cómputo será mucho más rápido. Y esto es algo que utiliza Unreal Engine 5's Nanite para acelerar el renderizado, como con triángulos muy pequeños. Y también escribí esto, cómo construir un rasterizador de cómputo, WebGPU, si te interesa cómo funciona esto. Y es una buena manera de comenzar a aprender tanto WebGPU como esta técnica, cómo funciona y por qué puede ser más rápido.

Aquí hay algunos videos de adelanto para mostrarte cuánto control tenemos una vez que construimos algo como esto. Aquí y puede que no se vea muy claro en la pantalla aquí, pero lo que estoy haciendo es cambiar entre sombreado suave y sombreado plano en triángulos individuales a medida que el modelo se mueve hacia adelante y hacia atrás. Normalmente, esto es algo que puedes cambiar en todo el modelo, pero porque en este asterisco de computación controlamos un pipeline completo, puedo cambiar triángulos individuales de suave a plano dinámicamente, o un efecto interesante es incluso tenerlo. Entonces, cuando pasas el mouse por encima o tocas diferentes partes del modelo, pasan de suave a plano, lo que crea un efecto realmente único, creo. Y este es otro que visualiza el orden en el que se dibujan los triángulos, lo cual nuevamente no es algo que normalmente puedas hacer, pero con el pipeline de cómputo, porque tenemos control total sobre él, podemos ver eso. Y más comúnmente tendrás simulaciones de partículas, por lo que nuevamente esto es algo que hoy tal vez harías en la CPU, o si lo haces en las GPU a través de un Frac shader. Pero aquí puedes hacerlo directamente en un compute shader, lo que será más fácil, pero potencialmente también más rápido. Y finalmente, esto es realmente emocionante porque hay muchos juegos que utilizan este tipo de técnicas, no solo para velocidad sino también para crear efectos muy únicos. Como aquí, este es un juego llamado Claybook, donde todo se renderiza utilizando campos de distancia asignados, lo que hace que todo sea deformable en tiempo real, lo cual es realmente genial y muy único. Y hoy en día no puedes hacer esto en la web, pero con WebGPU, cosas como esta serán posibles, lo cual me emociona mucho. Y hay un enlace a la charla donde hablan sobre Claybook y cómo se hizo utilizando estas técnicas aquí. No utilizando WebGPU, pero la técnica de cómputo en general. Entonces, para resumir, lo que WebGPU promete principalmente es un mejor rendimiento, pero también la capacidad de explorar nuevas técnicas de renderizado y tal vez en el futuro, no hoy, pero no soportado hoy, en el futuro, algo como el soporte para trazado de rayos podría llegar al navegador, lo cual sería enorme.

Muchas gracias, y aquí hay enlaces y recursos, el más importante que quiero señalar es el foro oficial de GitHub de WebGPU. Aquí es donde escriben la especificación y los desarrolladores que trabajan en ella son muy amables al responder preguntas y están disponibles para responder cosas. Así que es un buen lugar para aprender, y he aprendido mucho de eso, y también he vinculado el tutorial que escribí sobre cómo crear un rasterizador de cómputo aquí. Muchas gracias. ♪♪