⑦[Android][Kotlin][Vuforia][AR]Vuforiaで独自VuMarkを作るのが無理ゲーすぎた話。
第1回 VuforiaでARの初めの一歩
第2回 Vuforiaのサンプルコード(Image Targetのみ)を動かしてみた。
第3回 動画再生を板ポリ上で実行するサンプルコードを作ってみた。
第4回 Vuforiaで動画再生ARを実装してみた。
第5回 Vuforia11.4.4の公式サンプルコードを動かしてみた。
お薦めしません: 第6回 VuforiaのVuMarkを動かしてみた。
お薦めしません: 第7回 Vuforiaで独自VuMarkを作ってみた。←挑戦中 ←無理ゲーすぎた
第8回 Vuforia(Image Target)を独自マーカーで動かしてみた。
第9回 Vuforia(Image Target)を独自マーカーの複数検出させてみた。
VuMarkができたら便利だったのに!
Abstruct
- VuMarkのマーカテンプレートを作成 → 登録 → データセット取得 → 組み込んでビルド → アプリ起動までが上手くいった話
- 最終フェーズのマーカ認識ができなかった話
- Vuforiaのバージョン 11.4.4。
※Vuforiaには3Dモデルを認識するModel Targetと、画像を認識するImage Targetってのがあって、この記事はImage Targetの話になります。
背景
Vuforiaは昔々にFrameMarkerというものがあってですね。それがなかなか手軽で認識精度がよかったんだよなぁ。
↑こんな感じの
中心部分には画像を置いても動作する
今のバージョンなくなってて、VuMarkが継承したんだろうと思って頑張ってたんだけどね。。。
そもそもImage Targetには、一般写真やら画像やらをそのままマーカーにするImage Markerと、カスタムQRコードみたいな見た目を自由にデザインできるって喧伝してるVuMarkというのがある。
Image Markerの場合
Image Markerの方が手軽でいいのだけど、そのまま使うといろいろ運用面で苦労することになる。
具体的には、マーカー画像の追加/削除/変更が発生する度に下記手順を踏む必要がある。
- Vuforiaのサイトにアクセス
- マーカー画像登録
- データセット取得
- アプリに組み込んで、ビルド
- アップデートリリース ※公開してた場合
これはめんどい。かなりめんどい。
少なくともマーカー画像は動的に差し替えができないと、制約が厳しすぎてビジネスとしては展開できない。
VuMarkの場合
でも、VuMarkならテンプレート作って登録→ビルドを1回するとあとは数百パターンの認識が可能になる。ビルドし直しとかアップデートリリースとかしなくてよくて、これだったらのちのち商用展開とかも可能になる。
というのが開発のモチベーションだったんだけど、無理ゲーだったという話。
とはいえ、データセットを組み込んでビルド → 起動までは出来たので、誰かの役に立つかもという事でこの記事にまとめておきます。
ざっくり手順(この手順まではうまくいった)
- VuMarkをデザインしてSVGで出力
- 生成したSVGで、Vuforia Portalにログイン → データセット生成
- Android プロジェクトに導入 (.xml / .dat)
- kotlin/c++で検出処理を書く
準備
- android端末
- 開発用PC(Android Studioのインストールは済ませておく。)
- イラレ(Adobe Illustrator)必須。※途中VuMarkスクリプトの実行必須。
- android端末をつないで、デバッグができる様にしておく。
- SDKと公式サンプルコードは今回一緒にgithubにコミットしたんで不要。
- Vuforiaのアカウント作成 前回の説明の準備1をやっておく。
- Vuforiaのライセンスキー取得 前回の説明の準備2をやって取得しておく。
手順1. VuMarkマーカテンプレートをデザインしてSVG出力
第6回では断念したこの手順こそがオリジナルのVuMarkマーカーにするのに重要。
そもそもデザインするには下記手順が必須。
- イラレ(Adobe Illustrator)のインストール
- VuMarkスクリプト(Vuforia VuMark Designer)のインストール
※解凍して"C:\Program Files\Adobe\Adobe Illustrator CC\Presets\en_US\Scripts"に配置するだけ。
使い方は操作してると分かってくる。
けどあまりにめんどいので、テキストエディタでSVGファイルを作成する方法を模索したんだけど、"VuMark-Feedback"レイヤだけは自動生成部分なので無理だった。。。
無理ゲーポイント:
- テキストエディタではVuMark用のSVGファイルを作れない。
- VuMark-BrightElements と VuMark-DarkElements を対で30数個作成する必要があってうざい。慣れてる人はスクリプトとかで一括実行とかできるのだろうけど、VuMark マーカ一1個作りたいだけなのに覚えるのってコスパ悪！
- 検証スクリプトがあって、実行するとデザインのまずいところをエラー表示して説明してくれるんだけど、これが全然わからない。
※概要は分かるんだけど、具体的に何が悪いのかは勘まかせ。ドツボにハマること多数。。。 - レイヤ順はSetupスクリプトのままだと、VuMark-xxxElements系が隠れてしまう。ここでもハマってしまった。
それらを乗り越えて、無事SVGファイルをゲット。
テンプレートだから余計なピンクとかが含まれる(自動生成部分で必要)
手順2. 生成したSVGで、Vuforia Portalにログイン → データセット生成
データセット生成の手順はざっくりとは下記の通り。
1. Vuforia developer portalにログイン
2. 作成したVuMarkマーカテンプレートを登録
3. VuMarkを生成 → ダウンロード
4. データセット(xml / dat)をダウンロード
-
Vuforia developer portal にログイン
-
Target Manager → Generate Database 押下
Database Name: 適当に
Type: VuMark
→ Generate 押下 -
aaa 選択
-
Add Target 押下 → 下記入力 → Add 押下
File: 手順1で生成したsvgファイル
width: 5cmとするので0.05
Name: momo001 ※これも適当に
-
待つ。
1分ぐらい。
Processingになってるので完了まで待つ。画面下部にRefreshボタンがあるので表示更新はこれを使う。
※この手順で Status が Activeになった時はかなりホッとしたょ。。。
-
VuMarkを生成 → ダウンロード
Generate VuMark 押下 → 下記入力 → Download
ID: 111 ※これも適当に
Graphic Format: PNG
-
得られたVuMarkマーカがコレ↓
動作確認時に、このマーカーをスキャンさせる。
ピンクっぽい枠線がなくなっている -
データセット(xml / dat)をダウンロード
Android Studio, Xcode or Visual Studio を選ぶ(Androidアプリだからね)
-
ゲット!!
手順3. Android プロジェクトに導入 (.xml / .dat)
1. 下記に今回のコードをコミットしたのでそれをDL。
2. Android Studioでプロジェクトを開く。
cloneしたAndKot-VuforiaVideoPlaybackを開く。
3. 認証情報を設定した後、ビルドする。
Vuforiaのライセンス画面を開いて license Key をコピー。
↓
Android Studioで、"AppController.cpp"を開き、licenseKeyに、準備2でコピーしたライセンスを貼り付けます。
そして、ビルド。
※もし、この手順を飛ばしたら、アプリ起動時に下記エラーが発生します。
4. 手順2でDLしたvuforiaのデータセット(.xml/.dat)をプロジェクトに組み込む
ゲットした aaa.zip は解凍するとaaa.xml / aaa.datの2ファイルが出来るので、その2つをAndroid プロジェクトに追加する。
app/
└── src/
└── main/
└── assets/
└── VuMark/
├── aaa.dat
└── aaa.xml
手順4. kotlin/c++でVuMark検出処理を書く
ソースコードみて下さい。
+ if (mTarget == VUMARK_ID) {
+ auto vuMarkConfig = vuVuMarkConfigDefault();
+ vuMarkConfig.databasePath = "VuMark/aaa.xml";
+ vuMarkConfig.templateName = "vumark_aaa999_ok2"; // ← aaa.xmlに記載の内容
+ vuMarkConfig.activate = VU_TRUE;
+
+ VuVuMarkCreationError vuVuMarkCreationError;
+ if (vuEngineCreateVuMarkObserver(mEngine, &mObjectObserver, &vuMarkConfig, &vuVuMarkCreationError) != VU_SUCCESS)
+ {
+ LOG("Error creating VuMark observer: 0x%02x", vuVuMarkCreationError);
+ mErrorMessageCallback("Error creating vumark observer");
+ return false;
+ }
+ }
- if (mTarget == IMAGE_TARGET_ID)
+ else if (mTarget == IMAGE_TARGET_ID)
で、実行。ここまではうまくいった。
※読込み処理に成功した時もホッとした。
githubはここ↓ ※ 失敗情報が役に立つかは疑問だけど。
.gitignore ... 気にしない
MortonTuxedos.ai ... Vuforia公式のサンプル
MortonTuxedos.svg ... Vuforia公式のサンプル
MortonTuxedos_temp.ai... 作業の残骸
README.md ... 気にしない
Vumark_aaa999_ok2.svg... イラレのVuMarkスクリプトで成功したもの
vumark_aaa999_ok.ai ... イラレのVuMarkスクリプトで成功したもの
vumark_aaa999_ok2.ai ... これも成功したもの
最終フェーズ マーカ認識ができなかった話
あとは、動作確認するだけ。手順2.8でゲットしたマーカをスキャンさせてみたけど認識せず。
ここで心が折れた。。。
無理ゲーポイント:
- 生成したマーカーが動作するかどうかって、マーカ作成段階では分からなくって、最後の最後動作確認させるまで分かんない。
認識しなかったときの心的ダメージはいかほどか。。。
まとめ
VuMarkを使う時の注意点は、VuMarkマーカーのデザインに尽きる。
- そもそも Adobe Illustratorが必須というね。(けっこうお高いのに!)
- VuMarkのデザインは相当めんどい。
- だけど動くかどうかは不明。
- VuMark作成の有償サービスなし。
結論: VuMarkは手を出さない様がよさげ。
(時間を溶かしてしまったょ orz)
次の挑戦は
Image Markerの方で、Vuforia昔バージョンの FrameMarker的な使い方ができないか検証する。
追記 25.09.22
新アイディアが浮かんだので、新規にVuMarkを作り直したんだけど認識せず。orz
"認識の強いサンプルマーカーの一部を枠にすればイケるんじゃね？"的な発想だったんだけど。。。
↑コレ。枠にサンプルマーカーの一部を追加した。
vumark_aaa999_ok3.ai ... イラレのVuMarkスクリプトで成功したもの
Vumark_aaa999ok3.svg ... イラレで出力したSVGファイル
「誰かの役に立つと思って」
Discussion