We won our first FOTD in FWA

In a world where the future sure seems uncertain, we began 2021 with one of the most challenging projects: create a fictional and futuristic Asian megapolis for UltraSuperNew, an independent creative agency, born and raised in Harajuku.

With Ale Lazos and an international team, we re-designed the entire website. Right from the start the biggest challenge was the different time zones: just between Buenos Aires and Tokyo there are 12 hours of difference. In the end, we found a solution: one status Zoom call every Wednesday, for as long as the project lasted.

We wanted to set the city in the future, though not in the “real” one but in an idealized one, that mixed the style and architecture of the Agency’s three branches, Tokyo, Singapore, and Taipei and integrate their work in the city.  To do so we decided to emulate the cyberpunk aesthetic, multicultural, multilingual, edgy, clearly Asian, much like UltraSuperNew.

In order to render 3D images and CGI we used a local computer built-in graphic card, not necessarily built to render and developed the visual style more or less simultaneously with the technical aspects.

We encountered some performance and loading issues at the beginning. The biggest challenge was creating a highly detailed city that, at the same time, didn't take too long to load, didn't drop its performance on the screen, and had a smooth movement. More than 200 textures and 300,000 polygons were needed to achieve the level of detail we were aiming at.

Thanks to the use of segmented loading through the implementation of "Web Workers," the process-load was optimized by 90%, and performance remained above 30fps throughout all the scenes. To maintain Tokyo's look and feel, filled with an endless sheet of buildings, we used street maps from the city to programmatically create the buildings while keeping its distinctive aspect.

We knew that the total weight and performance were the main challenges to solve.

To do that, we chose WebGL technology, but, as the 3D environment was going to consume much of the CPU, GPU, and RAM capacity, we decided to separate the elements into three layers:

Canvas WebGL with all 3D city elements. 

HTML with all the content, copy, titles, images, etc.

Canvas WebGL with all the interactive buttons.

A communication method between the layers was required, so we used a system of events triggered from JavaScript and taken by the city's WebGL layer with a specific action. The main events consist of moving the city camera based on the section that is being visited.

The site had a lot of content to be managed, so we worked with Prismic. To integrate with Prismic and multi-language, we used NodeJS + ExpressJS as the backend, along with i18n and the Prismic API. We didn't need to create a huge CMS, so we used two controllers - one to manage the site's routes and the other to communicate with Prismic where the information of the accessed route is obtained. And everything ends with EJS to render each view with the data provided by our CMS.

As much unpredictable and strange the future might seem, the city we built for UltraSuperNew was a promising glips of our future: a great team, working remotely from different parts of the world (Argentina, Tokyo, Singapore and Germany) coming together for a project like this and always giving that extra mile. That kind of future, for sure, looks great.