Exploring virtual worlds with WebVR and Matterport

Editor’s Note: When you build with WebVR, anyone can explore VR experiences with Chrome and Daydream View. Ashish Agrawal is the head of new initiatives and virtual reality at Matterport. In this post, he explains why WebVR was a great tool for Matterport and how the team added WebVR support to their platform.

Individual 360º photos are great for a quick preview of what a place looks like, but with a Matterport Space, you really feel like you’re actually there. Our virtual tours combine many 360º panoramas along with 3D data to create an immersive, interactive experience.

By combining our 3D camera hardware with custom vision processing in the cloud, we’ve built a platform to create virtual environments from real places. Thousands of people have used our technology to digitize more than 450,000 real-world places into 3D experiences: celebrity homes, museums, canyons, iconic architecture and much more.

While you can access Matterport Spaces through a web browser on desktop or mobile, exploring them in virtual reality takes an additional step. Previously, you had to download the Matterport VR app from the App Store, Oculus Store, or Google Play and switch to the app whenever you wanted to go into VR. Now with Matterport’s implementation of WebVR, no external app download is required—everything you need is right in the Chrome web browser. You can go to a mobile website that has a Matterport Space embedded on it, tap the VR button, put the phone into your Daydream View headset, and you’re ready to explore.

Matterport was one of the first companies to partner with Google to bring VR to Chrome. We started integrating our product with the WebVR API while it was still in beta. We took this early step because we really believe in WebVR as a future platform, and we wanted to be there right when it launched.

Let’s dig a little deeper on how we implemented it. Because our WebGL-based player works on desktop and mobile platforms, you could already explore Matterport Spaces through a browser. We wanted to ensure that we retained this optimal performance with added WebVR support. However, a full optimization, including all the features we’ve added to our WebGL-based player in the last few years, would have taken time. So in the true spirit of keeping it simple, we made a version of the player with the WebVR Boilerplate and a stripped down version of our loading and rendering code, and we optimized everything for performance.

Here are a few of the things we did to optimize performance in VR:

• To shorten load time, we preload the WebVR version immediately after the user invokes the player rather than after the hand controller calibration.

• For the initial launch, we removed all the features included in our normal desktop/mobile version.

• We render only what’s necessary and nothing more.

• We profile on the actual target device, not on a developer’s computer.

To learn more, read our in-depth case study.

Now when you enter WebVR, we switch to the stripped-down WebVR-based version of the player. And when you exit, we switch back to our normal WebGL-based player. You don’t even notice the change.

There’s more to virtual reality than gaming, and we here at Matterport are committed to making it simple to create, discover, and share great VR content. WebVR is helping us accomplish these goals by making it even easier for our users to explore. Check it out for yourself by visiting the Hawaii Oceanside Villa. Just tap the VR button in the corner and pop it into a Daydream View. It’s the next best thing to being there.