Unityで始めるWebAR with ZapWorks

203.7K Views

August 19, 22

スライド概要

2022/09にエンジニアカフェで実施した講座の資料
2023/02/03 資料をアップデートしました。

profile-image

可視化技術や人間計測/空間計測技術を活用した問題解決に関する研究開発。 ARコンテンツ作成勉強会(AR_Fukuoka)を主催。

シェア

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
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.

Discord ご質問があれば是⾮こちらで https://discord.gg/XzrPmgGbfn

6.

ハッシュタグ #AR_Fukuoka

7.

今⽇のゴール 自然な特徴量を用いたマーカーを用いたWebAR開発を体験 https://youtu.be/u26tuv_C1qk

8.

必要なもの • 開発⽤PC (Win/Mac) • カメラ付きのスマホ/タブレット • 指定バージョンのUnity (下記資料参照) https://github.com/TakashiYoshinaga/ARFukuoka/raw/main/ZapWorksUnity_202208 19/preparation2022.pdf • PC搭載のWebカメラ(もしあれば)

9.

演習⽤素材のダウンロード http://arfukuoka.lolipop.jp/ zapworks/sample.zip

10.

Unity Hub起動 Unity Hub

11.

プロジェクトの作成 (1/6) ①Projects ②New Project

12.

プロジェクトの作成 (2/6) ここをクリック

13.

プロジェクトの作成 (3/6) 2021.3.X

14.

プロジェクトの作成 (4/6) 3D

15.

プロジェクトの作成 (5/6) プロジェクト名(例: AR_Test) 保存場所 Create Project

16.

プロジェクトの作成 (6/6) Unity Editorが起動すればOK

17.

Unity Editorの概要 Sceneタブ オブジェクトの一覧 オブジェクトの配置を行う プロジェクト内のフォルダやファイルの一覧

18.

ZapWorksのプロジェクト作成 ARコンテンツは専用のウェブサイトで管理されます https://zap.works

19.

ZapWorksのプロジェクト作成 Log in

20.

ZapWorksのプロジェクト作成 Create Project

21.

ZapWorksのプロジェクト作成 Universal AR

22.

ZapWorksのプロジェクト作成 Unityを選択

23.

ZapWorksのプロジェクト作成 QR codeを選択

24.

ZapWorksのプロジェクト作成 ここを好きな名前に変更

25.

SDKの取得 Install/Download

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.

表⽰するオブジェクトの取得 Webブラウザを開き、Google等でAsset Storeで検索

65.

表⽰するオブジェクトの取得 アセットストアを開く

66.

表⽰するオブジェクトの取得 ログイン

67.

表⽰するオブジェクトの取得 Kyleで検索

68.

表⽰するオブジェクトの取得 Space Robot Kyleを開く

69.

表⽰するオブジェクトの取得 マイアセットに追加する ※既にKyleを使ったことがある人はこの手続きは不要

70.

表⽰するオブジェクトの取得 同意する

71.

表⽰するオブジェクトの取得 Unityで開く ※この方法でうまくUnityにモデルを取り込めない場合は補足ページ参照

72.

表⽰するオブジェクトの取得 Space Robot Kyle Import

73.

表⽰するオブジェクトの取得 Import

74.

補⾜

75.

表⽰するオブジェクトの取得 Window

76.

表⽰するオブジェクトの取得 Package Manager

77.

表⽰するオブジェクトの取得 ドロップダウンを開く My Assets

78.

表⽰するオブジェクトの取得 Kyleで検索

79.

表⽰するオブジェクトの取得 Space Robot Kyle Import

80.

表⽰するオブジェクトの取得 Import

81.

補⾜おわり

82.

表⽰するオブジェクトの取得 Robot Kyleが追加されればOK

83.

表⽰するオブジェクトの設定 Assets - Robot Kyle - Model

84.

表⽰するオブジェクトの設定 Zappar Image Tracking Target に重ねるようにドラッグ&ドロップ Robot Kyle

85.

表⽰するオブジェクトの設定 Robotが表⽰される

