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.
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.
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:
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.
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.
Mobile view after tapping the VR headset icon, the browser menu disappears and the resulting view is similar to VR apps.
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).
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.
WebVR would work really well on these websites:
Check out the world's biggest WebVR Hackathon for more info.