Wikitude SDKで「AR(拡張現実)」スマホアプリをお手軽開発[PR]

GrapeCity Garage Wikitude SDKで「AR(拡張現実)」スマホアプリをお手軽開発[PR]

身の回りの3D物体を認識して、そこにAR(拡張現実)オブジェクトを表示する方法(Wikitude活用、Android編)[PR]

2017年11月1日

市販のドレッシングボトルを映せばレシピが提案されるアプリを、物体認識型ARで開発。物体ターゲットを認識すると、その物体空間に合わせてARオブジェクトを表示し、それをタップするとレシピページにジャンプする。

デジタルアドバンテージ 一色 政彦
  • このエントリーをはてなブックマークに追加

 前回(10月)の画像認識型のAR(iOS編)に続き、今回(11月)は物体認識型のAR(Android編)の特徴と開発方法を紹介する。

  • 連載 第1回: AR(拡張現実)とその開発技術、ライブラリ、Wikitudeの概説
  • 連載 第2回: ロケーション型AR開発入門(iOS編)と、アーキテクチャと、開発資料
  • 連載 第3回: ロケーション型AR開発入門(Android編)と、デバッグ手法
  • 連載 第4回(前回): ターゲット「画像」認識型のAR(iOS編)
  • 連載 第5回(今回): ターゲット「物体」認識型のAR(Android編)

 今回で、上記に示した全5回の本連載は完結する。これにより、Wikitudeが提供するロケーション型/画像認識型/物体認識型という3つの基本機能を、本連載を通して開発体験できるようになる。

 以下では、第1回と第3回、第2回の前半(アーキテクチャと開発資料)を全て読んで理解していることを前提とする。Wikitudeの基本的な開発方法について分からない、あるいは忘れている部分がある場合は、これらの記事を再読してから読み進めることをお勧めする。本稿はこれまでの連載の続編なので、用語などの基礎知識に関する説明は割愛するので、ご了承いただきたい。

 さっそくだが、本題に入っていこう。

1. ターゲット物体認識型AR(JavaScript API)開発のポイント

 最初に、今回作成するサンプルアプリがどのようなものかを示しておく。

1.1 サンプルアプリ「ドレッシングボトルからレシピ提案」の内容

 今回のサンプルアプリは、

アプリ上のカメラビュー内に市販のドレッシングボトル(3D物体)を映すとARのターゲットとして認識され、その3D物体の空間領域に合わせて、[商品情報を見る]ボタンと[レシピを見る]ボタンという2つのARオブジェクトが表示される。各ボタンをタップすると、アプリ内でブラウザーが立ちあがり、それぞれの該当ページが表示される

というものだ。ユーザー視点では、このサンプルアプリは図1のように使うことになる。

ドレッシングボトルを準備して、サンプルアプリのカメラビューで映像を表示する

ドレッシングボトルを準備して、サンプルアプリのカメラビューで映像を表示する

ドレッシングボトルがターゲットとして認識され、正面左右に吹き出し形のARオブジェクトが表示される

ドレッシングボトルがターゲットとして認識され、正面左右に吹き出し形のARオブジェクトが表示される

ARオブジェクトの[商品情報を見る]ボタンをタップすると、商品情報に関するWebページが表示される

ARオブジェクトの[商品情報を見る]ボタンをタップすると、商品情報に関するWebページが表示される

ARオブジェクトの[レシピを見る]ボタンをタップすると、レシピ関連のWebページが表示される

ARオブジェクトの[レシピを見る]ボタンをタップすると、レシピ関連のWebページが表示される

図1 サンプルアプリの使用例

 このサンプルを開発するためのAR技術のポイントは下記の2点となる。

  • 物体ターゲット(Object Targets)を認識して、その上にARオブジェクトを表示する
  • ARオブジェクトをタップすると、アプリ内のブラウザーでWebページを表示する

 実際の開発内容を説明する前に、その開発環境を準備しておこう。

1.2 開発環境の準備

 Wikitude SDKを用いたAndroidアプリをAndroid Studioで開発する環境を構築するまでの手順は第3回の説明と同じなので、本稿では説明を割愛する。

 ただし2つほど注意点がある。

注意点 1: 無償トライアルライセンスキーの利用について

 本稿のサンプルアプリを無償トライアルライセンスキーで実行する場合、「Trial」文字がウォーターマークとして表示されるが、利用上は問題ない。よって、「開発を体験したい」という目的の場合は、取りあえず無償トライアルライセンスキーがあれば十分である。

