Clicky

Usar WebGL para agregar efectos 3D a tu página web

WebGL demo

WebGL es una tecnología que permite crear gráficos 3D en tiempo real en el navegador

Probablemente hayas oído hablar del creciente interés en WebGL, la tecnología que permite gráficos 3D en tiempo real en el navegador. Durante algunos años la gente con talento de todo el mundo lo han estado usando para crear experiencias increíbles, vídeos musicales, juegos, visualizaciones de datos y más.

Con el poder del hardware de aceleración de gráficos 3D, WebGL realmente ofrece un sinfín de posibilidades para los diseñadores y desarrolladores. Mejor aún, la compatibilidad con el navegador está creciendo rápidamente (incluyendo versiones futuras de Internet Explorer), que hace que la tecnología sea muy prometedora para el futuro de la Web.

De hecho, la tecnología es tan emocionante que a veces nos olvidamos de lo que la hace especial: se ejecuta en el navegador, lo que significa que se puede utilizar dentro de cualquier documento web. En mi opinión, WebGL no debe ser utilizado exclusivamente para una página completa de aplicaciones 3D, como la mayoría de los ejemplos que vemos en línea. También podría integrarse en las páginas web normales, en combinación con otras tecnologías y contenido.

Así como usamos imágenes, vídeos, SVG y otros elementos visuales para construir nuestras páginas, podríamos usar WebGL para crear una experiencia de usuario más atractiva añadiendo gráficos interactivos y efectos visuales que son imposibles de lograr con cualquier otra tecnología disponible.

A continuación se muestra una pequeña demo que he transformado. Piensa en ella como una hipotética página para la comercialización sobre algunos productos web. Puede que queramos resaltar un conjunto de tres funciones principales sobre el producto. ¿Y si pudiéramos añadir un toque de sorpresa e interactividad con cada uno de ellos? Sitúa el cursor del ratón sobre cada función para ver cómo WebGL puede añadir interesantes efectos.

WebGL demo
Pinchar enla imagen para ver la demo WebGL

Como se puede ver en la demo, mediante la integración de contextos WebGL transparentes en la página, son capaces de mezclar estilos CSS regulares y elementos DOM (el texto y los círculos de color) con gráficos 3D en tiempo real. Esto nos permite añadir efectos divertidos e interactivos a nuestro contenido de la página.

¿Cómo funciona?

Para crear estas demos, he utilizado la biblioteca three.js, que es una gran manera y relativamente sencilla para dar los primeros pasos con WebGL. Recomiendo encarecidamente visitar los muchos ejemplos en el sitio oficial del proyecto.

En nuestra demo, el primer ejemplo es un modelo 3D básico (creado con Blender) que cargamos en la página. La segunda es una esfera geométrica generada a la que añadimos una animación simple de rebote con algo de JavaScript. El último es otro modelo en 3D que proyecta sombras en la página gracias a una fuente de luz situada debajo del cursor del ratón.

Ten en cuenta que, en esta demo, se supone que el usuario utiliza un navegador habilitado para WebGL. Una práctica mejor hubiera sido implementar primero la página con imágenes estáticas para asegurar la funcionalidad básica para todos y, a continuación, agregar los efectos 3D como una mejora progresiva de los navegadores avanzados.

¿Qué pasa con las Transformaciones CSS 3D?

Se podría pensar: "¿Espera, no podríamos simplemente utilizar transformaciones CSS 3D para hacer esto?. Hasta cierto punto, CSS3 es a menudo la mejor herramienta para añadir efectos 3D a nuestras páginas. Por ejemplo, es la elección perfecta de la tecnología de los efectos simples, como transiciones de página o presentaciones de diapositivas en 3D. Sin embargo, se vuelve menos relevante para hacerlo frente a las formas complejas en 3D y animaciones.

No me malinterpreten, las transformaciones CSS 3D son una herramienta maravillosa que sin duda recomiendo usar para efectos básicos de la interfaz de usuario. Pero tan pronto como queramos trabajar con escenas complejas en 3D te recomiendo usar WebGL, que da para trabaja modelos, texturas, luces/sombras y shaders.

Comienza con WebGL

Lo mejor de todo, puede comenzar a usar WebGL hoy. Con herramientas como three.js, crear y manipular escenas 3D ya no es ciencia nuclear. Para crear y editar tus propios modelos 3D, puedes usar Blender, que es un editor 3D gratuito y de código abierto con un sinnúmero de tutoriales y recursos a través de la Web.

Apenas hemos arañado el principio de la forma en que los gráficos 3D en tiempo real pueden mejorar los sitios web que hacemos. Espero que este artículo te inspire a experimentar con WebGL.

Jesus_Caceres