Responses by Luigi de Rosa, interactive director, Active Theory; and Dow Jones.

Background: Our purpose was to create a hybrid experience to showcase how Hyundai’s product innovations shape lives today and in the future. This dynamic campaign had four objectives:

1. To showcase Hyundai’s technological advancements in mobility.

2. To engage audiences by immersing them in a captivating storytelling experience, sparking discussions about the future of transportation, innovation and technology.

3. To create a unique, memorable brand activation at one of the most prestigious marketing and media events in the world.

4. To capture 30 percent of total visitors to the Wall Street Journal’s activation Journal House during the Cannes Lions Festival in June 2023.

Larger picture: At Journal House, Hyundai and The Trust—the creative content studio responsible for producing branded solutions for advertising partners of the Wall Street Journal, Barron’s and MarketWatch—unveiled the Miles That Define Us, a custom campaign that showcases Hyundai’s commitment to social responsibility. The campaign, hosted by award-winning actor and singer Leslie Odom Jr., featured a series of short documentary-style films with engaging narratives.

To complement this campaign, in collaboration with financial journalism organization Dow Jones, we transformed our award-winning mixed-reality experience The Field into an immersive hybrid exhibit, titled “From the Ground Up,” for Journal House. This exhibit served as a multisensory 360-degree storytelling adventure to explore Hyundai’s groundbreaking advancements in mobility and innovation, inviting users to delve into the world of autonomous driving and sustainable technologies.

Design core: To create this type of animated story in the browser, we built custom tools to enable our motion and 3-D artists to work (almost) independently when it comes to motion, timing and camera movement while making sure everything is in sync with the voiceover and music. We built upon our past experience using custom Cinema 4D timeline exports to develop the process and tools used here. The approach we settled on for the timeline was completely web-based, letting multiple artists jump in and out while working on it collaboratively; they could tweak and animate every object within the scene, change the active camera, or animate and tweak shader uniform values, among many other things.

Favorite details: As our tech stack is completely based on web technologies, we were able to port the same experience onto multiple platforms—such as web, VR or installations—without significant lift.

Challenges: Finding a look and feel for the 3-D world that wouldn’t require a lot of custom painting and 3-D texturing. We opted for a path that played with depth, contrast and volumetric fog to create the 3-D environments. Our method for real-time volumetric fog is relatively “cheap,’ avoiding ray-marching or other expensive per-pixel operations. Technically speaking, the fog is provided by a billboard plane in the distance, with depth write and test disabled. This plane reads and uses the scene depth buffer from a previous frame, adding a slight jittering or noise. Finally, we added a strong bloom pass in post-processing.

New lessons: When you’re showing the client visual ideas, try testing those styles, shaders, shapes or whatever else on a fully working web test at 100 percent scale. Don’t just rely on designs and motion references for the look and feel—make sure the front end can bring that same vibe to all platforms.

Navigation structure: We started by creating a storyboard, followed by crafting 3-D vehicle models and assembling them in gray-box versions of the 3-D scenes. After this rough scene version was completed, we shifted our focus to camera motion and keyframe shots that would highlight essential moments and features.

Technology: As our tech stack is completely based on web technologies, we have our in-house JavaScript framework and 3-D engine along with a set of custom tools for 3-D artists.

Special technical features: Thanks to our stack, we were able to port the experience to desktop, mobile, VR and a 98 inch–screen installation onsite.