Quick Start - Augmented Reality

Jump to the tutorial:


AR Overview 

Augmented Reality can be provided through a smartphone camera or an AR headset.


AR requires tracking of real world targets. These targets can be either the world (i.e. the camera’s orientation and location in the world), an object, an image, marker, face or entire body. Here’s an outline of the types of tracking you may encounter:

  • SLAM: tracks the camera’s orientation and location in the world.
  • Plane tracking/detection: is able to find planar surfaces in the world for positioning objects on.
  • Marker tracking: finds black and white marker images to attach virtual objects to or track the camera’s location and orientation in the world
  • Image tracking: finds images to attach virtual objects to these images, e.g. through a process called “natural feature tracking”.
  • Face tracking: is able to track features in a human’s face to attach virtual objects to.
  • Full-Body tracking: is able to track entire human poses, e.g. for virtual clothing.

Some other terms you might often hear when talking about AR:

  • Light estimation: the process of detecting light sources in the real world, for replication on virtual objects, which can greatly increase realism and the perception of the object being integrated in the real world.
  • Depth occlusion: when the camera is able to detect how far objects in the real world are away from the camera, this information can be used to hide virtual objects such that they appear to be behind real world objects.
  • Anchor: a “pin” in the real world that can be used to attach virtual objects that then appear to stick in the real world.
  • Hit test: process of “shooting” a virtual ray from the camera into the real world to check the distance of the real world to the camera. Often used to place virtual objects.

Smartphone AR 

Smartphone AR can be achieved in two ways:

  • JavaScript AR tracking framework: provides maximum reach, even to devices where the WebXR API is not available.
  • WebXR Device API - AR Module: is natively implemented in the browser, therefore light weight and performant. SLAM is supported,

Wonderland Engine comes with an integration with the 8thwall AR tracking framework, which provides SLAM tracking, but also other AR tracking methods like image- or face tracking.

Wonderland Engine also supports WebXR AR with hit testing.

AR Headsets (Hololens, Magic Leap) 

The WebXR Device API is supported on Microsoft Hololens 2 (via Microsoft Edge) and Magic Leap 1 (via Helio). Other AR headsets or glasses might also provide browsers with WebXR support.