WebGL: Gráficos 3D en el navegador

WebGL: Gráficos 3D en el navegador

¿Alguna vez te has preguntado cómo los sitios web modernos pueden mostrar gráficos 3D suaves directamente en tu navegador sin necesidad de complementos? La respuesta es WebGL, una tecnología que permite a las páginas web aprovechar la tarjeta gráfica (GPU) de tu computadora para dibujar escenas 3D en tiempo real.

¿Qué es WebGL y por qué es importante?

WebGL significa Web Graphics Library. Es una API de JavaScript que brinda a los desarrolladores web acceso directo al hardware gráfico de tu computadora o teléfono. Antes de WebGL, si querías 3D en la web, necesitabas complementos como Flash o applets de Java, ¿los recuerdas? WebGL lo cambió todo al hacer que los gráficos 3D sean una parte nativa de la plataforma web, funcionando en todos los navegadores modernos y en todos los dispositivos.

Piensa en WebGL como un puente entre JavaScript y tu GPU. JavaScript es excelente para la lógica y la interfaz de usuario, pero no está diseñado para cálculos pesados. Tu tarjeta gráfica, por otro lado, está diseñada para realizar millones de cálculos en paralelo, perfecto para determinar dónde deben aparecer millones de triángulos en la pantalla 60 veces por segundo.

Cómo funciona WebGL bajo el capó

En esencia, WebGL funciona dibujando triángulos. Muchos, muchos triángulos. Cada objeto 3D que ves (un personaje, un coche, un edificio) está formado por triángulos conectados. WebGL te da las herramientas para definir esos triángulos y decirle a la GPU cómo colorearlos.

El proceso consta de dos etapas principales, gestionadas por pequeños programas llamados shaders que se ejecutan directamente en la GPU:

Primero, el vertex shader toma cada esquina de cada triángulo (llamada vértice) y determina dónde debe aparecer en tu pantalla. Lo hace aplicando una serie de transformaciones: mover, rotar y escalar el objeto, y luego proyectarlo desde el espacio 3D a tu pantalla 2D.

Segundo, el fragment shader (a veces llamado pixel shader) se ejecuta para cada píxel que cubren esos triángulos. Su trabajo es decidir de qué color debe ser cada píxel. Aquí es donde aplicas texturas, iluminación, sombras y todos los detalles visuales que hacen que una escena se vea real.

Estos shaders se escriben en un lenguaje llamado GLSL (OpenGL Shading Language), que se parece un poco a C. Se ejecutan en paralelo a través de miles de núcleos de GPU, por lo que son tan rápidos.

WebGL 1 y WebGL 2: ¿Cuál es la diferencia?

A menudo escucharás sobre WebGL 1 y WebGL 2. Piénsalos como versiones de una consola de juegos: WebGL 2 es la versión más nueva y capaz. WebGL 1 existe desde 2011 y funciona en todas partes. Te da lo básico: dibujar triángulos, aplicar texturas y sombreado simple.

WebGL 2 llegó más tarde y trajo características que antes solo estaban disponibles en las API gráficas de escritorio. Cosas como el dibujo instanciado (dibujar el mismo objeto miles de veces con un solo comando), transform feedback (capturar la salida de la GPU para reutilizarla) y más formatos de textura. Todos los navegadores modernos admiten WebGL 2 ahora, por lo que es la opción predeterminada para nuevos proyectos.

Por qué casi nadie escribe WebGL puro

Escribir código WebGL puro es... verboso. Muy verboso. Dibujar un solo triángulo requiere docenas de líneas de código: crear buffers, compilar shaders, enlazar programas, configurar atributos, enlazar texturas y, finalmente, emitir una llamada de dibujo. Hacer esto para una escena compleja con luces, cámaras, animaciones y múltiples objetos sería increíblemente tedioso y propenso a errores.

Por eso casi todo el mundo usa una biblioteca. La más popular con diferencia es Three.js. Maneja todo el código repetitivo por ti: configurar el renderizador, gestionar el grafo de escena (una jerarquía de objetos), proporcionar cámaras, luces, materiales y cargadores para formatos de archivo 3D comunes. Con Three.js, puedes crear un cubo 3D giratorio en unas 20 líneas de código en lugar de 200.

También existen otras grandes opciones. Babylon.js es más como un motor de juego completo con física incorporada, un editor visual y un excelente soporte de TypeScript. PlayCanvas se ejecuta en la nube con un editor colaborativo. OGL es pequeño y mínimo si necesitas algo ligero. Y si realmente quieres el máximo control, el WebGL puro siempre está ahí, pero la mayoría de los proyectos no necesitan ese nivel de control.

