画像認識型ARとロケーションベース型ARの統合

Wikitude SDKでは、ロケーションベース型ARと画像認識型ARを統合してシームレスなAR体験をユーザーに提供できます。このセクションでは、その統合方法を示します。

まず、架空の店舗のロゴを認識するAR.ImageTrackerを作成し、それを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]
    },
   // ...
});
ソースコードをGitHubで見る

最終結果: 店舗ロゴの前面に画像が拡張されます。

ターゲットに拡張オブジェクトを表示するために必要なことはこれですべてです。ロケーションベース型ARは、他の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
    }));
};
ソースコードをGitHubで見る

上記のメソッドは、渡された緯度と経度の位置にマーカーを作成します。他のAR.GeoObjectと同様に、視覚表現を各種拡張オブジェクトで構成できます。このAR.GeoObjectenabledの値がfalseに設定されており、初期状態では表示されません。これが表示されるようにするため、ターゲット上の拡張オブジェクトがクリックされたときに、作成したGeoObjectをenabledに設定します。

店舗の位置が可視化されています。

IrAndGeo.showStores = function() {
    // enable all GeoObjects
    IrAndGeo.stores.forEach(function(x, idx) {
        x.enabled = true;
    });
    // ...
};
ソースコードをGitHubで見る

画像認識型ARとロケーションベース型ARを統合するのは簡単です。ただし、画像認識型ARを使用すると必要な計算能力が増加するため、バッテリーの消費が大きくなることに注意してください。そのため、AR.ImageTrackerは実際に必要になったときに作成するようにしてください。また、不要になった場合はAR.ImageTracker.destroy()を呼び出して破棄してください。

サンプルの確認には、このページにある画像を使用できます。