Peugeot challenged us to combine the concepts of our 208 Virtual Testdrive and their global TV-commercial which features nothing less than an orange dragon.
A challenge we gladly accepted.

The idea.

Both the commercial and the 208 Virtual Testdrive revolve around driving around in a new 208 and experiencing its energy. In the commercial, this is visualized by a dragon tattoo coming alive and flying out of the car.

We proposed to blend the Virtual Testdrive and the dragon to one interactive VR film in which you set out to catch the dragon.

Prototyping.

To create this interactive film, we started with a 'storyboard prototype' with all chronological elements throughout the experience. To provide insights in the obstacles ahead.

Getting the look.

First and foremost: a unifying design approach that would connect all pieces together. We started out by creating a poster shot, representing the campaign style.

VR dragon.

Secondly, we had to create an interactive VR version of the dragon. Using a workflow combining Photoshop, Blender 3D and WebGL we recreated the TV dragon and enabled it to fly, appear and disappear anywhere we wanted it to.

A 3D world in WebGL.

A dragon needs to fly. To set it loose in our Virtual Testdrive environment, we recreated the terrain in 3D step by step. Paths for the car and dragon were added, and then the environment was cut up into different seamless tiles that could randomly be connected.

Dozens of environmental variables were tweaked endlessly to create a world with the right lighting, texturing and colors, all topped by a sky that fades from daylight into night during the sequence.

Editing footage.

To create one clear storyline, we re-edited the original commercial footage into a short, mood-setting clip that shows where the dragon comes from. From the original Virtual Testdrive, a scene was selected that ends with the car entering a tunnel: the perfect spot to create a transition to the virtual world.

Transitions.

The final step in blending all scenes together was to design transitions between the different worlds and the end screen. By combining After Effects with Front-end animation, the end result is a seamless experience from start to finish.

Technology.

On top of all the technology used to create the dragon and the world, we placed a custom built 360° panoramic viewer inside a 3D scene that's connected to your mobile's accelerometer. A whole mouth full. Simply put it enables you to look around in 360 using your mobile device. On desktop the camera is connected to your mouse to look around. When the camera and dragon exactly line up, you catch the dragon.

Visit the Peugeot Catch the Dragon site »