画像認識型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.GeoObject
はenabled
の値が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()
を呼び出して破棄してください。
サンプルの確認には、このページにある画像を使用できます。