Case Study : The Dime Trap
“If you respect nothing else. You will respect this hustle.” — T.I
The Superhero Cheesecake office has been bumpin’ the last few months. We like to think that we’re a bunch of hip-hop loving gals and guys here, but lately there’s been a lot more gold chains, grills and live ammunition than usual.
Recently, T.I. approached us to create an interactive experience, marking the release of his new album; The Dimetrap. This album takes listeners on a journey through his past experiences and adversities, which shaped the evolution of “Trap Muzik” from it’s early beginnings.
Taking formative moments from T.I.’s life, renowned sculptor Kris Kuksi was approached to create an incredibly detailed sculpture on which we could frame these stories. We then translated this artwork into an incredibly detailed 3D space for users to explore the history of T.I.’s evolution.
Since the album art was already such a strong image we set out to build our interactive experience around that. We wanted to give the audience the opportunity to discover the beautiful artwork in greater detail and have the whole experience narrated by T.I. himself.
The Trap
“Stop looking at what you ain’t got and start being thankful for what you do got.” — T.I
Starting with such a beautifully detailed sculpture we quickly identified the biggest technical challenge for the project, namely, how do we preserve the breathtaking details and overall quality? We were faced with the simple fact that the geometry of the artwork would be way too detailed to render using WebGL as well as the concern, how do we compress all of this visual information into a performant website? The solution was to leverage a form of compression used often in graphics programming called deferred shading. Basically this means the whole artwork is pre-rendered in high quality along with a variety of textures, or maps.
This process involves parceling the entire scene into a sequence of layers, each describing something specific about the forms and the environment (or lighting). This process involves transcoding various types of data from the 3D model, (positional and textural) into color and eventually back into 3D information within the application. The form of the sculpture was described via a depth map, flattening the 3D information onto a 2D texture, with the color relating to where the corresponding point exists in 3D space. Next, a normal map was created to store the surface information, describing the precise angle of the surface at every point. Finally, we described the texture by a specular map to determine the reflective quality of the materials.
A high-definition irradiance map was created to capture the environmental lighting conditions in the scene. For this we used a panoramic HDR image.
HDR photographs include layers of different exposures within a single file which gave us increased control over the final exposure and gamma of the light. Taking an original HDR image as a starting point we could then further simplify and process the image to extract only the light information.
These steps allowed us to overlay the high quality render with real-time rendered lighting and shadows, making the audience feel as if they’re dealing with a real 3D model. The downside here of course is that by using a pre-rendered image there is no way to have the camera move around the model, so that was something we had to work around while designing the interactions.
T.I.’s Story
“There’s triumph, tragedy, lessons, loss, glamour and gunfire.” — T.I.
Using custom scripts within our 3D modelling software we were able to discern and export all of these objects within the 3D scene helping to define areas of interaction. Taking each object in the sculpture, we could flatten the 3D space into flattened shapes. Once the scene was broken down in this simplified state we could start building the experience, mapping stories to different areas.
From here, clicks and touch areas were additionally defined via a texture we called an hitarea map.
Camera positions and zoom levels for these different areas would be defined in an external file to give us control over the interactions. We wanted the camera to feel natural and the experience intimate overall.
The Conclusion
“Everyone has something to sell. The greatest thing you can ever sell is an idea or talent.” — T.I.
We believe in projects which can push the boundaries of web design and development and like great hip hop, great digital projects are born from mixing and sampling from a number of diverse elements and references. In this case, working from such a detailed sculpture required a ton of creative solutions which in the end were mixed and mashed up to create this unique digital experience.
Also, we’ve been thrilled with the public response and the awards we’ve received (Awwwards SOTD, The FWA SOTM). And in true T.I. style we’ve been celebrating like playas in the champagne room…
Check it out! : https://www.dimetrap.com/
Skrrrrt!