注意点 2: Wikitude SDK最新版(7.x.x)

 連載第3回を執筆した時点ではWikitude SDK(Android) 5.1.4というバージョンを使ったが、本稿執筆時点の最新バージョンは7.1.0となっている。基本的なプログラミング方法に変更はないのだが、いくつかのAPIに変更があり、削除されたり、非推奨になったりしている。具体的には次のリンク先を参照してほしい。

 筆者自身もWikitude SDK(Android) 7.1.0で今回のサンプルアプリを開発した。

1.3 Wikitudeアプリ開発のひな型コードの作成

 環境の準備が整ったら、Android StudioでAndroidアプリのプロジェクトを作成して、Wikitudeアプリ開発のひな型コードを用意する。この手順も前回と同じで、

を参考に進めればよい。

 Wikitudeの開発は、Android Architect SDK APIを用いた「Android(Java)側開発」と、Wikitude SDK JavaScript APIを用いた「ARchitect World側開発」の2つに分けられる(第3回で説明済み)。両者の関係を示したのが図2で、Android側のビューコンポーネントARchitectViewに、ARchitect Worldがロードされる仕組みになっている。

図2 Android(Java)側とARchitect World側の関係
図2 Android(Java)側とARchitect World側の関係

 Android側開発については、ちょっとしたパラメーター調整などはあるものの、ほとんどの場合では定型のコードとなるので、今回も説明を割愛する。詳しくは、下記リンク先のソースコードを直接、参照もしくは使用してほしい(Android Studio 2.3.3を使用して作成している。ビルドする場合はそれ以降のバージョンのAndroid Studioを使用してほしい)。

 なお、第3回のサンプルなど古いSDKバージョンで作ったWikitudeのプロジェクトを新しいバージョンのSDKを用いてビルドすると、エラーや警告が表示されるが、その場合は、前述の「移行解説ページ」や上記リンク先のソースコードを参考に、コードを修正していく必要がある。

 それではAndroid側開発は完了したとして、本題となるARchitect WorldをHTML+CSS+JavaScriptで実装していこう。

1.4 ARchitect Worldのビューの実装

 まずはビュー部分を実装する。

図2 index.htmlなど各種ファイルの作成場所
図2 index.htmlなど各種ファイルの作成場所

 図2に示す場所に、index.htmlファイルを作成し、コードエディターでリスト1のように記述する。

index.html
<!DOCTYPE HTML>
<html>

<head>
  <!--  基本的なメタ情報 -->
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta content="width=device-width,initial-scale=1,maximum-scale=5,user-scalable=yes" name="viewport">

  <title></title>

  <!-- (1)Wikitude標準ライブラリのインポート -->
  <script src="https://www.wikitude.com/libs/architect.js"></script>

  <!-- (2)ADEデバッグ用のファイルをインポート -->
  <script type="text/javascript" src="js/ade.js"></script>

  <!-- (3)デザイン用のCSSファイルをインポート -->
  <link rel="stylesheet" href="css/default.css">
</head>

<body>
<!--<body onLoad="javascript:AR.logger.activateDebugMode();">--><!--⇒ログ出力を有効にするには、onLoad属性付きのこちらを有効にしてください。-->

  <div id="topMessage" class="info">ロード中 ... 【しばらくお待ちください】</div>

  <!-- (4)メインロジック用のJavaScriptファイルをインポート -->
  <script src="js/mainlogic.js"></script>
</body>
</html>
リスト1 ビュー本体の実装内容
  • ちなみに、リスト1のコードおよび後掲のリスト2のコードは、第4回とほぼ同じである(上部メッセージ領域のテキストだけ変更した)。よってコード内容の説明も第4回と同じになるが、本稿だけを読んでも内容が分かるように、ここにも同じ文章を掲載しておく。

 インポートしているファイル群を見てみると、以下のファイルが存在することが分かる。

  • (1)https://www.wikitude.com/libs/architect.jsファイル: Wikitude標準ライブラリ。ARchitect Worldを実現するのに必須。ちなみに、第3回では「architect://」プロトコルで記載していたが、最新バージョンではHTTPSを使用してARchitect Worldをロードできるように書き方が変更されている(これに関しても、前述の「移行解説ページ」に記載がある)
  • (2)js/ade.jsファイル: ADE(ARchitect Desktop Environment)を使ってデバッグするのに必要なファイル
  • (3)css/default.cssファイル: CSSデザイン。本稿で実装
  • (4)js/mainlogic.jsファイル: メインロジック。本稿で実装

 ADEによるデバッグとAR.logger.activateDebugMode()関数については第3回で説明しているので、そちらを参照されたい。

 <div id="topMessage" class="info">は、ビューの上部に表示するメッセージ領域である。CSSのinfoクラスは、リスト2のようにcss/default.cssファイルに定義されている。

