Image Recognition And Geo

The Wikitude SDK allows you to combine location based augmented reality scenes with vision baed 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.Tracker for recognizing a fictional store logo and assign it to an AR.Trackable2DObject.

// Create the tracker to recognize a store logo
var trackerDataSetPath = "assets/ShopLogo.wtc";
IrAndGeo.tracker = new AR.Tracker(trackerDataSetPath, {
    onLoaded: 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 trackable2DObject = new AR.Trackable2DObject(IrAndGeo.tracker, "ShopLogo", {
    drawables: {
        cam: [logo, buttonDeal, buttonWeb, buttonStores, IrAndGeo.dealDrawable, IrAndGeo.model]
    },
   // ...
});
view source code on GitHub

Finally 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: 0.0,
        onClick: function() {
            alert("clicked");
        }
    });

    IrAndGeo.markerAnimations.push(new AR.PropertyAnimation(imageDrawable, 'scale', 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.Tracker when it is actually needed. If it is no longer needed destroy it by calling AR.Tracker.destroy().

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