(WebVR / WebXR) a big step to massify VR and AR on the web
VR and AR are two growing terms that give users to both see, insight, and interface in reenacted environments. Both AR and VR are having a massively affect organizations through an assortment of enterprise, customer, and commercial applications.
In the following, I intend to collect information on different technologies that are related to the work environments of augmented reality and virtual reality applications on the web, since, despite the fact that AR / VR has been growing rapidly, I believe that one of the factors that have always played against is related to the use of technologies or devices that are high cost or difficult to access for most people, therefore, since there is a web development environment in which AR / VR applications are executed in a simple without incurring additional device costs or even leaving aside the high use of machine resources such as memory, disk space or processing time, it could be said that AR / VR would reach all the people who today have a device to surf the Internet, with which the applications of augmented reality and virtual reality would take a gigantic leap and an intrinsic exponential growth.
First of all, a brief introduction
AR
Augmented reality is an interactive experience of a real-world environment where the objects that reside in the real world are enhanced by computer-generated perceptual information, sometimes across multiple sensory modalities, including visual, auditory, haptic, somatosensory, and olfactory. AR can be defined as a system that fulfills three basic features: a combination of real and virtual worlds, real-time interaction, and accurate 3D registration of virtual and real objects. The overlaid sensory information can be constructive, or destructive. Augmented reality is related to two largely synonymous terms: mixed reality and computer-mediated reality.
The primary value of augmented reality is the manner in which components of the digital world blend into a person’s perception of the real world, not as a simple display of data, but through the integration of immersive sensations, which are perceived as natural parts of an environment. The earliest functional AR systems that provided immersive mixed reality experiences for users were invented in the early 1990s, starting with the Virtual Fixtures system developed at the U.S. Air Force’s Armstrong Laboratory in 1992. Commercial augmented reality experiences were first introduced in entertainment and gaming businesses. Subsequently, augmented reality applications have spanned commercial industries such as education, communications, medicine, and entertainment. In education, content may be accessed by scanning or viewing an image with a mobile device or by using markerless AR techniques.
VR
Virtual reality is a simulated experience that can be similar to or completely different from the real world. Applications of virtual reality include entertainment and education. Other distinct types of VR-style technology include augmented reality and mixed reality, sometimes referred to as extended reality or XR.
One may distinguish between two types of VR; immersive VR and text-based networked VR. The immersive VR changes your view when you move your head. While both VRs are appropriate for training, Cyberspace is preferred for distance learning. The term “virtual” has been used in the computer sense of “not physically existing but made to appear by software” since 1959. is the earliest published use of the term “virtual reality”. The term “artificial reality”, coined by Myron Krueger, has been in use since the 1970s. The term “virtual reality” was first used in a science-fiction context in The Judas Mandala, a 1982 novel by Damien Broderick.
Framework and API
A framework or software framework is an abstract or concrete framework under which software providing generic functionality can be selectively changed by additional user-written code, thus providing application-specific software. It provides a standard way to build and deploy applications and is a universal, reusable software environment that provides particular functionality as part of a larger software platform to facilitate the development of software applications, products, and solutions. Software frameworks may include support programs, compilers, code libraries, toolsets, and application programming interfaces (APIs) that bring together all the different components to enable development of a project or system.
A framework is similar to an application programming interface (API), though technically a framework includes an API. As the name suggests, a framework serves as a foundation for programming, while an API provides access to the elements supported by the framework. A framework may also include code libraries, a compiler, and other programs used in the software development process.
Well, now that we have some concepts in mind let’s start to mention some of the technologies related to WebVR or WebXR today.
WebVR is an open specification that makes it possible to experience VR in your browser. The goal is to make it easier for everyone to get into VR experiences, no matter what device you have. It was an experimental JavaScript application programming interface (API) that enabled applications to interact with virtual reality devices, such as the HTC Vive, Oculus Rift, Google Cardboard, or Open Source Virtual Reality (OSVR) in a web browser. It was implemented in Firefox and Chromium-based browsers before being deprecated and removed.
WebXR is one of the upcoming web design trends. Web developers have been trying to integrate Virtual Reality experience into websites for years. However, the first API standard WebVR was just introduced in 2016. WebVR was quickly deprecated soon and is being superseded by WebXR. This because WebVR was designed mainly to support VR headsets while leaving another important segment which is the Augmented Reality behind.
WebXR is the latest evolution in the exploration of virtual and augmented realities; it taps the power of the web along with the unification of these realities, making it easier to create immersive 3D art, interactive environments, VR tools, and more.
Based on the WebXR documentation we can say that the X can take various meanings such as Virtual Reality, Augmented Reality, Mixed Reality and as they express it themselves, “we use “X”, not as part of an acronym but as an algebraic variable of sorts to indicate “Your Reality Here”. We’ve also heard it called “Extended Reality” and “Cross Reality”, which seems fine too, but really the X is whatever you want it to be! “.
ARKit
ARKit is the development kit for augmented reality on Apple devices. After the presentation of the new iPad Pro (2020) and the new versions of the operating system for all devices, Apple has presented newest versions of the kit. It is a framework that allows developers to create applications and content in Augmented Reality for iPhone and iPad.
Augmented reality has always garnered much of Apple’s attention in its WWDCs. However, this atypical presentation characterized by looking like a dizzying succession of novelties has made Apple not focus so much on ARKit, its development kit for augmented reality. The new ARKit 4 has three great innovations: a depth API to take advantage of the LiDAR scanner, the Location Anchors or Location Anchors to locate virtual realities in certain locations, and finally, an improved facial tracking support in relation to ARKit 3 making use of the well-known Apple Neural Engine.
This AR technology uses the data collected by the device’s cameras and sensors to be able to measure the environment and display objects in it, thanks to this, it will give the feeling of interacting with the real world, taking the usefulness of Augmented Reality mobile apps to a higher level.
In its presentation, Apple commented that thanks to the integration of ARkit with iOS, users will not need any type of special equipment to take full advantage of the advantages of AR. However, not all devices will be able to run these applications. According to Apple, to be able to use ARkit they will need at least an A9 processor and an 8MP iSight camera.
ARCore
ARCore is the platform created by Google to create augmented reality experiences. It was presented in 2017, a few months after the announcement of Apple’s ARkit, and it is the company’s bet to compete in the war for augmented reality.
By using different APIs for developers, ARCore allows you to use your phone to analyze and detect its environment and understand the world around it. This means that your mobile will analyze the site where you are using its camera, and different sensors will make an internal map of the place, and with this information, it will be able to implement augmented reality.
ARCore uses three key capabilities when it comes to detecting your surroundings with the mobile camera. First, it will be able to detect movement in order to understand its relative position within the environment. This means that, once you have analyzed your surroundings and made an internal map of them, it will be able to detect when you move to know their position within this map.
It will also be able to understand your surroundings, detecting the size and location of different horizontal, vertical, and angled surfaces. For example, when you sweep the camera to detect what is around you, it will be able to map the floor, furniture such as a table, or the walls.
This technology will also be able to estimate the light conditions of the place where you are so that the augmented reality images that it shows are related to this light in the most realistic way possible.
argon.js
A JavaScript framework for adding augmented reality content to web applications provides a set of abstractions and utilities for adding an AR view to your web application in a platform- and technology-independent way, was originally designed to take advantage of the augmented reality capabilities of the Argon AR-enabled web browser on iOS, simplifying the process of delivering mobile AR experiences without the need to create, ship and support native applications.
However, argon.js will also work with other web browsers, taking advantage of their capabilities to allow your application to deliver whatever kind of AR experience each browser is capable of. While the AR capabilities a most web browsers are currently minimal, they are improving rapidly, and argon.js is designed to support this evolution.
A-FRAME
A web framework for building 3D/AR/VR experiences, make 3D worlds with HTML and Entity-Component, for Quest, Rift, WMR, SteamVR, mobile, desktop.
A-Frame is an open-source web framework for building virtual reality (VR) experiences. It is maintained by developers from Supermedium (Diego Marcos, Kevin Ngo) and Google (Don McCurdy). A-Frame is an entity-component system framework for Three.js where developers can create 3D and WebVR scenes using HTML. HTML provides a familiar authoring tool for web developers and designers while incorporating a popular game development pattern used by engines such as Unity.
A-Frame was originally developed within the Mozilla VR team during mid-to-late 2015. A-Frame was created in order to allow web developers and designers to author 3D and VR experiences with HTML without having to know WebGL. A-Frame’s first public release was on December 16, 2015. On December 16, 2019, A-Frame version 1.0.0 was released.
AR.js
AR.js has been developed by Jerome Etienne with the aim of making augmented reality available to everyone. One of its strengths is that performance has been improved and augmented reality works much better on mobile, so it can now be seen at 60 frames per second on phones from three years ago.
This is an important improvement to be able to implement that library in new projects that take advantage of the virtues and benefits of augmented reality. We are talking about a pure web solution with AR.js, so it works on any phone with WebGL and WebRTC.
Another of the greatest features of AR.js is that it is open source and completely free, so it is available for any developer to take advantage of immediately. Best of all, AR.js allows you to access AR without the need to install any extra applications and without the obligation to purchase a device.
Anyone with an AR-enabled device will be able to enjoy the AR.js experience. AR.js is primarily based on performance and simplicity. And we are talking about the fact that augmented reality can be programmed with only 10 lines of HTML.
This is why more and more developers are approaching AR.js, so we will soon see more and more augmented reality experiences on the web with this library. As an extra, it also offers support to ARKit and ARCore, so we have fully augmented reality software development at hand.
Three.js
Three.js is a lightweight library written in JavaScript for creating and displaying 3D animated computer graphics in a web browser and can be used in conjunction with the HTML5, SVG, or WebGL canvas element. The source code is hosted in a repository on GitHub.
It has become popular as one of the most important for creating animations in WebGL.
High-level libraries such as Three.js or GlgE, SceneJS, PhiloGL or others, allow the author to create complex 3D animations, ready to be displayed in the browser. Without the effort that would be required, in the case of an independent or traditional application, with the use of plugins.
It was created and released on GitHub by the Spanish Ricardo Cabello in April 2010, known by his pseudonym Mr. doob. The code would have been first developed in ActionScript and then translated into JavaScript. The two decisive points for the move to JavaScript were not having to compile the code before every load and platform independence. Cabello’s contributions include designing the API, CanvasRenderer, SVGRenderer, and being responsible for merging the work of the various collaborators on the project.
With the advent of WebGL, Paul Brunt added the renderer as a module rather than in the kernel itself.
Branislav Ulicny joins in 2010, having posted a series of WebGL demos on his own site, with the intention that the capabilities of the WebGL renderer in Three.js would exceed the CanvasRenderer and SVGRenderer. His main contributions generally involve materials, shaders, and post-processing.
Shortly after the introduction of WebGL in Firefox 4 in March 2011, Joshua Koo joins in building his first 3D text demo in September 2011. His contributions frequently concern the generation of geometry.
Currently has input from over 90 coders including “gero3”, “WestLangley”, Jerome Etienne, Erik Kitson, and “AddictArts” and a growing community of programmers.
Three.js as well as the WebGL standard itself are still practically in their days of birth, so it is still really premature to talk about a true story that time will build step by step.
p5xr
p5.xr is an add-on for p5.js, a Javascript library that makes coding accessible for artists, designers, educators, and beginners. p5.xr adds the ability to run p5 sketches in Augmented Reality or Virtual Reality. It does this with the help of WebXR. This enables anyone familiar with p5 to start experimenting with these technologies with little setup.
Babylon.js
Babylon.js is a real-time 3D engine using a JavaScript library for displaying 3D graphics in a web browser via HTML5. Babylon.js 4.2 includes updated support for WebXR. This exciting new standard allows developers to easily create compelling cross-browser AR/VR web experiences. Babylon.js 4.2 adds support for hand tracking, hit-testing, advanced teleportation, cross-device input management and controller support, and much more.
Simple CV
Simple CV is a widely used, open-source, augmented reality SDK. It uses the screen of the device as a lens in which it interweaves various elements of the real world, with virtual elements (be they letters, images, etc.). The camera shows through the screen, views of the real world, combined with virtual objects. In addition, it offers three types of vision: Threshold function, Edge method, and Key point search function.
Another advantage is that it is not connected to any specific platform, so it is compatible with Java, C ++, and even Python. It is often used by augmented reality development teams, who are looking for a tool that makes it easy to implement virtual elements in real images through webcams, Kinects, FireWire, and IP cameras or mobile phones.
Vuforia
Like Simple CV, it uses the device screen in the same way: implement the real images with those of the virtual world. It is used to recognize and track both flat images and simple 3D objects, in real-time.
Another of its characteristics is that it is capable of adding virtual buttons, creating background effects, or managing occlusions, which gives the possibility of finding partially hidden objects.
Very useful for developers who are interested in making augmented reality apps that integrate real images with virtual ones. This SDK is available for free, but it also has paid versions that allow access to other more advanced features.
Kudan
It is one of the most useful augmented reality development libraries since it is fast and allows the use of recognition, based on objects with posters or stickers, which is useful to access, for example, through a poster, a confirmation link for a purchase or payment verification of the item.
Kudan works by adding a layer on top of the objects. As a limitation, this SDK is not very reliable in detecting faces.
Its free version can be perfect for independent projects, which rely, for example, on crowdfunding and startups focused on the main augmented reality development kits. In addition, business and business licenses with additional functionality are available.
