Introducing “Presence”: A new way to tell stories with 360 photos in WebVR
It’s as simple as creating a Google Spreadsheet with the story frames.
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.
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.
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.
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.
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.
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.
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.
Credits and big thanks!
Presence uses WebVR boilerplate from Boris Smus, threex.dynamictexture from Jerome Etienne, and three.js from Ricardo Cabello. Big thanks to you all. You’re doing an astounding work in pushing forward WebVR.
We will also thank the author of crossorigin.me, essential to enable remote texture loading from CORS-restricted websites.