PLATAUEで出力したモデルをWebAR化する

# やりたいこと
- PLATAUE SDKでUnityに出力したモデルをWebAR化する
- マーカーを紙に印刷して、その上のモデルをWebARとして表示することで、実際の都市モデルを共有して街づくりワークショップなどに使えると思う  
  (おそらく[Hololab様とかがやっているワークショップ](https://blog.hololab.co.jp/entry/2022/08/01/205610)とかはHolo2とかのデバイスでそのようになことをやっているとおもう)
- WebARの作成とデプロイは(zapworks)[https://zap.works/] * を使う  
  * SaaSでWebARが作成できるサイト。こちらのサイト単独でもWebARが作成できるが、今回はSDKを利用してUnityからプロジェクトを作成する

# 参考資料
zapworksのSDK利用、デプロイはAR Fukuoka 様の下記資料を利用させていただいた
https://speakerdeck.com/takashiyoshinaga/unitytozapworksdeshi-meyouwebarkai-fa

# 環境
OS: Windows 11
Unity Version: 2019.4.40f1 LTS
(PALATAUE側のプロジェクトは2021.3.30f1)

# 手順
## Unityプロジェクトの作成
- UnityHubからプロジェクトを作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573632/906f0e01-5a16-a9f1-b707-3323335d332f.png)
- Unity 2019.4.x を選択する**  
  ** 記事執筆時点でUnity 2019.4.xはUnityHubからインストールができないため、(こちら)[https://unity.com/ja/releases/editor/archive]にアクセスしてダウンロードを行う必要がある ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573632/012bcf70-1b2c-e539-ad89-fe819455bc0c.png)
- 3D Coreを選択して、プロジェクトを作成する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573632/6b2b1256-1d0f-60fb-dfeb-e907f7832897.png)
## zapworks アカウント作成とプロジェクト作成、SDKの入手
- (zapworks)[https://zap.works/]にSignUpし、アカウントを作成する***  
      *** Google/MS/SlackのアカウントでSSO可能
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573632/f4e65e35-6dec-5583-b426-cb0b0246f2b1.png)
- アカウントの画面から + アイコンをクリックし、New Projekctの作成を行う
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573632/4960e416-1f23-05a0-0689-6f1c03d03a15.png)
- UniversalARを選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573632/72b7aa92-b8cb-49db-fefe-2a24c2e3d873.png)
- Unityを選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573632/0039d88f-a9ed-05ef-2580-71584bd6b1e0.png)
- こんな感じのprojectができるので、プロジェクト名を編集する(今回はARTestとした)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573632/ee5495d2-f5ab-7214-45ff-bb742dd7195a.png)
- 画面上部のInstall/Download をクリックする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573632/77cecf1e-1b19-0d96-e223-7f9009604c45.png)
- 表示されたgithubのURLをクリップボードにコピーする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573632/14728783-20de-6990-a153-a1c53297051d.png)
## SDKのUnityプロジェクトへの導入
- Unityプロジェクトの Window > Package Mnager を選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573632/0c2672c1-7dcd-1454-45e5-dc61c86bce95.png)
- InProject を選択後、 + をクリックし、Add package from git をクリックする
- 先ほどコピーしたSDKのURLを入力して、add をクリックする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573632/38b74494-01ed-55d9-e110-3d23f784d63e.png)
- SDKのインストールが進み、Zapperが表示されたらOK
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573632/fdded461-7607-4cbf-2eb6-da77869f25a3.png)
## プロジェクトの実装
### やること
1. ARプロジェクト用にZapper Cameraを作成
1. Markerとなる画像を取り込み、zptオブジェクトを生成してImage Tracking Target に設定する
1. Image Tracking Targetを認識した場合、そのTargetの上に表示するオブジェクトを設定する
### 手順
- Main Cameraを削除する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573632/7f95deb7-ab52-db5d-4671-d03953cbbf89.png)
- Zapper > Camera > Rear Facing Camera を追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573632/9a872a81-c066-6731-7ed2-ef7de9d5a490.png)
- Zapper CameraがHierarchyに追加されていればOK
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573632/2df37caf-f913-c418-5a2e-1151ce37fc62.png)
- Zapper > Image Tracking Target を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573632/64462f42-cd15-9943-bebb-d7c4b93a6b05.png)
- Image Tracking Target がHierarchyに追加されていればOK
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573632/c494eb6e-f292-f167-cc11-34866e458489.png)
- Zapper > Editor > Open Image Trainer を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573632/57ddd702-b753-60a6-2921-180305948448.png)
- Source Image path に画像ファイルを指定して、Startを選択する  
  必要であればhttp://arfukuoka.lolipop.jp/zapworks/sample.zip を展開いただくとSample画像がある
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573632/a1593a34-e71f-168a-be7d-33de421ddf32.png)
- しばらく待つとZapper Image Tracking Target のTarget プロパティに先ほど取り込んだzptファイルが選択可能になるので、選択する 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573632/c4d1bff5-3c74-24e8-5247-02510809e8ce.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573632/c9f5e2da-51bd-92b5-9d08-3d189b09cbe2.png)
- PLATAUEプロジェクトで生成したオブジェクトを取り込む
- Assetで右クリックを行い、Create > Folder を押下し、PLATAUEというフォルダを作る
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573632/8a7ad0eb-cf54-fc25-ecd5-9c4fd1adf8d2.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573632/2a8cf69a-2e6b-37db-7cd9-83c4199b1dca.png)
- 新規作成したフォルダを右クリックし、Import New Asset を選択し、[前回](https://qiita.com/hamanuman/items/25765ff4d4cfdafecc50) 出力したすべてのファイルを選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573632/daac75ca-eedc-a1c6-5d8a-db82f357109b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573632/ee3b6dfe-83ba-46f0-e359-396dd247ac32.png)
- Import したすべてのオブジェクトをZapper Image Tracking Targetの子要素になるようにドラッグ&ドロップする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573632/0ac484a5-9a2e-8748-d94c-2d8429739521.png)
- オブジェクトがでかすぎるので、すべてのオブジェクトを選択した状態でサイズを調整する
- 今回はRotation をY:-180、Scaleをすべて0.01とした
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573632/60b37fe0-ee29-9796-fd7f-42fb7a4c74d9.png)
- プロジェクトはこれで完成なので、プロジェクトをCrtl+Sで保存
## ビルド&デプロイ
### ビルド
- File > Settings を選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573632/5e0c56f9-d6b6-37a2-741c-44874fb45dd6.png)
- WebGLを選択して、Switch Platform を選択する & しばらくまつ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573632/4f7e3a4e-6703-4a31-a02c-b53ad1d9efe6.png)
- Player Settings を選択する
- Player > Resolution and Presentation > Zapper 2019 を選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573632/477e9e7b-c07a-d3a9-14da-7cf4da9ae61d.png)
- Build を実行し、出力先を選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573632/35f73bb9-e073-3984-d243-b79e9816ce47.png)
### デプロイ
- Buildされたディレクトリ配下のすべてのファイルを選択してzip化する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573632/46615bf8-37c7-43fe-2c71-caa0f75a5dcd.png)
- zap works で先ほど作成したプロジェクトのページにアクセスし、Uplpoad/Publishをクリックする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573632/b77c899d-796f-aeef-42d5-b533bd4ddcfe.png)
- 作成したzipファイルをドラッグ＆ドロップする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573632/bd324bda-e1bc-260c-2721-c02b28ae4bb7.png)
- バージョン情報を入力し、Uplpoad & Publish を選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573632/95a5fee4-08b9-556f-e009-5d6533ff0bd5.png)

## テスト
- プロジェクト下部のQRコードをスマートフォンなどで読み込む
- カメラ側へのアクセスを許可する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573632/a2e35abb-a42e-24a6-f8e6-5ff6b8fb88ff.png)
- マーカー画像を移すとオブジェクトが生えてくる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573632/24ac6138-bdc7-9626-461d-6f7419fb63e4.png)