Okay, let me just start by saying how cool it is that I can actually write this article. I mean, virtual reality is actually here! Considering they’ve been saying that it’s just around the corner for something like three decades, that’s just awesome. I wonder how far away it is before the whole web is virtual. Can you imagine the day when the new iPhone no longer cares about what we do with our hands but tracks our eyes instead?

But we’re not there yet. So, let’s focus on what’s possible now.

Google recently announced something called ‘VR Views’, which means that we can imbed into web pages, as well as Android and iOS a 360 degree virtual reality. This can be in terms of static images as well as videos. You’ll be glad to hear, that that’s actually very simple to do.

Device Compatibility

First, let’s cover whether you can actually run VR view. It can be used on both desktops and mobile devices running the following:

·         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.

Of course, if you use this viewer on a desktop, it’s slightly spoiled as you’ll be dragging it around with your mouse. Buzz kill, right? Google, being fully aware that it’s not quite the same thing, instead calls this a ‘magic window’.

With a mobile and equipped with Google cardboard or something similar, on the other hand, the experience becomes far more immersive.

And you know what the best part is? There is no third party plugin required. It runs right in Javascript. How’s that for inspiring the next generation with everything virtual?

So How do You Make a Virtual Reality Photo?

It turns out to be really straightforward with there being an app for Google to take the photos. Just use their Cardboard Camara app to do so. Alternatively, if you still prefer Apple for this kind of thing, then there’s an app called Optonaut, which allows you to take 360 degree photos.

As I don’t have an Apply device, I’m not sure how easy it is to export. My apologies if it’s harder than I make it out to be.

The Google app is similar to the standard panorama photo, except, of course, that in this case you need to keep turning until you’ve done a full circle. Note that you want to avoid clutter near the top or the bottom of the images as that detracts from the experience. What’s more, I’ve found that outdoor pictures work better.

Prepare the Image

Take the image off your phone and put it onto your computer. If you’ve got an image that has a lot of clutter at the top or bottom (sometimes that’s unavoidable), then there are ways to fix that.

Open up Photoshop, create a 2048 X 1028 canvas and then paste your panorama into it three times (one below the other). Stretch the images until they all fit the canvas that you’ve created, then flip them using Flip vertical under edit > transform.

Now, duplicate the top and bottom images and blur these using Guassian Blur under Filter > Blur. Play around with the blur levels some as different images work better at different levels.

Stretch out the blurred layers past the edge of your screen so that the fade out on the edge doesn’t become apparent. And that should do it. Of course, that’s far from the only way that you can manipulate your image. Be creative!

Putting the Image on the Website

The easier way to put up the image is simply to use Google’s hosted VR view. Of course, it is also possible to do it without relying on Google. The second options obviously gives you a bit more control than the first one, so that you can tweak what you’re doing to make sure it looks good on all the different platforms.

To use the Google VR View just put up this bit of code:

<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>

The default image in this case is a coral reef with a bunch of fish. Quite nice, but you didn’t go through all that work in photoshop to get that, did you? Heck no! So, instead fill in your image after the ‘image=’ tag to point in the direction of your image and the image will switch nicely to what you’ve done. 

Putting it Up Yourself

If, on the other hand, you want to host the image yourself then it gets a little bit more involved. Still, what’s life without a bit of a challenge, aye? (and don’t say ‘a lot easier’).

Start off by downloading the code from Google’s VR View GitHub and put it up somewhere on your server where it has public access. You can give the folder any name you want, but for convenience we’ll call it ‘vrview’. If that’s the name you use, then this code will get it for you:

//yourdomain.com/vrview/?image=examples/coral.jpg&is_stereo=true

Where, of course, ‘yourdomain’ is the name of your site.

Github

Can’t host the image on your website, for some reason? Then you can host it on Github pages.

Simply go to Google’s VR View Github repo and hit the ‘fork’ button. Once there, find CNAME and have a good click on that. What you’ve now done is created a domain name for your GitHub page. You can work with that, or instead you can use the typical github domain page. To do that, just hit the trashcan icon and commit to it (no commitment anxiety here!). 

Finally create a new branch in you forked page of your VR page. Call it something like ‘gh-pages’. If that’s what you’ve called it, then you should be able to access your own images if you follow the http://you.github.io/vrview/?image=examples/coral.jpg.

Now, if you want to put up other images you can do so by putting them up and changing the ‘coral.jpg’ to whatever the a name is of your image (provided you house it in the same location, of course).

Final words

And that’s it! You’ve just managed to put up your very own virtual image! That’s pretty straightforward right? I mean, if I can explain that in under 100 words and you don’t need to know any programming language, then really you can’t say it’s too hard.

So go on give it a try. Or wait around until it gets even easier. No doubt, Wordpress will soon enough just have a button that allows you to host VR, much like we can now host galleries and that kind of thing.