Cannes Lions

Musical Forest: A WebVR Experiment

GOOGLE, New York / GOOGLE / 2017

Presentation Image
Demo Film

Overview

Entries

Credits

Overview

Description

We wanted to create an experience that delivered on the core promise of WebVR – something that was open to all browsers and open to everyone, no matter what device they’re on. We combined this notion with the innate connectivity of the web to allow users from across the world to be present in the same virtual space and share an experience in real-time.

So, we built The Musical Forest to demonstrate copresence at large scale and as an example of how to make a VR experience for everyone – Vive, Oculus, Daydream, Cardboard, and Desktop.

Execution

Musical Forest is a multiplayer musical experiment in virtual reality. It uses copresence —the synchronization of multiple people in a virtual space— to allow people to play music together in VR. WebSockets are used to sync all of the connected players in real-time.

It’s cross-device too, allowing anyone to join in, no matter what device they’re using. Join users from around the world in a musical forest filled with musical shapes. Tap or click a shape to play it.

There are three different shapes of musical objects corresponding to three different sets of sounds. Each set has six notes, chosen from a pentatonic scale.

Spheres: Percussion (Conga, Woodblock, Cowbell)

Triangular Pyramids: Voice + Flute

Cubes: Marimba

Sounds are positioned in 3D space using the Web Audio API’s PannerNode.

Musical Forest responsively adapts features depending on the capabilities of the VR hardware. All users can navigate the space and play shapes in some way. Daydream users use the controller to hit shapes. Vive and Oculus users can add new shapes, change the sounds of new and existing shapes, and rearrange shapes in space.

The frontend uses A-Frame which is built with the WebVR standard and Tone.js for sound. The backend is a dynamic room-based WebSocket server app using Google Cloud PubSub and Datastore. It’s written in Javascript ES6 using node.js.

Outcome

We set out to create the first cross-device copresence experience to showcase what’s possible in WebVR for users and developers everywhere. While it just launched, people and press are already recognizing the promise and opportunity for this kind of technology.

“The Musical Forest. Now I declare myself a fan of #WebVR” - @eliana_mejia, Twitter

“WebVR Experiments offer users a glimpse into what’s possible with WebVR” - Slash Gear

“Great content for mobile VR” - UploadVR

“Click a link, pop your phone in a headset and get to browsing” - TechCrunch

Similar Campaigns

12 items

Google Shopping: Pegasus

GOOGLE, Mountain view

Google Shopping: Pegasus

2022, GOOGLE

(opens in a new tab)