The document outlines the fundamentals of augmented reality (AR) web applications, discussing various AR engines like ARKit and ARCore, and highlighting the use of ARToolKit for mobile-oriented applications. It covers key components such as WebRTC, Three.js for 3D graphics, and different tracking methods for augmented reality markers. The content emphasizes the integration of technology with real-world applications and encourages users to engage actively with their surroundings.

1. Getting Started with AR
WebApps
JSLovers Meetup
7th of Jan ‘18
11 AM-1 PM
Shivam Singh

2. What are Realities?

3. Reality
• Virtual Reality
• Augmented Reality
• Mixed Reality

4. Augmented Reality
• Real-world environment elements are "augmented" by
computer generated inputs.
• Different from Virtual Reality since it does not replace or
simulate the real world.

5. AR Engines
• ARKit( Apple ) - Suits apple devices
• ARCore( Google ) - Suits high-end android devices
• ARToolKit (Open Source) - Suits Web
• Tango (Google- Project Closed)
• ARjs by “jeromee” - Open source, optimised for 60 FPS
rendering.

6. ARToolKit
• Tracking library for augmented reality
• Open source and web optimised
• Mobile oriented
• An ASM.jS compilation for ARToolKit is available, known as
JSARToolKit.
• Javascript interface with C++ working under the hood.

7. Components
• WebRTC
• Device Camera
• Three.JS (WebGL based library)
• AR Engine

8. WebApp
• An HTML based application.
• Offline support
• Uses service workers for using device functions and
network caching
• Smaller in size
• Supported by all major browsers

9. WebRTC
• Open source project that provides browsers and mobile
applications with Real-Time Communications (RTC)
capabilities via simple APIs.
• MediaDevices.getUserMedia() method prompts the
user for permission to use a media input which
produces a MediaStream with tracks containing the
requested types of media.

10. Three.js (WebGL)
• Three.js is a cross-browser JavaScript library/API used
to create and display animated 3D computer graphics in
a web browser.
• Based on WebGL specifications
• Can handle and generate complex objects and has
capability to integrate .OBJ formats created on any
other animation software like Blender etc.

11. Tracking
• Square Marker
• 2D barcode Markers
• Fiducial markers based
• N number of
trackers(Multitracking) can be
tracked simultaneously but at the
cost of performance.
Square Marker 2D Barcode Marker

12. 2D Barcode Markers
• Training is not required
• Self generating
• Recognition based on Marker ID
• Less number of patterns/ Pattern
restriction
Marker ID 5

13. How it Works?
• Input processing (Video or Canvas) based on markers
• Tracks the marker
• Determines it’s position and orientation
• Aligns object with marker
• Superimposes the object on marker(screen)

14. Let the code work.

15. –Synonymous
“Technology can take you to Mars, but not out of your
bed. GET OUT AND EXPLORE”