• Home
  • blog
  • Embedding Virtual Reality Across the Web with VR Views

Embedding Virtual Reality Across the Web with VR Views

The methods available for web developers to build virtual reality experiences for the web is growing at a rapid and exciting pace! I previously covered how to build VR on the web last year and it has already advanced quite a bit since then. There are quite a few options for building virtual reality experiences for the web that have emerged in 2016 — in the past two weeks, we’ve explored A-Frame, an open source extensible VR web framework and building VR within VR using Primrose. Last month, Google themselves announced another exciting option that is set to bring even more VR to the web — embeddable VR Views.

What Are VR Views?

“VR Views” provide the ability for developers to embed 360 degree virtual reality images and video into websites on desktop and mobile. VR Views can also be embedded into native apps on Android and iOS. In this article, we will explore how simple it is to embed a 360 panoramic image into an existing website.

Device Compatibility

Google’s VR View works on the latest versions of the following browsers on both desktop and mobile:

  • Chrome on Android, iOS, Windows, Mac OS X and Linux.
  • Safari on iOS and Mac OS X.
  • Firefox on Windows, Mac OS X and Linux.
  • IE 11 and Edge on Windows.

With desktop versions, your “virtual reality” experience is mostly a panorama experience where you drag the view around with your mouse. They call this version of the experience a “magic window” — it is similar to desktop Quicktime VR panorama experiences that some may have seen a few years back. However, the VR Views from Google today are done using JavaScript rather than a third-party plugin, and can be enhanced through a true VR view using Google Cardboard.

Taking a Panoramic Photo

Google have a “Cardboard Camera” app that can take 360 degree panoramic photos on Android. For those on iOS, there is an app called Optonaut which can also take 360 photos. I’m not quite sure how easy Optonaut photos are to export and use elsewhere, so if you do have an iOS device and give this a go — I’d love to hear how it went!

With the Google Cardboard camera, you can take a 360 photo by standing in one place and moving in a circle, following the instructions on screen. The most effective scenes will be ones taken outdoors, with a wide open space and not too much detail at the bottom or top of your image. If you are taking a photo of a smaller room, you may need to adjust the image before it will look right (we’ll look at how to do so below).

When you have taken a photo with the camera, you should find the 360 photo on your phone over at /sdcard/DCIM/CardboardCamera. Copy that to the computer you will be doing your development on.

Preparing An Image

If you do not have a large amount of sky and ground in your scene, your image is likely to display a bit strangely in those areas. Sometimes, especially for indoor shots, this is unavoidable. We used a photo of the SitePoint office (thanks Angela!), which has a perfect example of what the bottom of an image that has a lot of unavoidable detail at the bottom will look like:

A rather absurd squished floor

To avoid having too much detail at the top and bottom of your image, you can add space above and below the image that’ll keep things looking neater. There are plenty of techniques you can try to give a nice top and bottom area that doesn’t scrunch up too much, my favorite so far is to add a blurred reversed image on both the top and bottom.

To try this method, create a 2048 x 1024 image in photoshop and paste three of your panorama image inside it:

Three panoramic images copied over

Stretch all three so that it fills the canvas and then flip the top and bottom images using Edit > Transform > Flip Vertical:

Flipping the top and bottom images

That should look like so:

With images flipped

Continue reading %Embedding Virtual Reality Across the Web with VR Views%