AR for the Web
Contents
Introduction
Augmented Reality for the Web demands compatibility with the major browsers. To reach this goal, developers need access to the native device drivers and APIs of the different vendors in JavaScript.
Enabling Technologies
In recent years, the Web has made a major leap in application maturity. Almost all desktop applications like office packages, image and video editing have Web versions. This is due to the availability of HTML5 and its many APIs exposing native device APIs to developers by JavaScript. Moreover, Web browsers can communicate directly with each other without the need of a server, reducing the latency of many networks depending on applications like collaborative editing, video and voice chats, and computer games.
WebVR
WebVR provided a developer API to different virtual reality devices on the Web and is now superseded by WebXR.
WebXR
WebXR (Mixed Reality on the Web) superseded WebVR in 2018. The W3c editor’s draft gives details on the WebXR Device API. WebXR is an extension of the WebVR API covering augmented reality devices in the JavaScript API. The new API has two goals. First, it enhances the possibilities for new input devices like for gesture and speech recognition. This gives to users new options to navigate and interact in the virtual environment. Second, it gives a technical platform to create augmented reality content. Moreover, it tackles incompatibilities of the predecessor with different browsers like Safari and Chrome. The amount of code needed to create virtual experiences on different devices should be reduced, A number of browsers are already supporting WebXR.
3D Graphics Frameworks on the Web
A series of graphics frameworks exist which allow the display of 3D models on Web pages. The presented frameworks introduce increasing levels of abstraction. Whereas WebGL works with polygon primitives and shaders, three.js abstracts to scenes, objects and materials. In turn, A-Frame uses three.js to provide an HTML-based description language for 3D scenes which can be executed as a WebXR experience.
WebGL
WebGL is a cross-platform, royalty-free API used to create 3D graphics in a Web browser.
three.js
three.js is a popular JavaScript framework for displaying 3D content on the web.
A-Frame
A-Frame is a web framework for building virtual and augmented reality experiences.
Example of an A-Frame:
The WebXR demo can be viewed on desktop browsers, as well as mobile browsers. If a VR device is connected to the PC, it automatically activates once this page is loaded and the view is changed if the user clicks on the VR button. To return to the view in the browser, press escape. If no VR device is present, the VR button instead toggles a full-screen view of the 3D scene. On smartphones, the VR button also works and switches to a stereoscopic view which can be used e.g. with Google Cardboard. On newer smartphones which have ARCore or ARKit installed and with Chrome Browser version 79 or higher, an AR button will appear next to the VR button. If the user clicks on it, the phone’s camera will activate and the virtual objects are integrated into the camera stream.