It's a hat trick, a big pat on the back forJam3 who win their 3rd Site of the Month with their cooperative multiplayer 360/WebVR experience Dunkirk WebVR. Thanks to everyone who voted and tweeted with the hashtag #AwwwardsSOTM, the winner of the years’ free Pro Plan in our Directory can be found at the bottom of the article. Coming up we take a closer look at the winning project.
Building a 360° Multiplayer Game.
In collaboration with Warner Bros, Google approached us wanting to build a cooperative 360° multiplayer game for Chrome WebVR in support of Christopher Nolan’s latest movie launch. It needed to enable viewers to experience the June 1940 battle of Dunkirk with engaging co-play, while remaining sensitive to an important historical event.
CGI animations were coupled with the sounds of real planes overhead that synced with the visuals. Through eye-tracking, consumers can see the beaches of Dunkirk being bombed all around them, and 360 sound corresponds to head movement, as it would in real life. Gaze based interactions allow them to move through the game.
Collaborating to Survive
Paying homage on our reliance on each other to survive, Dunkirk WebVR allows players to partner with anyone in the world, in order to escape the dangerous battlefield and get home safely. The circumstances at Dunkirk produced a surreal climate of uncertainty and dread – but they also stirred an overwhelming sense of duty, trust, and connection between soldiers. We wanted to replicate that camaraderie by crafting a story reliant on smooth communication and collaboration between 2 people.
Each player takes on a different character’s perspective, seeing the world through that character’s eyes and hearing their internal thoughts. To survive the evacuation, each player takes shifts as both rescuer and victim. To succeed in the game and escape the battlefield, they need to rely on the success of each other’s interactions in the game, triggered by their gaze in VR. Ultimately, the game blends focus, trust and cooperation, highlighting a reliance on each other to survive.
Building Tension and Emotion.
With a custom-created introduction, the linear story starts from the water, and gradually moves to the user’s POV. We drew our design insight from the Dunkirk movie assets, incorporating the same boat and truck models used in the film, enhancing the connection between the two mediums with monochromatic visuals. The 360 sound design matched the trailer, and was used to build tension, increase realism and increase emotional immersion in the experience.
We created a custom fog shader that provided the VR scenes with a dense and rich atmosphere. DOM text was rendered to WebGL textures creating highly immersive real-time typographic effects. These WebGL textures match the melancholy aesthetic of the real experience at Dunkirk. This experience was created for WebVR and Daydream, providing a smooth VR experience optimized for mobile.
Thanks for all your shout outs and votes @ivndn you have won a year in the Awwwards Directory!