Escrito por Ramón Saquete
Los gráficos 3D, bien empleados, pueden ser una buena herramienta de marketing, ya que permiten mejorar el diseño, exponer los productos en venta o crear efectos sorprendentes que guíen a los usuarios hacia los objetivos de conversión.
A lo largo de la historia de la Web han ido surgiendo distintas tecnologías propietarias y abiertas que podían mostrar gráficos en 3D (3DXML, VRML, X3D, Flash, Silverlight, Java, etc.), pero nunca ninguna a llegado a ser soportada por todos los navegadores, obligando a los usuarios a instalar plugins. Esto hacía que la tecnología 3D fuera bastante molesta, ya que pedirle al usuario que instalara un plugin, era lo mejor que podías hacer para que abandonara la página. Por suerte, eso acaba de cambiar con la reciente aparición de Windows 8.1, debido a que trae Internet Explorer 11 y éste permite hacer uso de una tecnología 3D llamada WebGL, y es que, Internet Explorer, era el último navegador de escritorio que quedaba por adoptar este estándar abierto (en móviles, de momento, no se puede usar). En esta ocasión, el retraso de IE en adoptar la tecnología no ha sido debido a la razón habitual (que Internet Explorer normalmente sólo se actualiza con el sistema operativo), si no a otras razones sobre las que ya escribí hace tiempo en mi blog personal (Internet Explorer contra WebGL).
A continuación expongo las características de WebGL y otras dos tecnologías que también van a ser soportadas por todos los navegadores.
WebGL
WebGL proporciona la capacidad de usar características del hardware de la tarjeta gráfica, permitiendo mostrar gráficos 3D de alta calidad y hacerlos interactivos, dentro del elemento Canvas de HTML5. Por ejemplo, si tenemos un e-commerce de teteras, podríamos mostrar nuestros productos en 3D para acercarlos a los usuarios y hacerlos más deseables, como se ve a continuación:
Si usas un entorno que no soporte la tecnología WebGL verás una imagen estática. Esto puede ser debido a que tu navegador no la soporta, o a que los drivers de la tarjeta gráfica de tu equipo no funcionan correctamente e impiden usar la tecnología OpenGL, en la que se apoya WebGL. Aunque esto último ocurrirá sólo en raros casos. Si por el contrario te funciona esta tecnología, podrás cambiar la vista arrastrando con el ratón o moviendo la rueda e incluso podrás cambiar partes de color con el botón derecho del ratón.
Aunque un navegador no soporte WebGL puede mostrar gráficos en 3D sin usar la aceleración hardware que brinda WebGL. El problema es que la mejor librería abierta de JavaScript para trabajar cómodamente con WebGL (threejs), no está suficientemente optimizada para ofrecer 3D por software con una calidad y rendimiento aceptable, por eso, lo que se hace en su lugar, es simplemente mostrar una imagen.
Los que podéis ver el ejemplo también podréis disfrutar de otros en Chrome Experiments y threejs. Además, podéis utilizar Google Maps en 3D o ver representaciones de funciones matemáticas en 3D en el buscador de Google (por ejemplo buscando: x^2+cos(y)*10). También hay que destacar el diseño de la Web Hackery, Math & Design, que está totalmente implementado en WebGL con modelos 3D procedurales, lo que le da un aspecto impresionante, adaptable y con un scroll 3D muy suave. Los que uséis una versión Internet Explorer antigua, deberíais cambiaros de navegador para verlo.
WebGL es la mejor opción para mostrar gráficos 3D en tiempo real y de alta calidad en la Web. Su único inconveniente es que el contenido mostrado dentro de un Canvas no es indexable, por lo que sólo es recomendable su uso para elementos decorativos o para ofrecer funcionalidades adicionales a los usuarios. Sin embargo, las siguientes tecnologías 3D, aunque son para otros usos, no tienen ese problema.
CSS 3D Transforms
WebGL no es la única tecnología que se vale de la aceleración hardware de la tarjeta gráfica. También es usada por los sistemas operativos de escritorio, tablets y móviles para pintar la interfaz y, por los navegadores, para pintar los elementos de la página. Está última característica es aprovechada por la especificación de CSS para manipular en 3D los rectángulos invisibles sobre los que están dibujados los elementos de la página.
CSS 3D transforms puede combinarse con CSS transitions, CSS animations o directamente con JavaScript, para crear interesantes animaciones como la que se puede ver a continuación:
Si tu navegador o tus drivers no soportan OpenGL verás el efecto igualmente, aunque un poco más lento. Esto es debido a que el navegador no usará la tarjeta gráfica, que tiene un procesador específico para gráficos (GPU), si no el procesador central de propósito general (CPU).
Esta tecnología es ideal para crear galerías de imágenes, animaciones para pasar de página y, en general, efectos 3D que podemos ver habitualmente en interfaces de móviles.
El uso de CSS transitions y animations ahorra código en JavaScript, pero con JavaScript tendremos un control total de la física del movimiento. Además, con JavaScript, también podemos crear un motor 3D basado en CSS 3D transforms, que represente geometrías complejas, aunque sin llegar al nivel de WebGL. Una extensión de la librería threejs, permite realizar precisamente esto.
La especificación de CSS 3D Transforms está en estado de borrador, pero ya es compatible con todos los navegadores. En Internet Explorer se puede usar a partir de la versión 10, aunque de forma parcial.
CSS Shaders o CSS Filters
En programación gráfica, los shaders son programas que se ejecutan en el único módulo programable de la tarjeta gráfica. Estos programas se escriben con el lenguaje GLSL (OpenGL Shanding Language) y se envían como una cadena de texto a la tarjeta gráfica, que lo compila en el código máquina de la GPU y lo ejecuta.
Los CSS Shaders permiten cargar este tipo de programas, desde una hoja de estilo, para que apliquen filtros sobre cualquier elemento de la página. Estos filtros son como los que podemos encontrar en cualquier herramienta de retoque fotográfico (desenfoque, sepia, distorsiones, etc.). Además, al igual que las CSS 3D transforms, podemos aplicar los filtros en combinación de CSS transitions, CSS animations y JavaScript, para crear sorprendentes efectos como textos que se desenfocan hasta desaparecer, morphing entre caras, efectos de iluminación en función de la posición del ratón o cualquier otra locura que surja de la imaginación del programador.
Lo malo es que esta tecnología todavía es muy joven y, de momento, sólo se puede probar si se activa desde pantallas de configuración escondidas en las últimas versiones de Google Chrome, o en los navegadores experimentales Google Chrome Canary y Safari WebKit Nightly.
Si Microsoft ha tardado tres años en implementar WebGL en Internet Explorer ¿cuánto tardará todavía en implementar CSS Shaders? Por el bien de la Web, esperemos que para cuando vayan a hacerlo su navegador sea tan minoritario que no lo use nadie.
