Cloud Futrlabs Futureshift

Web-based Augmented Reality (AR) on Mobile

Augmented reality on mobile phones is set to drive new business and attract new customers. This comprehensive, lucid read for executives explains the basic concept of AR, its implementation options available, relevant web technologies and challenges faced by the implementation of a Web-based AR platform.


Augmented Reality to smartphones is bringing about a new wave of innovation after the widely successful location-aware search over the last decade. AR allows mobile users to interact virtually with their surroundings. Augmented Reality refers to a technology that superimposes computer-generated content over live images viewed through cameras.

The AR technology has been extensively used in gaming and military applications for many years on powerful computers. With the advent of sophisticated mobile devices, faster communication networks, plummeting data charges, and new developments in nanotechnologies that power micro-chips, AR has become inexpensive enough to put into smartphones and tablets. Such universality has spurred the demand in the new consumer-led companies who are looking at this to enhance the online shopping experience from apparels to eyeglasses.

AR is as sunrise technology for new e-commerce start-ups and is poised for a big take-off over the coming decade. The following are the critical components of a web-based Mobile AR.

Concept of Mobile AR

  1. Capturing the subject, the background environment at real-time via a Mobile device
  2. Depends on the speed of the Mobile hardware device and camera features
  3. The ability of the Mobile device to track subject and background and perform superimposing rendering of the final video in a seamless manner

Implementation Concepts

  1. Sensor-based mechanism – Based on accelerometers, gyroscopes, compasses, magnetometers, GPS, and similar sensors on the Mobile Device. Risk of irremediable cumulative errors across multiple sensor inputs
  2. Vision-based mechanism – Camera-based Frame-by-Frame tracking requires immense computational work in real-time to provide a closed-loop system involving subject and background. The marker-based mechanism relies on pre-defined marker pattern as a guide to reduce real-time computational load on the device.
  3. Hybrid Tracking – Combination of Sensors and Camera to track the movement of the subject regarding the background. Example: Use Gyroscope data in conjunction with Camera images to process real-time image tracking.
  4. Embedded AI Chip – Devices with enhanced Integrated Artificial Intelligence Chips. Ex: Intelligent Camera + Gyroscope inbuilt in a single sensor.

Relevant Technologies

  1. WebRTC – Technical Specification Standard for Browsers to handle real-time communication including Media signals
  2. Native Web Assembly – Compiled Binary code support in native format (for multiple programming languages) included in Browsers
  3. Web Workers – Multithreading support on browsers to distribute computational load across multiple browser processes
  4. WebGL – Browser supported JavaScript library for high-performance Graphical computation and rendering

Challenges with AR on the Web Mobile

  1. Realtime Compute Capability on the Browser or Mobile device
  2. Network and Data Transmission delays
  3. High energy requirement for complex sensors and application.  Includes heating of Integrated chips
  4. Diversity of Operating System, Browser, Mobile platforms, and lacking standards
  5. Environment and lighting impact on accurate capture of images to enable non-lossy digital image processing in real-time.

Download PDF version here