Instant World Tracking

• Babylon.js
• Tracking
• Universal AR

Instant World Tracking lets you tracking 3D content to a point chosen by the user in the room or immediate environment around them. With this tracking type you could build a 3D model viewer that lets users walk around to view the model from different angles, or an experience that places an animated character in their room.

Before setting up instant tracking, you must first add or replace any existing camera you have in your scene. Find out more here.

To track content from a point on a surface in front of the user, create a new InstantWorldTracker:

const instantWorldTracker = new ZapparBabylon.InstantWorldTracker();

Each InstantWorldTracker exposes a single anchor from its anchor parameter.

To choose the point in the user's environment that the anchor tracks from, use the setAnchorPoseFromCameraOffset(...) function as such:

instantWorldTracker.setAnchorPoseFromCameraOffset(0, 0, -5);

The parameters passed in to this function 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.

To attach 3D content (for example Babylon.js objects or models) to an InstantWorldTracker, the library provides InstantWorldAnchorTransformNode. It's a Babylon.js TransformNode that will follow the anchor in the supplied InstantWorldTracker in the 3D view:

const trackerTransformNode = new ZapparBabylon.InstantWorldAnchorTransformNode('tracker', camera, instantWorldTracker, scene);
// Child in any 3D objects you'd like to track to this point in space
myModel.parent = trackerTransformNode;

The TransformNode 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. How far the chosen point is from the camera (i.e. how negative the Z coordinate provided to setAnchorPoseFromCameraOffset is) determines the scale of the coordinate system exposed by the anchor.

A typical application will call setAnchorPoseFromCameraOffset each frame until the user confirms their choice of placement by tapping a button, like this:

// Not shown - initialization, camera setup & permissions

const instantWorldTracker = new ZapparBabylon.InstantWorldTracker();
const instantWorldAnchorTransformNode = new ZapparBabylon.InstantWorldAnchorTransformNode('tracker', camera, instantWorldTracker, scene);

// Not shown - add content to the instantWorldAnchorTransformNode

let hasPlaced = false;

myConfirmButton.addEventListener("click", () => { hasPlaced = true });

engine.runRenderLoop(() => {
  camera.updateFrame();
  if (!hasPlaced) {
    instantWorldTracker.setAnchorPoseFromCameraOffset(0, 0, -5);
  }
  scene.render();
});