For Polygon we made an accurate and functioning 3D visualizer of their blockchain interoperability protocol, Agglayer.

High level overview

The client came to us with very impressive and very technical docs describing how their Agglayer tech worked. It is brilliant technology that is difficult to visualize. They wanted to create a digital tool that would accurately represent how Polygon’s Agglayer functioned, along with educational explainer walkthroughs of the 3D space that would allow them to display and explain the workings and value of their tech.

Exploring a design challenge

To go from brief to a fully deployed 3D visualization of Polygon’s Agglayer took three key steps:

We completed a research phase into the technology & data structure behind Agglayer
We turned that technical research into concept designs for an interactive 3D visualisation of transactions pinging through Agglayer
We turned those concept designs into the tool which is built in React Three Fibre

Once the direction was locked in with the client, we were able to dive into the process of making the visualizer come to life. To create a tool of this depth takes a wide variety of specialized talents.

Our designers developed clean UI designs and we worked with 3D modelling expert Rob Walters to create a visual concept for the hashes, nodes, and leaves. There was some heavy mathematical legwork to get the networks and pings functioning correctly. We also collaborated with talented audio producer Harry Dundas to add beautiful background audio to set the general mood of the visualizer experience.

All the while working closely with the client to hone the tool and integrate guided educational explainer walkthroughs into the visualizer.

Bonus

A key part of the Agglayer technology is the fact that every hash key that is created throughout the network tree is completely unique. While in reality this means a hash is a very long (unique) number, we had the challenge of representing this uniqueness in a visually recognisable way.

As usual, we jumped at the opportunity to dig into our Flexible Visual Systems locker to create unique hashes in a performant way. Each hash received different value sets for modifiers including size, colour and rotation. In combination with some R3F lighting and material tweaks, this meant that we were able to populate the entire network with unique hashes, all while keeping the tool performant in the browser.