WebVR/WebXR in a nutshell

Jeremy Bedolla
3 min readMar 3, 2021
image from google showing off WebXR

WebVR is a way to experience virtual reality (VR) without a VR headset from an internet browser. Whether that browser is on your home pc or on your mobile phone all the necessary components are built into the programming on the website. This means you don't need a VR headset to get the experience. This is often just the first step into VR as it will mostly just be a 360 video tour or something along those lines. That is until WebXR was introduced. WebXR stands for web mixed reality and includes AR as well as VR. Back in 2016 was when google and Mozilla introduced WebVR, but just a short time later google reworked that into WebXR at the beginning of 2018. With the WebXR platform, it now integrates programs into Web, mobile, and headsets, not just a headset but all headsets. Developers no longer have to code for a certain headset as WebXR takes all that into account for the developers. WebXR is an API that handles the input of the device and manages the rendering of the views to simulate a 3d experience. It does not actually render the views it only manages them other applications are needed for that like WebGL. But most of the time WebGL on its own is not powerful enough to render the scene in AR or VR instances, so other frameworks are used that are built on top of WebGL because of the heavy resources need for math and data management. Some of these frameworks are listed below.

A-Frame:

A-Frame is an open-sourced project that allows developers to create 3D and AR experiences using just HTML. It was introduced back at the end of 2015 and has continually been updated. The nice thing about this is that you don’t need to know anything about WebGL to get it up and running and have content delivered quickly. It is built on top of Three.js which is more powerful to use but you also have to know a lot more to get things running. For smaller projects, A-frame is a good go-to. Larger projects are tougher on it because of the optimization of A-frame up to what you put in place and you must know how to optimize the scenes for it to render smoothly.

Three.js:

As stated Three.js is substantially more powerful than A-frame but also requires the knowledge to use it. It is probably the most popular open-source javascript library out there. But it did not start out as javascript, it was initially ActionScript but was changed because of run time rendering. The upside is that three.js uses many file formats to be able to combine projects but the downside is that you need coding experience to get it all working.

These two options are probably the most popular options for getting an experience for WebAR or WebXR up and running in your environment. They are a great way to add content to your website for users to enjoy and bring in returning visitors to your content. If speed and constant contact is the goal I would recommend A-frame to deliver this content. If a more permanent large-scale project or content piece is being used I suggest either building it with Three.js or hiring it out to someone who is capable of coding it for you. Either way adding the content to your web page would be a great addition.

I hope this gives you a brief introduction to WebVR and WebXR and some options for you to start your journey into delivering this type of content to your consumers. And if you are the consumer I hope that it gives you a little more info on how much it takes to deliver this content to you and understand that it is sometimes hard to generate meaningful and good content so be patient and you will get better content than quick and not fully optimized content.

--

--