AR can be simply understood as a technique for superimposing virtual images in real-time scenes in real time and can interact. We personally think that AR has a future than VR, mainly because:
The advantage of AR is to turn the reality scenes into the background and seamlessly connect the real world to the digital world.
Of course, this “seamless” is still not talked about, but it has been improving. Before talking about how to do AR in the web front end, it is necessary to understand the two main ways of AR implementation and its key technologies:
AR implementation methods and key technologies
There are two main implementations of AR: Optical see-through and Video see-through.
Currently, head-mounted devices on the market are usually used in one or two of two ways, while handheld devices (mobile phones, tablets, etc.) usually use video perspective. Optical perspective is the display of a computer-generated digital image on a layer of translucent lenses in front of the eye, so that real scenes and virtual information appear on the retina at the same time. The video perspective technology is to first enter the real scene through the camera into the computer, integrate and compress with the virtual object, and then present it in front of the user.
Both have their own advantages and disadvantages: The realistic scene in the optical perspective is displayed more naturally and directly because it is not processed by the computer; although it is simple to implement and it also has low positioning accuracy, inaccurate matching, and display. Because the video perspective is integrated, the matching is accurate, and the final display effect is highly synchronized. The generated display result can be further processed according to the user’s needs; however, it is difficult to implement and loses part of the realism.
In addition, computer vision technology plays a vital role in AR because the core of AR is recognition and tracking. First, the camera must identify the fiducial marks, key points, optical pictures, etc.; then track in real time according to feature detection, edge detection or other image processing methods; finally, superimpose the virtual image into the real scene.
Web AR
According to the previous section, we can conclude that to achieve Augmented Reality Development needs to identify, track and render three steps, but also in the browser. In addition, you can combine sensors to provide more interaction or make AR rendering more accurate, connect to the cloud through the network to speed up computing or exchange more data. As shown in the following figure, this is a Web AR flowchart that I have compiled myself. Web AR or mobile AR is still very advantageous in some aspects such as portability, sensor-rich, and its own network. I won’t say much here.
Web AR flowchart
First of all, Web AR is still a cutting-edge technology, there is no standard and no mature library for use, but there are already large companies and some developers are actively promoting. On October 2, 2017, the W3C’s WebVR Group released the first draft of the WebVR specification version 1.1, and the 2.0 version is still being revised.
WebVR is an open standard that allows you to experience VR in your browser. Our goal is to make it easier for everyone to experience VR, no matter what device you have. - webvr.info
Some of the APIs in the WebVR specification also apply to Web AR. For example, VRDevicePose can get the camera position. This is the only standard that is currently close to Web AR. With the standard, we can develop only for the standard interface to adapt to most devices. Further reading: WebVR for augmented reality, WebVR API extension for smartphone AR.
WebARonARKit, WebARonARCore
ARKit and ARCore are the mobile AR SDKs produced by Apple and Google respectively. They provide similar functions: motion tracking, environment awareness and light sensing. I believe that many developers interested in AR are familiar with these two SDKs. But both of these are mobile AR SDKs, so Google’s AR team provided WebARonARKit and WebARonARCore libraries so that developers can use Web technology to develop based on ARKit and ARCore to implement WebAR. At present, these two libraries are still in the experimental stage, and those who want to eat crabs are rushing to try. The implementation principle is to extend the WebVR API in conjunction with specific systems (iOS and Android). The Google AR team encapsulates a library of three.ar.js and provides some useful AR APIs, including ARView, ARReticle, ARPerspectiveCamera, ARDebug and ARUtils.
AR.js
AR.js on the SIGGRAPH (Top Graphics Conference) in 2017 was a great show. Some people have done a Web AR- related session using AR.js. AR.js is a Web AR library developed by Jerome Etienne that implements AR with ten lines of HTML and has a frame rate of 60 FPS. But in fact, what AR.js does is very simple. It mainly encapsulates the following libraries:
ARToolKit
ARToolKit is arguably the first open source AR framework, released in 1999 and has been updated to this day. Although it has a long history, it is still widely used (the style of the official website has no sense of history at all). It mainly provides the ability to identify and track markers, and is supplemented in the appendix of this article.
Three.js, Babylon.js, A-Frame. These are all WebGL-based rendering libraries that are used to render things to be displayed in the AR environment, as expanded below.
From this point of view, AR.js is like a Swiss army knife that puts all the wheels together, easy to use.
Conclusion
Now that the Web AR tide has just begun there are many highlands that need people to overcome such as lighting estimation, performance optimization, etc. And the web front end is developing rapidly both in terms of technology and population. It is full of possibilities, and only limited is your imagination.
