Documentation

Wikitude SDK Vuzix

Multiple Targets

This example shows how to recognize and track multiple images simultaneously. Furthermore it shows how to use distance, translation and rotation between the tracked images.

For a better understanding it is recommended to read the documentation of Image Recognition and 3D Models first.

Please use the following image on this page to test the sample. It is recommended to print the image and cut out the different cards to see the interaction between the dinosaurs.

var targetCollectionResource = new AR.TargetCollectionResource("assets/dinosaurs.wtc");

var tracker = new AR.ImageTracker(targetCollectionResource, {
    // To enable simultaneous tracking of multiple targets 'maximumNumberOfConcurrentlyTrackableTargets' has to be set.
    maximumNumberOfConcurrentlyTrackableTargets: 5, // A maximum of five images can be concurrently tracked.

    //Disables extended range recognition. The reason for this is that extended range recognition requires more processing power and with multiple targets the SDK is trying to recognize targets until the maximumNumberOfConcurrentlyTrackableTargets is reached and it may slow down the tracking of already recognized targets.
    extendedRangeRecognition: AR.CONST.IMAGE_RECOGNITION_RANGE_EXTENSION.OFF,
    ...
});

To add Drawables to specific ImageTargets, ImageTrackable.addImageTargetCamDrawables can be used.

new AR.ImageTrackable(tracker, "*", {
    onImageRecognized: function (target) {
        var model = new AR.Model("assets/models/" + target.name + ".wt3");

        // Adds the model as augmentation for the currently recognized target.
        this.addImageTargetCamDrawables(target, model);
    }
    ...
});

Distance Between Targets

This example shows how to use the distance between targets.

There are two ways to get the distance between targets:

1. ImageTarget.getDistanceTo which returns the distance from this ImageTarget to the passed ImageTarget.
2. ImageTarget.onDistanceChanged gets triggered whenever the distance from this ImageTarget to any other currently tracked ImageTarget changed by more than the threshold. The threshold is specified in the options of the ImageTracker(onDistanceChangedThreshold). The parameters contain the distance and the ImageTarget to which this distance was measured.

var tracker = new AR.ImageTracker(targetCollectionResource, {
    maximumNumberOfConcurrentlyTrackableTargets: 5,
    onDistanceChangedThreshold: 10 // By setting this to 10, the distance between two targets has to change by 10mm before ImageTarget.onDistanceChanged is triggered again.
    ...
});

new AR.ImageTrackable(tracker, "*", {
    onImageRecognized: function (target) {
        var model = new AR.Model("assets/models/" + target.name + ".wt3");

        var idleAnimation = new AR.ModelAnimation(model, "Idle");
        idleAnimation.onFinish = idleAnimation.start;
        idleAnimation.start();

        this.addImageTargetCamDrawables(target, model);

        var jumpAnimation = new AR.ModelAnimation(model, "Jump");
        jumpAnimation.onFinish = jumpAnimation.start;

        // Trigger callback whenever the distance between the currently recognized target and another target change by more than the threshold defined in the AR.ImageTracker.
        target.onDistanceChanged = function (distance, otherTarget) {
            // start the jumpAnimation when the distance between this and another target gets below 150 mm
            if (distance < 150) {
                 jumpAnimation.onFinish = jumpAnimation.start;
                 idleAnimation.onFinish = function() {
                        jumpAnimation.start();
                 };
            }
        }
    }
});

Transformation Between Targets

This example shows the transformations between targets.

This functionality includes the translation and rotation between targets.

There are two ways to get the translation between targets:

1. ImageTarget.getTranslationTo returns the translation from this ImageTarget to the passed ImageTarget.
2. ImageTarget.onTranslationChanged gets triggered whenever the translation from this ImageTarget to any other currently tracked ImageTarget changed by more than the threshold specified in the options of the ImageTracker(onTranslationChangedThreshold). The parameters contain the translation and the ImageTarget to which this Translation was measured.

There are two ways to get the rotation between targets:

1. ImageTarget.getRotationTo returns the rotation from this ImageTarget to the passed ImageTarget.
2. ImageTarget.onRotationChanged gets triggered whenever the rotation from this ImageTarget to any other currently tracked ImageTarget changed by more than the threshold specified in the options of the ImageTracker(onRotationChangedThreshold). The parameters contain the rotation and the ImageTarget to which this rotation was measured.

var tracker = new AR.ImageTracker(targetCollectionResource, {
    maximumNumberOfConcurrentlyTrackableTargets: 5,
    onRotationThreshold: 10 // By setting this to 10, the distance between two targets has to change by 10mm before ImageTarget.onDistanceChanged is triggered again.
    ...
});

new AR.ImageTrackable(tracker, "*", {
    onImageRecognized: function (target) {
        var model = new AR.Model("assets/models/" + target.name + ".wt3");

        var idleAnimation = new AR.ModelAnimation(model, "Idle");
        idleAnimation.onFinish = idleAnimation.start;
        idleAnimation.start();

        this.addImageTargetCamDrawables(target, model);

        // Trigger callback whenever the distance between the currently recognized target and another target change by more than the threshold defined in the AR.ImageTracker.
        target.onRotationChanged = function (rotation, otherTarget) {

            // If dinosaurs are facing each other and are within 150mm one should attack.
            if (rotation.z > 170 && rotation.z < 190 && target.getDistanceTo(destinationTarget) < 150) {
                ... // attacking animations
            }
        }
    }
});