じゅころぐAR

AR/VRメインのブログ。時々ドローン。

Augmented Imageで色々なモノにARコンテンツを重ねてみた

久しくブログを書けていませんでしたが、更新が滞っている間にAugmented Imageを使ったデモアプリをいくつか作ったので、まとめて記事にします。

Augmented Imageの概要

Augmented ImageはARCore v1.2.0で追加されたAPIで、任意の画像を実空間から検知してARコンテンツを重ねることができます。

developers.google.com

上記のツイートで試したサンプルでは、犬の画像が予めアプリに登録されていて、検知した画像のサイズに合わせて額縁が表示されています。
SNSやネットの記事でよく見かける事例としては、動く絵画とかが多いですね。

本記事では触れませんが、ARKitではARImageAnchorという機能があり、画像にARコンテンツを重ねる機能はマルチOSで実装可能です。

作ったもの

思いつきで色々なモノにARを重ねてました。

プリントTシャツ

Tシャツにプリントされているイラストを写真に撮って使っています。ARで着ぐるみになりたかった。
最初の頃に作ったのもあって検知精度がかなり低いです。

年賀状

年賀状をカメラで撮影してARコンテンツを乗せました。メッセージカードやポスター系でAugmented Imageを使うと、紙の情報+ARコンテンツで二度楽しめます。

スライドショー(スマホ画面)

スマートフォンで画像のスライドショーを行い、ARコンテンツの切り替えを行なっています。
後述しますが、この実装例は検知精度が非常に高いです。

スマートウォッチ

Android Wear対応のスマートウォッチを使っていてフェイスに自分の好きな画像を表示できるので、その画像を検知してARを表示しています。キャラクターだけではなく簡易のUIを表示させて、ラズパイと連携している点が他と違うところ。
また、ウォッチフェイスの画像は円形にくり抜かれている上(元画像は正方形)、時計の針が重ねて表示されていますが、画像の検知ができていることがわかります。

CDジャケット

ジャケット画像を検知して、キャラクターの表示と(ミュートしてるからわからないけど) 音源の再生を行なっています。

使い方

開発環境はUnity、MacBook Proで開発しています。
記事執筆時点の環境は以下。

  • Unity 2018.2.6f1
  • ARCore SDK for Unity v1.7.0

ARCore SDK for Unityを使う上での設定は割愛します。

developers.google.com

Augmented ImageDatabaseを作成する

公式のdeveloper guideに書いてある通りなのですが、正直ちょっとわかりにくいので図で示します。

f:id:jyuko49:20190315235725p:plain

ポイントとしては、

  • 画像を右クリックしないとAugmented ImageDatabaseが作れない
  • 作成時に選択した画像の数でAugmented ImageDatabaseが作成される

という点です。

Unityエディタ上でAugmented ImageDatabaseに登録した画像を差し替えたり、画像を削除する(減らす)ことはできますが、画像を追加する方法が不明です。そのため、最初に10個くらい画像を登録しておいた方が便利です。
なお、リファレンスを見るとAddImage()というメソッドが用意されているので、スクリプトからの追加はできそうです。

上記の手順で作成するとNameが連番のIDになっているため、必要に応じてわかりやすい値に変更します。

f:id:jyuko49:20190316000959p:plain

SessionConfigにAugmented ImageDatabaseをセットする

ARCore v1.2.0以上であれば、ARCoreSessionConfigにAugmented Image Databaseの項目があるはずです。ここに作成したImageDatabaseをセットします。
また、Camera Focus ModeAutoオートフォーカス)にしておいた方が画像の検知精度が上がります。

f:id:jyuko49:20190316001609p:plain

ARオブジェクトを表示する

AugmentedImageExampleController.csを参考にスクリプトでの実装になりますが、画像を検知したタイミングでARオブジェクトを表示するだけなら、然程難しくありません。

必要最小限のコードにコメントで解説を入れたものが以下になります。

[SerializeField]
private GameObject arObjectPrefab;

private GameObject arObject;
private List<AugmentedImage> m_TempAugmentedImages = new List<AugmentedImage>();