css/default.css
.info {
  font-size: large;
  position: absolute;
  width: 100%;
  padding-top: 12px;
  padding-bottom: 12px;
  background-color: #BBBBBB;
  text-align: center;
  top: 0;
  left: 0;
  opacity: 0.7;
  display: table;
}
リスト2 ビューデザインの実装内容

 本稿で実装するファイルは、メインロジックを表すjs/mainlogic.jsだけである。ビューとメインロジックの関係は、図3のようになる。

図3 ARchitect Worldを実現するビューとメインロジックの関係
図3 ARchitect Worldを実現するビューとメインロジックの関係

 それではメインロジックの実装内容を見ていこう。

1.5 ARchitect Worldのメインロジックの実装

 これまでの連載の中でも説明してきたように、Wikitudeでは、Worldオブジェクトの中に全ての処理ロジックをまとめて実装していくのが定石となっている。

 今回のサンプルでは、物体ターゲットを認識する必要があるので、最初に初期化関数initを実行する仕組みにしておこう。コードは、リスト3のようになる。

js/mainlogic.js
// ARchitect World(=AR体験)の実装
var World = {

  // 初期化用の関数。World.init()の形で、外部から呼び出されることで ARchitect World が生成されます。
  init: function () {
    // TODO: オーバーレイを作成する
  }

  // TODO: メンバー関数はここに定義

};

// ARchitect World を初期化します。
World.init();
リスト3 Worldオブジェクトとinit関数の実行

 Worldオブジェクトは連想配列の形で実装し、まずはinitキーに引数なしの関数を指定する。最後に1行、World.init();と記載することで、ARchitect World起動時に1回だけinit関数が実行されることになる。

 そのinit関数の中では、カメラビューの上にARオブジェクトを描画するためのオーバーレイを作成する。具体的には、リスト3の「TODO: オーバーレイを作成する」の部分にWorld.createOverlays();を記述して、「TODO: メンバー関数はここに定義」の部分にcreateOverlays関数をリスト4のように記述した。

js/mainlogic.js
……省略……
var World = {

  // 初期化用の関数。World.init()の形で、外部から呼び出されることで ARchitect World が生成されます。
  init: function () {

    World.createOverlays();

  }, // 「,」を足すのを忘れないように

  // init()関数から呼び出される。ARchitect Worldのオーバーレイを作成します。
  createOverlays: function () {

    // 1事前に作成しておいた「複数の物体ターゲット群がまとめられた.wtoファイル」から、「物体ターゲットコレクション」リソースを作成します。
    var targetCollectionResource = new AR.TargetCollectionResource("assets/dressing.wto");
    // 2その「物体ターゲットコレクション」リソースから、「AR物体トラッカー」を作成します。
    var tracker = new AR.ObjectTracker(targetCollectionResource, {
      // TODO: ObjectTrackerのオプションをここで指定
    });

    // 3事前に準備しておいた「オーバーレイ用の.pngファイル」から、「画像」リソースを作成します。
    var productButton = new AR.ImageResource("assets/overlays/product.png");
    var recipeButton = new AR.ImageResource("assets/overlays/recipe.png");
    // 4その「画像」リソースから、オーバーレイとなる「画像描画物」を作成します。
    var productOverlay = new AR.ImageDrawable(productButton, 1, {
      // TODO: ImageDrawableのオプションをここで指定
    });
    var recipeOverlay = new AR.ImageDrawable(recipeButton, 1, {
      // TODO: ImageDrawableのオプションをここで指定
    });

    // 5「AR物体トラッカブル」を作成することにより、追跡する(Tracker)側と追跡される(Trackable)側のセットを構築します。
    new AR.ObjectTrackable(tracker, "*", {  // 追跡されるターゲットの名前を、ワイルドカード(*)にすることで、物体ターゲットコレクション内の全てのターゲットが反応するようになります。

      drawables: {
        cam: [productOverlay, recipeOverlay]  // このプロパティに対して、追跡されるターゲットのオーバーレイ(=AR.ImageDrawableオブジェクト)を指定。
      }
    });

  },

  ……省略……
};
……省略……
リスト4 オーバーレイの作成

 createOverlays関数の中では、以下のことを順に実施する。

  • 1物体ターゲットコレクションをリソースAR.TargetCollectionResourceオブジェクト)として読み込む
  • 2そのリソースから、AR物体トラッカーAR.ObjectTrackerオブジェクト)を作成する
  • 3画像ファイルをリソースAR.ImageResourceオブジェクト)として読み込む
  • 4その画像リソースから、オーバーレイとなるAR画像描画物AR.ImageDrawableオブジェクト)を作成する
  • 5AR物体トラッカブルAR.ObjectTrackableオブジェクト)を作成する

 それぞれの関係性をまとめると図4のようになる。

