WebVR: A New Way To Tell Stories With 360 Pics

WebVR: A New Way To Tell Stories With 360 Pics
February 17, 2017

Presence is a WebVR experiment to help you create immersive stories combining Google Street View frames, Soundcloud clips, or self-made 360 images.


It’s as simple as creating a Google Spreadsheet with the story frames.


Watch the 360 experiences with a Cardboard device, on an Oculus Rift or in your computer or mobile phone; and share them via a url.


You can incorporate 360 equirectangular photos from flickr photos or imgur, Google Street View locations, self-made 360 equirectangular photos and sounclound clips


Also, you can generate single-frame experiences with just one photo.


Nice! How do I try it?


You can head directly to the examples here , and click on one of the stories.


You will be directed to an intro page for sharing the story. At that point, if you have a WebVR-enabled browser you can see the story in Oculus Rift, or see it with a Cardboard device on mobile. In any case, thanks to WebVR magic, you can just enjoy the story in a common browser if you do not have any HMD display.


We recommend this guide by Boris Smus for Oculus Rift troubleshooting and this other guide for special (WebVR) browser installation.


Once the story have launched, you can move through the different frames by ‘looking’ (in Oculus Rift and Google Cardboard) at rounded hotspots or clicking them on a normal browser.

Hotspots for navigating among the story frames


Also, you’ll see a little description plus attribution text below the hotspots.


At you feet, you have another hotspot for hiding the hotspots and enjoying the panorama without them.

Hotspot at your feet, to hide or show the other hotspots


If you plan to see the story with a HMD device (Oculus Rift or Cardboard), you can click the ‘small glasses’ icon at the right-bottom corner of the view, and you’ll enter the immersive view.

Entering WebVR ‘Virtual Reality mode’ on a WebVR-enabled browser. Image by Dirk Wandel
Virtual Reality mode’ on a WebVR-enabled browser. Image by Dirk Wandel


How do I generate stories for Presence?


Generating a complete story via Google Spreadsheets


Go to Presence ‘Create’ section and paste a Google Spreadsheet public html link on the box.

Generating an experience from a public Google spreadsheet link


You will have to export your original Google Spreadsheet to the web by pressing ‘File/Publish to the web’ and grabbing the link there. It should end with the ‘pubhtml’ string.

Once you click on the ‘Generate experience link’ button, a link will appear below the button and you will be redirected to an intro screen such as the one below. Then you can share your story or enter it!

How does a valid Google Spreadsheet look like?


It will be similar to the one below

* In the should have a header with four ‘columns’: ‘file’, ‘description’, ‘attribution’ and ‘sound_file’

* Every row is a frame of the story

*In the ‘file’ column, you can put links to 360 images from flickr, imgur or any self-hosted image. You can also link to google Street View locations by putting the latitude and longitude of the place, separated by a comma, for example: ‘51.1787166,-1.8263086’ will put the frame in Stonehenge. You can grab the geo coordinates from Street View url.

/* In the ‘description’ field you can put any text to be displayed in the frame ‘info’.

* If you get a photo from another author, you can make the right attribution in the ‘attribution’ field. Any photo coming from Flickr is automatically attributed, so no need to fill this column in this case

*If you want to play a sound in the frame, you can fill the ‘sound_file’ column with Soundclound clip urls.


Is there any example sheets out there?


Yep, this one is an example with Flickr images and this other one is an example with Street View locations. Of course you can have both Street View locations and Flickr images mixed in the same sheet, just follow the conventions outlined above.


Generating a single Presence frame with optional sound


If you do not want to generate a whole story (with more than one frame), you can just go to the ‘create’ section on Presence and scroll to the second section, where you can enter an image URL (Flickr, imgur or self-hosted) and an optional Soundcloud clip URL (optional)

Then, click the yellow button, and a link will appear below. Click on that and you will be directed to an intro screen, where you can share the frame, or enter it.

And you’re all set!. If you press the yellow button in the Intro screen, you will be directed to the photo experience

Where can I find further information to shoot my own 360 photos?


This link by Dr. Robert Berdan is an excellent start, with heaps of useful links at the bottom.


Know issues


Here’s a list of know issues:


* Remote hosted images (other than Flickr or imgur images) do not always work: There’s a CORS related issue for textures based on images. Try it and if does not work, you can always report back to us

* Oculus Rift on a Mac: We recommend this Chromium (0.4.3) build

* In WebVR Chromium and on mobile devices, Soundcloud clips do not work

* Flickr images in high resolution (width greater than 12288 pixels), will ‘downgrade’ to the immediate lower resolution due to problems with very high resolution images.


We’re working in fixing them and improving the software.

Related articles

VRrOOm Wechat