Web
Article

Embedding Virtual Reality Across the Web with VR Views

By Patrick Catanzariti

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

Duplicate the top and bottom images, then blur the duplicate using Filter > Blur > Gaussian Blur:

Go to Filter > Blur > Gaussian Blur

Try out different values for the radius value, as some scenes will look better with more blur and vice versa:

Changing the radius values

Stretch out each of the blurred layers so that they extend beyond the image (as the edges will fade out and we don’t want them to fade out on the edges of our canvas):

Stretching the bottom blurred layer to the bottom of the canvas

Our final result for the images should look like so:

Our final image nicely put together

If you have photoshop skills, you may come up with other ways of making the bottom and top of the image less conspicuously strange. Some scenes will be easier and less obvious than others!

Embedding Our Image

There are two options for embedding our image in a VR View. We can either embed Google’s hosted VR View or host our own version. At the moment, hosting our own version on the same server is more reliable. Things do not work quite right on iOS Safari when the VR View and image are hosted on different servers. The server with the image also needs to be able to allow cross-origin resource sharing (CORS) if using Google’s hosted VR View.

Using Google’s Hosted VR View

For a quick test of what the VR View is like, you can include the following in your web page:

<iframe width="100%"
	height="300px"
	allowfullscreen
	frameborder="0"
	src="//storage.googleapis.com/vrview/index.html?image=//storage.googleapis.com/vrview/examples/coral.jpg&
	is_stereo=true">
</iframe>

That sample code from Google looks like this in action:

By default, you will see a lovely 360 panoramic view of fish in a coral reef! If you change the image= parameter in the iframe’s URL, you can set the panorama to your own image. This should work as long as the server you are using to host the image works with CORS.

You’ll see an is_stereo=true attribute in there — this is when the image is set up with a duplicate of the panorama in the one image. To keep things simple, we haven’t gone down that route in our custom image example! For more info on this, see Google’s documentation on VR View.

Hosting The VR View Yourself

Google’s hosted VR View is incredibly convenient and about as simple as embedding a YouTube video — perfect for quick embedding of panoramic content. However, if you want to use this for a large audience on many platforms, you will want to host the VR View yourself. Otherwise, the images will have an incorrect orientation bug on iOS Safari. Hopefully, that will be solved soon enough and self-hosting will no longer be needed!

Self-hosting isn’t too difficult to set up. Download the code from Google’s VR View GitHub and host it somewhere with public access. If you keep it within a folder called “vrview” on your server, then you will be able to access it at //yourdomain.com/vrview/?image=examples/coral.jpg&is_stereo=true. If you have hosting set up directly for this (or have a domain name pointing directly at it), then you can avoid the /vrview bit.

