WebVR Demo: Creating a Public Speaking VR Scenario for Browsers

December 10, 2016 - Dom Barnard

This article discussed how we created a simple WebVR demo to practice your public speaking. The demo can be tried with any VR headset that supports WebVR.

What is WebVR?

WebVR lets you access virtual reality (VR) in your web browser, using devices such as Oculus Rift, Merge VR, HTC Vive and Gear VR. It means you’ll no longer need to download huge apps in order to experience VR, allowing it to be easily incorporated into existing websites for a huge variety of use cases.

WebVR is widely accessible and leverages the web as a scalable infrastructure.

How can I try WebVR?

The WebVR is currently available in Firefox Nightly, Firefox (version 55+), Chrome, and in the Samsung Internet Browser for Gear VR.

Note: Not all browsers and devices can access WebVR content, check the specifications on this WebVR page.

You can test your browser's support for WebVR with these examples:

VirtualSpeech WebVR example / demo

WebVR example developed with A-Frame

When you navigate to a WebVR page, you'll need to tap the VR headset icon to enter VR mode.

We’ve been working on an experimental WebVR public speaking demo. View this webpage on your mobile and tap the VR headset icon for the VR experience without needing to download an app.

This creates a smooth transition between web browsing and a VR experience, for example you might be interested in buying a new house, you visit a property website, view details about the house and then enter WebVR mode to view the rooms in 360 with a VR headset. This really enhances the current web experience.

How we built the A-Frame demo

It took us a several days to review the A-Frame documentation and adopt our current VR app for WebVR. What you’re seeing when you enter the environment is 6 square planes connected together to make a cube. The 6 planes each have a different texture on them and are rendered using 3ds Max so that they all look connected in this cube configuration. We then placed a camera in the centre of the cube, giving the impression you’re in the conference room.

An alternative to rendering 6 different textures for the walls is to render a sphere and map the texture to this sphere using A-Frame. We then embedded the movie texture into the front plane and added ambient sound to the front plane where the audience is.

What helped hugely was going through the A-Frame examples which provide the source code for how they were built – reviewing and adapting this for your needs is the best way to get started.

WebVR public speaking realistic demo using A-Frame

Mobile view after tapping the VR headset icon, the browser menu disappears and the resulting view is similar to VR apps.

Other options for building WebVR content

We used A-Frame to build the WebVR environment, however you can also use Three.js, Babylon.js, PrimroseVR and React VR (developed by Oculus).

Limitations we found

Webpages can take a while to load: The WebVR page we created is around 3-4mb which is large for a webpage and adds a few seconds (depending on internet speed) to the loading time. Even after optimising images and reducing video quality, pages are still far above the recommended size for page loading times.

Not compatible with some devices and browsers: This affects various parts of the WebVR experience, for example the movie in our public speaking VR demo does not load when opened in Microsoft Edge browser. I’ve also had friends struggling to view WebVR content on their iPhones or lower spec Android devices. Check the latest WebVR compatibility here.

Much harder to develop complex scenes: WebVR is improved quickly, however I still find it much easier to create a VR scene in Unity3D and Unreal Engine. Elements such as avatar animations are tricky to create with A-Frame but relatively simple in Unity3D.

Unreal Engine and Unity3D also have a huge asset stores which makes creating prototypes quick – for instance you might need to create a space game for VR. You can buy a space plugin and have a decent demo up and running in a day. I’m sure the equivalent of an asset store will be created for WebVR in the near future.

Potential uses of WebVR in the future

WebVR would work really well on these websites:

  • An estate agent house viewing site, where users read details about a property, can check local schools, crime levels etc using web browsing, then enter WebVR mode and view the rooms in amazing 360 images.
  • A holiday travel WebVR site, where the user could travel to different beautiful parts of the world within 360 images, then perhaps there could be descriptions of the different areas and a sort of rating system.
  • A virtual car dealership and driving experience where customers can sit inside virtual vehicles in 360, examine the exterior of a vehicle and even be given a 360 driving tour of the vehicle from the drivers perspective.

Check out the world's biggest WebVR Hackathon for more info.