Vuforia Studio 重畳AR備忘録：イメージターゲットで写真でなく実物に重ね合わせ


#はじめに

Vuforia Studioでは、現実にARを重畳表示する手段として、イメージターゲットが使える。イメージターゲットは、写真やイラストに対してARの重ね合わせをする使い方が多いと思うが、実は、写真に写っている立体的な実物そのものに対してもARの重ね合わせができる場合がある。その例を、備忘録としておく。

Vuforia Studioでは、イメージターゲットの他に、六角形マーカーで認識するThingMark、3D形状で認識するモデルターゲット、平面を認識して表示位置を指定する空間ターゲット、がある。[ブロックの3Dモデルで簡単モデルターゲット@PTC社ブログ](https://www.ptc.com/ja/blogs/ar/easy-model-targeting-with-3d-models-of-blocks-jp) に、わかりやすい解説と、レゴを使ってモデルターゲットを試せる例が記載されている。

#前提

この備忘録は、Vuforia Studioで、ARコンテンツを独力で作成できる人が対象。

#イメージターゲットで実物に重ね合わせる例

###重ね合わせ対象を選ぶ

重ね合わせ対象の立体物をカメラから見たときに、出来る限りイメージターゲットに使う写真と同じような見え方になると、イメージターゲットとして認識しやすいだろうと、容易に想像できる。そこで、まずは、凹凸の比較的少ない平面を持つ立体物を対象として、その平面の写真をイメージターゲットに使ってみる。
そのような特徴を持つものとして、今回は電卓を選択した。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297270/b74400b0-2b3b-ea4d-421c-9ec8dc385436.png)

###イメージターゲットを作成する

まずは、イメージターゲットに使用する写真を撮影する。電卓では、ボタン配列の箇所が平面的なので、それを写真に撮る。イメージターゲットに使う写真には、特徴として認識させたい箇所のみが写っていればよさそうなので、その箇所を写真から切り出す。以下は、Windowsのペイントアプリを使い、電卓の写真からボタン配列の部分のみを切り出した例。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297270/a7b892ca-428d-1c4e-78ee-770a9f930e4e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297270/433afbcb-1a01-2c3d-b0bf-d14f8884999d.png)
切り出した写真をイメージターゲットに使うことにする。

Vuforia Studioで、新規ARプロジェクトをモバイルで作成する。そして、3Dキャンパスに、イメージターゲットを配置し、イメージとして上記の切り出した写真を選択する。これで、イメージターゲットを作成できた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297270/4b1325ef-bd0c-16a0-1794-085f28632b9a.png)

###重ね合わせ表示するAR要素を追加する

3Dイメージを配置し、リソースとして、重ね合わせ表示したい画像（本例では、緑色の枠画像）を選択する。スケールの値を変更して、追加画像の大きさを調整し、また、ドラッグ＆ドロップで水平移動して表示させたい位置に移動する。そのままだとイメージターゲットと同じ平面に表示されて都合が悪いので、追加した3Dイメージの表示高さ（Y座標）の値を変更して少し離す。この値は、Vuforia Studioの画面で適当かどうかを確認し、必要なら調整する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297270/36e551ec-b775-f68f-4d12-ab73bd35b088.png)
重ね合わせ表示したい画像の追加は、先に追加した画像のコピー＆貼付けと移動で作成すると簡単。追加済の画像の3Dイメージウイジェットを選択して、コピーし、貼付ける。同じ位置に追加されているので、追加した3Dイメージウイジェットを選択して、ドラッグ＆ドロップで移動する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297270/356cbfde-32e5-ec8f-d027-6a5af257c63e.png)

###パブリッシュして、実物への重ね合わせAR表示を確認する

プロジェクトが作成できたら、早速パブリッシュして、タブレットの Vuforia View アプリで動作確認してみる。QRコードから作成したARを呼出し、カメラ画像に電卓を映し出す。おぉ、実物に重ね合わせてAR表示がされた！出来た！
![CalcImageTarget.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297270/4adf0916-5d93-5c3a-02db-c0ae0ed534db.gif)
ボタン配列の箇所が比較的平面なので、元の写真と少し異なる角度からのカメラ画像でも、重ね合わせに成功しているようだ。

###他の重ね合わせ対象の例

他の立体物の成功例について紹介する。

・自動販売機の例
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297270/ab09b380-7ff3-9049-9c22-5ac8b68b7208.png)

イメージに使う写真は、濃淡で形状がはっきりわかる方が望ましいようだ。例えば、全体的に黒のキーボードだと、認識がよくない。また、文字認識はしてくれない。形状の大まかな特徴の一致判定をするようで、文字が違っていてもターゲットとして認識される。

・プリント基板上で見つけたいピン位置などを ARで矢印表示する例 (2021/04/19追記）
　[Vuforia Studio 重畳AR備忘録：プリント基板でARを活用する](https://qiita.com/tm181001/items/45f77242a7826d2b3248)
　

#おわりに

Vuforia Studioで、イメージターゲットを使い、写真に写っている立体的な実物そのものに対してもARの重ね合わせができる例を記載した。立体的な実物に対する重ね合わせには3Dデータや貼付けマーカーが必要と思いがちだが、写真を撮影して利用するだけで実物重ね合わせを実現できるなら、重ね合わせAR作成が非常に簡単になる。さすが、Vuforia！

どこのボタンを操作すればいいのか？ どこの操作器を操作すればいいのか？ それが現場で実物に重ね合わせ表示がされてすぐに分かる！ といった ARを、Vuforia Studioなら簡単に作成できそうだ。

#注意

立体物のカメラ画像の中に、撮影した平面の写真の特徴と一致した箇所があるかどうかを抽出するという性質のため、万能ではない。抽出ができてARを重ね合わせするには、
・写真撮影したときの位置と向きと、ほぼ同じ位置と向きでタブレットやスマホを保持する
・明るさの強弱や、影の方向の影響を受けにくい
といった条件が必要そうである。実用的に使うには、何度試してもほぼ成功することの確認をお忘れなく。

ファイル名に日本語などマルチバイト文字があると、パブリッシュしてもイメージターゲットが作成されずにエラーとなるので、イメージターゲットに使うファイル名に注意。（2021/04/19追記）