public void Update()
{
    // ここで検知した画像の情報がm_TempAugmentedImagesにセットされる
    Session.GetTrackables<AugmentedImage>(m_TempAugmentedImages, TrackableQueryFilter.Updated);

    // 検知した画像を1件ずつチェック
    foreach (var image in m_TempAugmentedImages)
    {
        // Trackingが停止していない場合のみ処理を実行
        if (image.TrackingState == TrackingState.Tracking)
        {
            // 画像の中心にAnchorを作成する
            Anchor anchor = image.CreateAnchor(image.CenterPose);

            // Nameが一致したらARオブジェクトの位置を追従する
            if (image.Name == "name") {

                // ARオブジェクトが未作成なら作成
                if (arObject == null) {
                    arObject = Instantiate(arObjectPrefab);
                }

                // ARオブジェクトの位置をAnchorに合わせる
                arObject.transform.position = anchor.transform.position;
                arObject.transform.rotation = anchor.transform.rotation;   
             }
        }
    }
}

上記のコードには、ARオブジェクトのサイズを画像の大きさに合わせる処理画像が検知できなくなったらARオブジェクトを非表示にする処理が入っていません。

前者はimage.ExtentXimage.ExtentZで画像の大きさが取得できるため、この値を使ってlocalScaleを調整できます。
後者に関しては、image.TrackingStateTrackingState. PausedになったタイミングでarObject.setActive(false)TrackingState. StoppedになったらDestroy(arObject)する等の実装ができます。

Tips

ImageDatabaseに使う画像の作り方

画像を用意する方法としては、大きく分けて2パターンあります。

検知対象を撮影して画像を作る

今回作ったアプリの中では、プリントTシャツ、年賀状(自分で印刷した物ではないため)がこちらのパターンです。

f:id:jyuko49:20190316015553p:plain

手軽ではあるものの、撮影時の角度や光の加減によっては検知がしにくくなります。この方法で画像を用意する場合は、十分に明るい場所で正面からの画像を撮った方がよいです。

画像を検知対象に表示・印刷する

元画像が先にあり、その画像から検知対象を作るパターンです。元画像を画面表示しているスライドショー、スマートウォッチが該当します。
検知対象を撮影する方法よりも、こちらの方が検知の精度を上げやすいと思います。

f:id:jyuko49:20190316015250p:plain

CDのジャケット写真もカメラで撮影したものではなく、ダウンロードしたジャケット写真を使った方が精度が上がります。
他のケースでも年賀状やプリントTシャツが自分で印刷・作成したモノであれば、任意の画像を入れることができます。

ARコンテンツの選び方

画像に拡張するコンテンツは、色々と考えられます。

  • 3Dオブジェクト
    • キャラクター
    • エフェクト
  • 画像
    • 見た目を一部変える
  • 動画
    • 静止画を動かす
    • 別の動画を再生する
  • テキスト
  • UI

ARコンテンツありきではなく、画像がプリントされている現実のモノに対して「何を拡張したら面白いか?」を考えた方がイメージが湧きやすいです。イラストなら描かれているキャラクターが飛び出す、CDであれば試聴ができるといった具合です。
日頃から頭の片隅に置いて生活していると、良いアイデアが閃くかもしれません。

今後

ARグラスでの利用

Augmented ImageはARCoreの機能のため、スマートフォンをかざす行為が必要になります。ARKitのARImageAnchorも同様です。
ARコンテンツを見るためとはいえ、やや不自然な動作と言えます。

ARCoreやARKitに対応したARグラスが発売されれば、画像を見るだけでARコンテンツが表示されるようになるため、利便性が大きく向上するはずです。

Webサーバの活用

現状ではローカルのImageDatabaseで画像とNameを紐付け、アプリ内でNameとARコンテンツを紐付けています。
リアルタイム性を考えると止むなしだとは思いますが、予め登録してある画像でないと検知ができないですし、検知のための画像やARコンテンツをアプリ内に大量に保持すると容量が大きくなります。

より汎用性の高い実装を考えていくと、"Webサーバで画像とARコンテンツの紐付けが保持されていて、必要に応じてダウンロードできる形"にならざるを得ません。実現できれば、全ての画像とコンテンツをアプリ内に持って事前に紐付けておく必要が無くなります。

まとめ

Augmented Imageは画像を媒体にしているので、どこに画像を乗せるか、画像にどのARコンテンツを乗せるかの組み合わせができ、現状のモバイルARでは最も汎用性があり、実用性も高いです。
実装はそこまで難しくなく、機能面でさらに使いやすくなる余地も残しているので、積極的に使っていい機能だと思います。

クレジット

本記事およびTwitter内のコンテンツには、クエリちゃんアセット、暮井 慧(プロ生ちゃん)3Dモデルを利用ガイドラインに基づいて利用しています。

DOWNLOAD | クエリちゃん公式サイト
利用ガイドライン(音声以外) | プロ生ちゃん(暮井 慧)