WebAssembly – Aumentando el rendimiento de las aplicaciones gráficas en el navegador

Entre los casos de uso en el navegador en los que WebAssembly (Wasm) ha logrado hacerse un hueco destacan las aplicaciones gráficas. Aunque Wasm no puede utilizar unidades de procesamiento de gráficos (GPU) por sí solo, es utilizado en combinación con otras tecnologías que facilitan la interacción con dichos recursos. Este artículo muestra como a través de Wasm y WebGL se ha logrado portar Doom3 al navegador con un rendimiento similar al nativo.

El desafío de los gráficos en el navegador

Hasta la introducción de APIs especializadas con aceleración por hardware, el renderizado de gráficos en el navegador era rudimentario: desde HTML y CSS planos a imágenes pre-renderizadas, Flash o Canvas 2D, ninguno de estos métodos proporcionaba el rendimiento requerido por aplicaciones con gráficos en 3D.

En 2011 se introduce WebGL, una API que permite renderizar gráficos 2D y 3D dentro de los navegadores web. WebGL se basa en OpenGL ES 2.0 y proporciona aceleración por hardware para renderizar los gráficos de forma eficiente. Esta nueva tecnología permitió por primera vez, y de forma realista y eficiente mostrar gráficos en 3D en el navegador. Sin embargo, los motores gráficos utilizados en aplicaciones como videojuegos se componen de mucho más que de código a ejecutar en GPUs. Aquí es donde entra WebAssembly.

¿Puede ejecutar Doom? Y otras aplicaciones gráficas en el navegador

Con la introducción de una nueva plataforma siempre surge una pregunta: ¿puede ejecutar Doom? Desde calculadoras y cámaras de fotos a tests de embarazo, Doom ha sido portado con éxito a todo tipo de plataformas, incluyendo WebAssembly. El caso de WebAssembly es algo más interesante, puesto que no ha sido portada la versión original del juego de 1993, sino Doom 3, un juego más exigente gráficamente, bajo el nombre de d3wasm.

Este proyecto de código abierto y disponible en Github fue introducido en el año 2018 por Continuation Labs y se trata de un porte del motor gráfico id Tech 4 sobre el que se construye Doom 3. Fue desarrollado como una prueba de concepto para demostrar que motores de juegos complejos escritos en C++ pueden compilarse y ejecutarse eficientemente en navegadores modernos. A lo largo de 4 años y a través de varias iteraciones sobre la implementación inicial, esta versión de Doom 3 es capaz de alcanzar velocidades de fotogramas de 60 fotogramas por segundo (FPS) estables en el navegador respetando la estética original del juego y utilizando buena parte del código fuente original.

D3wasm utiliza Emscripten para la traducción del código C++ del motor a WebAssembly, mientras que las partes del código que utilizan llamadas a OpenGL para el renderizado fueron remplazadas por WebGL. Esta combinación permite acelerar las computaciones que requieren de uso intensivo de CPU mediante WebAssembly, mientras que se sigue pudiendo aprovechar la GPU mediante WebGL, haciendo posible esta implementación. A pesar del buen funcionamiento de esta solución, aún existe margen de mejora, puesto que existen nuevas APIs sucesoras de WebGL que proporcionan un mejor rendimiento, como se muestra en la siguiente sección.

Puedes probar este porte de Doom 3 sobre WebAssembly en el enlace siguiente.

Doom 3 en el navegador sobre WebAssembly.

WebGPU es una API en desarrollo e introducida en 2021 que permite la utilización de unidades de procesamiento de gráficos de manera portable y eficiente. Ciertas implementaciones de WebGPU, como la de JavaScript, proporcionan al navegador la capacidad de interactuar con GPUs desde el navegador. WebGPU es considerada la evolución de WebGL, y añade un gran número de funciones que permiten la utilización de los recursos de GPU a bajo nivel, mejorando significativamente el rendimiento de los programas que requieren de dichos recursos. Las implementaciones de WebGPU se basan en Vulkan, Metal o Direct3D 12.

WebGPU no solamente permite realizar computaciones relacionadas con los gráficos, sino que abre también la puerta a todo tipo de computaciones de propósito general sobre GPUs. Empresas como Google ya están trabajando en una integración de WebAssembly con esta tecnología para acelerar cargas de trabajo de IA en el navegador.

Esta tecnología todavía se encuentra en adopción, y únicamente es soportada por Google Chrome en la actualidad.

Desde las primeras aplicaciones basadas en WebGL al desarrollo de nuevas APIs a bajo nivel como WebGPU, las aplicaciones gráficas en el navegador han sufrido una gran evolución en los últimos años. En medio de esta evolución se encuentra WebAssembly, que aunque no es capaz de utilizar GPUs de manera nativa, es capaz de mejorar el rendimiento de aquellas partes del código que son más dependientes de la CPU. La combinación de ambas tecnologías está acelerando significativamente las cargas de trabajo que utilizan las GPU tanto para gráficos como para otro tipo de computaciones como la IA.