Back to all cases

ABANCA

Luces en el Cielo

Scroll down for project info.

client

Main roles

Category

Project timeline

The brief

Spanish bank, ABANCA, tapped our group of co-conspirators to develop a custom web experience using 3D/VR rendering in the web browser.

As a special gift to select customers, ABACNAS, wanted to create a Christmas themed web experience that greeted visitors with messages in the night sky. A website users could visit on their phones or computers and look around the scene for constellations that revealed messages.

Launch project

View Github

The challenge

A critical aspect of this project was developing a dynamic rendering system that we could import json data into and the rendering engine would draw the data in the scene. This data was the constellation messages we wanted to animate, 164 different constellation messages in total. So the system had to be efficient and robust for the animations to display correctly across different devices.

Wrapped around the animation system we would also need an event trigger system that could detect when constellations were in view and trigger the animations.

The solution

We used the open source framework Three.js to develop a 3D system that would render our scene and constellations. Using a particle animation system we developed a light weight engine that would load and draw constellations based off our coordinates in json. What we ended up with was a 3D scene that would illuminate constellations in the proxy night sky when event triggers where activated.