The first step in creating a Mobile VR application is authoring the app experience. One of the great things about InstaVR is our “write once, publish to many” approach. So all of the steps listed below for authoring a Mobile VR application will be applicable to publishing to other platforms as well, such as Rift, Vive, and WebVR.

Sign up for a Free InstaVR account

Signing up for InstaVR is both free and easy. You can either click the “TRY FOR FREE” button in the top right corner or visit https://console.instavr.co/signup. With a free InstaVR account, you can publish as many iOS/Android/Cardboard apps as you’d like, with the standard limitations applied to our Free accounts (100 MB size max, 5 scenes max, InstaVR watermark + splash screen).

Upload your 360 images and videos to InstaVR

The first step in creating your new Mobile VR project is uploading the 360 media you’d like to use. As a web-based solution, that’s as simple as collecting your project media into a single folder on your desktop and dragging it to our File Manager. Once in our File Manager, you can easily select the 360 images or videos you’d like to include in your project.

Create a menu OR select the initial scene

After your files are in our cloud, you can in the Authoring tab select which panorama you’d like your app to launch into first. Whichever 360 image or video you have as the top-most in your Authoring tab will be the one that loads first. Your VR app can have a top-level menu screen prior to app loading, where users choose between multiple VR experiences using an image slider. Or you can have your VR experience launch straight in from the Home screen. If you choose the latter method, we suggest one of two approaches to app building.

1. Use an initial 360 image as your “Menu Page” – Some clients will want to allow their users to select between a number of different images or videos off of a de facto 360 Image Menu Page. To do that, you’ll select a 360 image as your menu background, and then add multiple Navigation links off that main menu for the user to choose from. (more on Navigation Links below) This approach is good if you have multiple distinct VR experiences for your audience or if you’d like to give them a “Choose Your Own Adventure” style experience.
2. Launch right into a 360-degree image or video – Rather than allowing your user to choose their narrative direction via a Menu, you can have them automatically open on an image or video-based scene. This is good if you want to have a linear experience for your users where they go scene-to-scene, without needing an initial multi-choice Menu.

Add Navigation between scenes

Once you’ve established if you’re using a 360 image menu or a linear approach, you need to give your users the ability to navigate from scene to scene. App users can initiate navigation by gazing at the Navigation link icons you build into the scene. (NOTE: Your final app will have a white dot “trigger” in the middle of the Field of View, used for initiating the Navigation. You won’t see this trigger while authoring the VR experience. Don’t worry though, it will appear in your final iOS or Android app.)

Setting up navigation depends on if your VR scene is image-based or video-based.

Adding Navigation to 360-degree images (For images, you’ll have to add a navigation link — or multiple ones — somewhere within a scene to allow users to navigate to a next scene)

Select “+Link” from Bottom of Authoring Platform ->

Press Update Position ->

Select Location in Pano You’d Like Navigation Link to Be and Click ->

Select Destination Scene You’d Like Navigation Link to Go To ->

Override Nav Link Label, Change Nav Link Icon, Change Text Color, and Change Icon or Font Size (All Optional) ->

Press Complete

Adding Navigation to 360-degree videos (Videos require a different approach than images. There are three options for what happens after a video plays. All of them are found in the lower right corner of the Authoring view, under the “Transition Options” drop-down)

Loop – Loop plays that video over again and again. This is a good choice if you only have a single video for your Mobile VR app.

Stop – If you’d like to give your users options after a video plays, select Stop. You can add Navigation Links to the scene, as discussed above, and the user can choose the next scene they’d like to go to.

Navigate – This choice allows you to choose the next scene or video that automatically loads after the video plays. This is a good choice if you want your VR to be passive, and you want to control the navigation flow of your app users.

Adding Hotspots to your 360-degree media

VR Hotspots are 2D media (images or videos) that can overlay directly on your 360 media. They can be initiated by the user (via gaze or hand controller), or can automatically be displayed if you’re a Pro user.

The steps for adding Hotspots to your VR scenes are:

Select “+Hotspot” from the bottom of the Authoring view ->

Press “Update Position” in upper right hand corner ->

Select location in 360 media where you’d like the Hotspot to appear ->

Select the 2D image or video from the File Manager you’d like to appear as the Hotspot ->

Add a Label that will appear in the 360 media below the Hotspot icon ->

Change Hotspot icon, Icon/Label color, or Icon/Label size (All Optional) ->

(Optionally) Pro users can change when Hotspots appear and if they play automatically ->

Hit Complete

Note that Hotspots work a bit differently in 360 images and videos. For 360 images, the Hotspot is coded to appear fixed to the object where you place it. For videos, it will appear in a location. For that reason, the Pro feature of Hotspot appearance time is something to strongly consider for video.

Overall, Hotspots can be used for educational purposes, for close-up views of things, for adding a video component to a still image, and much much more. Hotspots are a great way to make your app interactive. You can also track Hotspot initiation by adding a Google Analytics id marker to the Hotspot, and viewing the counting stats related to that in Google Analytics.

Creating a Narrative to your VR experience

Authoring a Mobile VR app is as simple as creating a series of scenes, and ensuring your users have a way to navigate from scene-to-scene. This is what we call creating the narrative. You want to ensure that users can intuitively figure out the navigation of the app. Because they’ll be wearing a headset, you want them to experience a logical narrative flow without having to involve you in the process.

Other VR Authoring Options with InstaVR

Above, we’ve listed the basic components of creating a VR application… uploading media, adding navigation between scenes, and placing Hotspots. There’s many, many more options possible with InstaVR, particularly for InstaVR Pro users. Rather than going through them individually here, we’ll link to the main features that may be of interest to you while authoring your app.

Adding music or voiceover to your VR app

Advanced Global Settings features (eg changing crosshair/trigger size, shape, color, etc)

Importing Cubemaps for Use in your InstaVR app

As you’re authoring your Mobile VR app, you may want to view what the application will look like prior to doing the final packaging. That is why we introduced our Live Preview feature in July 2017. Live Preview will help make you more productive, as you can see in real-time what your app will look like to end users. This will help you to better place and edit your Navigation Links, Hotspots, etc

Using the Live Preview app is simple:

1. Click Live Preview from the left side of your Authoring tab.
2. Download the Live Preview app to your phone. You can do a direct download or QR code scan for Android. For iOS, you can only do QR code scan.
3. Open the Live Preview app.
4. Scan the QR code in your Console dynamically created for that project.
5. View your phone or place your phone into your VR headset.

Note, you’ll need internet access for the Live Preview feature to work, as it’s constantly updating your view based on the changes you’re making in the Authoring view. If you have any issues with Live Preview, the best first troubleshooting option is to close the app and re-start it.

Publishing Mobile VR apps is simple with InstaVR. There’s four main types of Apps you can package — an In-House iOS App, an In-House Android App, an iTunes iOS App, and a Google Play Android App. The app experience is basically the same across the four options, but it’s important to select the right packaging features so that your app will run properly when distributed.

In-House iOS App

An In-House iOS App will run locally on a phone (also known as “sideloading”). Apple currently only allows one In-House InstaVR app on a phone at a time. But Pro users can purchase an Add-on from Apple through us, allowing up to 6 In-House InstaVR apps to be loaded on a phone at a single time.

At a minimum, prior to packaging, you have to open the “Common” section below the Packaging button and enter: App ID, Company Name, and Version #.

In-House Android App

The process is basically the same for creating an In-House Android app as it was for creating an iOS one.

There’s no limitation on the number of In-House InstaVR-created Android apps you can have on a phone. Do make sure to use different app Version #’s (or names) though, as identical names and version numbers will cause your newest app to overwrite your older one.

iTunes iOS App

If you have an Apple Developer Account, you can use InstaVR Pro to create iTunes-ready apps. If you don’t have a Developer Account yet, you can learn more about becoming approved here: https://developer.apple.com/programs/enroll/

Packaging for iTunes is almost identical to the process for In-House iOS apps, except you need to upload your Apple Developer Certificate to our File Manager. We’ll then output an .ipa file you can download and submit to iTunes for distribution.

Google Play Android App

To submit to Google Play, you’ll have to be an approved Google Developer with an InstaVR Pro account. Developer application info can be found here: https://support.google.com/googleplay/android-developer/answer/6112435?hl=en

Unlike with Apple, you don’t have to upload a Certificate to InstaVR before packaging. You will, if your app is over 100 MB, have multiple files created on our platform to submit: the main .apk file & an additional .obb file. Please note that Google Play also caps app submission size at 2GB.

Google Cardboard (or Apps for Specific Phones)

If you are creating an app specifically for Google Cardboard, you can specify that while packaging. That will allow you to package particularly for either v1.0 or v2.0 Cardboard.

Also, if your app will be limited to a specific phone, you can indicate that while packaging. This allows the app to be rendered for specific phone screen sizes.

6. Analyzing and Improving Your Mobile VR App

After you’ve published and distributed your Mobile VR apps, you can use our analysis tools to figure out where users are looking, what Navigation Links/Hotspots they’re interacting with, etc. Your users will have to be connected to the Internet for this data to be collected.

Analytics

Analytics require you to have a Google Analytics account already set up. You can then tag objects such as Navigational Links and Hotspots while authoring your app. If you include your Google Analytics overall account # when packaging, we’ll be able to send data into your analytics account for all your app users who are connected to the Internet when viewing it.

Heatmaps

Heatmaps will allow you to visualize where your users are focusing their attention while using your Mobile app. Our new Heatmaps 2.0 gives you access to Live Heatmaps, 3D Heatmaps, Grid-based Heatmaps and more. You can use this data to understand if users are looking where you intend them to look.