This codelab will teach you how to embed 360 degree VR media into websites using VR View. This technology is designed for developers of traditional apps to enhance them with immersive content. For example, VR view makes it easy for a travel app to provide viewers with an underwater scuba diving tour as they plan vacation or for a home builder to take prospective buyers on virtual walkthrough before the home is built.
VR View is available not only on web pages, but also for Android and iOS. There is a companion codelab to this one which introduces VR view in Android.
You should have everything you need here. If not, find a T.A. and ask!
This codelab uses:
During the codelab we'll download code from Github:
For this codelab, We'll start with a web page about Google I/O 2016. We'll replace some of the included images with VR View elements that will give the 360 degree view, and an immersive experience via Cardboard.
For this codelab, we've made a web page as a starting point. During this codelab, we'll walk through how easy it is to add VR View.
...or clone the GitHub repository from the command line.
$ git clone https://github.com/googlecodelabs/vr_view_101
First, let's take a look at a web page about I/O. This is included in the sample code.
website/ directory. You'll need to run a web server to see the page in action. For the codelab, we'll use a Chrome based web server. To start the web server,
As you can see, we've removed the material design and other styles that make web sites great so we can focus on adding VR view functionality - which we'll do next!
Typically, you'll capture images and video and host it on the web. For trying out VR view and initial testing you can use the URL to the public viewer. However, since there are some situations where this will not work as well as you want, we suggest hosting the VR view code on your own site. All the details on getting the code and why you'd want to host it yourself can be reviewed here: https://developers.google.com/cardboard/vrview#self_hosting.
Now, let's clone the vrview project into ours. From a command prompt, change directories to
vr_view_101/website, and clone the vrview project:
$ git clone https://github.com/google/vrview
Your directory should now look like this:
Now we have all the code we need, let's get an image.
While the web page is nice, let's enrich the experience by adding a 360 degree view of I/O. Grab the phone and start the Cardboard Camera app. This app will take a pretty good panoramic picture with a stereoscopic effect.
Click on the camera button and follow the prompts to take a picture. It will take a few seconds to process the image and save it.
Once it is saved, we'll copy the image from the phone to the computer. At kiosks during I/O, we'll use Android File Transfer to copy the image.
Open Android File Transfer and select the window for the phone or device used to take the picture. Find the image under
DCIM/CardboardCamera. It will be named something like
IMG_20160512_105228.vr.jpg. Copy it to the project directory so we can find it for the next step.
Whew! Now we have our image, but unfortunately it is not quite in the format we need. VR View has specific image configuration requirements:
Whew! Now we have our image, but unfortunately it is not quite in the format we need.
If we look at the properties of our image (using Finder/Get Info) it is 10515x1765. To change it, we'll use a converter page to reformat it.
Select the image copied or drop it on the page. Then download the converted image and copy it to
website/images and name it
Now that we have a panoramic (and stereo!) image, let's add to our webpage.
website/index.htmlto open it for editing.
<iframe frameborder="0" width="100%" scrolling="no" allowfullscreen src="vrview/index.html?image=/images/converted.jpg&is_stereo=true"> </iframe>
Reload the webpage.
VR view is a panoramic view so you can click on the view and drag the image around to see all around the in the image.
Alright! We just added this panoramic view to our web page! Let's take a closer look at what we pasted:
An Iframe element. This defines a space on the web page for the VR view code to be loaded and render the image. Inserting the image using an Iframe causes the least interference and complexity with your existing web page. There are several attributes of the Iframe:
If you noticed, in the src attribute, there is a question mark after index.html. This means this page accepts query parameters which control what is displayed:
Now is a good time to experiment with some of these and see how they affect the VR view experience. Next step, Let's try some video!
Capturing panoramic and stereo video is more than we can do on our simple Android phone. For this example, we'll model an encyclopedia page about gorillas. We'll replace a normal image with a panoramic video.
Adding video uses the same approach, just use the video parameter instead of the image parameter.
Open the file
Find the div element where the id equals "photo".
Replace that entire div element with the iframe:
<iframe frameborder="0" width="100%" scrolling="no" allowfullscreen src="vrview/index.html?video=/vrview/examples/video/congo_2048.mp4&is_stereo=true"> </iframe>
Save the file and reload the page in the browser to see the updated page.
Now that we have updated the website to use VR view, we can enjoy a more rich experience in the web browser. But wait, there's more! Since we used stereo images and video, we can have a really immersive view when using Cardboard!
Normally, you'd simply open a browser on your phone and enter the address of the webserver on your computer. But since you're on a public computer here at I/O, we'll open the web page on the phone using our friend adb. To save you some typing, we wrapped the command in a Gradle build script.
Open a terminal window. Then run
$ ./gradlew open_website
Now, click on the link to the gorilla page, and view the video in Cardboard using the same approach!
Now that you've finished the code lab, there are a few more things you can do before you are ready to publish your awesome game. This section will describe what is left and point you to some resources where you can continue learning.