Instant World Tracking Template

Instant world tracking refers to the ability to attach content to a point in the world, without using a tracking image or marker. With this tracking type, you could build a 3D model product visualisation that lets users walk around to view the product from different angles, or an experience that places an animated character in their room.

Using the Template

Dragging the Instant Tracker template into your hierarchy will keep the content in front of the camera until the user taps on the 'Tap to place' button, at which point the content will appear to remain anchored in place.

Adding the Instant World Tracking template


You do not need to specify any properties to use Instant World Tracking. Simply attach your content as a child of the ZapparInstantTracking GameObject and it will appear in the correct location.

Adding content to the Instant World Tracking template


Translating content to 0.5 on the Y axis will make it sit on top of an instant tracked surface.


Placement Mode

To choose the point in the user's environment that the anchor tracks from, use the vector attribute of Instant Tracker.

Instant World Tracker Anchor Camera Offset

The parameters passed in to this attribute correspond to the X, Y and Z coordinates (in camera space) of the point to track. Choosing a position with X and Y coordinates of zero, and a negative Z coordinate, will select a point on a surface directly in front of the center of the screen.

The group provides a coordinate system that has its origin at the point that's been set, with the positive Y coordinate pointing up out of the surface, and the X and Z coordinates in the plane of the surface.

A typical application will offset the content each frame until the user confirms their choice of placement by tapping a button.

How far the chosen point is from the camera (i.e. how negative the Z coordinate provided to Anchor Camera Offset is) determines the scale of the coordinate system exposed by the anchor.

There are two built-in options for setting the placement mode:

Button Element

Simply attach a button entity to the Button attribute of the instant tracker. When a user taps the button, the placement mode will be toggled.

You can override this tap and place behavior (Zappar/scripts/zapparInstantTracker) as you wish.

PlayCanvas Events

You can set the placement mode of the tracker like this:

const placementMode = true;
this.app.fire('zappar:instant_tracker', {message : 'placement_mode', placementMode})

This code would usually be found in a button click handler.

zapcode branded_zapcode i