WebVR is an underappreciated virtual reality publishing outlet. It’s likely because the medium is not ideal for 360 video, not fully immersive, and doesn’t involve a powerful headset. What it does have going for it though is reach.
More people can access WebVR than any other VR publishing medium. Almost anyone with a laptop or mobile phone that connects to data can view WebVR. And from a marketing standpoint, that’s huge. Literally billions of people can potentially view your WebVR.
Despite the limitations of WebVR, we’re still big proponents of it. While lacking the cache of say an Oculus Quest app, there’s still some real ROI to be had from embedding WebVR in your web site or having a standalone full-page WebVR experience. Even the best headset-based VR experiences can be augmented through advertising for them via WebVR teasers.
Below, we’ll walk you through what exactly is WebVR, how to create it using InstaVR, a few main use cases we’ve been seeing for the technology, and include some links to great InstaVR-generated and hosted examples.
If you have any questions on creating WebVR, reach out to our Sales or Customer Support teams!
What is WebVR?
WebVR is 360-degree content that resides on a web page. This could mean on its own separate URL, embedded directly in a web page, or it could be a pop-out that when clicked on starts the VR experience.
The one thing WebVR is not is a standalone app. Meaning, generally speaking, it requires an internet connection and cannot be downloaded for offline use. It is essentially a streaming VR experience.
As we’ve written about before, WebVR is not ideal for high-quality video experiences. though as you’ll see in the example section, there are some good ones out there that are primarily video. The reason it’s not particularly well-suited for video is because the Frame Rate Per Second (FPS) of VR is less than traditional video, making the viewing experience less-than-optimal.
WebVR is, however, very good for images. The fidelity of an image will be seemingly identical to that of an app. Though it’s important to note the size of the monitor and screen resolution does make a difference — unlike Gear VR or Oculus Quest, you likely won’t have the WebVR experience less than an inch from your face.
A couple cool benefits of WebVR…
1. You can have it auto-rotate on the page. This lets users know right away there is WebVR. This helps the VR experience stand out on the page and give it a little pop.
2. You can place multiple WebVR experiences within a page you’re hosting. So users don’t have to keep toggling back to a main menu. They can simply click start on the next VR experience on the page.
3. It’s easy to share. You can just send the link to another person, even generating a social media preview card for it. Users don’t have to invest any money in a headset. And it’s a good compromise for those rare people that get nauseous in a VR headset.
Image courtesy of University of Arkansas – Pulaski Technical College
How to Create WebVR
Creating WebVR is simple with InstaVR. You will just author the VR experience as you would for any other VR platform. Then in the Packaging area, expand the Advanced section. Here you’ll find many potential options to customize your WebVR, and you’ll have to make one very important decision:
Do you want it to be full-screen standalone and hosted on InstaVR’s CDN? Or do you want to export it to a .zip file that, along with some code you’ll have to paste, will allow you to embed it directly on your web site?
The latter method is good for a number of use cases, such as: Wanting to have multiple VR experiences on the same page, wanting the VR to not be full-page and wanting it to seemless integrate into an existing web page, or if you’d like it act more like a pop-out window when selected.
A few other cool customizations you can do with an InstaVR Pro subscription…
Interstitial Logo/Interstitial Background/Web Tab Title/Web Tab Logo/etc – All of these customizations allow for a truly “white-label” experience. If you want to minimize the visibility of the interstitial, we strongly recommend a blank black logo and black background. This allows for just a black screen between scenes.
Bottom Banner + Banner URL – If you’re using your WebVR for branding or direct response, adding a clickable banner to the bottom of it is very valuable. (see LAPD example for good use of this)
Scene List – Our newest feature, allows users to choose from all your different scenes directly from whatever scene they’re in. This reduces the necessity of creating a main menu and requiring users to go back to the main menu. This layout of the feature was suggested by one of our Enterprise clients and implemented within weeks.
Auto Rotate – Want a user to know you have a 360 VR experience embedded into your site? Want to give them a preview of what’s in the scene? Use the auto rotate feature to garner attention and get more clicks, as seen below. (or turn it off if you don’t want the distraction)
Social Preview – What’s a great way to get more people to view your WebVR? By advertising through social media! The social preview feature let’s you customize the eye catch, title, and text used for a social media share of your WebVR use case.
We also suggest reading this previously published list of ten tips for maximizing your WebVR publishing.
Main Use Cases for WebVR
There’s a lot of use cases for when WebVR is valuable. We’ll just focus on some of the most popular ones…
House/Building/College/Hospitality Tour – As mentioned, 360 image-based tours are about as good in WebVR as in a mobile app. But WebVR is much easier to distribute and get eyes on. That’s why we see a ton of real estate, colleges, and hospitality venues using InstaVR to promote themselves. The new “Scene List” feature makes these tours even easier to navigate and more useful. If you have a physical space that you’re looking to promote, adding a 360 tour to your web site can be huge.
To Promote Your VR App – Let’s face it, getting someone to download a mobile app or VR headset app takes some convincing. You’re asking for their time and valuable space on their device. That’s why using WebVR as a “preview” for the full VR experience is so powerful. You don’t have to make the full VR available on the web, but it’s very easy to package up a small preview to get people interested in committing to downloading the full VR experience.
As a “Post VR Experience” Marketing Opportunity – If you’re at a trade show or sales meeting or doing VR employee training, you may not be able to “give” every VR user a headset. It may be cost prohibitive or not feasible. You can’t always ask someone to download an app, either. You can however give them a link to your WebVR. This will remind them of the VR experience, and possibly convey important information they missed while in the headset. (ie if they navigated a certain path, causing them to miss a scene)
Example WebVR Built Using InstaVR
American Girl Store – This tour actually does use video, but the movement is so subtle, that it works great in WebVR! Even more impressive — the pop out HTML code used and the awesome customized navigation screen. Overall, extremely well done WebVR tour that is so much better than just plain images.
University of Arkansas – Pulaski Technical College – Read our interview with UA – PTC Digital Marketing Specialist Lennon Parker to find out why they chose InstaVR and added WebVR to their site. Couple things to note with their virtual web tours… 1. They’ve done both Mobile and Laptop Outputs, so that mobile users can take advantage of the gyroscope on their phones. 2. Great use of Hotspots to show close ups 3. Notice how they can put multiple VR tours on a single page? This is one of the many benefits of exporting WebVR and hosting it yourself.
Los Angeles Police Department (built by Galago Vision) – A fantastic app created by Scott Robinson’s team at Galago Vision for the Los Angeles Police Department. Though video-based, this one too looks good because they took really crisp video with an Insta360 Pro. You’ll also note the use of clickable banner. Most importantly, you’ll recognize the WebVR is largely an advertisement for you to download the full app from any of the major Stores, including Oculus!
Smithsonian American Art Museum’s Renwick 360 Gallery – One of our earliest Pro customers, and their virtual tour is still exemplary. One of the highlights for me – the 2D video hotspots with the artists explaining their work. Never underestimate the value of adding contextually relevant and interesting Hotspots.
