Image Tracking


ZapWorks Studio supports Zappar's best-in-class image tracking algorithms. This makes it possible to create augmented reality experiences where digital content appears attached to a physical image as it moves around in the camera view. Images that content track to are known as targets.

Training a Target Image

Before content can track to it, an image must first be trained using the option found under the Media Library's + icon menu. Once you've selected an image from your files, you'll be prompted to specify whether the physical target image will be positioned flat or upright.

The automated training process analyzes the image from multiple angles and produces a new target file in the Media Library.

If your target fails to train correctly, check that the original image has been exported with the RGB color space (CMYK is not supported) and that the image is a standard resolution e.g. 1920x1080, 1024x1024, etc.

Images with a resolution larger than 4k may produce errors. In this case, try training a lower-resolution version of your image.

Training a target image

The target's orientation can be changed at any time by right-clicking the target in the Media Library and selecting Properties.

Insufficient contrast and rotational symmetry in a target image will negatively affect the quality of tracking. For more information on creating effective tracking images, you can refer to the video here.

Tracking Content to a Target

Dragging a target from the Media Library into the Hierarchy will display a preview of the tracking image in the viewport. The controls in the viewport can be used to navigate around the scene and target.

Moving target into the Hierarchy

Any content added to the target group in the Hierarchy will be displayed relative to it, both in the viewport preview and when viewed in the Zappar app.

Tracking content to the target image

Target Events

Targets trigger events when the physical target image enters and exits the camera view ('On Seen' and 'On Not Seen', respectively). With Actions, you can specify something to happen when either of these events is triggered.

Adding an on seen action

Alternatively, event handlers can be created in a script by right-clicking the target node and selecting New > Script, followed by the respective event.

Adding an on seen event handler to a script

When used together with states, target events can be used to achieve functionality similar to Designer's grab and go feature by changing the Relative To property of content within the target group.

Next article: Introduction to 3D

zapcode branded_zapcode i