"Will code for travel"

Search technical info
How to display 360 Photo?
Written: 2019-08-31 21:55:29 Last update: 2019-09-11 16:39:47

Lately I am enjoying my outdoor activity and playing with a new toy, a 360 camera, Yi 360 VR (yi360), taking 360 photos and videos are fun, but the editing and displaying (for sharing) the 360 photos/videos are not, especially using Ubuntu desktop OS (linux) like me, currently there is not many application to allow editing (color grading and straightening horizon) for 360 photos/videos in linux.

Since Ubuntu is a free OS, so there are not so many professional-grade application like Adobe Premiere Pro or others, those professional software are normally for Window or Mac, in my case I only use GIMP to color grade a photo, and using Hugin to straighten/stabilize the horizon (if your 360 photo's horizon is skewed).

To share 360 photos with friends in social media is another problem, there are a few social websites which have a feature to view 360 photos like Google Photos, Facebook, Kuula, Veer tv and others, with these media we need to share the URL to our friends which are sometimes troublesome, obviously using Facebook is much more convenient because Facebook will notify our friends about the new photos.

My workflow to process 360 photo using yi360 camera are

  1. Set 'RAW' (set 'flat color' on) option in yi360 photo setting.
  2. Set all photo setting as auto (brightness, meter, etc.) and set 'stitch' in camera, the photo resolution is always set 5.7K (5760x2880 pixel and can't be changed).
  3. Copy the photo files to desktop and use GIMP application to adjust the color level (if necessary) and 'add color' (menu -> Colors -> Hue-Saturation) by increase Saturation from 0 to somewhere between 50 to 100 (depends on the captured photo quality).
  4. Take the processed photo file from GIMP into Hugin to inject 360 metadata (to make application and Facebook recognise it as 360 photo), Hugin also very useful to straighten the horizon of the 360 photo (many of my photos are skewed and fixed by Hugin)
  5. After processed in Hugin then we can try to view the photo here (below) and if everything okay then upload the photo to Facebook.

For those who want to view their 360 photos in their own personal website, we can use free JavaScript libraries like Pannellum or Kaleidoscope or Google VR View, there are also some non-free libraries which I have not tried. I have tried all those 3 free libraries and personally found Panellum is easier to use, small size and more complete (has zoom in/out), Kaleidoscope is too basic and library size is too large while Google VR View is based on Three.js which is too large because it has many functions to play videos too.

Below is my implementation using Pannellum, please select my sample 360 photos below to view then use mouse or touch to rotate the 360 photos, I also implemented drag and drop file feature, so if you want to view your own 360 photos then you can try it here, your 360 photo will not be send/save to any server, it is only used in your browser.

with Sean with Ho Jin
Please drag and drop a 360 photo file here OR use the button to select file.

Anyone is welcome to use the source code embedded inside this article freely, there is no permission required.

Search more info