Click here to Skip to main content
15,867,308 members
Articles / Programming Languages / Javascript

4 Top Free 360° Image Viewers for Developers

Rate me:
Please Sign up or sign in to vote.
4.92/5 (4 votes)
26 Jun 2019CPOL4 min read 7.8K   1  
Overview of the four most popular open source 360° image viewers with recommendations as to which is the best tool for your purposes.

Introduction

360° imagery is being used more widely. 360° images, video and live streaming are supported by Facebook, YouTube, and many other popular platforms. How easy is it to integrate 360° image viewers in a website? What are the best options?

In this article, I look at the four most popular open source 360° image viewers and give recommendations as to which is the best tool for your purposes.

  1. A-Frame
  2. Google VR View for the Web
  3. React 360 (was React VR)
  4. Photo Sphere Viewer

A-Frame

A-Frame is the leading open source project for WebVR. What this means is that your project will work not only with web sites, but also on Vive, Rift, Daydream, GearVR, and mobile phones.

Pros

  • Backed by Mozilla
  • Active community
  • Works with VR headsets and VR controllers

Cons

  • In beta, pre-release
  • Video does not work on mobile devices in a browser
  • May require the developer build of some browsers

Verdict

A bit premature for prime time, but excellent for education, ranging from middle school students to adults.

Live Site

A-Frame mobile example developed by middle school student

Example with falling stars and theta images

Google VR View for the Web

Google VR View for the Web is part of a set of technologies that Google makes available for mobile and web VR. It’s a solid choice for developers that either want to build browser-based sites or are committed to Cardboard and Daydream.

Pros

  • Backed by Google
  • Works on Daydream
  • Supports hotspots

Cons

  • Optimized for the web. Other SDKs available for native mobile app development
  • Limited viewing options compared to Photo Sphere Viewer
  • Media may need to be placed on the same web server that the code is saved on, especially with Mac OS X and Safari

Verdict

Google VR View for the Web is a solid choice for web sites that need an embedded 360° image. Separate SDKs are available for Android and iOS. If you’re focused on Daydream or Cardboard for a VR experience, there is a VR Entry Flow. If you’re looking for a wide market of full VR headsets, A-Frame is a better choice.

You can tell your clients you’re using Google VR technology and they’ll nod their heads. Google has a significant investment in VR and 360° image technologies. VR View for the Web was recently updated, indicating active development.

1 minute video overview explaining how web developers can quickly test Google VR View for the Web.

React 360 (was React VR)

React 360 is a VR framework for React. It used to be called React VR, but the two APIs that Facebook and Oculus were using diverged. The open source framework is React 360. It’s easy to use and requires Node.js.

Pros

Cons

  • Community not as active as A-Frame
  • Same problems with using cutting-edge technology that A-Frame encounters. May not work as expected on all headsets
  • Not really ready for prime-time

Verdict

If you have a Facebook app for a client as a proof of concept or a flashy marketing concept, this is a good choice. If you like React, then it’s a great choice. It’s probably fairly stable in a browser, but doesn’t have as many control features as Photo Sphere Viewer when used as an embedded 360 image viewer in a web page.

Examples

Photo Sphere Viewer

Photo Sphere Viewer is an open source project made by Jeremy Heleine. It focuses on viewing the 360 image in a web page.

Pros

  • Most features to control the image in a web page
  • Stable JavaScript library that been around for a while
  • Allows download of 360 image and zoom from menu bar (you can disable the menu bar)

Cons

  • Made by individual, not large company (which might be relevant to your clients)
  • Optimized for the web, not headsets
  • No clear path to augmented reality and virtual reality (compared to the technology from big name companies)

Verdict

This is a good choice for web pages and should work well for most commercial 360 sites where the menu system is below the primary image. It’s more appropriate as a gallery, rather than a VR or virtual tour. While VR and AR are definitely the future, most commercial sites, like a restaurant or auto dealer site, use a series of 360 images with an external menu. For web applications that do not require linking to another image inside of the sphere, Photo Sphere Viewer offers more features than the other technologies.

Example

Live Site

Made with jQuery.

Conclusion

VR and 360 image technologies are changing rapidly. You should check out the technology for yourself. However, if you have limited time, here are my recommendations to get you started.

History

  • 26th June, 2019: Initial version

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
President Oppkey
United States United States
President of Oppkey, a developer relations firm based in San Francisco that builds online developer communities. Open source loving ice hockey playing New Mexican Japanophile.

See oppkey.com for more details.

Comments and Discussions

 
-- There are no messages in this forum --