【OpenCV plus UnityとARCore】図形をスキャンしてモデルを表示する

環境メモ
⭐️Mac OS Mojave バージョン10.14
⭐️Unity 2018.2.15f1
⭐️Android8.1
⭐️OpenCV plus Unity
⭐️arcore-unity-sdk-v1.8.0.unitypackage

↓↓↓実際に動かした動画
https://twitter.com/nonnonkapibara/status/1133004329261002753
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">🐣OpenCV plus + UnityとARCore🐣<br>塗り絵AR🐥で教えて頂いた📱画像読み取り📱と、<br>💕OpenCV plus Unity💕 の「Demo」を改造してみたよぉ😍<br>Android（ARCore）で図形をスキャンしたら、それに紐づくモデル🍒🍫🍩を表示してみたよぉ😊<a href="https://twitter.com/hashtag/AR_Fukuoka?src=hash&amp;ref_src=twsrc%5Etfw">#AR_Fukuoka</a> <a href="https://twitter.com/hashtag/opencv?src=hash&amp;ref_src=twsrc%5Etfw">#opencv</a> <a href="https://twitter.com/hashtag/ARCore?src=hash&amp;ref_src=twsrc%5Etfw">#ARCore</a> <a href="https://t.co/nGEOnw1Zip">pic.twitter.com/nGEOnw1Zip</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1133004329261002753?ref_src=twsrc%5Etfw">May 27, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


<img width="573" alt="スクリーンショット 2019-05-27 23.27.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/617de40f-8890-4283-dbdb-e08a91fe0624.png">

1.「OpenCV plus Unity」のAssetをダウンロードする
(無料の方）
https://assetstore.unity.com/packages/tools/integration/opencv-plus-unity-85928

<img width="826" alt="スクリーンショット 2019-05-27 23.02.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/794bc3f3-9d11-5a19-01a4-990ae44af555.png">

2.「Import」ボタンを押して、インストールする
<img width="465" alt="スクリーンショット 2019-05-25 11.31.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/410ec08b-3aae-5c52-4782-8986a20b1db5.png">


<img width="817" alt="スクリーンショット 2019-05-27 23.04.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/c7dcc57e-feed-9173-ca06-7ef7f1e507ed.png">

3.以下のエラーが出た場合
<img width="1300" alt="スクリーンショット 2019-05-27 23.06.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/53d41a65-f15c-52ac-d10b-da12a30a8c52.png">
<font color="Magenta">
Assets/OpenCV+Unity/Assets/Scripts/OpenCvSharp/Util/Utility.cs(62,23): error CS0227: Unsafe code requires the `unsafe' command line option to be specified. Enable "Allow 'unsafe' code" in Player Settings to fix this error.
</font>

4.「Edit」ー「Project Settings」-「Player」を選択する
<img width="516" alt="スクリーンショット 2019-05-25 11.41.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/86ea3e6a-a0cd-3e1d-6362-4eea66dc7316.png">

5.「Ohter Settings」の「Allow unsafe Code」をチェックONする
<img width="339" alt="スクリーンショット 2019-05-25 11.42.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/681e70f8-150d-5f3a-63f5-9a5225e42ec2.png">

<img width="528" alt="スクリーンショット 2019-05-25 11.44.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/6350d81f-042c-3bb1-296a-3e6f3f6c00c6.png">

6.デモを動かしてみる。
「Demo」ー「Identifiy_Contours_by_Shape」を選択する
<img width="890" alt="スクリーンショット 2019-05-26 14.35.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/1b1cb1b7-993e-eaae-379c-c23d6d846023.png">

7.「ContoursByShapeScene」をダブルクリックすると開く
<img width="711" alt="スクリーンショット 2019-05-27 23.14.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/f2742415-3328-792e-2d05-2969de16e13e.png">

8.デモは、下記の画像を読み込んで、
<img width="553" alt="スクリーンショット 2019-05-26 14.35.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/eaee1cf7-7f17-c92b-e027-4fd39fe8cad6.png">

9.図形に、色と図形の名前を表示する
<img width="793" alt="スクリーンショット 2019-05-26 14.35.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/cfe89ed8-f048-30a4-e86a-bf987cddfbe8.png">

1０.ARCoreをインストールする
ARCoreのインストールは、以下に記載してます。
https://qiita.com/nonkapibara/items/9d45c658587b52d98e2d

１１.スキャンする図形に紐づいて、モデルを表示する。
<img width="573" alt="スクリーンショット 2019-05-27 23.27.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/617de40f-8890-4283-dbdb-e08a91fe0624.png">


<img width="786" alt="スクリーンショット 2019-05-27 23.55.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/8c8589c6-f1fe-f247-21c6-da8c354d3888.png">

<img width="576" alt="スクリーンショット 2019-05-27 23.32.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/6b8b0e4f-4029-470a-5f6a-1ba28a7969bb.png">


１２.デモにある「ContoursByShapeScript.cs」を改造。
塗り絵ARの勉強会で教えて頂いた、画像読み取り箇所を追加して、
モデルを表示するように変更。
<img width="1013" alt="スクリーンショット 2019-05-27 23.23.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/04053307-1ca6-9427-4282-6d00942862cb.png">


１３.他にも顔認証もある
<img width="765" alt="スクリーンショット 2019-05-26 14.38.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/021ebc8c-8d4a-eca0-007d-ae0f30236d05.png">
実行すると、顔を認識するようです。
<img width="786" alt="スクリーンショット 2019-05-26 14.38.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/7d11ee61-1c84-086e-7ca2-2ebaf2814a91.png">



１４.「Marker_Detector」 ArUcoのマーカを認識するのもありました。
<img width="1021" alt="スクリーンショット 2019-05-26 14.46.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/c5639c8b-2134-5daf-fadf-048d6040cc3f.png">
<br>


OpenCVで画像を読み取る箇所は、勉強会で教わりました。
<font color="Red">
※ARコンテンツ作成勉強会：OpenCVで作る塗り絵ARの基礎
https://togetter.com/li/1354157
</font>



<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">OpenCV Plus + UnityとARCoreを使って塗り絵ARを教えて頂きました。<br>めっちゃ感動しました🤩<br>😊すごいっ‼️<br>家に帰って、パソコンの画面なのでチラツキがありますが試してみました。<br>（本当はテクスチャをプリントして読み取る）<a href="https://twitter.com/hashtag/AR_Fukuoka?src=hash&amp;ref_src=twsrc%5Etfw">#AR_Fukuoka</a> <a href="https://t.co/4lozfKeOjA">pic.twitter.com/4lozfKeOjA</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1131583194568912896?ref_src=twsrc%5Etfw">May 23, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


ピヨくまちゃんのモデルに、テクスチャを読み込んで表示しました。
<img width="236" alt="スクリーンショット 2019-05-27 23.52.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/918fc8f5-d55c-ddc5-a36b-a8e11115697a.png">
<img width="216" alt="スクリーンショット 2019-05-27 23.52.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/e41b53e7-de4a-5558-5779-fe8a8a062fd5.png">
<img width="554" alt="スクリーンショット 2019-05-27 23.53.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/1b962ebc-e878-f2d4-d5d6-62fd441832cd.png">