久しくブログを書けていませんでしたが、更新が滞っている間にAugmented Imageを使ったデモアプリをいくつか作ったので、まとめて記事にします。
Augmented Imageの概要
Augmented ImageはARCore v1.2.0で追加されたAPIで、任意の画像を実空間から検知してARコンテンツを重ねることができます。
Augmented Imageはマーカーじゃなくて普通の画像を検知できるんですね。
— jyuko (@jyuko49) 2018年5月9日
これはこれで使いやすそう。#ARCore pic.twitter.com/AIxCJOfnSq
上記のツイートで試したサンプルでは、犬の画像が予めアプリに登録されていて、検知した画像のサイズに合わせて額縁が表示されています。
SNSやネットの記事でよく見かける事例としては、動く絵画とかが多いですね。
本記事では触れませんが、ARKitではARImageAnchorという機能があり、画像にARコンテンツを重ねる機能はマルチOSで実装可能です。
作ったもの
思いつきで色々なモノにARを重ねてました。
プリントTシャツ
Tシャツにプリントされているイラストを写真に撮って使っています。ARで着ぐるみになりたかった。
最初の頃に作ったのもあって検知精度がかなり低いです。
俺自身がクエリになる事だ#ARCore #クエリちゃん pic.twitter.com/yCNfXvnw9U
— jyuko (@jyuko49) 2018年6月26日
年賀状
年賀状をカメラで撮影してARコンテンツを乗せました。メッセージカードやポスター系でAugmented Imageを使うと、紙の情報＋ARコンテンツで二度楽しめます。
今更だけど、今年もAR年賀状作り忘れたので @Query_chan に貰った一枚で簡単なやつを。#arcore #クエリちゃん pic.twitter.com/UyaIDLNub7
— jyuko (@jyuko49) 2019年1月9日
スライドショー（スマホ画面）
スマートフォンで画像のスライドショーを行い、ARコンテンツの切り替えを行なっています。
後述しますが、この実装例は検知精度が非常に高いです。
AR年賀状からの流れで、スライドショーでARを切り替える実験。これだけ追従性あれば何かしら使えそう。#arcore #クエリちゃん #プロ生ちゃん pic.twitter.com/ggwMjwWThC
— jyuko (@jyuko49) 2019年1月16日
スマートウォッチ
Android Wear対応のスマートウォッチを使っていてフェイスに自分の好きな画像を表示できるので、その画像を検知してARを表示しています。キャラクターだけではなく簡易のUIを表示させて、ラズパイと連携している点が他と違うところ。
また、ウォッチフェイスの画像は円形にくり抜かれている上（元画像は正方形）、時計の針が重ねて表示されていますが、画像の検知ができていることがわかります。
時計とARとクリスタル#arcore #クエリちゃん pic.twitter.com/Jyjo0Zkv7I
— jyuko (@jyuko49) 2019年2月5日
CDジャケット
ジャケット画像を検知して、キャラクターの表示と（ミュートしてるからわからないけど） 音源の再生を行なっています。
#マスコットアプリ文化祭 でCD貰ったのでARでジャケットに @pronama ちゃん召喚。
— jyuko (@jyuko49) 2019年3月15日
曲も同時に流れるけど、権利的にアウトなので動画はミュートしてます。 pic.twitter.com/bYebqnfB2s
使い方
開発環境はUnity、MacBook Proで開発しています。
記事執筆時点の環境は以下。
- Unity 2018.2.6f1
- ARCore SDK for Unity v1.7.0
ARCore SDK for Unityを使う上での設定は割愛します。
Augmented ImageDatabaseを作成する
公式のdeveloper guideに書いてある通りなのですが、正直ちょっとわかりにくいので図で示します。
ポイントとしては、
- 画像を右クリックしないとAugmented ImageDatabaseが作れない
- 作成時に選択した画像の数でAugmented ImageDatabaseが作成される
という点です。
Unityエディタ上でAugmented ImageDatabaseに登録した画像を差し替えたり、画像を削除する（減らす）ことはできますが、画像を追加する方法が不明です。そのため、最初に10個くらい画像を登録しておいた方が便利です。
なお、リファレンスを見るとAddImage()というメソッドが用意されているので、スクリプトからの追加はできそうです。
上記の手順で作成するとNameが連番のIDになっているため、必要に応じてわかりやすい値に変更します。
SessionConfigにAugmented ImageDatabaseをセットする
ARCore v1.2.0以上であれば、ARCoreSessionConfigにAugmented Image Databaseの項目があるはずです。ここに作成したImageDatabaseをセットします。
また、Camera Focus ModeはAuto（オートフォーカス）にしておいた方が画像の検知精度が上がります。
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.ExtentX、image.ExtentZで画像の大きさが取得できるため、この値を使ってlocalScaleを調整できます。
後者に関しては、image.TrackingStateがTrackingState. PausedになったタイミングでarObject.setActive(false)、TrackingState. StoppedになったらDestroy(arObject)する等の実装ができます。
Tips
ImageDatabaseに使う画像の作り方
画像を用意する方法としては、大きく分けて2パターンあります。
検知対象を撮影して画像を作る
今回作ったアプリの中では、プリントTシャツ、年賀状（自分で印刷した物ではないため）がこちらのパターンです。
手軽ではあるものの、撮影時の角度や光の加減によっては検知がしにくくなります。この方法で画像を用意する場合は、十分に明るい場所で正面からの画像を撮った方がよいです。
画像を検知対象に表示・印刷する
元画像が先にあり、その画像から検知対象を作るパターンです。元画像を画面表示しているスライドショー、スマートウォッチが該当します。
検知対象を撮影する方法よりも、こちらの方が検知の精度を上げやすいと思います。
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モデルを利用ガイドラインに基づいて利用しています。
