WebXR Technology

Salah Besbes
3 min readMar 2, 2022

Virtual Reality (VR):

The use of computer technology to create a simulated environment is known as virtual reality (VR). In contrast to typical user interfaces, virtual reality immerses the user in an experience.

Augmented reality (AR):

Snapchat and Instagram filters rely on augmented reality technology, AR is defined as enhancing the physical world by incorporating digital elements in real-time to create a 3D experience.

Extended reality (XR):

XR is an umbrella term for all immersive technologies (AR/VR/MR).

XR isn’t always about big headsets or smart glasses, XR experiences can be and are being delivered via mobile devices and web browsers. As a developer and strong advocate of XR, my biggest dilemma has been how to improve accessibility

What is WebXR:

WebXR, (with the WebXR Device API at its core), provides the functionality needed to bring both augmented and virtual reality (AR and VR) to the web.

Additionally it provides support for accepting inputs from control devices such as handheld VR controllers or specialized mixed reality gamepads.

The goal of WebXR API is to allow the rendering/showing of XR content on browsers, it doesn’t care how the content is created or what device is used to view it, making it so that developers can utilize whatever libraries are best for their needs and develop on top of it.

People with basic knowledge of web development tools — HTML, CSS and JS know enough to get started.

Three JS

  • Probably the most popular Open Source JavaScript rendering library out there.
  • full flexibility is available on a very low level, as you can customize rendering to do anything you want
  • The Three.js editor allows you to assemble scenes easily and from many different file formats. This will allow you to swiftly get your project started

cons:

  • will still require you to code interactions in JavaScript later on. The editor doesn’t have a notion of project files and is therefore really only useful to generate the initial code for your project.
  • require a knowledge with JavaScript

A-frame

  • It has a huge and supportive community
  • A-frame is an open-source web framework for creating virtual reality experiences on the web.
  • based on top of HTML, A-Frame is accessible to everyone because HTML is easy to read, understand, and copy-and-paste allowing web developers, VR enthusiasts, artists, designers, educators and kids to use HTML to construct 3D and WebVR environments. In other words, A-frame can be developed from a plain HTML file without having to install anything, right there on your browser.
  • The A-frame library not only supports the rendering of 3D images, objects, and models, it also includes event handling scripting.

cons:

  • For larger projects, though, you might reach the edge of the scope that A-Frame’s performance limits you to.

Resources:

--

--