図4 トラッカー/トラッカブル/オーバーレイの関係性

 なお、前回の第4回では画像認識だったのでAR.ImageTrackerAR.ImageTrackableオブジェクトを使った。物体認識では、図4で黄色い文字で示したように「Image」(画像)ではなく「Object」(物体)の名前が付いた各オブジェクトを使用する。

 本稿のサンプルでは、できるだけシンプルに試せるように、オーバーレイとして使用するARオブジェクトを、画像ベースのAR.ImageDrawableオブジェクトで作成している。画像ではなく3DモデルからARオブジェクトを作りたいという場合は、AR.Modelオブジェクトを使用すればよい。使用する3Dモデルは.wt3(Wikitude 3D)ファイル形式に変換して使用する必要がある。詳しくは公式ドキュメントの「3Dモデルのワークフロー」を参照されたい。

 以上、このトラッカー/トラッカブル/オーバーレイという実装の流れが、ターゲット物体認識型ARを開発するためのポイントである。この内容をもう少し細かく見ていこう。

1物体ターゲットコレクションをリソース(AR.TargetCollectionResource)として読み込む

 assets/dressing.wtoファイルを読み込んでいる。この.wtoファイルには、物体ターゲットの3Dマップデータが格納されているが、.wtoファイル作成時にはそのソースとなる動画ファイルが必要になる。

 .wtoファイル用の動画を撮影するのには少しコツがいるので、本稿では作成済み.wtoファイルをダウンロードできるようにした。

 この.wtoファイルは、ドレッシングボトルの「リケンのノンオイル 青じそ」の3Dマップデータを格納している。ただし、それ以外のドレッシングボトルには対応していないので注意してほしい。

.wtoファイルを自作する方法

 自作の.wtoファイルを使いたい場合は、まず「公式ページ: 物体認識で使用する最適な物体と動画ファイルの撮影方法」を参考に、必要な物体ターゲットの数だけ動画を撮影する必要がある。

 次に、Wikitude Target Managerを使って.wtoファイルを作成する。

 作成方法は難しくないので、ここではポイントだけ簡単に紹介しておく。手順としては、「Object」Typeのプロジェクトを任意のプロジェクト名で作成し、「物体ターゲット(Object Targets)」として使いたい動画ファイル(サポートされている動画ファイルフォーマット: .mov/.mp4/.avi/.m4v、最大サイズ: 50MB)をアップロードする。アップロードする際には、FOV(Field of View: 撮影した動画の水平の視野角/画角)の入力のために、リストからスマートフォン名を選択する必要がある(リストに適切な名前がなければFOVの値を計算して手動で入力しなければならない)。なお、画像ファイルの名前が、そのままターゲット名となるので、適切なファイル名を付けるようにすること(ハイフンなどの記号を付けない方が、JavaScriptコードで処理する場面では扱いやすい。ちなみに本稿のサンプルではターゲット名は使用していない)。

 最後に、上部のバーにある[WTO]ボタンから.wtoファイルを生成して、プロジェクト内にapp/src/main/assets/ArchitectWorld/assets/dressing.wtoファイルとしてコピーしてほしい。ちなみに、前回の第4回では画像認識だったので.wtc(Wikitude画像ターゲットコレクション)ファイルを使用したが、今回は物体認識なので.wto(Wikitude物体ターゲットコレクション)ファイルを使用している点が異なるので注意してほしい。

