M5Stackのジミーさんを召喚するARでMaker Faire Tokyo 2020に行った気分になろう

※関係者のみなさま、M5Stackへのリスペクトを込めておりますので、ご理解いただきますようお願いいたします。しかしながら、まずいようでしたら削除いたします。

<BR>

## ジミーさんとツーショット撮りたい！
2020年10月3日・4日東京ビッグサイトでMaker Faire Tokyo2020が開催されました。
今年は現地には行けず、Twitterのハッシュタグで追ってました。

そんななか、このようなツイートを発見しました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">さあみんなも一緒にJimmyと一緒に写真を撮ろう！<a href="https://twitter.com/hashtag/M5Stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack</a> <a href="https://twitter.com/hashtag/MFTokyo2020?src=hash&amp;ref_src=twsrc%5Etfw">#MFTokyo2020</a> <a href="https://t.co/wOSov7bCCv">pic.twitter.com/wOSov7bCCv</a></p>&mdash; ちーきく@神楽坂勤務/野良HACK (@bywaysideway) <a href="https://twitter.com/bywaysideway/status/1312221264832942080?ref_src=twsrc%5Etfw">October 3, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>




<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">観光名所みたいになってる笑 <a href="https://twitter.com/hashtag/MFTokyo2020?src=hash&amp;ref_src=twsrc%5Etfw">#MFTokyo2020</a> <a href="https://t.co/NAA0CkCFcI">pic.twitter.com/NAA0CkCFcI</a></p>&mdash; ajimitei (@ajimitei) <a href="https://twitter.com/ajimitei/status/1312259739468791808?ref_src=twsrc%5Etfw">October 3, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<br><br>
こ、これは！！

僕もM5Stackのジミーさんとツーショットとりたい！！

でも僕は今は広島にいる。

どうしたらいいのだろう！！

<br>

##ARジミーさんの誕生
そうだ！

ARだ！

ARで、ジミーさんを召喚すればいいんだ。
<br>
ARで、ジミーさんを我が家に召喚 ！！
![AR5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/3ce9ebd3-b67c-6693-ffd5-5262f0954b2f.jpeg)

近所に召喚！
![AR6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/c95c6bc0-71cf-2246-d0b6-47c2cb489910.jpeg)


あこがれのツーショット！
![AR2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/99c41eb0-5015-ee6b-cb69-97ba9367e249.jpeg)

Japanese Izakaya　にお連れしました。
![AR1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/c0c8713f-cb0f-f160-8713-62b633051440.jpeg)

<br>

##作り方

<B>Vufolia</B>というARコンテンツ作成ライブラリを使いました。
公式サイトのチュートリアルを見ながら作成しました。
https://library.vuforia.com/articles/Solution/ground-plane-guide.html

###動作確認済み環境
- Unity 2019.1.14f1
- macOS Catalina
- iOS 13.7
- Xcode 12.0.1

###ジミーさんを作成
画像加工ソフトならなんでもいいですが、
お好きなジミーさんの画像を切り取ります。

なお、最近のPhotoshopはこれくらいの切り取りがすぐかんたんにできます。Photoshop無双です。

[![Image from Gyazo](https://i.gyazo.com/b81446eec23ee8aea1842ff4710d701c.jpg)](https://gyazo.com/b81446eec23ee8aea1842ff4710d701c)

###Unity
Unityの新しい３Dプロジェクトを作成します。

Build Setting > Player Setting >
“XR Settings” の “Vuforia Augmented Reality Supported” をチェックします。

[![Image from Gyazo](https://i.gyazo.com/252c7c0c3a4efbac953876cc278c1766.png)](https://gyazo.com/252c7c0c3a4efbac953876cc278c1766)

Other settingに
「Camera Usage Descriptionに「Camera access required for target detection and tracking」と入力します。
（これであってるかどうか不明ですが、これを書いてないと「この文言を書け」というエラーが出たため）

Target minimum iOS Version を 11.0　以上にします。


[![Image from Gyazo](https://i.gyazo.com/4b70964e79fe6d688a9d8ce43b2a1b17.png)](https://gyazo.com/4b70964e79fe6d688a9d8ce43b2a1b17)

<BR>
Hierarchyで
もともとある main camera を削除し、
VuforiaのARカメラをインポートします。
（ Hierachy > Vuforia Engine > AR Camara )

![スクリーンショット 2020-10-07 23.28.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/2843502c-6f92-916e-900e-8cd547a74a54.png)
<br>
Hierarchyで、
Vuforia> Ground Plane> Ground Plane Stage

![スクリーンショット 2020-10-07 23.33.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/291592/b47bc243-8ad9-52db-a09f-b392dad1086f.png)

Sceneにこんなのが現れます。
[![Image from Gyazo](https://i.gyazo.com/108bad129dbe09cb7568fb094ba7749f.png)](https://gyazo.com/108bad129dbe09cb7568fb094ba7749f)

Ground plane Stageに、さきほど作成したジミーさんを置きます。
僕の場合は、Projectタブに新しいマテリアルを作り、Legacy Shader/ Diffuse　で、先程のジミーさん画像をでマテリアルに指定しました。
そして、新しくcubeオブジェクトを作り、先程のマテリアルを指定しました。
（うーん、文章にすると分かりづらい・・・）
※独学ですのでマテリアルの設定方法がこれでいいのか自信はありません。（動いたからヨシ状態）

[![Image from Gyazo](https://i.gyazo.com/e6652b3a2a42b5fd2b5024b971b9d201.png)](https://gyazo.com/e6652b3a2a42b5fd2b5024b971b9d201)

<br>
次に
Vuforia＞Ground Plane＞Plane Finder

このPlane FinderのContent Positioning Behaviourを先程作成したGround Plane Stageを指定します。

[![Image from Gyazo](https://i.gyazo.com/ea544d8c7a7083c18e2be959cd553149.png)](https://gyazo.com/ea544d8c7a7083c18e2be959cd553149)

<br><br>
はい、これであとはiPhoneをPCにつなげ、ビルドしたら、ジミーさん召喚ARのできあがり。


記念撮影をとったりして、MakerFaireに行った気分に浸ってください。

<br>
なお、カメラ撮影機能を実装していないので、iPhoneのスクリーンショット機能で撮影してください。

<br><br>