Active Theory
Jan 25 · 5 min read

2018 is the third year we’ve worked alongside Adult Swim building out their Singles program. In creating the year-long campaign, we were faced with two key challenges: 1) make something interesting for users that return again and again and 2) build a system that allows Adult Swim to easily manage the campaign on a week-to-week basis.

Singles 2018 features tracks released weekly by Adult Swim.

The cat mask

The starting point for creative concepting was Adult Swim’s cat mask — a piece of marketing collateral used by Adult Swim across other properties such as the Adult Swim Festival. The idea we landed on was showcasing the cat mask in gallery lined with masks along the wall. Each mask would represent a song, and by selecting a mask you’d dive into a more immersive experience with the song playing.

Initial reference material helped us create the first cat mask.

Lighting the gallery

To create a convincing gallery effect without showing a peripheral scene, we focused on lighting. Based on real museum references (shown below) we used our 3D engine to implement lighting that shone down on the masks, creating realistic shadows that scattered across the wall.

Top down lighting gave the gallery a realistic museum feeling.

Experimenting with textures

With the cat mask and gallery in place, we needed ways of making each mask feel unique, as a new one had to be generated each week alongside new track releases. Our first experiment was with textures. Using our new physically based rendering system, we explored how different textures looked on the masks.

Experiments with different textures on the cat mask.

Bring in the zoo

Textures were a starting point, but to really make this interesting we needed even more variety in our gallery. We decided to create more animal models in the same style as the cat mask — goat, snake, bear and owl.

Goat, snake, bear, cat and owl masks added variety to the gallery.

Into the mask

With the gallery in place, we had to next work on the experience of diving into the mask to listen to a track. Using the eyes as a starting point, we created a generative tunnel experience that would change depending on the intensity of the song. The content of the tunnel (such as the green spirals in the example below) is based on a file that can be adjusted in the CMS, allowing the Adult Swim team to independently create new visuals for each weekly track.

Early tunnel references alongside the final execution.

Face Tracking

Having created the gallery, tunnels and masks, we wanted to do something fun to bring everything together. Given the experience was based around masks, we decided to use face tracking and built a CMS tool that allowed someone to record themselves singing and dancing along to tracks. The tool then took this recording and applied it to the animal masks, which were rigged to animate to the capture of the CMS tool. We used a web assembly library to ensure the tracking was accurate and performant.

Masks were rigged to match the face and head movements.

Going full WebGL

Aside from Adult Swim’s global header and footer, the entire Singles site is rendered in WebGL. On previous projects, we found it challenging to sustain performance on lower end devices while layering text on top of a WebGL canvas, particularly when the text is meant to look like it exists within the scene.

By rendering the text in WebGL, we didn’t need to worry about how much time it would takes the browser to composite everything together. In order to make sure the text was always rendered at a retina resolution even if the scene itself wasn’t, we rendered the text as a last step directly to the screen. This ensured the text was as crisp as HTML with substantially improved performance.

UI elements were rendered in WebGL to improve performance.

Managing performance

By rendering the text on our own, we took on the resulting performance implications. Just in sheer number, text and UI make up the vast majority of elements in the scene. Even though they are small in comparison to the masks, they present a challenge in adding additional overhead to manage their positional (matrix) data within the 3D environment.

Many times a rich WebGL experience will make the fans on your computer come on as the CPU goes to work. This usually isn’t the graphics but rather the CPU churning through information about what’s in the scene and working out where things should be rendered on the screen.

In order to offset the additional CPU work required to manage the text, we came up with a solution that drastically reduced CPU usage over the time someone is using the experience. Most 3D engines calculate this information every frame, but our new optimization looked at the position, rotation and scale of a 3D object and only recalculated the matrix when a change has occurred. This technique drastically reduces CPU usage and in most cases delays or even prevents the fans from turning on.

Progressive Web App

Given the site has new content every week, we wanted to make it easy for users to return. Enabling progressive web app functionality not only made the site from accessible (from the home screen of your device), but also offered android users the music player in the notification section. This let users continue to listen to the tracks without staying on the site, which was a neat functionality addition.

Singles tracks playable from the notification section.

Check out the latest tracks in Adult Swim Singles 2018 at https://www.adultswim.com/music/singles-2018/.

Active Theory Case Studies

Deep-dives into our projects and technology

Active Theory

Written by

Creative Digital Production

Active Theory Case Studies

Deep-dives into our projects and technology

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade