Almost all VR is better when interactive. But this is particularly true of WebVR. Why?

Because we’re used to clicking around on web pages and interacting with them.

So if you pull up a WebVR page on your laptop, you’re going to want to click — to go to new locations, to start new scenes, to click on Hotspots, etc.

“Passive VR” may make sense in a headset. The user may be new to the mechanics of how the headset works, so you can simplify things by removing interactivity. But that’s not the case for WebVR, so add as many Navigation Links, Hotspots, and Calls-to Action you need to make a compelling VR experience.

InstaVR Pro users have two options when publishing WebVR – use InstaVR’s CDN for hosting or embed it directly into your web site.

Our WebVR embed packaging provides you a Zip file which you can use with most major CMS platforms, such as WordPress. Using the embed feature is really cool. It makes your web page more interesting and dynamic. And creating the Zip Files is simple — you simply check a box in the Platform section prior to packaging.

One thing to consider is adding the auto-rotation feature of the first scene upon page loading. This will allow your page visitors to know that you have a 360 VR experience embedded onto your web site. It will also get their attention.

Enabling auto-rotation is turned on by default, but you can turn it off in the same Platform section (see below). You can also reverse the direction of the auto-rotation, if you’d like.

We actually wrote an entire blog post on this topic last year.

The short of it: 360 videos run at a different Frames Per Second (FPS) than traditional video, which is why when you watch something on a site like YouTube 360, you’re generally a bit underwhelmed. Things just feel a little “off”. And the issue only seems to exacerbate when in full-screen laptop mode. So native VR apps (ie iOS/Android) are generally recommended if you’re creating a video-heavy application.

But no such issue exists for images!

The user experience for WebVR images vs. native app VR images is very similar. We do definitely recommend 4k or 6k imagery if possible. And keeping the camera closer to the main scene subject helps. Because, again, full-screen mode is going to lead to more pixelation than you’d experience in a VR headset where the screen is right in front of your face.

Bonus tip: Since there’s no size constraint in WebVR, as it’s streamed, always package using the original quality of the image/video and never compress media files.

The Call-to-Action feature of InstaVR is perfect for making your interactive WebVR even more valuable to your company.

Call-to-Action overlays allow for pulling up a phone number on an iOS/Android packaged app. But in WebVR, you can have that same feature pull up a URL of your choosing in a new tab.

What does this mean? Your WebVR interactivity isn’t just limited to the immediate 360 scene!

One of the best use cases of this from a customer is Zuo Modern. In their WebVR — which they run both on their web site and on tablets at furniture shows — you can click on an item in their virtual showroom and be taken to the product page. This is incredibly valuable in facilitating the buying process!

So if you’re looking to supplement your VR experiences with web content, use the Call-to-Action feature.

Bonus Tip: You can customize the logo of the Call-to-Action, as Zuo Modern has, to make it more likely to be clicked on. 

Just because WebVR isn’t experienced with built-in speakers like Oculus Go doesn’t mean audio doesn’t matter!

Audio is critical to a great VR experience. And there’s so many options — ambient audio captured by the 360 camera, lava mics used by subjects of your video, voiceover added in the InstaVR Console, or a soundtrack to accompany the video.

We’ve also seen many clients use audio at the beginning of the WebVR to instruct users on how to navigate, engage with hotspots, etc.

So perhaps your user won’t get the full spatial audio treatment, but don’t underestimate the importance of audio to your overall experience.

This is a tip I first learned from our client University of Arkansas – Pulaski Tech.

When you package to WebVR, under Platform, you can choose to utilize the gyroscope feature or not.

The gyroscope is great for WebVR on mobile phones or tablets. It allows you to move around in the 360 landscape using your device.

However, your laptop doesn’t have a gyroscope. And if you have gyroscope turned on while packaging, but the package is viewed on a laptop, the camera view immediately drops to the floor. You can still navigate the scene, but this isn’t ideal.

So how do you solve this problem? Publish one version for your Mobile users and one for your Laptop users. See below for how UA-PTC approached this.

Pro Tip: You can also do similarly for if you have some users with headsets (ie Google Cardboards) and some without. You can enable Dual-View on tapping if you know they have a Cardboard, but also publish another version for mobile that doesn’t go Dual-View if you know they won’t have a headset. 

WebVR is a great way to preview a VR experience for a headset.

We live in a culture overloaded with apps. But getting a user to download an app is the Holy Grail of a marketer. That application will sit on the user’s phone or VR headset until they delete it.

But because apps are so ubiquitous, it’s gotten harder and harder to get users to download apps. The bar is higher to earn the trust of the user that it’s worth their time and effort to download an app.

So that’s why WebVR is a great for a user to “preview” a VR experience on a web site, before encouraging them to go the Apple Store, Android Store, or Oculus Store to download the entirety of the VR experience.

Let’s be honest: you can create the greatest VR experience in the world, but if no one sees it, it’s a failure.

That’s why you have to promote your VR creations. And one great way to do that is through social networks!

To facilitate the sharing of your WebVR, we added the ability to create and customize a Facebook sharing card. (Found in the “Social” section of Web packaging in InstaVR)

This feature allows you to:

1. Pick a title for the Facebook sharing card
2. Add a description of your VR experience, so users can learn what they’ll view if they click through
3. Pick the image you’d like as part of the Facebook sharing card. Otherwise, we default to a still from your first loading pano.

So don’t forget to update these options before Packaging and promote the VR you worked so hard on!

For InstaVR Free users, you’ll have the InstaVR logo flash on a white background between scenes loading in your WebVR.

For Pro users, you can customize the interstitial. This could include you or your client’s logo. It could be a text file. It could be a fixed color.

Pro Tip: Some clients want to minimize the scene-to-scene transition. To do so, do the following steps —

1. In the WebVR Packaging area, expand the Platform area
2. Upload a very small black pixel as the Web splash logo (you can download the one I use by clicking here)
3. Set the background color to RGBA (0,0,0,0) — true black

This will make that transition just a quick black flash between scenes.

As discussed earlier, getting users to download apps has becoming increasingly difficult. But getting them to open a web page on their phones is easy!

After packaging, you have the opportunity to use a QR code generated specifically for your app. If scanned, that QR code will pull up the URL containing the InstaVR CDN address with your WebVR.

So the next time you have a conference or sales meeting or company event — make WebVR distribution easy. Don’t read of the long & complicated URL. Just hand out a printout of the QR code you’ve generated in InstaVR, and their mobile device will pull up your WebVR on their phone!

Amiens Cathedral Tour (from the UK Government Department for Digital, Culture, Media, and Sport): https://cdn.instavr.co/html/l7nnKtJAQo9wBgXRQkzN_app.html

1772 Gaspee Affair Prototype (from Brown University + Adam Blumenthal): https://cdn.instavr.co/html/OW8DHnaUgg0zPHsyI9Hm.html?bust=atcepqsjwbd

Hello Kitty Puroland VR Tour (from Sanrio): https://www.puroland.jp/webvr/

Zuo Modern 360 Experience: https://cdn.instavr.co/html/KGsvGN2AomEZjtT4ioxA_app.html?bust=k04klk7u88j

UA-PTC Virtual 360 Tour (from University of Arkansas – Pulaski Technical College): https://www.uaptc.edu/vr