Introducción a WebGL

La creación de contenido de medios interactivos para la web tradicionalmente requería aplicaciones o complementos de terceros instalados en los navegadores. Con el auge de los estándares web abiertos y la necesidad de admitir capacidades gráficas nativas en los navegadores web, nació WebGL para brindar compatibilidad entre navegadores y estar completamente integrado con los estándares web.

¿Qué es WebGL?

WebGL (Biblioteca de gráficos web) es una API de rasterización basada en OpenGL ES desarrollada por Khronos Group, Inc. para representar gráficos 2D y 3D en un navegador web. WebGL utiliza aceleración de hardware que permite a los desarrolladores crear gráficos interactivos de representación en tiempo real de alto rendimiento en el navegador web, como juegos, simulaciones, visualización de datos, videos animados, modelado 3D, animaciones moleculares y mucho más.

La eficiencia de WebGL es quizás una de las principales ventajas, ya que permite que las aplicaciones web potentes y exigentes extraigan todas las capacidades de la tarjeta gráfica. Además, WebGL no tiene complementos y es compatible con todos los principales navegadores, por lo que los usuarios no necesitan preocuparse por descargar o instalar ninguna aplicación externa para ejecutar una aplicación WebGL.

¿Cómo funciona WebGL?

Un programa WebGL comprende códigos escritos en OpenGL Shading Language (GLSL), JavaScript y HTML5. GLSL se utiliza para escribir los sombreadores y programas especiales ejecutados en el hardware de gráficos que calcula atributos como vértices, texturas, colores, rayos, etc. durante la representación del objeto o la escena. GLSL brinda a los desarrolladores un control importante sobre la canalización gráfica. JavaScript y HTML se utilizan principalmente como lenguajes de enlace y para proporcionar un contexto de representación.

Un programa WebGL suele generarse mediante múltiples dibujos en el elemento HTML del lienzo que lleva a cabo la unidad de procesamiento gráfico (GPU) a través de un proceso denominado canalización de representación. 
Para crear gráficos de alta fidelidad, WebGL puede ser bastante complejo de usar, ya que es una programación de casi bajo nivel. 

Sin embargo, hay una variedad de bibliotecas disponibles que abstraen algunas de las dificultades de WebGL haciéndolos menos detallados, como twgl, Three.js, PhiloGL y J3D.

Canalización de representación:

La canalización de renderizado consiste en una secuencia de operaciones requeridas cada vez que un objeto (la escena 2D/3D) se renderiza en la pantalla. El objetivo es dibujar el modelo gráfico o escena deseado a partir de primitivas (formas geométricas expresadas por sus coordenadas cartesianas X, Y y Z). En gráficos por computadora, cada objeto se modela a partir de una colección de triángulos. Entonces, en el diagrama representado, estamos representando solo un triángulo y todas estas fases representan la canalización de representación.

1. Vértices (vértice singular): son atributos que describen la geometría del objeto representado por sus coordenadas espaciales 2D o 3D y se almacenan en una estructura de datos como arrays. También pueden especificar otros atributos como colores, textura, reflectancia, vectores normales (utilizados para la iluminación), etc.
2. Vertex shader: es una función que genera coordenadas de espacio de clip aplicando una transformación al vértice y ayuda a preparar los datos para usar en el fragment shader.
3. Generación de primitivas (ensamblador): conecta vértices para ensamblar primitivas triangulares.
4. Rasterización: es el proceso que proyecta el triángulo descrito anteriormente como una coordenada vectorial en pequeñas piezas llamadas fragmentos (los datos necesarios para generar un píxel de pantalla) y también interpola valores a través de las primitivas para cada píxel.
5. Fragment shader: es una función que calcula y asigna el color a los píxeles.
6. Prueba de fusión: toma la salida del fragment shader y la combina con colores en el framebuffer actual para generar efectos de transparencia y translucidez.
7. Framebuffer: almacena el marco de datos en la memoria de la GPU que representa el contenido visible de la pantalla

OpenGL (API, tecnología usada): como se mencionó anteriormente, WebGL se basa en OpenGL y su sintaxis es similar. Sin embargo, existen diferentes versiones y estándares de OpenGL. Actualmente, existen tres estándares: OpenGL para aplicaciones de escritorio, OpenGL ES (sistemas integrados) que se utiliza principalmente en teléfonos inteligentes y tabletas, y WebGL, que se basa en la especificación OpenGL ES para navegadores.
WebGL 1.0 es equivalente a OpenGL ES 2.0
WebGL 2.0 es equivalente a OpenGL ES 3.0

Soporte de navegadores:

WebGL 2.0 es ampliamente compatible con todos los navegadores principales, tanto en computadoras de escritorio como en dispositivos móviles Apple (Safari), Google (Chrome), Microsoft (Edge), Opera (navegador web Opera) y Mozilla (Firefox). Sin embargo, como WebGL se ejecuta en la tarjeta gráfica, su disponibilidad también requiere hardware compatible con la función OpenGL.