Rodney Campbell's Blog

My 360˚ Panorama Workflow Part 2

I’ve been posting a couple of interactive 360˚ panorama photographs both on my blog and my social media streams. Since then I’ve been asked a number of questions by various friends about what my 360˚ panorama workflow is.

This series of blog posts is I guess an answer to a number of those questions and perhaps others they’ve not yet thought of :). It’s a description of my current 360˚ panorama workflow along with the tools and utilities I use.

You can view My 360˚ Panorama Workflow Part 1 here. In Part 2 I’m going to cover how I export and then share my panoramic creations.

Preparing your image for use online generally involves ensuring that:

– the file proportions (aspect ratio is 2:1).
– the file dimensions (how many pixels).
– the file format (generally JPG is recommended) and projection (a 2:1 equirectangular projection is common but other projections like cubic do exist and will work).
of the file is correct.

The “sweet spot” for most (and in fact maximum allowable size for some) online panorama players appears to be around 6000 x 3000 pixels (2:1 aspect ratio) for the best results, however 4000 x 2000 is also acceptable.

– the files XMP/EXIF metadata is set to correctly to trigger the host site and clients to display your 360˚ panorama correctly.

– for this you may need to edit the XMP/EXIF metadata in your image file.

Adjusting XMP/EXIF Metadata

There are a number of ways you might add or alter the XMP/EXIF metadata in your image file including:

– online sites like thexifer.net.
– some image editors.
– standalone desktop applications and commandline utilities (like exiftool (multi platform) and panoexif (Windows only)).

Exiftool

The most powerful and flexible EXIF editor is the commandline tool ExifTool. It is available for a number of operating systems including Windows, Mac (which I use) and Unix.

This is the tool I use – in conjunction with a small shell script I wrote to call the tool.

Sharing to Social Media

Facebook

Facebook announced support for 360 photos and panoramas in June 2016. When you upload a 360 photo or panorama, Facebook automatically processes the photo and presents it in an interactive viewer. However for Facebook to recognise the image files on upload it looks for camera specific metadata found in photos taken using 360-ready cameras. This information is embedded in photo’s XMP (Extensible Metadata Platform) and/or Exif (Exchangeable image file format) tags.

If you havn’t taken the photo using a known 360˚ camera you may need to fake it by adjusting EXIF data in your image file before uploading.

One widely recognized convention for tagging a photo as containing 360 content involves Photo Sphere XMP metadata. Images that are properly tagged with Photo Sphere XMP metadata will be recognised and processed by Facebook as being full or partial 360.

Another set of tags that will trigger Facebook’s 360 processing is the Make and Model of the camera (in EXIF). One easy way to trigger this is to alter your EXIF data to one of the popular 360 ready cameras, the Ricoh Theta S.

Setting Make to “RICOH” and Model to “RICOH THETA S” will work to get 360 treatment in Facebook (as long as the image’s aspect ratio is 2:1).

Google Maps and Google+

The Google platform has a requirement to add a specific set of MetaData to your panorama before loading it up to Google Maps or Google+.

Whilst I’m not 100% sure of the exact minimum EXIF items required the Google platform appears to make use of all of the following. I’ve bolded those items I believe are mandatory:

ProjectionType=equirectangular
UsePanoramaViewer=True
CroppedAreaImageWidthPixels=XXX_pixels
CroppedAreaImageHeightPixels=YYY_pixels
FullPanoWidthPixels=XXX_pixels
FullPanoHeightPixels=YYY_pixels
CroppedAreaLeftPixels=0
CroppedAreaTopPixels=0

The following are not required but may be good to have:

PoseHeadingDegrees=0.0 (0-360) (if left blank the center of the image will be used) (the Pose Heading Degree is the position on your panorama facing North) – is required for display on Google Maps.
InitialViewHeadingDegrees=0
InitialViewPitchDegrees=0
InitialViewRollDegrees=0
InitialHorizontalFOVDegrees=XX.X

Also in order for it to be located on Google Maps awe need to add “GPS/Location” data as follows:

GPSLatitude=
GPSLatitudeRef=(N|S|E|W)
GPSLongitude=
GPSLongitudeRef=(N|S|E|W)

Note that if you have your source images from your Phantom in Adobe Lightroom you can simply copy the GPS data from one of those images to the final stitched panorama in Lightroom and it will inherit the GPS/Location data.

Flickr

Flickr also supports displaying 360˚ panoramics automatically. There’s also a dedicated Equirectangular Flickr group.

My EXIF Panorama Workflow

So what do I do to add the correct EXIF/XMP metadata to my files?

I’ve written a little shell function which makes use of the commandline version of exiftool to do all the work. Along with modifying the EXIF metadata in any files my script also uploads the file(s) to my web server so it’s ready to be used. It also outputs the nearly complete HTML code for the iframe to embed into a blog post along with the API call to be used in a web link in any web page (see below).

The main call to exiftool in the script looks like this:

exiftool -ProjectionType=equirectangular -UsePanoramaViewer=True -FullPanoWidthPixels=4000 -FullPanoHeightPixels=2000 -CroppedAreaImageWidthPixels=4000 -CroppedAreaImageHeightPixels=2000 -InitialHorizontalFOVDegrees=75 -Make=RICOH -Model='RICOH THETA S' Filename

Sharing to the Web

360˚ Panorama Hosting Sites

There are a number of sites dedicated to hosting 360˚ panoramas, some even dedicated to hosting aerial ones.

Some like Okolo even attempt to solve the problem of automatically looking after filling in the sky. Some examples of these sites have been listed below:

– Okolo.
– Roundme.
– SkyPixel.

Web Pages and Blog

If you wish to embed a 360˚ panorama onto a web page or on your blog then you will need to include a panorama viewer to your site.

I’d recommend using an HTML5 based viewer. However Java, Flash, Shockwave and other plugin based viewers do exist.

The viewer I use on my blog is called Pannellum. It’s a lightweight, free, and open source panorama viewer for the web. Built using HTML5, CSS3, JavaScript, and WebGL and it is plug-in free.

If you have access to your own web host you can download and extract the Pannellum software on your web server. Then all that is required is to upload your correctly formatted (EXIF/XMP metadata) equirectangular image file and embed the appropriate code to your web page or blog post to make calls to the Pannellum code and your image file.

For blog posts you are likely to include the panorama via an <iframe>. For an entire web page you may use the Pannellum API.

Mona Vale Beach at Sunset

So there you have it – my panorama workflow from start to end.