画像認識
このサンプルは、カメラビュー内の画像を認識し、それらの画像に情報を拡張する方法を示します。
さらに、複数の異なる画像を認識する方法や、ユーザーが拡張されたオブジェクトをクリックしたときに何かしらの処理を実装する方法も示します。
-
ターゲット: 認識対象の画像と認識に必要とされる抽出データ。
-
ターゲットコレクション: ターゲットの集合体。1つのターゲットコレクションには最大1,000のターゲットを格納できます。
-
ClientTracker: トラッカーはカメラビューの画像を分析し、ターゲットコレクションに格納されたターゲットを検出します。複数のトラッカーを作成できますが、同時に使用できるトラッカーは 1つだけです。
ターゲットの認識
対応するサンプルタイトル名「Image on Target」
これらの用語を念頭に置いたうえで、まず実際に何を認識するかターゲットを定義し、トラッカーが使用できるターゲットコレクションを作成します。こ のケースでは、ターゲットコレクションに次の雑誌ページの画像が1つだけ含まれています。
サンプルの確認には、このページにある画像を使用できます。
Wikitude SDKで使用できるターゲットコレクションの作成方法については、 「ター ゲット管理」 を参照してください。
ARchitect Worldで画像認識を使用するためのプロセスは毎回同じです。まずターゲットを定義してから、そのターゲット用のターゲットコレクションを作成します。画像認識を有効に するJavaScriptを以下に示します。
// Initialize ClientTracker
// Important: If you replace the tracker file with your own, make sure to change the target name accordingly.
// Use a specific target name to match only a certain target or use a wildcard to match any or a certain group of targets.
this.targetCollectionResource = new AR.TargetCollectionResource("assets/magazine.wtc", {
});
this.tracker = new AR.ImageTracker(this.targetCollectionResource, {
onTargetsLoaded: this.worldLoaded
});
// Create overlay for page one
var imgOne = new AR.ImageResource("assets/imageOne.png");
var overlayOne = new AR.ImageDrawable(imgOne, 1, {
translate: {
x: -0.15,
}
});
var pageOne = new AR.ImageTrackable(this.tracker, "*", {
drawables: {
cam: overlayOne
}
});
Wikitude
SDKで使用できるターゲットコレクションの作成方法については、「ターゲット管理」を参照してください。まず、認識エンジンを起動するためにAR.ImageTracker
を
作成する必要があります。 これは、ターゲットコレクションに固有のAR.TargetCollectionResource
で初期化されます。オプションのパラメータは、最後の引数でオブジェクトとして渡されます。 この場合、onLoaded
ト
リガーのコールバック関数が設定されます。トラッカーが完全にロードされると、worldLoaded()
関数が呼び出さ
れます。
次のステップは拡張オブジェクトを作成することです。このサンプルでは、画像リソースを作成して AR.ImageDrawable
に
渡しています。drawableは、ターゲットイメージ( AR.ImageTrackable
)またはジオロケーションオブジェクト(AR.GeoObject
)
に接続できるビジュアルコンポーネントです。画 像とそのサイズを指定して AR.ImageDrawable
を初期化します。さらに、オプションパラメーターを使用して、ターゲットに対する相対的な位置を指定します。
最後の行は、上記で作成 されたトラッカー、イメージターゲットの名前、および認識されたイメージを拡張するdrawable を持つAR.ImageTrackable
を作成することによって、これらすべてを組み合わせます。この場合、ターゲット名がワイルドカー ド*
になっていることに
注意してくださ い。 ワイルドカードを使用すると、ターゲットコレクション
で定義されているすべてのターゲットに一致させることができます。特定のAR.ImageTrackable
に対してのみ、ターゲットを照合する場合は、ターゲットコレクションに指定されているターゲット名を指定します。
- 使用する画像を ター ゲット管理ツール(ログインが必要) にアップロードします。
- ターゲットコレクションファイル(.wtc)を生成します。
-
コードで
AR.
ImageTracker
を作成し、前のステップで作成したターゲットコレクションをロード します。 - AR.ImageTrackable を作成し、アップロードした画像のターゲット名を targetNameとして指定します。
AR.ImageTrackable
で指定したtargetName
が、ターゲットコレク
ションに含まれるいずれかのターゲットの名前と一致していることを確
認してください。また、ワイルドカードを使用して任意のターゲットまたはターゲットコレクションの特定の一部のみをマッチングすることもできます。ワ
イルドカードの詳細については、APIリファレンスのAR.ImageTrackable
を
参照してください。
複数ターゲットの認識
対応するサンプルタイトル名「Multiple Targets」
ターゲットコレクションに複数のターゲットを追加するのは簡単で、 ターゲット管理. の ガイドに従って操作するだけです。ターゲットコレクション内の各ターゲットはtargetName
に
よって識別されます。この targetName
を
使用することで、 ターゲットコレクション内のすべてのターゲットの AR.ImageTrackable
を
作成できます。
サンプルの確認には、このページにある画像を使用できます。
// Create overlay for page two
var imgTwo = new AR.ImageResource("assets/imageTwo.png");
var overlayTwo = new AR.ImageDrawable(imgTwo, 0.5, {
translate: {
x: 0.12,
y: -0.01
}
});
var pageTwo = new AR.ImageTrackable(this.tracker, "pageTwo", {
drawables: {
cam: overlayTwo
}
});
最初の部分と同様に、画像リソースと2つめの拡張オブジェクト用にAR.ImageDrawable
を
作成しています。2ページ目で使用するAR.ImageTrackable
は同じトラッカーですが、ターゲット名が異なります。
拡張オブジェクトへのイベント追加
対応するサンプルタイトル名「Interactivity 」
次のステップは拡張オブジェクトにイベントを追加することです。このサンプルでは、ターゲットにボタンのような外観のオブジェクトを拡張し、それを クリックするとWebページが開く処理を実装しています。
ボタンは2D拡張オブジェクトと同じように作成します。AR.ImageResource
でボタンの外観を定義し、これを両方のページで再利用します。
this.imgButton = new AR.ImageResource("assets/wwwButton.jpg");
各ターゲットについて、ヘルパー関数のcreateWwwButton(url, options)
を使用してボタンのAR.ImageDrawable
を
作成します。返されたAR.ImageDrawable
を、AR.ImageTrackable
の
作成時にdrawables.cam
配列に追加します。
var pageOneButton = this.createWwwButton("http://www.wikitude.com/pageone", 0.1, {
translate: {
x: -0.25,
y: -0.25
}
});
var pageOne = new AR.ImageTrackable(this.tracker, "pageOne", {
drawables: {
cam: [overlayOne, pageOneButton]
}
});
ボタンはクリック可能にする必要があるので、 AR.ImageDrawable
に
渡すオプションで onClick
ト
リガーを定義します。基本的に、各拡張オブジェクトは
onClick
ト
リガーを定義することでクリック可能にすることができます。
createWwwButton: function createWwwButtonFn(url, size, options) {
options.onClick = function() {
AR.context.openInBrowser(url);
};
return new AR.ImageDrawable(this.imgButton, size, options);
},
onClickトリガーに割り当てた関数は、渡されたURLを指定して
AR.context.openInBrowser
を
呼び出します。これにより、そのURLがブラウザで開きます。
HTMLコンテンツの拡張
対応するサンプルタイトル名「HTML Drawable」
画像を拡張することと同じように、AR.HtmlDrawable
を
使用して、HTMLコンテンツをARchitect
Worldに拡張できます。このサンプルでは、ハワイ・マウイ島の現在の天気を表す天気ウィジェットを画像ターゲットの上部に追加しています。
基本的にに、相対URLまたは絶対URLを渡すことによって任意のHTMLコンテンツをロードできます。また、HTMLコンテンツを文字列として渡
すこともできます。drawableの作成時にコンテンツを指定する方法の詳細については、APIリファレンスを参照してください。このサンプルで
は、assets
サブフォルダーに.html
ファイルとして保存されている天気ウィジェットを
相対URLで指定します。
HTMLコンテンツを正しくレイアウトするためには、ビューポートについて検討することが重要です。ビューポートとは、HTMLコンテンツのレンダ
リングに使用できる領域のことです。これは、
AR.HtmlDrawable
ARchitect Worldに配置したときに必要となる画面上の実際の領域からは独立しています。
ビューポートの幅と高さは
AR.HtmlDrawable
の
作成時に設定する必要があり、さらに使用するHTMLコンテンツ内のメタタグとしても設定する必要があります。これにより、HTMLレンダリングエン
ジンが指定されたビューポートサイズを使用してコンテンツをレンダリングできます。
<meta name="viewport"
content="target-densitydpi=device-dpi, width = 320, user-scalable = 0">
width
の値は、HTMLコンテンツに必要なサイズ(ピクセル単位)に従って設定します。また、AR.HtmlDrawable
の
作成時に指定したviewportWidth
の値とも一致している必要があります。
viewportWidth
と同様に、viewportHeight
を指定してコンテンツの
レンダリング時に使用可能なピクセル単位の高さを定義します。手元にあるHTMLコンテンツのピクセルサイズが不明な場合は、最近のブラウザに組み込
まれている開発者向けツール(例: WebInspector)を使用して測定できます。
以下のコード例では、これらをすべてまとめて作業用のAR.HtmlDrawable
に
設定しています。作成されたAR.HtmlDrawable
を、
他の拡張オブジェクトと同様に AR.ImageTrackable
の
drawablesのリストに追加します。
var weatherWidget = new AR.HtmlDrawable({
uri: "assets/weather.html"
}, 0.25, {
viewportWidth: 320,
viewportHeight: 100,
backgroundColor: "#FFFFFF",
translate: {
x:0.36,
y: 0.5
},
horizontalAnchor: AR.CONST.HORIZONTAL_ANCHOR.RIGHT,
verticalAnchor: AR.CONST.VERTICAL_ANCHOR.TOP,
clickThroughEnabled: true,
allowDocumentLocationChanges: false,
onDocumentLocationChanged: function onDocumentLocationChangedFn(uri) {
AR.context.openInBrowser(uri);
}
});
var pageOne = new AR.ImageTrackable(this.tracker, "pageOne", {
drawables: {
cam: [overlayOne, pageOneButton, weatherWidget, sparkles]
}
});
AR.HtmlDrawable
とのやり取りは clickThroughEnabled
プロパティとallowDocumentLocationChanges
プロパティによって制御されます。 clickThroughEnabled
を設定すると、クリックイベントがHTMLコンテンツに転送されるので、リンクを機能させたりボタンをクリックしたりすることができます。HTMLコ
ンテンツが他のHTMLコンテンツにリンクされないようにする場合は、allowDocumentLocationChanges
をfalse
に設定してリンクが機能しないようにします。また onDocumentLocationChanged
トリガーを使用してクリックされたリンクに応答することはできます。このサンプルではこのトリガーを使用して、クリックされたリンクをブラウザに全画
面で開いています。
スプライトシートアニメーションの追加
対応するサンプルタイトル名「Bonus: Sparkles」
スプライトシートアニメーションを使用して、画像をアニメーションGIFのようにアニメーション表示することができます。このサンプルでは、このス プライトシートを使用して拡張オブジェクトにアニメーションを追加しています。
スプライトシートは、アニメーションに必要なすべてのキーフレーム画像を含む画像ファイルです。キーフレーム画像のサイズ(幅と高さ)はすべての キーフレーム画像について同じである必要があり、このサイズを作成時に渡します。キーフレーム画像は0から始まる配列で管理されます。配列の要素は、 一番上の行から左から右の順に格納されます。スプライトシートの端にあるサイズが不完全なキーフレームは無視されます。
このサンプルで使用されている光のスプライトシート
まず画像リソースを作成してから、それを使用してAR.AnimatedImageDrawable
を
作成します。スプライトシートのサイズは512×512で、16個のキーフレームが含まれているため、1つの画像のサイズは128×128です。した
がって、.
AR.AnimatedImageDrawable
の
幅と高さに128を設定します。
// Sparkles
var imgSparkles = new AR.ImageResource("assets/imageSparkles.png");
var sparkles = new AR.AnimatedImageDrawable(imgSparkles, 0.25, 128, 128, {
translate: {
x: -0.2,
y: 0.5
},
rotate: {
z: 75
}
});
アニメーションを開始するには、キーフレームの順序を配列として渡す必要があります。また、各フレームの表示時間(ミリ秒単位)とループ回数も定義
する必要があります。このケースでは、各画像の表示時間は100ミリ秒とし、ループ回数を-1
に設定してアニメーションを
無限ループさせます。
sparkles.animate([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15], 100, -1);
最後のステップは、これを拡張オブジェクトとして AR.ImageTrackable
に
追加することです。これで、アニメーションが最初のページに拡張されます。
var pageOne = new AR.ImageTrackable(this.tracker, "pageOne", {
drawables: {
cam: [overlayOne, pageOneButton, weatherWidget, sparkles]
}
});