2そのリソースから、AR物体トラッカー(AR.ObjectTracker)を作成する

 リスト4の「TODO: ObjectTrackerのオプションをここで指定」部分は、リスト5のように記述する。

js/mainlogic.js
……省略……
var tracker = new AR.ObjectTracker(targetCollectionResource, {
  onTargetsLoaded: World.worldLoaded,  // ターゲット群のロードが完了したときに呼び出されるコールバック関数を指定。
  onError: function(errorMessage) {    // エラー処理
    alert(errorMessage);
  }
});
……省略……
リスト5 ObjectTrackerのオプション指定

 詳細はコード内のコメントを参考にしてほしい。

 onTargetsLoadedオプションプロパティは、Worldオブジェクト内のworldLoaded関数を呼び出すようになっている。

 worldLoaded関数の実装内容はリスト6のとおりだ。ビュー上部にあるメッセージ領域(topMessage)に、ユーザーへの操作説明文を表示する処理が記載されている。コード内容に関しては特に難しい部分はないだろう。

js/mainlogic.js
……省略……
var World = {
  ……省略……

  // ObjectTrackerクラスのonTargetsLoadedイベントに呼び出されます。トラッカーのターゲットコレクションが正常にロードされ、トラッカーがエンジンによってロードされたときにトリガーが発生します。このトラッカーに関連するObjectTrackableは、トラッカーが正常に読み込まれた後にのみトラッキングできます。
  worldLoaded: function () {
    World.initInstruction();
  },

  // ユーザーへの指示文の初期化処理を関数にまとめています。
  initInstruction: function () {
    document.getElementById('topMessage').innerHTML =
      "<div style='display: table-cell;vertical-align: middle; text-align: right; width: 70%; padding-right: 15px;'>ドレッシングボトルをスキャンしてね:</div>" +
      "<div style='display: table-cell;vertical-align: middle; text-align: left;'><img src='assets/dressing_image.png'></img></div>";
  }

};
……省略……
リスト6 トラッカーのターゲットコレクションが正常にロードされたら、ビュー上部のメッセージ領域にユーザーへの操作説明文を表示
3画像ファイルをリソース(AR.ImageResource)として読み込む

 ターゲットが認識・追跡されたら、そのターゲットの位置やサイズに合わせて、任意の画像や3Dモデルから作成したARオブジェクトをオーバーレイ表示できる。今回は、そのための画像ファイルをここで読み込んでいる。本稿のサンプルでは吹き出し形の画像を2つ使っているが、著作権の問題があるので、プロジェクト内に画像ファイルは同梱していない。読者自身で任意の画像を用意してほしい。

4その画像リソースから、オーバーレイとなるAR画像描画物(AR.ImageDrawable)を作成する

 リスト4の「TODO: ImageDrawableのオプションをここで指定」部分は、リスト7のように記述する。

js/mainlogic.js
……省略……
var productOverlay = new AR.ImageDrawable(productButton, 1, {
  translate: {
    x:-0.55,   // AR.ImageDrawableのX軸方向への平行移動と、
    y:0.55     // Y軸方向への平行移動を設定。
  },
  onClick : function() {
    AR.context.openInBrowser("http://www.rikenvitamin.jp/products/dressing/nonoilsuperdressing/aojiso.html");
  }
});
var recipeOverlay = new AR.ImageDrawable(recipeButton, 1, {
  translate: {
    x:0.55,    // AR.ImageDrawableのX軸方向への平行移動と、
    y:0.55     // Y軸方向への平行移動を設定。
  },
  onClick : function() {
    AR.context.openInBrowser("http://riken-tensai.jp/index.html#movies");
  }
});
……省略……
リスト7 ImageDrawableのオプション指定

 translateオプションプロパティを使ってX軸上とY軸上で少し位置をずらしている。

 onClickオプションプロパティに指定している関数では、AR.context.openInBrowserメソッドを呼び出している。これにより、ARオブジェクトがタップされると、アプリ内のブラウザーで指定URLのWebページが開かれることになる。

