Markerless Tracking

Tutorial 3 of 4

1. Introduction

1.1 Goal of the tutorial

This tutorial aims to provide a comprehensive guide on how to implement markerless tracking in Augmented Reality (AR) using HTML. Markerless tracking refers to the technique used in AR to track the real world without the need for predefined markers. Instead, it uses features from the environment to create a map.

1.2 Learning outcomes

By the end of this tutorial, you will have a clear understanding of markerless tracking in AR, how it works, and how to implement it using HTML. You will be able to create your own AR experiences using markerless tracking.

1.3 Prerequisites

Familiarity with basic HTML and JavaScript is recommended. Understanding of AR concepts is a plus but not mandatory.

2. Step-by-Step Guide

2.1 Concepts

We'll be using AR.js, a JavaScript library for AR, to implement the markerless tracking. AR.js uses A-Frame, a web framework for building VR experiences, for its HTML interface.

Markerless tracking is achieved through a technique called Simultaneous Localization and Mapping (SLAM), where the device's position and orientation are tracked in real-time while simultaneously mapping the environment.

2.2 Best practices and tips

Use high-contrast and detailed environments for better tracking. Avoid plain or repetitive patterns.

3. Code Examples

3.1 Example 1: Basic AR scene

<!DOCTYPE html>
<html>
<head>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
</head>
<body style='margin : 0px; overflow: hidden;'>
    <a-scene embedded arjs>
        <a-box position='0 0.5 -3' material='color: yellow;'></a-box>
        <a-marker-camera preset='hiro'></a-marker-camera>
    </a-scene>
</body>
</html>

In the above code, we include the scripts for A-Frame and AR.js. We create a yellow box in our AR scene. The AR scene is set up by the <a-scene> tag, and the box is created using the <a-box> tag.

3.2 Example 2: Markerless AR

Unfortunately, markerless AR is not available with AR.js directly. You need to use the AR.js with NFT (Natural Feature Tracking), which is not fully supported in HTML directly and needs additional setup.

4. Summary

This tutorial intended to guide you through the implementation of markerless tracking in AR using HTML. We covered the basic concepts of AR and markerless tracking, and provided a basic example of an AR scene.

Markerless tracking in AR requires more advanced setup and is not directly available for HTML. The AR.js library supports markerless tracking with Natural Feature Tracking, but it requires additional setup.

5. Practice Exercises

5.1 Exercise 1

Create a basic AR scene with a 3D model of your choice.

5.2 Exercise 2

Research on how to integrate AR.js with NFT for markerless tracking and try implementing it.

5.3 Tips for further practice

Explore other 3D models and AR libraries. Try to create more complex AR experiences. Keep experimenting and learning.