Documentation

Combine Image Recognition and POIs

The Wikitude SDK allows you to combine location based augmented reality scenes with vision based scenes to create a seamless experience for users. This tutorial will show you how to accomplish this and will provide you with additional advices.

Let’s start by creating the AR.ImageTracker for recognizing a fictional store logo and assign it to an AR.ImageTrackable.

// Create the tracker to recognize a store logo
var trackerDataSetPath = "assets/ShopLogo.wtc";
IrAndGeo.resource = new AR.TargetCollectionResource(trackerDataSetPath)
IrAndGeo.tracker = new AR.ImageTracker(IrAndGeo.resource, {
    onTargetsLoaded: IrAndGeo.loadingStepDone,
    onError: IrAndGeo.errorLoading
});

// Create drawables to display on the recognized image
var logo = new AR.ImageDrawable(IrAndGeo.res.logo, 1.0, {
    zOrder: -1
});

// ...

IrAndGeo.menuDrawables = [logo, buttonDeal, buttonWeb, buttonStores];
IrAndGeo.dealDrawable = new AR.ImageDrawable(IrAndGeo.res.deal, 1.0, {
    enabled: false,
    onClick: IrAndGeo.hideDeal
});

// Create the object by defining the tracker, target name and its drawables
var imageTrackable = new AR.ImageTrackable(IrAndGeo.tracker, "ShopLogo", {
    drawables: {
        cam: [logo, buttonDeal, buttonWeb, buttonStores, IrAndGeo.dealDrawable, IrAndGeo.model]
    },
   // ...
});
view source code on GitHub

Final result of overlaid images on top of shop logo.

This is all it takes to display Drawables on top of a recognized image. The locations based augmented reality part can be accomplished similarly to any other ARchitect World.

IrAndGeo.createMarker = function(lat, lon, name) {
    var loc = new AR.GeoLocation(lat, lon);
    var imageDrawable = new AR.ImageDrawable(IrAndGeo.res.marker, 2, {
        scale: {
            x: 0,
            y: 0,
        },
        onClick: function() {
            alert("clicked");
        }
    });

    IrAndGeo.markerAnimations.push(new AR.PropertyAnimation(imageDrawable, 'scale.x', 0.0, 1.0, 1000, {
        type: AR.CONST.EASING_CURVE_TYPE.EASE_OUT_BOUNCE
    }));
    IrAndGeo.markerAnimations.push(new AR.PropertyAnimation(imageDrawable, 'scale.y', 0.0, 1.0, 1000, {
        type: AR.CONST.EASING_CURVE_TYPE.EASE_OUT_BOUNCE
    }));
    IrAndGeo.stores.push(new AR.GeoObject(loc, {
        drawables: {
            cam: imageDrawable
        },
        enabled: false
    }));
};
view source code on GitHub

The method above creates a marker at the passed latitude and longitude. As with any other AR.GeoObject the visual representation can be composed of various drawables. The AR.GeoObject is created with the value enabled set to false so it won’t be initially visible. To make it visible set the created GeoObjects to enabled when an element on the image target is clicked.

Shop location visualized.

IrAndGeo.showStores = function() {
    // enable all GeoObjects
    IrAndGeo.stores.forEach(function(x, idx) {
        x.enabled = true;
    });

    // ...
};
view source code on GitHub

Combining vision based and locations based augmented reality is easy and straightforward. However, you should keep in mind that vision based augmented reality requires additional computing power (and thus battery power). Therefore, you should only create a AR.ImageTracker when it is actually needed. If it is no longer needed destroy it by calling AR.ImageTracker.destroy().

To view the sample you can use the image in on this page