5AR物体トラッカブル(AR.ObjectTrackable)を作成する
js/mainlogic.js
……省略……
new AR.ObjectTrackable(tracker, "*", {  // 追跡されるターゲットの名前を、ワイルドカード(*)にすることで、物体ターゲットコレクション内の全てのターゲットが反応するようになります。

  drawables: {
    cam: [productOverlay, recipeOverlay]  // このプロパティに対して、追跡されるターゲットのオーバーレイ(=AR.ImageDrawableオブジェクト)を指定。
  }

});
……省略……
リスト8 ObjectTrackableのオプション指定

 AR.ObjectTrackableオブジェクトのコンストラクター引数にAR物体トラッカーを指定してAR物体トラッカブルを作成することにより、追跡する(Tracker)側と追跡される(Trackable)側のセットが構築される。

 また、drawables.camオプションプロパティにARオブジェクトとなるAR画像描画物を指定することで(ちなみに3Dオブジェクトを使う場合はARモデルを指定する)、オーバーレイの設定も行っている。

 以上で、サンプルアプリは完成である。実際に手元でサンプルアプリを試してほしいが、サンプル実行時に注意点してほしいことがあるので、これを最後に書いておこう。

1.6 サンプルを実際に動かす際の注意点

 実際に手元で動かしてみて、なかなか物体が認識できない場合には、以下の2点に問題がないかを確認してほしい。

  • 1執筆時点のラベルパッケージから刷新されて、異なるデザインになっていないか
  • 2光の反射や周辺の映り込みなどがボトル表面に多すぎないか

 まず1について。商品のリニューアルや期間限定のキャンペーンなどで、ドレッシングボトルのラベルが変わっている場合、当然ながら、認識できない、もしくは認識しづらくなる。

 次に2について。太陽光などの強い光に影響されて周辺の映り込みがドレッシングボトル表面に目立つような状況・環境では、認識しづらくなる可能性がある。

 このような問題の可能性がある場合は、次の写真で代用してほしい。この写真をサンプルアプリで映しても物体を認識したように動作する。

図5 物理的なドレッシングボトルを代用する写真
図5 物理的なドレッシングボトルを代用する写真

2. まとめ

 今回はターゲット「物体」認識型ARの開発方法を説明した。物体認識を活用すれば、本稿で示したように、現実世界に実在する既存のモノを活用したARも実現できるようになるので、AR活用の幅がさらに大きく広がるだろう。

 さて、本連載は今回で完結である。ここまで読んでいただいたことに感謝したい。確かに本連載で紹介した内容はWikitudeの一部機能にすぎないが、Wikitude開発の基礎については本連載で一通りご理解いただけたのではないだろうか。この先は、ぜひ独自のARアプリ開発にチャレンジするステップに進んでいただけたら、筆者としてうれしい。

1. 拡張現実(AR)とは? モバイルARを実現するテクノロジーと開発ライブラリ[PR]

ARの概要と特徴、利用モデルを図と動画で初歩から解説。主な開発ライブラリと、その一つであるWikitudeを紹介し、AR開発で使える「位置情報データ&API」も紹介する。

2. iPhone向け拡張現実アプリの開発に挑戦してみた(Wikitude活用)[PR]

モバイルARアプリ開発に初挑戦! 位置情報を含むオープンデータの「バス停位置情報」と、ARライブラリの「Wikitude」を活用したら、拡張現実に対応した有用なiOSアプリが簡単に開発できた。

3. WikitudeでカンタンAndroid向けAR開発。ブラウザーでデバッグ可能[PR]

位置情報を含むレストラン検索の「ホットペッパーAPI」を活用したAndroid向けモバイルARアプリを作成。Wikitudeを使えば、使い慣れたテキストエディターで開発し、ブラウザーで手軽にデバッグできる。

4. AR(拡張現実)開発を始めよう! 複数ターゲットの認識と、距離・角度の把握(Wikitude活用、iOS編)[PR]

2人の相性を写真から診断するアプリを、画像認識型ARで開発。ターゲット写真を認識してARオブジェクトを表示し、2枚のターゲット間の距離と角度が一定の条件内になれば診断を開始する仕組みだ。

5. 【現在、表示中】≫ 身の回りの3D物体を認識して、そこにAR(拡張現実)オブジェクトを表示する方法(Wikitude活用、Android編)[PR]

市販のドレッシングボトルを映せばレシピが提案されるアプリを、物体認識型ARで開発。物体ターゲットを認識すると、その物体空間に合わせてARオブジェクトを表示し、それをタップするとレシピページにジャンプする。

サイトからのお知らせ

Twitterでつぶやこう!