Implementing Wikitude’s Instant Tracking in an Ionic application in one Go

If you are a beginner, you should have a look at the previous tutorials (here and there).

So far, tracking wise we have seen how to display information by using:

1. The user's geolocation
2. An image
3. An object

But, what if we just want to display an object without using any complex mechanism?

Two words: Instant Tracking.

In this tutorial we will use Wikitude's Instant Tracking technology to display an animated model when a user touches the screen in an Ionic application.

As usual, the FBX model needs to go through the Wikitude3DEncoder app. This time we also need to grab the animation's name located on the model:

Once this is done we can move on to the Ionic application.

The assets folder should look like this:

Now we can start writing the instant-tracking.ts file:

declare var AR;

class World {
  tracker;
  instantTrackable;

  init() {
     ...
  }
};

let world = new World();

world.init();

The World is very simple for now.

We only need two properties:

1. tracker for state manipulation
2. instantTrackable to add a new 3D model

The init method is as follow:

  init() {
    this.tracker = new AR.InstantTracker({ deviceHeight: 1.0 });

    this.instantTrackable = new AR.InstantTrackable(this.tracker, {
      drawables: {
        cam: []
      },
      onTrackingPlaneClick: this.addModel
    });
  }

The tracker is an InstantTracker instance, we pass the deviceHeight information which represents the device's distance to the ground since I'm sitting on a chair, one meter is ok.

The final step is creating an InstantTrackable by using this tracker. The drawables.cam property is just an empty array for now.
This array will be filled with new 3D models when the user touches the tracking plane.

The onTrackingPlaneClick callback will trigger the addModel method, which is as follow:

addModel = (x, y) => {
  this.tracker.state = AR.InstantTrackerState.TRACKING;

  var model = new AR.Model("assets/wt3/transformers.wt3", {
    scale: {
      x: 0.003,
      y: 0.003,
      z: 0.003
    },
    rotate: {
      x: 180,
      y: 180
    },
    translate: {
      x: x,
      y: y
    }
  });

  var modelAnim = new AR.ModelAnimation(model, "Animation_00");
  modelAnim.start();

  this.instantTrackable.drawables.addCamDrawable(model);
};

This is where the tracker and instantTrackable properties are useful.
We start by setting the tracker's state to TRACKING, this value comes from the AR.InstantTrackerState Class.

A new model is created from the WT3 file. Since my model was quite big and not oriented in my direction, the scale has been reduced to 0.003 and it's been rotated on the x and y axis with one final translation to fit in the screen.

A new ModelAnimation is created from this model, as we have seen in the Wikitude3DEncoder, the animation was named "Animation_00".

All we need now is starting the animation and adding the model to the instantTrackable's drawables.

And voila!

Conclusion

Wikitude's Instant Tracking is a great feature for games and demonstrations. A new AR World can be created with just one tap on the screen. All we need is mixing together a 3D Model and an InstantTracker in an InstantTrackable.

This will most likely be the last tutorial on Ionic and Wikitude for this year (unless a new SDK appears). There are many tutorials on the website explaining other AR concepts, so you can use this hiatus to get up to date.

Just like AI (which is my next focus), Augmented Reality is growing everywhere and will get a huge boost thanks to the new iPhone, Google Pixel and Google contact lenses.