Creating 360 photo tours for Meta Quest headsets with KRPano

360 photographic tours can be very effective within VR headsets. This tutorial shows how to create headset-ready 360 tours using KRPano and customize the default navigation arrow.

KRPano

One or more 360 photos

Online web space for uploading your work

KRPano is a 360 tour-building tool with a very broad feature set. It does require coding – or at least editing XML files – to achieve many things, but creating a Meta Quest-ready tour with navigation links between scenes can be done almost entirely automatically using the KRPano Tools app. This is used to generate tours and to add navigation elements to existing tours; it is a drag-and-drop process.

One big difference with virtual tours viewed in headsets rather than on desktops is the lack of ‘skin’ support. The skin is a graphic overlay that is used for control buttons, branding, maps and so on, but this doesn’t currently appear in headsets; triggering the VR button and stepping into a fully immersive view will remove any skin elements from the experience. Because of this, enhancement plans should be based on adding hotspot elements.

There is more that can be done, including adding video and graphic hotspots with VR-aware actions. To do this kind of work than this you will need a text editor such as BBEdit (for macOS), or Sublime Text 3 or Typora (for Windows) to edit the XML files that KRPano Tools generates. Notepad in Windows could be used in a pinch. You’ll also need to refer to KRPano's online documentation for details and examples.

1. Create a 360 photo tour

Open the KRPano Tools app and make sure you have the Make Vtour tab selected and that the ‘Confirm before processing’ checkbox in the lower-left is checked. (If it isn’t, processing starts as soon as an image is added.) Drop one or more 360 panoramic images into the window, beginning with the one you want to be seen first.

Pick ‘vtour-vr.config’ from the menu next to that checkbox; this option will optimize your scenes for headsets as well as for viewing in desktop browsers and mobile devices. Click the Process Images Now text link and wait for the software to finish generating all the necessary files. This creates a ‘vtour’ folder with all the necessary files and folders inside this.

You can test the tour in your Mac or PC by clicking View Tour, but to test it in your Meta Quest headset you will need to upload it to a web server and visit it in the Quest browser. First, however, there’s one change that you should make. The main HTML page is named ‘tour.html.’ Renaming this to ‘index.html’ means it will be served up automatically when someone browses to this folder on your web site. (Don’t upload the tour_testingserver_macos and tour_testingserver.exe files; those aren’t needed.)

Use the Quest browser to visit your tour online. If you renamed the ‘tour.html’ file you just need to type the address to the tour folder. When the scene loads you’ll see an Enter VR button in the middle of the scene; triggering that with your Meta Quest controller will switch you from the regular browser window view to a fully immersed display. Navigating between scenes is done using the chevron arrows that appear when you look downwards.

The tour you generate like this will work on everything from your Meta Quest headset through to mobile and desktop devices. In regular desktop and mobile browsers you will see a control bar at the bottom of the browser window with a few options for controlling the view, including previous and next arrows if you’ve created a tour with multiple scenes. When in immersive viewing mode you only get previous and next arrows, and only when you look down, so adding custom navigation points in your scenes can help users find their way around virtual spaces more easily. While most KRPano tour enhancements require editing the XML files (which is beyond the scope of this article), this particular trick is easy to achieve and doesn’t involve any manual code editing.

If KRPano Tools is still open with your freshly-made tour, click the Edit Tour link, otherwise pick the VTour Editor tab, click ‘Load tour.xml’ and find the tour.xml file that’s inside the new vtour folder. The view inside the KRPano Tools is the standard desktop-style version of the tour, complete with the control bar along the bottom.

Find a place in your first scene that should have a navigation arrow, click the Add Hotspot button, and drag the graphic arrow this creates into place in the scene. When you’re ready, click on the arrow without dragging it to open the Edit Hotspot panel, then pick the hotspot target scene and click Save. Go through all the scenes, creating links back from every scene so your visitors don’t get stuck in a cul-de-sac. When you’re done, click Save tour.xml. The original tour.xml file is renamed as a backup with the date and time in case you wish to restore it.

If you want to use your own navigation graphic instead of the default arrow the simplest way to do this is to replace the vtourskin_hotspot.png file with your own, using the same file name and format. The file is found in the ‘skin’ folder in your published tour. It’s 128x112 pixels, but anything reasonably close to this size is fine. The PNG format supports transparency so cutouts, shadows and translucent areas are all possible.