presence.outliers.es

Introducing “Presence”: A new way to tell stories with 360 photos in WebVR

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.

You can visit and try Presence here, or go directly to the example stories.

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.

Exporting a Google Spreadsheet to the web (public)

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!

Presence viewer intro screen
A Presence frame, once you click on the intro screen button. Image by Dirk Wandel

How does a valid Google Spreadsheet look like?

It will be similar to the one below

Example Google Spreadsheet with flickr images
  • 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)

Form filled with an image and a clip

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.

Intro screen

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

The experience on a Desktop browser, in non-VR mode. Image by Dirk Wandel

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.

Credits and big thanks!

Presence is developed by Outliers Collective.

Óscar Marín did the coding and Alejandro González build the examples and did the user testing.

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.

Also thanks to Tony Parisi for his wonderful books on WebGL and Virtual Reality , webvr-discuss list for the inspiration and relevant info, and movr contributors!