Bringing Within to WebVR

Editor’s Note: With WebVR, you can access VR experiences through a compatible browser like Chrome and a compatible headset like Daydream View. We’re exploring some of the WebVR content that’s available now. Jono Brandel of Within explains the technical steps they took to bring their VR storytelling platform to the web.

At Within, we’re showcasing the best experiences from VR creators around the world. We’re excited to be one of the first platforms available in WebVR.

On Within, you can dive underwater and explore a tropical paradise in Valen’s Reef, or learn the language of dolphins in Click Effect. You can experience how a blind person sees the world with sound in Notes on Blindness, and step into the dystopian hacker world of the hit TV show Mr. Robot. Or, cheer for an animated bunny trying to save the planet from menacing aliens in Baobab’s Invasion!

With WebVR, it’s possible to access all of these experiences right in the browser—making it easier than ever to explore. And with Google's new WebVR API, we were able to easily integrate this new feature into our existing code base.

In order to achieve a working experience with WebVR, we proceeded step-by-step. We started by taking our Web Player for desktop and mobile viewing and added three-dimensional menu controls to seek and change resolution in VR. These elements are not in the DOM’s hierarchy tree; they’re drawn in WebGL on a canvas element. Since there aren’t any click events on these elements, we wrote a Ray Casting technique commonly found in video games to allow viewers to interact with these objects. Once we had this working, we realized that we could recreate our native application’s gallery to navigate between films with essentially the same assets.

Around this time, the WebVR 1.0 spec was released and demonstrated how a web browser could connect to the many VR controllers hitting the market through the Gamepad API. Using the Gamepad API and typical event handlers on the web, we designed a filtering specification that takes in many controller inputs, including keyboard, mouse, touch, the Daydream View controller and other VR headset controllers. With this abstraction, we can focus on interactions and know that they’ll be consistently mapped to the viewer’s environment. Finally, to round out parity with our native application counterparts, and to really give our website the polish it deserved, we wanted to find a way to clearly display non-interactive text. We spent extensive time researching this and have written an in-depth case study about our findings here.

Visit VR.with.in (our VR-first web app, created especially for viewers with VR headsets) to get started. We’ll be rolling out extensive WebVR upgrades in coming months, as well as new experiences made especially for WebVR viewing.