Generated with Avocode.frameplay
Close project

Jagermeister WebAR Experience

Jagermeister WebAR Experience Powered by 8th Wall & Amazon Sumerian

So this was probably the one of the biggest happenings for us this year as through pure serendipity we found ourselves working on building the crux of the Halloween 2019 campaign of Jagermeister USA!

Now all the fluff apart, this was quite a complex WebAR execution that was part of a much bigger integrated campaign for Jagermeister with a lot of stakeholders. The tech stack was also more deeper than most of the other AR experiences that we had worked on till date. After the initial hiccups of concept approval (since we had several stakeholders involved in the process of finalising the concept) we were faced with quite a challenging timeline for the execution of the project. We really had to buckle up for this one. The next 5-6 weeks were a rollercoaster.

 

 

The big idea

The entire experience was location based and would only be trigged at certain pre-selected venues, which was handled by our agency partners Foundry512 & Foursquare’s teams. Now the idea was that each venue type(sports bar, lounge, club, pub, etc.) would be assigned a unique Darke Spirit character and once the user was in the venue, they would be sent the link to the experience via SMS or they could just scan QR codes off of printed materials in the venue like flyers, coasters, etc.

Jagermeister already had the Darke Sprits characters integrated into their brand storytelling from earlier campaigns, but the design itself of the sprit characters had to be “finished” and then created in 3D. So agreeing on the look & feel and faces of both the male and female sprits took some back and forth although the masks were pre-designed and approved.

The end goal of the UX journey was to get the users to share the photos they clicked of themselves along with the Sprits, on their social with the #DarkeSpirit

 

 

Design & 3D asset creation

Once all of the stakeholders had agreed on the concept visuals for the male & female Sprit characters, we began the process of designing them in 3D for approval and final implementation in the experience. The initial 3D models are usually too heavy in terms of file size and number of polygons(it’s a 3D tech thing, don’t ask), so once they are approved based on the visual aspects, begins the mammoth task of optimising the 3D models to make them usable real-time assets for AR experiences.

 

 

Real-time asset creation

The first step in optimising the high-poly 3D model is to wrap it up with a mesh of polygons that will become the main structure of the final 3D asset and all of the complex fine details will be transferred over in normal map and other texture maps(don’t even bother to try to understand if you aren’t from the 3D world).

Smoke-simulation

We animated the smoke effect in 2D layers with alpha channel and then added that on top of 3D polygon cards (see polygons again!) to achieve the live smoke effect. We had to experiment with the integration a bit as SDKs/APIs like 8th Wall, Amazon Sumerian are relatively new tech, so its a tad bit tricky to have animated textures with alpha channels work right on them without taking a toll on performance. But it worked decently right in the end, given that we were working with a rather crazy timeline.

Again this was Amazon Sumerian to the rescue with its native support for animated textures with alpha channel. Because we couldn’t have achieved this with native three.js alone. Or would’ve needed to write custom shaders in three.js which would’ve been a nightmare with the timelines that we were working with.

Rig & animation setup

3D assets that require to be animated need something called a “rig”. It’s basically an armature setup that allows for the intended points on a 3D model to be articulated and twist & turn. Since these spirit characters were made of smoke, that added some complexity to the animation as the characters had to move as smoke flows.

The six sprits

In total there were suppose to be six unique Sprits identifiable by their masks. When the user triggered the experience using the link sent through the SMS or by scanning a QR code (which in turn opens the link in their phone browser) they would be instructed to point their phone camera at an empty area in the venue and tap on the screen to make the Darke Spirit emerge. The Spirit would look around and once it spots the user it will come close and stop at about 10 feet from the user. At which point the user can have their friends pose for a photo with the spirit.

Jagermeister darke sprits

Finalising the UX

Even though the timeline was a tough one, but we didn’t want to cut corners on the overall UX. Because if this was broken, then the users wouldn’t stick around to get to the end of the experience and actually get a chance to share it with friends on their social, which was the whole point of the experience.

Diving into Sumerian

Alongside finalising the animations and UI stuff, we got the 3D content setup in Amazon Sumerian as well. We knew we had to figure out a few critical things in Sumerian, like the animated smoke textures and also materials that simulated a “spirit” feel. Talk about multitasking right there!

Amazon Sumerian & 8th Wall build

8th Wall’s WebAR tech almost sounds too good to be true, but what it does is make AR experiences accessible on all mobile devices(almost) with just an URL across (almost)all browsers.

All that you have to do is integrate the Amazon Sumerian project into the 8th Wall setup and voilà! 8th wall handles the SLAM tech that supports the AR experience with its almost universal cross platform & browser support while Sumerian handles the real-time rendering of the 3D content in PBR glory.

 

QA & launch

QA & launch was probably the most intense part of the whole project, given the timeline. The WebAR experience had to be live the same day the whole integrated campaign launched and we were projecting the timeline against the launch date almost a week before and figured that we wouldn’t make it, with the multi-level approvals involved.

But we were lucky to have incredibly trusting & brave partners who agreed to a last minute idea we came up with-launch the experience in 2 parts, the female Sprit characters first & male ones the week after. This ironed the issue with the timeline and it was smooth sailing from there. Again all of this wouldn’t have been possible without our partners Foundry512 & Foursquare who were super supportive throughout the whole process and made sure we had the time needed to finish this at the quality standards that we deliver in.