Ganamos nuestro primer FOTD en FWA

En un mundo donde el futuro parece realmente incierto, empezamos el 2021 con uno de los proyectos más desafiantes: crear una megápolis asiática ficticia y futurista para UltraSuperNew, una agencia creativa independiente nacida y criada en Harajuku.

Junto a Ale Lazos y un equipo internacional, rediseñamos el sitio web por completo. Desde el inicio, el mayor desafío fueron las diferentes zonas horarias: solo entre Buenos Aires y Tokio hay 12 horas de diferencia. Al final, encontramos la solución: una videollamada de estado por Zoom cada miércoles, durante todo el proyecto.

Queríamos ubicar la ciudad en el futuro, aunque no en uno “real” sino idealizado, que mezclara el estilo y la arquitectura de las tres sucursales de la Agencia, Tokio, Singapur y Taipéi, e integrara su trabajo en la ciudad. Para lograrlo, decidimos emular la estética cyberpunk: multicultural, multilingüe, atrevida, claramente asiática, muy en sintonía con UltraSuperNew.

Para renderizar imágenes 3D y CGI utilizamos una placa de video integrada en una computadora local, no necesariamente pensada para renderizar, y desarrollamos el estilo visual casi al mismo tiempo que los aspectos técnicos.

Al principio encontramos algunos problemas de rendimiento y carga. El mayor desafío fue crear una ciudad con alto nivel de detalle que, al mismo tiempo, no tardara mucho en cargar, no redujera el rendimiento en pantalla y tuviera un movimiento fluido. Se necesitaron más de 200 texturas y 300.000 polígonos para alcanzar el nivel de detalle que queríamos.

Gracias al uso de la carga segmentada mediante "Web Workers", el tiempo de procesamiento se optimizó en un 90% y el rendimiento se mantuvo por encima de los 30fps en todas las escenas. Para conservar la esencia de Tokio, repleta de un mar interminable de edificios, utilizamos mapas de calles de la ciudad para crear programáticamente los edificios sin perder su aspecto distintivo.

Sabíamos que el peso total y el rendimiento eran los principales desafíos a resolver.

Para esto, elegimos la tecnología WebGL, pero, como el entorno 3D iba a consumir mucha capacidad de CPU, GPU y RAM, decidimos separar los elementos en tres capas:

Canvas WebGL con todos los elementos 3D de la ciudad.

HTML con todo el contenido, textos, títulos, imágenes, etc.

Canvas WebGL con todos los botones interactivos.

Se necesitaba un método de comunicación entre las capas, así que utilizamos un sistema de eventos disparados desde JavaScript y captados por la capa WebGL de la ciudad con una acción específica. Los eventos principales consisten en mover la cámara de la ciudad según la sección que se esté visitando.

El sitio tenía mucho contenido para administrar, por eso trabajamos con Prismic. Para integrarnos con Prismic y el multi-idioma, usamos NodeJS + ExpressJS como backend, junto con i18n y la API de Prismic. No necesitábamos crear un CMS enorme, así que usamos dos controladores: uno para manejar las rutas del sitio y otro para comunicarse con Prismic, donde se obtiene la información de la ruta accedida. Y todo finaliza con EJS, que renderiza cada vista con los datos que nos brinda nuestro CMS.

Por más impredecible y extraño que pueda parecer el futuro, la ciudad que construimos para UltraSuperNew fue un atisbo prometedor del nuestro: un gran equipo, trabajando remotamente desde diferentes partes del mundo (Argentina, Tokio, Singapur y Alemania) uniéndose para un proyecto así y dando siempre un poco más. Ese futuro, sin duda, se ve increíble.