Recently AR navigation (AR+GPS) real fire, not only domestic map companies have layout AR navigation market, Amap in Android and iOS end officially launched AR navigation function (AMAP AR navigation iPhone version is also online!) , Tencent Maps and Didi also share some key technologies about AR navigation (the technology behind Didi AR real navigation); Foreign Google has recently updated and improved the function of AR navigation, making interaction more friendly and navigation more intuitive and efficient. At present, AR navigation mostly runs directly on the native terminal (iOS or Android), so can AR navigation be realized on the Web terminal? Of course, there are already packaged frameworks for our development and use: Geoar. js is a free lightweight library based on the Web side, which can use your mobile phone GPS sensor to achieve AR navigation function in the Web side.

About the WebAR

WebAR uses a combination of WebRTC, WebGL and modern sensor apis to provide access to and implementation of Web-based augmented reality through a Web browser. The birth of FLARToolKit in 2009 marks that AR technology has entered the Web era. FLARToolKit is the most widely used Flash-based AR library, supported by a large developer community and many web sites with sample applications. FLARToolKit is the Flash Actionscript (V3) version of ARToolKit, which can be used for rapid development of Web-based AR experience. FLARToolKit recognizes visual markers from the input image, then calculates the orientation and position of the camera in the 3D world and overlays the virtual graphics on top of the live video image. FLARToolKit supports all the major Flash 3D graphics engines (Papervision3D, Away3D, Sandy, Alternativa3D). But with the decline of Flash, FLARToolKit framework also slowly fade out of the historical stage. Nowadays WebAR is becoming more and more mainstream, and there are many high quality and efficient third-party frameworks available for developers to use. Good frameworks or tools often get twice the result with half the effort. Here are some mature frameworks summarized by the author:

Ar.js is a lightweight AUGMENTED reality-like JavaScript library that supports tag and location-based augmented reality. Developers can use a few lines of HTML to introduce AR features and functionality into any website. The project is open source, with nearly 14,000 stars on GitHub, and developers across a variety of platforms are using it to create even more new digital experiences. The AR.js framework includes cross-browser compatibility and supports WebGL and WebRTC, which means it works on Android and iPhone devices up to iOS 11. By wrapping many different AR frameworks, including Three. js, A-Frame, and ARToolKit, AR.js makes it easier and more efficient to introduce AR into Web applications. It has the following advantages:

  • Cross-browser compatibility

  • High performance of 60fps can be achieved even on older devices

  • Web-based, no installation is required

  • Open source, free access

  • Available on all mobile devices using WebGL and WebRTC

  • No additional or unusual hardware is required

  • It can be done with less than 10 lines of HTML

Google Maps Live View: Recently, Google released its location-based AR experience on the Google Maps app. The phone identifies its location in the world from GPS data and displays AR content on the phone to highlight locations, directions, etc.

Imagine implementing the same AR effect now, but via the Web, accessible to every phone as long as you open a browser. No apps need to be installed on the phone. There is now a framework for implementing location-based AR: geoar.js on the Web.

Simple geoar.js demo

You need to open the URL on a phone with a GPS sensor, and activate the GPS sensor before opening it. Try turning it on when you’re outdoors, so you’ll have a more stable experience. You will see some places around you, represented by a place icon. If you click on them, it will show you your place name. Demo Address:

Nicolo-carpignoli.herokuapp.com/examples/ba…

Nicolo-carpignoli.herokuapp.com/examples/pl…

Geoar.js basically has two functions:

(1) Display AR content on the phone according to the orientation/position of the camera and the position in the real world

(2) Interact with AR content and Web UX elements.

Currently available (As of September 2019) is the demo URL that the author just released called “Click Location.” In that regard, the authors have used the Foursquare API to dynamically add a specific number of locations to the app, starting with the user’s GPS location. The authors also add a location icon and click behavior for each icon using Javascript imported from HTML.

Geoar.js does the rest: When it starts up, it asks if GPS data permissions are enabled (it also handles questions about the iOS 12 motion sensor) and displays location ICONS on the camera. With the help of geoar.js to recalculate the data and show where the content is in the real world, moving the camera and walking around changes the user’s position and orientation in the real world. To do this, it uses an algorithm to calculate the object distance from the user’s location.

Geoar.js Project Address:

Github.com/nicolocarpi…

Related reading:

WebAR development detailed learning route, read this article is enough!

Build a WebAR real-time video streaming media application

Create holograms of People using WebAR and Deep Learning

The implementation and application of WebAR are introduced

You can pay attention to the public number: AIRX community, learn together, progress together! AIRX Third power is committed to the output of high quality new technology education content, to create developer learning service loop, focus on ARVR, Unity, Unreal, CV and AI new technology vocational education, production of high quality course content, to create developer learning and service loop mode, from learning to offer to advanced learning one-stop service. As the earliest and best developer platform of ARVR, Unity, Unreal, CV and AI in China, it cooperates with professors from top universities, universities, enterprises, new media artists and engineers in AI and CV fields to jointly develop high-quality and practical COURSES of ARVR, Unity, Unreal and AI. The business combination of online education + developer services + industrial docking platform will serve developers, enterprise users and universities