El pipeline de renderizado: De la escena 3D a los píxeles en la pantalla

Cuando miras una escena 3D en tu navegador, suceden muchas cosas en los pocos milisegundos entre fotogramas. Aquí está el recorrido:

Tus objetos 3D comienzan en su propio sistema de coordenadas local: un espacio de modelo donde (0,0,0) es el centro del objeto. El vertex shader los transforma al espacio mundial (donde están en la escena), luego al espacio de vista (relativo a la cámara), luego al espacio de recorte (un cubo estandarizado donde la GPU puede determinar fácilmente lo que es visible) y finalmente al espacio de pantalla (píxeles reales en tu pantalla).

Luego viene la rasterización: la GPU determina qué píxeles cubre cada triángulo. Para cada uno de esos píxeles, se ejecuta el fragment shader para determinar el color final. Aquí es donde se muestrean las texturas, se realizan los cálculos de iluminación y se aplican efectos como transparencia o brillo.

La GPU también realiza automáticamente la prueba de profundidad: mantiene un búfer de profundidad (z-buffer) para que los objetos más cercanos oculten correctamente los más lejanos. Y maneja la mezcla para objetos transparentes, combinando colores según la opacidad.

Para hacerlo rápido: Consejos de rendimiento

La GPU es increíblemente rápida, pero tiene un cuello de botella: la comunicación con la CPU. Cada vez que JavaScript le dice a la GPU que dibuje algo (una llamada de dibujo), hay una sobrecarga. Demasiadas llamadas de dibujo y tu tasa de fotogramas se desploma. La clave del rendimiento es minimizar esta comunicación.

Las técnicas comunes incluyen la instanciación (dibujar muchas copias de la misma geometría con una sola llamada), el batching (combinar múltiples objetos en una sola llamada de dibujo) y el uso de atlas de texturas (empaquetar muchas texturas pequeñas en una textura grande para no tener que cambiar constantemente de textura).

El nivel de detalle (LOD) es otro truco clásico: usa modelos de alto detalle de cerca, pero intercambia por versiones más simples para objetos distantes. El frustum culling evita dibujar todo lo que está fuera de la vista de la cámara. Y siempre usa requestAnimationFrame para tu bucle de renderizado: se sincroniza con la frecuencia de actualización de la pantalla y se pausa cuando la pestaña está oculta.

Para la creación de perfiles, las herramientas de desarrollo del navegador se han vuelto excelentes. Chrome DevTools tiene una pestaña WebGL, y herramientas como Spector.js pueden capturar y reproducir fotogramas completos para que puedas ver exactamente qué llamadas de dibujo ocurrieron y cuánto tiempo tomó cada una.

WebGPU: La próxima generación

WebGL nos ha servido bien durante más de una década, pero fue diseñado para una era anterior de hardware gráfico. WebGPU es el sucesor moderno: una API de nivel más bajo que brinda a los desarrolladores un control más directo sobre la GPU, similar a Vulkan, Metal o DirectX 12 en plataformas nativas.

WebGPU trae shaders de cómputo (ejecución de cálculos de propósito general en la GPU, no solo gráficos), mejor soporte para subprocesos múltiples y un rendimiento más predecible. Ya está disponible en Chrome y Edge, detrás de una bandera en Firefox y en Safari Technology Preview. Bibliotecas como Three.js y Babylon.js están agregando renderizadores WebGPU para que puedas cambiar con cambios mínimos de código.

WebGPU no reemplazará a WebGL de la noche a la mañana (WebGL no va a desaparecer), pero para nuevos proyectos de alto rendimiento, es el futuro.

¿Qué puedes construir con esto?

Las posibilidades son sorprendentemente amplias. La visualización de datos cobra vida con gráficos 3D y globos interactivos. Los configuradores de productos permiten a los clientes personalizar coches, muebles o zapatillas en tiempo real. Los juegos, desde rompecabezas casuales hasta experiencias AAA completas, se ejecutan en el navegador. La visualización científica ayuda a los investigadores a explorar estructuras moleculares o modelos climáticos. La codificación creativa y la demoscene empujan los límites artísticos. Las experiencias de AR y VR funcionan a través de WebXR. Los gemelos digitales permiten a las fábricas monitorear y simular sistemas del mundo real. Y los visores CAD/BIM llevan herramientas de ingeniería profesionales al navegador.

La web se ha convertido en una plataforma 3D legítima. Ya sea que estés construyendo un escaparate de productos, un panel de datos o un juego, WebGL (y cada vez más WebGPU) te da las herramientas para hacerlo realidad: sin complementos, sin instalaciones, solo una URL.