Image Tracking: Concepts

What it is

The Monolook Image Tracking SDK allows you to detect and track images in real time using the device camera. When it detects a known image (marker), it calculates its position and orientation in 3D space, allowing you to overlay digital content on top of it.

How it works

1. You add targets — Images the SDK should look for
2. You start tracking — The SDK activates the camera and begins searching
3. Detection — When it finds a target, it emits the found event
4. Pose — On each frame it calculates the marker's position and rotation
5. The adapter translates the pose to the 3D engine and positions your content

Key concepts

Target

An image the SDK knows to look for. It is loaded with addTarget(id, imageElement). Each target has a unique ID that you use to associate 3D content with it.

Marker

The physical image (printed, on screen, etc.) that the camera sees. It is the target "in the real world."

Adapter

The layer that connects the tracker with your 3D engine (Three.js, Babylon.js, or A-Frame). It is responsible for positioning and showing/hiding your content based on the tracking.

Pose

The position and orientation of the marker in 3D space. It includes:

• position — XYZ coordinates
• forward — Direction vector
• up — Up vector
• rotationMatrix — Full rotation matrix

Event flow

init() → addTarget() → start()
                          ↓
                    [camera active]
                          ↓
                    marker detected → 'found' event
                          ↓
                    each frame → 'pose' event (updated position)
                          ↓
                    marker lost → 'lost' event

Matchers

The SDK offers two matching algorithms:

• BFMatcher (default) — Brute force, more accurate
• FLANN — Faster, useful with many targets

You can switch at runtime with tracker.setMatcherType(useFlann).