VR technology has been around for a while now, but it’s only recently that the technology has become more mainstream and affordable.
There is a new technology called web VR. Let’s find out!
What Is Web VR?
Web VR is a new technology that allows you to view and interact with websites in virtual reality, using your smartphone or another device as the controller.
It’s still very much an emerging technology, but it has been gaining traction over the last few years, especially among developers who are looking for ways to create immersive experiences for their users.
WebVR
WebVR is 360-degree content that lives on a webpage. It could be on its separate URL or it could be an embedded element within a website. When clicked on, it opens up a full-screen VR experience.
Standalone Application
One of the things that WebVR isn’t is a standalone application. So, generally speaking, it needs an online connection and cannot be downloaded. It is a streaming VR experience.
Immersive Content
Because web browsers don’t natively support VR, they’re not designed to be used for immersive content. However, there are some good examples of websites that use VR to create an immersive experience.
Web Browsers
While web browsers like Chrome and Firefox support WebVR, it’s not recommended for images because the quality of the image will seem similar to that of an app (though the resolution may differ).
However, if you’re using a large monitor or high-resolution display, then you might notice some differences between WebVR and apps.
Benefits
Some cool benefits of WebVR are
- You can set up the page so that it automatically rotates when someone clicks into the page. This makes the VR element pop out from the rest of the content on the page.
- You can host multiple WebVR experiences within one web page. So users don’t need to toggle between different pages when they want to view another VR content. They can just click “start” on the next VR content on the page.
- A virtual reality (VR) experience is an immersive simulation of a physical environment where users wear a head-mounted display (HMD). In contrast to traditional computer games, VR experiences allow users to interact directly with objects within the simulated world.
These interactions may include walking around, touching, picking up, throwing, and so forth.
Virtual Reality headsets such as Oculus Rift, HTC Vive, PlayStation VR, Google Daydream View, and Samsung Gear VR provide a fully immersive experience.
WebVR Specification
W3 Consortium
Mozilla and Google have helped come up with a W3 Consortium specification draft for WebVR, which describes access to virtual-realty devices, including webcams and head-mounted displays.
It’s not yet a standard. However, progress is being made to bring it to fruition.
The World Wide Web Consortium (W3C) held a web and virtual reality workshop in October 2016. It was hosted by Samsung and supported by Google, Mozilla, Microsoft, and The Khronos Group.
Sessions
There were 14 different sessions covering topics including performance, accessibility, audio, 360° video, multi-user techniques, and future specifications.
How to Create WebVR?
Creating WebVR is easy with InstaVR.
- Just write the VR experience as you normally would for any other VR device.
- Then in the Packager area, click the Advanced tab.
- Here you can choose from many potential customization settings. And you must decide one thing.
CDN (Content Delivery Network)
If you’d prefer, we can host it for you on our CDN (Content Delivery Network) so that it loads instantly from anywhere in the world. Alternatively, if you’d rather just download the zip archive containing the files, then you’ll need to copy them into your own server.
For example, you might want to create a VR experience that doesn’t take up the whole screen but instead acts more as a pop-out window.
White Label
There are several other cool features you can add to your InstaVR Pro subscription.
All of these customization options allow for a truly ‘white label’ experience. If you wish to minimize the visibility of your interest, we highly recommend a blank black logo and a black backdrop.
This allows for just an empty space between scenes. Interstices Logo/Interstices Backdrop/Web Tab Title/Tab Title Logo/etc.
Clickable Banner
If you’re planning to use your WebVR for branding purposes or direct response, then having a clickable banner at the bottom of it is extremely useful. (See Bottom Banner + Banner URL.)
Selecting Screens
We’ve added an option to allow customers to select any of their favorite scenes directly from wherever they happen to be. This eliminates the need to create a separate screen for selecting scenes.
Customers can navigate between screens via the navigation bar at the top of each page. Navigation Bar.
Autoplay
If you want people to click through to your website from an immersive video, use the “autoplay” function to automatically play the video when they visit your page.
What’s a great place to advertise your WebVR?
By placing an ad on Facebook! The social preview features let you customize the eye-catching title, and text of a social media share of a WebVR experience. Social Preview.
Example WebVR Built Using InstaVR
American Girl
This VR experience was made possible through the help of our friends at American Girl. We worked closely with them to create an immersive experience allowing users to explore the American Girl store in virtual reality.
Our goal was to make the user feel like they were really inside the American Girl store. To do this we utilized the power of 360-degree videos and 3D models to bring the user into the world of American Girl.
Galago Vision
An excellent app developed by Scott Robinson’s group at Galago Vision for LAPD. While video-based, this app too looked good because it used really crisp videos taken with an Insta360 pro.
You’ll notice that web VR uses clickable banners. Most importantly, you’ll realize that web VR is largely an ad for you to download the complete application from any of the major stores, including Oculus!
Smithsonian American Art
One of our earliest clients, and their virtual tour remains exemplary. One of my favorite features – is the 2D videos with the artists explaining their artworks. Don’t underestimate the value of contextual hotspots. Smithsonian American Art museum’s Renwick 360 gallery.
Conclusion
Finally, we’d like to stress that there are many different ways to create a successful VR/WebVR application. Here, we’ve given some examples, but please don’t be afraid to experiment and come up with your own ideas. Just remember these three things:
Keep it simple. Do one thing at a time. Start small. Focus your efforts on getting something done right.
We hope that this guide has been useful. If you have any questions, please let us know in the comments section below!