UnityとZapWorksで始めようWebAR開発

2021年12月11日：ハンズオン資料を公開しました。
2022年02月26日：スライドをリニューアルしました。

1. Unityで始めようWebAR ZapWorksを使ったAR開発
2. ⾃⼰紹介 ⽒名︓吉永崇(Takashi Yoshinaga) 専⾨︓ARを⽤いた医療⽀援や運動計測 Volumetric Video コミュニティ︓ARコンテンツ作成勉強会 主催
3. ARコンテンツ作成勉強会の紹介 p 2013年5⽉に勉強会をスタート。 p ARコンテンツの作り⽅をハンズオン形式で学ぶ p ⼈数は5~10名程度の少⼈数で実施 p 参加条件はAR/VRに興味がある⼈(知識不要) p 各地で開催 (福岡、熊本、宮崎、⻑崎、⼤分、 ⿅児島、⼭⼝、広島、札幌、関東)
4. Twitterと勉強会ページで情報を発信しています @AR_Fukuoka Googleで「AR勉強会」で検索
5. #AR_Fukuoka ハッシュタグ
6. 今⽇のゴール 自然な特徴量を用いたマーカーを用いたWebAR開発を体験 https://youtu.be/u26tuv_C1qk
7. 事前準備 http://arfukuoka.lolipop.jp/zapworks/pr eparation2022_2.pdf
8. 演習⽤素材のダウンロード http://arfukuoka.lolipop.jp/ zapworks/sample.zip
9. Unity Hub起動 Unity Hub
10. プロジェクトの作成 (1/6) ①Projects ②New Project
11. プロジェクトの作成 (2/6) ここをクリック
12. プロジェクトの作成 (3/6) 2019.4.X
13. プロジェクトの作成 (4/6) 3D
14. プロジェクトの作成 (5/6) プロジェクト名(例: AR_Test) 保存場所 Create Project
15. プロジェクトの作成 (6/6) Unity Editorが起動すればOK
16. Unity Editorの概要 Sceneタブ オブジェクトの配置を行う オブジェクトの一覧 プロジェクト内のフォルダやファイルの一覧
17. ZapWorksのプロジェクト作成 https://zap.works ARコンテンツは専用のウェブサイトで管理されます
18. ZapWorksのプロジェクト作成 Log in
19. ZapWorksのプロジェクト作成 Create Project
20. ZapWorksのプロジェクト作成 Universal AR
21. ZapWorksのプロジェクト作成 Unityを選択
22. ZapWorksのプロジェクト作成 QR codeを選択
23. ZapWorksのプロジェクト作成 ここを好きな名前に編集
24. SDKの取得 Download SDK
25. SDKの取得 Unity版をクリック
26. SDKの取得 SDKのURLをコピー
27. このサイトはまたあとで使うので開いておきましょう
28. SDKをUnityプロジェクトに導⼊ Window Package Manager
29. SDKをUnityプロジェクトに導⼊ ▼をクリック
30. SDKをUnityプロジェクトに導⼊ In Project
31. SDKをUnityプロジェクトに導⼊ +をクリック
32. SDKをUnityプロジェクトに導⼊ Add package from git URL
33. SDKをUnityプロジェクトに導⼊ 先ほどZapWorksのページで コピーしたSDKのURLを貼り付ける
34. SDKをUnityプロジェクトに導⼊ Add
35. SDKをUnityプロジェクトに導⼊ しばらく待つとUniversal ARが追加される
36. 補⾜
37. 補⾜ 下記のようなエラーが出てUniversal ARがインストールされない場合︓ GitHubの設定を⾒直すとうまく動作するかと思います。 ただし、今回はリモートでのハンズオンで環境確認が難しいので 別の⽅法でSDKを取得して開発を続けましょう。
38. 補⾜︓SDKのダウンロード GitHub Desktopを起動してClone Repository on your Hard Drive をクリック。 (下記のような表⽰でない場合は次のページ) Clone Repository from Internet
39. 補⾜︓SDKのダウンロード GitHub Desktopを起動してClone Repository...をクリック File -> Clone Reapository...
40. 補⾜︓SDKのダウンロード Webブラウザで先ほどコピーしたURLを貼り付ける https://github.com/zappar-xr/universal-ar-unity.git URL URLをペースト Clone
41. 補⾜︓SDKのダウンロード ダウンロード完了 universal-ar-unityになればOK
42. 補⾜︓SDKをUnityプロジェクトに導⼊ Add package from git disk..
43. 補⾜︓SDKをUnityプロジェクトに導⼊ Document内のGitHubフォルダ universal-ar-unity
44. 補⾜︓SDKをUnityプロジェクトに導⼊ package.json Open
45. 補⾜︓SDKをUnityプロジェクトに導⼊ Universal ARが追加されていればOK
46. 補⾜おわり
47. ARカメラの設定 Main Cameraを削除
48. ARカメラの設定 Zappar
49. ARカメラの設定 Camera -> Rear Facing Camera
50. ARカメラの設定 Zappar Camera が追加される
51. マーカーの設定 Zappar
52. マーカーの設定 Image Tracking Target
53. マーカーの設定 Zappar Image Tracking Targetが追加される
54. マーカーの設定 Zappar Image Tracking Targetダブルクリック
55. マーカーの設定 デフォルトのマーカーが近くに表⽰される
56. マーカー画像の差し替え Zappar
57. マーカー画像の差し替え Editor -> Open Image Trainer
58. マーカー画像の差し替え マーカーにしたい画像を選択
59. マーカー画像の差し替え Startをクリック
60. マーカー画像の差し替え OKをクリック しばらく待つと特徴点抽出が終わりマーカーのデータが⽣成される
61. マーカー画像の差し替え Zappar Image Tracking Target
62. マーカー画像の差し替え Targetから画像名.zptを選択 (ex. marker.zpt) ※新しいマーカーの情報がすぐTargetのリストに反映されないことがあります
63. マーカー画像の差し替え 画像が差し変わればOK
64. 表⽰するオブジェクトの取得 Window
65. 表⽰するオブジェクトの取得 Asset Store
66. 表⽰するオブジェクトの取得 Asset Storeタブ Kyleで検索
67. 表⽰するオブジェクトの取得 これをクリック
68. 表⽰するオブジェクトの取得 Download
69. 表⽰するオブジェクトの取得 Import
70. 表⽰するオブジェクトの取得 Import
71. 表⽰するオブジェクトの取得 Robot Kyleが追加されればOK
72. 表⽰するオブジェクトの設定 Assets - Robot Kyle - Model
73. 表⽰するオブジェクトの設定 Robot Kyle Zappar Image Tracking Image に重ねるようにドラッグ&ドロップ
74. 表⽰するオブジェクトの設定 Robotが表⽰される
75. 表⽰するオブジェクトの設定 Zappar Image Tracking Target の⼦要素になっていることを確認
76. 表⽰するオブジェクトの設定 Robot Kyle
77. 表⽰するオブジェクトの設定 移動/回転/伸縮 移動 回転 伸縮
78. 表⽰するオブジェクトの設定 こんな感じ Rotationを直接操作してもOK (Y=180で反対向き)
79. Ctrl/Command + S で保存
80. Unity Editorでの動作確認 Playボタン
81. Unity Editorでの動作確認
82. Unity Editorでの動作確認 Playボタンをもう⼀度クリックして停⽌
83. WebARとして公開 File
84. WebARとして公開 Build Settings
85. WebARとして公開 WebGL Switch Platform
86. WebARとして公開 Player Settings
87. WebARとして公開 Resolution and Presentation Zappar2019を選択
88. WebARとして公開 Build
89. WebARとして公開 新しいフォルダー わかりやすい名前に変更 (この資料ではbuild) フォルダーの選択
90. しばらく待つ
91. WebARとして公開 アクセスを許可する
92. WebARとして公開 buildフォルダを開く
93. WebARとして公開 ファイルとフォルダを全て選択してzipに圧縮
94. WebARとして公開 Zipファイルが⽣成される (名前は任意)
95. WebARとして公開 Projectsをクリック
96. WebARとして公開 今回作成したプロジェクトを開く
97. WebARとして公開 Upload & Publish
98. WebARとして公開 ここにzipファイルをドラッグ&ドロップ
99. WebARとして公開 任意のバージョン名 (ex. 0.0.1)
100. WebARとして公開 Upload & Publish
101. WebARとして公開 QRが発⾏される
102. 動作確認 スマホでQRコードを読む
103. 動作確認
104. 問題点 マーカーを⾒失っても表⽰される
105. マーカー検出と表⽰の連動 Zappar Image Tracking Target の⼦要素を表⽰
106. マーカー検出と表⽰の連動 Zappar Image Tracking Target
107. マーカー検出と表⽰の連動 On Seen Event (マーカーを検出した時) +
108. マーカー検出と表⽰の連動 RobotKyleをドラッグ&ドロップ
109. マーカー検出と表⽰の連動 No Function と書かれた ドロップダウンメニューを開く
110. マーカー検出と表⽰の連動 GameObject->SetActive
111. マーカー検出と表⽰の連動 チェックをオン
112. マーカー検出と表⽰の連動 On Not Seen Event (マーカーを⾒失った時) +
113. マーカー検出と表⽰の連動 RobotKyleをドラッグ&ドロップ
114. マーカー検出と表⽰の連動 GameObject->SetActive
115. マーカー検出と表⽰の連動 チェックはオフのまま
116. マーカー検出と表⽰の連動 Preview Image
117. マーカー検出と表⽰の連動 チェックをオフ
118. マーカー検出と表⽰の連動 File -> Build Settings
119. マーカー検出と表⽰の連動 Build
120. マーカー検出と表⽰の連動 既にあるzipを削除 プロジェクト名->出⼒先フォルダ (この資料ではbuildフォルダ)
121. マーカー検出と表⽰の連動 ファイルとフォルダを全て選択
122. マーカー検出と表⽰の連動 Zipが⽣成される
123. WebARとして動作確認 ここにzipファイルをドラッグ&ドロップ
124. WebARとして動作確認 任意のバージョン名 (ex. 0.0.2)
125. WebARとして動作確認 Upload & Publish
126. WebARとして動作確認 スマホでQRコードを読む
127. 動作確認
128. 完成︕
129. #AR_Fukuoka ハッシュタグ