まりあのかわいいシールを貼れるARアプリを作ってみた

これは、[プリッカソン Advent Calendar 2019](https://adventar.org/calendars/4524) 9日目の記事です。

「プリッカソン」については主催者のなかひこくんが[１日目の記事](https://takanakahiko.hatenablog.com/entry/2019/12/01/234831)で紹介しているので、そちらをご覧ください。

プリッカソンに私は#8で初めて参加し、#9にも参加しました。そのときに「まりあのかわいいシールを貼れるARアプリ」を作っていたので、この記事ではそれを紹介しようと思います。

# 「まりあのかわいいシール」とは
「キラッとプリ☆チャン」シーズン2で、金森まりあちゃんがかわいいものにシールをペタペタとたくさん貼るシーンが度々あります。
![スクリーンショット 2019-12-08 18.06.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90023/7f3523cf-e145-e312-ab5f-7daf0bc6fbba.png)
最初は「頭おかしい奴（褒め言葉）が出てきたぞ」と思いました。しかし、まりあの「かわいい」は、ただかわいいものが好きとかそういうものではなく、全てを肯定し受け入れて、それを「かわいい」という言葉で表現しているということが次第にわかってきます。実はとんでもなく凄い子でした。

その「まりあのかわいいシール」は[プリズムストーン](https://www.takaratomy-arts.co.jp/specials/prettyrhythm/pshj/shoplist.php)店舗/WEB SHOPで購入[^1] [^2]できるのですが、たくさん貼ろうとするとお金がいくらあっても足りません。
![90AB90EF-7F08-45DB-AF64-FAB7714DED0D.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90023/20864fcd-c916-52ec-000b-98194368ac98.jpeg)
そんなわけで「まりあのかわいいシールを貼れるARアプリ」を作ろうと思い立ちました。

# ハンドトラッキング
作中でまりあがやっているのと同じように指先で貼れるようにするには、ハンドトラッキングが必要です。結論から言うと、ハンドトラッキングは今のところあまりうまくいっていません。作り始めた当初もうまくいくとは思っていませんでしたが、「やってみなくちゃわからない、わからなかったらやってみよう」[^4]の精神でやってみました。

プリッカソン#8,#9では、次の2つのやり方を試しています。

* ARKit3のPeople Occlusionを使う
* MediaPipeのハンドトラッキングを使う

## ARKit3のPeople Occlusionを使う
ARKit3のPeople Occlusionは、iPhoneのカメラの前に手だけかざしてもわりとしっかり手の内側と外側を分けてくれるので、これを使えばある程度手の動きを認識することができるのではないか、と考えました。

結果はこんな感じでした。

<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/NeVkIsTlJY">pic.twitter.com/NeVkIsTlJY</a></p>&mdash; らくさん (@rakusan) <a href="https://twitter.com/rakusan/status/1203623749238476801?ref_src=twsrc%5Etfw">December 8, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

これは、親指と人差し指で輪を作ったことを認識しています。正確には「People Occlusionで認識した領域内に穴があり、その面積が一定の範囲内かどうか」を検出しています。

この方式だと、一応手の動きに合わせてシールを貼ることはできますが、指先を認識することは難しそうです。

## MediaPipeのハンドトラッキングを使う
Googleが公開している[MediaPipe](https://github.com/google/mediapipe)というフレームワークがあり、これには顔検出や物体検出、ハンドトラッキングなどの機能が含まれています。これを使えば指先の認識ができそうです。

結果はこんな感じに。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">プリッカソンで途中までしかできなかったやつの続き。 <a href="https://t.co/uP2sa3npMG">pic.twitter.com/uP2sa3npMG</a></p>&mdash; らくさん (@rakusan) <a href="https://twitter.com/rakusan/status/1185884890484445184?ref_src=twsrc%5Etfw">October 20, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

指先の認識は一応できていますが、いくつか問題がありました。

* **まだ非常に不安定**：わりとすぐクラッシュします。メモリリークも激しいです。
* **重い**：MediaPipe単体で使えばそれなりに動きますが、ARKitと組み合わせると結構重くなってしまいました。
* **デプスが手首からの相対値？**：3Dモードで動かすとデプス値らしきものを取れるのですが、その値をよく見てみるとどうやら手首？からの相対値のようでした。これでは指先を認識できてもシールの奥行き方向の位置を指先に合わせるのが難しいです。上の動画では指先のデプスは適当な固定値にしています。

# ハンドトラッキングは一旦諦める
どうやらこのままハンドトラッキングに拘っていてもなかなか先に進みそうもありません。萌黄えもちゃんの曲「[えもめきピッカーン](https://open.spotify.com/track/31chE4hEQJAL9Nph4MiO11)」には次の一節があります。

> 失敗したっていいんだよ「うぇい！」
> 問題点を見つけよう「うぇい！」
> 次のすごいプラン話したい

ということで、一旦ハンドトラッキングは諦めて別の方法を試してみます。

## 画像トラッキング
かわいいシールの実物をトラッキング用の画像として使います。これならわりと簡単にできそうです。当然これはこのアプリを作ろうと思い立ったとき最初に考えましたが、指先を認識したいという気持ちが強すぎました。

<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/jUMksAapXn">pic.twitter.com/jUMksAapXn</a></p>&mdash; らくさん (@rakusan) <a href="https://twitter.com/rakusan/status/1201092699023036416?ref_src=twsrc%5Etfw">December 1, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

やってることは、ARKitのサンプルコードの [Detecting Images in an AR Experience](https://developer.apple.com/documentation/arkit/detecting_images_in_an_ar_experience) を少し改造してるだけです。ARKitに詳しい人なら簡単だと思うので詳細は省きますが、次のことをしています。

* かわいいシールの画像をトラッキング用の画像として事前に登録しておく
* シールの実物をトラッキング
* トラッキングしたシールのワールド座標を起点とし、シールが向いている方向にレイキャスト
* レイが交差した点までの距離が3cm以内ならARシールを貼る

# 今後の予定
一旦、画像トラッキング方式で開発を進めます。とりあえず次の機能を実装したいです。

* 貼ったシールを他の端末と共有する。これは同じローカルネットワークに接続している端末間であれば、ARKit3の機能だけでわりと簡単にできますが、モバイルネットワークを通して共有したり貼ったシールを永続化するところまでやりたいです。

最終的には、ライブ会場とかプリズムストーンショップとかをかわいいシールだらけにしたい。また、街中でふとアプリを起動してカメラ越しに見たらかわいいシールが貼られてた、ってなったらとっても楽しかわいいですよね。[^5]

[^1]: [まりあのかわいいステッカー](https://tatsunoko-mall.com/product/636)
[^2]: [まりあのかわいいフレークシール](https://tatsunoko-mall.com/product/917)
[^4]: 主人公チーム「ミラクル☆キラッツ」の3人がよく言うセリフ
[^5]: App Storeに出すには「まりあのかわいいシール」のままだと著作権的にアウトになってしまうため、そのへんをどうにかしなければなりませんが…