Creating interactivity in 360 images / panoramas – Pannellum

I’ve been looking at an open-source tool called Pannellum which allows us to add hotspot interactions to 360-degree content.

The advantages of using this sort of tool rather than hosting on a 360 platform is that you have a lot more control over what you do with the content, where it is hosted and what sort of interactions you can create.  The downside is that it does require some technical input beyond what I would consider general IT skills, but could easily be undertaken in partnership with a learning technologist or anyone comfortable with editing (not actually writing) code.

Examples:

(please note: image quality & stitching quality of images were not the priority in these examples)

Examples of hotspot types in the CEI learning lab: Learning Lab Panorama

This example includes:

• Full 360-degree panorama
• Info hotspots
• Scene changing hotspots
• Video within a hotspot
• URL hotspots
• A static image on the landing page

Dental clinic – set up to identify bad practice: Dental Clinic Panorama   (note, this link requires you to be logged in to learning central to view)

This example includes:

• A 180-degree panorama
• Custom hotspots (colour / size / etc..)
• Image content within the hotspots

(please note: this is not the final content, but placeholder information for this demo)

Process:

To build this sort of interaction you need to:

• Take the panoramic photo
• Identify hotspot locations
• Add hotspot content and type
• Host the resulting webpage (in these cases on Learning Central)

Technical overview:

Pannellum requires a JSON file (either external or as part of the web page) with the hotspots and panorama details in.  It comes with a debug mode which allows you to identify the x + y co-ordinates of hotspots you want to create.  The pannellum site has a lot of examples and additional options.

The panorama must be equirectangular.  This can be output from most 360 cameras, but also created from non-360 images with some image tweaking.

Interested?

We can see opportunities to develop these sorts of experiences further for interactions such as:

• Familiarisation with a lab before attending a practical session
• Explaining OSCE exam process
• Exploring environments that are not always available

We are looking to develop a series of case studies around this area.  If you have a potential use for this sort of technology in mind, please get in touch and we can explore further: CEILT@Cardiff.ac.uk

If you are interested in Virtual/Augmented/Mixed realities, you can join our Yammer Group.