Be warned, what you are about to witness may severely inspire you.

In collaboration with:

MountainDew x TitanFall Technical Review 5

MountainDew x TitanFall Technical Review Firstborn is an award-winning strategic design and technology company headquartered in New York City. Founded in 1997, we create interactive experiences, digital products and content that build brands, grow businesses and transform categories. We deliver a wide range of services for clients such as PepsiCo, L’Oréal, S&P Global, Supercell and Vonage. firstborn.com MountainDew x TitanFall Technical Review By Morgan Villedieu, Developer, FIRSTBORN 6

Mountain Dew and Doritos partnered with Smoke, lightning, noise, glitches, graphic bending That’s why we came up with this original idea of TitanFall 2, one of the most awaited games and displacement all worked together to create the trying to render the DOM elements within a texture of 2016, and asked Firstborn to create a illusion of 3D effects without any geometry other to allow us to use them within the browser graphic digital experience to drive sales and reward than pixel evaluation. Because the effects were acceleration while creating unique visuals using redemption. We developed a site that lets procedurally generated, they were able to react in fragment shaders even on the DOM elements. users redeem codes found on special- real-time when moused over/clicked/keyed — an Why we didn’t use HTML2Canvas : impossible task for pre-rendered or video-based as- ly-marked packs of DEW and Doritos prod- When we were researching how to get the DOM ren- sets. The site loads quickly because everything was ucts for exclusive in-game rewards. generated through code with a small amount of 2D dered in WebGL, the first thing we did was search in Google. Google pointed us to a neat little project We partnered with E.A. to create an infrastructure assets — no video or 3D files that would normally that seamlessly integrates user flow, code validation slow down loading time and functionality. called HTML-GL. After further investigation, it turned and rewards implementation into the existing game out it relied heavily on both Pixi and HTML2Canvas. API. We also created a custom backend system that Following is additional information about the tech- The actual magic there was happening in HTML- allows DEW and Doritos’ global teams to retrieve nical aspect of the project, how we made it and how 2Canvas, a tool that rasterizes the DOM so it can be data points and codes. it works. rendered in the canvas. It’s a really impressive tool that basically loops through the DOM and redraws The website used DOM rendered within WebGL, DOM -> WebGL Texture. each element with the Canvas Drawing API. Unfor- which gave us the power of WebGL without having Rendering DOM elements inside WebGL : tunately, because HTML2Canvas does not render to worry about a fallback system. It also employed actual CSS, it does not support all CSS properties. fragment shaders within that framework that al- When we started thinking about the concept of the lowed for full control of user GPUs. Using the GPU’s site we knew we couldn’t go for a WebGL-heavy It can only rasterize the CSS properties it is built to extremely powerful and fast parallel architecture let website. Even though WebGL is widely supported support. In our case, since we wanted an exact repli- us add many visual effects to the site, all rendered in we didn’t want to exclude people without WebGL, a ca of our DOM, that was a deal breaker. That’s when real-time. slow connection or slow computer. we decided to create our own custom solution. MountainDew x TitanFall Technical Review By Morgan Villedieu, Developer, FIRSTBORN MountainDew x TitanFall Technical Review By Morgan Villedieu, Developer, FIRSTBORN 8

Our Final Approach: 1. Create an SVG with a foreign Object containing our markup and styles. https://developer.mozilla.org/en-US/docs/Web/ Example of an SVG with a foreignObject containing markup and styles: API/Canvas_API/Drawing_DOM_objects_into_a_ 1. var data = ‘

3. ‘’ + First we created an SVG with a foreign 4. ‘

’ + object containing our complete HTML 5. ‘’ + the user views as a regular webpage. Here are the 18. ‘

’ + steps broken down : 19. ‘

Your words here

’ + 20. ‘

’ +

21. ‘

’ +

22. ‘’ +

23. ‘’; PROCESS EXAMPLE FOR EFFECTS COMPOSITING MountainDew x TitanFall Technical Review By Morgan Villedieu, Developer, FIRSTBORN 10

2. Convert the SVG data to a Blob : var svgBlob = new Blob([[data]], {type: ‘image/svg+xml’});

3. Convert our Blob to a base64 data url : var reader = new FileReader(); var dataBase64 = reader.readAsDataURL(svgBlob);

4. Use the base64 data to generate an image : var img = new Image(); img.src = dataBase64;

5. Apply the image to a THREE texture : Simply create a texture using the generated image. var loader = new THREE.TextureLoader(); var myTexture = loader.load(img);

The only thing that might be considered a semi-tricky component here was creat- ing the image out of an SVG -- but all you need to do is create a string containing the data for the SVG and construct a Blob with the following parts.

1. The MIME media type of the Blob should be “image/svg+xml”. 2. The