To add other images, include them within your server wherever you’d prefer (e.g. images/yourimage.jpg) and then change the URL above to look for this new image (e.g. //yourdomain.com/vrview/?image=images/yourimage.jpg).

If you are just looking to quickly test this with your own images and don’t have hosting ready yourself, one great option is to use GitHub Pages.

Hosting The VR View On GitHub Pages

You can avoid downloading and hosting the VR View yourself by instead forking Google’s repository and then hosting it on your GitHub account using GitHub Pages.

To begin, go to Google’s VR View GitHub repo and click “Fork”:

Forking the GitHub repo

Then, inside your fork of the repo, find the CNAME file and click it:

Finding the CNAME file

This file will assign a domain name to your GitHub Page. If you have a domain name ready to use and would like to set it up to work with this, read over GitHub’s guide to using a custom domain with GitHub Pages. Otherwise, click the trashcan icon on the right hand side to remove this file from your forked version of the repo. This will instead allow you to use a typical http://you.github.io/ address.

Deleting or renaming that CNAME file

Commit that change:

Committing updates

Finally, create a new branch in your forked version of the VR View and call it “gh-pages”. Everything in this branch will be what is accessible on your GitHub Page for this repo:

Branching into gh-pages

If you now visit http://you.github.io/vrview/?image=examples/coral.jpg, you should have your own working version of the VR View!

From here, you can add your own images wherever you’d prefer, just as you could do with self-hosting above. In this case, you’d need to add that image to your gh-pages branch directly, or add it to master and then bring it into the gh-pages branch from there. If you are new to GitHub, you can avoid much of the confusion of the command line and just drag your image into the browser window while the folder for your image is open.

Once you have updated the image, change the URL to target that image (e.g. http://you.github.io/vrview/?image=yourimage.jpg) and you should see it in a glorious 360 panorama!

In Action!

Here’s a 360 sneak peek of what’s like to work in the SitePoint office — finally, all of the SitePoint staff can re-visit the office virtually in their spare time! You can see it in full screen by clicking the full-screen icon in the bottom right. If you are on a smartphone, there will be a VR icon next to it too. Click that if you have a Google Cardboard headset and enjoy!

You can see the VR View on its own over on my VR View GitHub Page!

Conclusion

Google’s VR View adds yet another simple option for creating 360 VR content for the web and is incredibly easy to put together!

If you put together a 360 view of your own, I’d love to see what you create! Let me know in the comments below, or get in touch with me on Twitter at @thatpatrickguy.

  • DanOwen

    I do see QuickTime VR on the web here. I don’t see VR in any real sense. You cannot move your position only the yaw and pitch of your viewpoint. I think you should have called the article 360º images on the web. Without movement relative to the virtual world, it ain’t VR.

    • Patrick Catanzariti

      Thanks for your comment!

      The way I see it — it can be brought into VR with a Google Cardboard headset allowing the user to look around the scene in a more immersive way, so it is a bit beyond Quicktime VR in that sense. It isn’t as advanced of a VR experience as one where you can move around and so on, but it’s still something and I think it’s great as a way of slowly bringing VR to the masses.

      The article itself is part of a series I’ve been doing here at SitePoint and we have had other WebVR frameworks like Primrose and A-Frame where there is more interaction possible too. I prefer to see it as a range of different levels of VR content. The more content that can be viewed in VR around the web (even if it is just simple 360 panoramas), the more value people with VR headsets have and the more adoption of VR can grow as people discover them. From little things, big things grow right?

      Fun fact: I actually had a mention in an earlier version of the article that there’d be some debate over whether this is *true* VR as I’m aware that some people out there don’t feel that 360 panoramas in VR is actually VR, but didn’t think it’d be necessary. Now I’m thinking I clearly should have left that in there ;)

  • Patrick Catanzariti

    That’s a neat platform, I had seen mentions of it in the past but had not checked it out yet. I might explore this in more depth later :) Thanks for the tip!

    • Amiee Hibbert

      You’re very welcome. We’re doing a lot with 360 photos lately, so hopefully it will be of some use for you. :) Thanks again for the great post!

  • Tan Maverick

    nice article, thanks!

    • Patrick Catanzariti

      Glad you enjoyed it :) Thanks for stopping by!

  • http://www.gundamaustralia.com/ cameron charles

    Great article unfortunately it seems the viewer is a little broken, showing ‘Render: Unable to load texture from x.jpg” this seems to be widespread, my own test site and many other examples are displaying this, yet googles examples work fine, if you guys have any clues that be awesome

    • Patrick Catanzariti

      That’s strange, it appears to be working on my end still.

      • http://www.gundamaustralia.com/ cameron charles

        they do appear to be working again

  • Patrick Catanzariti

    Great to see! This might help you in your quest for web based AR — https://www.sitepoint.com/augmented-reality-in-the-browser-with-awe-js :)

  • Ohms238

    Thanks for the great post. I had been doing research on this. One question what about the transitions that google does in their street view? Is that also part of their vr view package? And if so is there a link you can share as to how it’s accomplished?

    • Patrick Catanzariti

      Hi! That’s actually a great question — sadly, nope. This only provides single 360 views of one panoramic location. Google hasn’t provided that level of functionality openly for developers to use as far as I’m aware.

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Instant Website Review

Use Woorank to analyze and optimize your website to improve your website to improve your ranking!

Run a review to see how your site can improve across 70+ metrics!

Get the latest in Front-end, once a week, for free.