画像認識

このサンプルは、カメラビュー内の画像を認識し、それらの画像に情報を拡張する方法を示します。

さらに、複数の異なる画像を認識する方法や、ユーザーが拡張されたオブジェクトをクリックしたときに何かしらの処理を実装する方法も示します。

  • ターゲット: 認識対象の画像と認識に必要とされる抽出データ。

  • ターゲットコレクション: ターゲットの集合体。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
    }
});
ソースコードをGitHubで見る

Wikitude SDKで使用できるターゲットコレクションの作成方法については、「ターゲット管理」を参照してください。まず、認識エンジンを起動するためにAR.ImageTrackerを 作成する必要があります。 これは、ターゲットコレクションに固有のAR.TargetCollectionResource で初期化されます。オプションのパラメータは、最後の引数でオブジェクトとして渡されます。 この場合、onLoadedト リガーのコールバック関数が設定されます。トラッカーが完全にロードされると、worldLoaded()関数が呼び出さ れます。

次のステップは拡張オブジェクトを作成することです。このサンプルでは、画像リソースを作成して AR.ImageDrawableに 渡しています。drawableは、ターゲットイメージ( AR.ImageTrackable )またはジオロケーションオブジェクト(AR.GeoObject) に接続できるビジュアルコンポーネントです。画 像とそのサイズを指定して AR.ImageDrawable を初期化します。さらに、オプションパラメーターを使用して、ターゲットに対する相対的な位置を指定します。

最後の行は、上記で作成 されたトラッカー、イメージターゲットの名前、および認識されたイメージを拡張するdrawable を持つAR.ImageTrackable を作成することによって、これらすべてを組み合わせます。この場合、ターゲット名がワイルドカー ド*になっていることに 注意してくださ い。 ワイルドカードを使用すると、ターゲットコレクション で定義されているすべてのターゲットに一致させることができます。特定のAR.ImageTrackable に対してのみ、ターゲットを照合する場合は、ターゲットコレクションに指定されているターゲット名を指定します。

独自の画像をターゲットとして使用するには
  1. 使用する画像を ター ゲット管理ツール(ログインが必要) にアップロードします。
  2. ターゲットコレクションファイル(.wtc)を生成します。
  3. コードでAR.ImageTracker を作成し、前のステップで作成したターゲットコレクションをロード します。
  4. AR.ImageTrackable を作成し、アップロードした画像のターゲット名を targetNameとして指定します。

AR.ImageTrackable で指定したtargetNameが、ターゲットコレク ションに含まれるいずれかのターゲットの名前と一致していることを確 認してください。また、ワイルドカードを使用して任意のターゲットまたはターゲットコレクションの特定の一部のみをマッチングすることもできます。ワ イルドカードの詳細については、APIリファレンスのAR.ImageTrackableを 参照してください。

複数ターゲットの認識

対応するサンプルタイトル名「Multiple Targets」

ターゲットコレクションに複数のターゲットを追加するのは簡単で、 ターゲット管理. の ガイドに従って操作するだけです。ターゲットコレクション内の各ターゲットはtargetNameに よって識別されます。この targetNameを 使用することで、 ターゲットコレクション内のすべてのターゲットの AR.ImageTrackableを 作成できます。

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

増補すべき雑誌の2ページ目。

// 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
    }
});
ソースコードを GitHubで見る

最初の部分と同様に、画像リソースと2つめの拡張オブジェクト用にAR.ImageDrawableを 作成しています。2ページ目で使用するAR.ImageTrackable は同じトラッカーですが、ターゲット名が異なります。

拡張オブジェクトへのイベント追加

対応するサンプルタイトル名「Interactivity 」

次のステップは拡張オブジェクトにイベントを追加することです。このサンプルでは、ターゲットにボタンのような外観のオブジェクトを拡張し、それを クリックするとWebページが開く処理を実装しています。

ボタンは2D拡張オブジェクトと同じように作成します。AR.ImageResource でボタンの外観を定義し、これを両方のページで再利用します。

this.imgButton = new AR.ImageResource("assets/wwwButton.jpg");
ソースコードをGitHubで見る

各ターゲットについて、ヘルパー関数の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]
    }
});
ソースコードを GitHubで見る

ボタンはクリック可能にする必要があるので、 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);
},
ソースコードを GitHubで 見る

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">
ソースコードを GitHubで 見る

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]
    }
});
ソースコードを GitHubで見る

 AR.HtmlDrawable とのやり取りは clickThroughEnabled プロパティとallowDocumentLocationChanges プロパティによって制御されます。 clickThroughEnabled を設定すると、クリックイベントがHTMLコンテンツに転送されるので、リンクを機能させたりボタンをクリックしたりすることができます。HTMLコ ンテンツが他のHTMLコンテンツにリンクされないようにする場合は、allowDocumentLocationChangesfalseに設定してリンクが機能しないようにします。また onDocumentLocationChanged トリガーを使用してクリックされたリンクに応答することはできます。このサンプルではこのトリガーを使用して、クリックされたリンクをブラウザに全画 面で開いています。

HTMLコンテンツの拡張 - 天気ウィジェット

スプライトシートアニメーションの追加

対応するサンプルタイトル名「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
    }
});
ソースコードを GitHubで 見る

アニメーションを開始するには、キーフレームの順序を配列として渡す必要があります。また、各フレームの表示時間(ミリ秒単位)とループ回数も定義 する必要があります。このケースでは、各画像の表示時間は100ミリ秒とし、ループ回数を-1に設定してアニメーションを 無限ループさせます。

sparkles.animate([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15], 100, -1);
ソースコードを GitHubで 見る

最後のステップは、これを拡張オブジェクトとして AR.ImageTrackable に 追加することです。これで、アニメーションが最初のページに拡張されます。

var pageOne = new AR.ImageTrackable(this.tracker, "pageOne", {
    drawables: {
        cam: [overlayOne, pageOneButton, weatherWidget, sparkles]
    }
});
ソースコードを GitHubで見る