Three.js, la tecnología 3D que ha hecho posible “Orgull de Baix”

Three.js, la tecnología 3D que ha hecho posible “Orgull de Baix”

Objetos, figuras geométricas en 3D, perspectivas de cámara o efectos de luces son una pequeña parte de los elementos que permite crear la tecnología Three.js. Se trata de una librería de JavaScript muy ligera y eficiente que hace posible la animación de gráficos en 3D en una página web, gráficos que los navegadores pueden dibujar, mover y animar (renderizar) sin necesidad de tener que utilizar una aplicación. Esta innovadora librería es la que nos ha permitido hacer realidad el documental web “Orgull de Baix”, una experiencia inmersiva que gracias al 3D invita a explorar de manera virtual los paisajes agrícolas y naturales de la comarca del Baix Llobregat, reivindicando su valor estratégico, fundamental para la sostenibilidad del área metropolitana de Barcelona.

Con Three.js hemos generado y animado el mapa gráfico 3D que podéis ver al acceder al documental web. Para construirlo, hemos utilizando la valiosa información geográfica y de altimetría del Institut Cartogràfic i Geològic de Catalunya, que permite descargar gratuitamente datos desde su portal icgc.cat.

Three.js es una tecnología open source de reciente creación que los desarrolladores han comenzado a utilizar hace tan sólo 5 años, debido a que necesita ordenadores suficientemente potentes para poder funcionar adecuadamente. En la actualidad ya existen muchos equipos que cumplen con los requisitos necesarios.

Además de sus indiscutibles cualidades técnicas, desarrollamos “Orgull de Baix” con Three.js porque el espíritu de esta tecnología coincide al 100% con el de nuestro documental web: es una herramienta open source, que crece y avanza gracias a las contribuciones de una comunidad de desarrolladores, de la misma forma que “Orgull de Baix” es abierto y accesible para todos, y pretende contar con la colaboración de la comunidad para continuar el debate sobre el crecimiento y la sostenibilidad de los espacios agrarios alrededor de las grandes zonas urbanas del planeta.

Imagen del documental interactivo Orgull de Baix.
Imagen del documental interactivo Orgull de Baix.

Herramientas de animación 3D adaptadas al web

Por otra parte, la voluntad de Three.js es trasladar las herramientas de animación 3D para crear gráficos espectaculares y realistas como los que ya se utilizan en los videojuegos, y adaptarlas a la web. En el diseño y desarrollo de “Orgull de Baix” también ha estado siempre presente la idea de construir un documental web que proporcione una experiencia de usuario próxima a la del videojuego.

Three.js genera las imágenes y gráficos en 3D a través de OpenGL gracias a un cálculo de polígonos, estructuras y luces. De esta forma, puede determinar formas y asignar la iluminación en el proceso de renderización (momento en el que los cálculos dibujan y crean lo que vemos). Es por tanto una simulación realista de estructuras, ambientes y del comportamiento de objetos y de luces, de texturas y de materiales, proceso al que hemos añadido animación e interacción.

La gran ventaja técnica de Three.js es que permite que los cálculos para construir la animación se lleven a cabo directamente en el ordenador y no en el servidor. Esta es la razón de que sea tan ligero. Three.js se utiliza conjuntamente con html5, la quinta revisión del lenguaje básico actual del Word Wide Web (www), el cual, entre otros aspectos, permite hacer realidad proyectos web en entornos multiplataforma, como es el caso de “Orgull de Baix”, que funciona en ordenador, tableta y móvil. Si ya habéis visitado Orgull de Baix y queréis ver otros ejemplos de webs construidas con Three.js, los podéis encontrar en la página web de Threejs.org.