86.

表⽰するオブジェクトの設定 Zappar Image Tracking Target の⼦要素になっていることを確認

87.

表⽰するオブジェクトの設定 Robot Kyle

88.

表⽰するオブジェクトの設定 移動/回転/伸縮 移動 回転 伸縮

89.

表⽰するオブジェクトの設定 こんな感じ Rotationを直接操作してもOK (Y=180で反対向き)

90.

Ctrl/Command + S で保存

91.

Unity Editorでの動作確認 Playボタン

92.

Unity Editorでの動作確認

93.

Unity Editorでの動作確認 Playボタンをもう⼀度クリックして停⽌

94.

WebARとして公開 File

95.

WebARとして公開 Build Settings

96.

WebARとして公開 WebGL Switch Platform

97.

WebARとして公開 Zappar->Editor ->Update Project Settings To Publish

98.

WebARとして公開 Player Settings

99.

WebARとして公開 Resolution and Presentation Zapparを選択

100.

WebARとして公開 Build

101.

WebARとして公開 新しいフォルダー わかりやすい名前に変更 (この資料ではbuild) フォルダーの選択

102.

しばらく待つ

103.

WebARとして公開 アクセスを許可する ※このダイアログは表示されない場合もあります

104.

WebARとして公開 buildフォルダを開く

105.

WebARとして公開 ファイルとフォルダを全て選択してzipに圧縮

106.

WebARとして公開 Zipファイルが⽣成される (名前は任意)

107.

WebARとして公開 今回作成したプロジェクトを開く

108.

WebARとして公開 Upload & Publish

109.

WebARとして公開 ここにzipファイルをドラッグ&ドロップ ※無料版は10MBまで

110.

WebARとして公開 任意のバージョン名 (ex. 0.0.1)

111.

WebARとして公開 Upload & Publish

112.

WebARとして公開 QRが発⾏される

113.

動作確認 スマホでQRコードを読む

114.

動作確認

115.

問題点 マーカーを⾒失っても表⽰される

116.

マーカー検出と表⽰の連動 Zappar Image Tracking Target の⼦要素を表⽰

117.

マーカー検出と表⽰の連動 Zappar Image Tracking Target

118.

マーカー検出と表⽰の連動 On Seen Event (マーカーを検出した時) +

119.

マーカー検出と表⽰の連動 RobotKyleをドラッグ&ドロップ

120.

マーカー検出と表⽰の連動 No Function と書かれた ドロップダウンメニューを開く

121.

マーカー検出と表⽰の連動 GameObject->SetActive

122.

マーカー検出と表⽰の連動 チェックをオン

123.

マーカー検出と表⽰の連動 On Not Seen Event (マーカーを⾒失った時) +

124.

マーカー検出と表⽰の連動 RobotKyleをドラッグ&ドロップ

125.

マーカー検出と表⽰の連動 GameObject->SetActive

126.

マーカー検出と表⽰の連動 チェックはオフのまま

127.

マーカー検出と表⽰の連動 Preview Image

128.

マーカー検出と表⽰の連動 チェックをオフ

129.

マーカー検出と表⽰の連動 File -> Build Settings

130.

マーカー検出と表⽰の連動 Build

131.

マーカー検出と表⽰の連動 上書き保存

132.

マーカー検出と表⽰の連動 プロジェクト名->出⼒先フォルダ (この資料ではbuildフォルダ) 既にあるzipを削除

133.

マーカー検出と表⽰の連動 ファイルとフォルダを全て選択

134.

マーカー検出と表⽰の連動 Zipが⽣成される

135.

WebARとして動作確認 Upload/Publish

136.

WebARとして動作確認 ここにzipファイルをドラッグ&ドロップ

137.

WebARとして動作確認 任意のバージョン名 (ex. 0.0.2)

138.

WebARとして動作確認 Upload & Publish

139.

WebARとして動作確認 スマホでQRコードを読む

140.

動作確認

141.

完成︕

142.

ハッシュタグ #AR_Fukuoka