Adult Swim: Singles 2018
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.
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.
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.
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.
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.
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.
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.
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.
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.
Check out the latest tracks in Adult Swim Singles 2018 at https://www.adultswim.com/music/singles-2018/.
