Tracking Images

Studio

Tracking Images

1. Introduction

Download the completed project.

In this tutorial we're going to look at Tracking Images, images that content appears attached to as they move around in the camera view.

In this completed example you can see a 3D model of ZapBot, Zappar's mechanical mascot, tracking from a target image.

2. Image Training

Begin by starting a new project with a blank template.

The first step inside our new project will be to "train" our tracking image.

You can use pretty much any image, however we suggest you watch our What Makes a Good Tracking Image video, to avoid some common pitfalls.

Once you have your tracking image, you can upload it to ZapWorks Studio by selecting the plus button in the Media Library, clicking 'Train Image File' and then selecting your image.

Your image will be analysed from multiple angles and a target file produced and added to the Media Library.

3. Preview Controls

Dragging the target from the Media Library into the Hierarchy will display a preview of it in the 3D view. We can then use the tools in the bottom right of the view to move the target around, just as if it were being physically moved in a camera view.

The first icon allows you to move the target around, the second allows you to rotate it, and the third allows you to zoom in and out.

There are also a few options in the top right of the 3D view:

  • We can quickly set the target to be upright or flat,
  • we can change between orthographic and perspective projection,
  • and we can set our target to one of six different orientations.

4. Adding Content

Our next step will be to add our content, in this case a 3D model of ZapBot which you can download here.

Importing our 3D model is as simple as dragging the model file into the Media Library, giving it a name, and dragging in our textures before hitting finish. This will create a 3D subsymbol within the symbol definitions panel in the bottom right.

There are further options when importing 3D models such as setting animations and scale, but we will not be covering them in this video. For more information, please visit our 3D Objects article.

5. Attaching Content to a Target Image

With our 3D model ready we can drag its subsymbol from the Symbol Definitions panel into the target node in our Hierarchy. This will create an instance of it. Targets in the Hierarchy act like groups. Content placed inside a target will appear attached to it in the 3D view and when viewed in the app.

If we rotate the model so that it's upright and facing towards us, you can see how it tracks from the target by moving it around in the 3D view.

6. Previewing Content

The final step is to print off your target so you have a physical copy and to try it out yourself by either previewing or publishing your project.

You'll notice that, as in the 3D view, the model tracks from the target when we scan it with a device and move it around.

7. Next Steps

Download the completed project.

Take a look at our video tutorial on Target Events, which allow you to define the behavior of your experience when the target image enters or leaves the camera view.

Please take a look at our documentation for further articles regarding Tracking Images and 3D Objects.

If you have any issues feel free to get in touch, we're support@zappar.com.

Open in new window