Unityで始めるWebAR with ZapWorks

5.5K Views

August 19, 22

スライド概要

2022/09にエンジニアカフェで実施した講座の資料

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.

ハッシュタグ #AR_Fukuoka

6.

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

7.

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

8.

Unity Hub起動 Unity Hub

9.

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

10.

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

11.

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

12.

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

13.

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

14.

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

15.

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

16.

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

17.

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

18.

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

19.

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

20.

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

21.

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

22.

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

23.

SDKの取得 Install/Download

24.

SDKの取得 SDKのURLをコピー

25.

このサイトはまたあとで使うので開いておきましょう

26.

SDKをUnityプロジェクトに導⼊ Window Package Manager

27.

SDKをUnityプロジェクトに導⼊ ▼をクリック

28.

SDKをUnityプロジェクトに導⼊ In Project

29.

SDKをUnityプロジェクトに導⼊ +をクリック

30.

SDKをUnityプロジェクトに導⼊ Add package from git URL

31.

SDKをUnityプロジェクトに導⼊ 先ほどZapWorksのページで コピーしたSDKのURLを貼り付ける

32.

SDKをUnityプロジェクトに導⼊ Add

33.

SDKをUnityプロジェクトに導⼊ しばらく待つとUniversal ARが追加される

34.

補⾜

35.

補⾜ 下記のようなエラーが出てUniversal ARがインストールされない場合︓ GitHubの設定を⾒直すとうまく動作するかと思います。 ただし、今回はリモートでのハンズオンで環境確認が難しいので 別の⽅法でSDKを取得して開発を続けましょう。

36.

補⾜︓SDKのダウンロード GitHub Desktopを起動してClone Repository on your Hard Drive をクリック。 (下記のような表⽰でない場合は次のページ) Clone Repository from Internet

37.

補⾜︓SDKのダウンロード GitHub Desktopを起動してClone Repository...をクリック File -> Clone Reapository...

38.

補⾜︓SDKのダウンロード Webブラウザで先ほどコピーしたURLを貼り付ける https://github.com/zappar-xr/universal-ar-unity.git URL URLをペースト Clone

39.

補⾜︓SDKのダウンロード ダウンロード完了 universal-ar-unityになればOK

40.

補⾜︓SDKをUnityプロジェクトに導⼊ Add package from git disk..

41.

補⾜︓SDKをUnityプロジェクトに導⼊ Document内のGitHubフォルダ universal-ar-unity

42.

補⾜︓SDKをUnityプロジェクトに導⼊ package.json Open

43.

補⾜︓SDKをUnityプロジェクトに導⼊ Universal ARが追加されていればOK

44.

補⾜おわり

45.

ARカメラの設定 Main Cameraを削除

46.

ARカメラの設定 Zappar

47.

ARカメラの設定 Camera -> Rear Facing Camera

48.

ARカメラの設定 Zappar Camera が追加される

49.

マーカーの設定 Zappar

50.

マーカーの設定 Image Tracking Target

51.

マーカーの設定 Zappar Image Tracking Targetが追加される

52.

マーカーの設定 Zappar Image Tracking Targetダブルクリック

53.

マーカーの設定 デフォルトのマーカーが近くに表⽰される

54.

マーカー画像の差し替え Zappar

55.

マーカー画像の差し替え Editor -> Open Image Trainer

56.

マーカー画像の差し替え マーカーにしたい画像を選択

57.

マーカー画像の差し替え Startをクリック

58.

マーカー画像の差し替え しばらく待つと特徴点抽出が終わりマーカーのデータが⽣成される OKをクリック

59.

マーカー画像の差し替え Zappar Image Tracking Target

60.

マーカー画像の差し替え Targetから画像名.zptを選択 (ex. marker.zpt) ※新しいマーカーの情報がすぐTargetのリストに反映されないことがあります

61.

マーカー画像の差し替え 画像が差し変わればOK

62.

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

63.

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

64.

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

65.

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

66.

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

67.

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

68.

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

69.

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

70.

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

71.

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

72.

補⾜

73.

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

74.

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

75.

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

76.

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

77.

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

78.

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

79.

補⾜おわり

80.

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

81.

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

82.

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

83.

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

84.

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

85.

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

86.

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

87.

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

88.

Ctrl/Command + S で保存

89.

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

90.

Unity Editorでの動作確認

91.

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

92.

WebARとして公開 File

93.

WebARとして公開 Build Settings

94.

WebARとして公開 WebGL Switch Platform

95.

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

96.

WebARとして公開 Player Settings

97.

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

98.

WebARとして公開 Build

99.

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

100.

しばらく待つ

101.

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

102.

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

103.

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

104.

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

105.

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

106.

WebARとして公開 Upload & Publish

107.

WebARとして公開 ここにzipファイルをドラッグ&ドロップ

108.

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

109.

WebARとして公開 Upload & Publish

110.

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

111.

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

112.

動作確認

113.

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

114.

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

115.

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

116.

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

117.

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

118.

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

119.

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

120.

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

121.

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

122.

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

123.

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

124.

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

125.

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

126.

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

127.

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

128.

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

129.

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

130.

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

131.

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

132.

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

133.

WebARとして動作確認 Upload/Publish

134.

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

135.

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

136.

WebARとして動作確認 Upload & Publish

137.

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

138.

動作確認

139.

完成︕

140.

ハッシュタグ #AR_Fukuoka