UnityとZapWorksで始めようWebAR開発

by TakashiYoshinaga

Slide 1

Slide 1 text

Unityで始めようWebAR ZapWorksを使ったAR開発

Slide 2

Slide 2 text

⾃⼰紹介⽒名︓吉永崇(Takashi Yoshinaga) 専⾨︓ARを⽤いた医療⽀援や運動計測 Volumetric Video コミュニティ︓ARコンテンツ作成勉強会主催

Slide 3

Slide 3 text

ARコンテンツ作成勉強会の紹介 p 2013年5⽉に勉強会をスタート。 p ARコンテンツの作り⽅をハンズオン形式で学ぶ p ⼈数は5~10名程度の少⼈数で実施 p 参加条件はAR/VRに興味がある⼈(知識不要) p 各地で開催 (福岡、熊本、宮崎、⻑崎、⼤分、⿅児島、⼭⼝、広島、札幌、関東)

Slide 4

Slide 4 text

Twitterと勉強会ページで情報を発信しています @AR_Fukuoka Googleで「AR勉強会」で検索

Slide 5

Slide 5 text

#AR_Fukuoka ハッシュタグ

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

事前準備 http://arfukuoka.lolipop.jp/zapworks/pr eparation2022_2.pdf

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Unity Hub起動 Unity Hub

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

SDKの取得 Download SDK

Slide 25

Slide 25 text

SDKの取得 Unity版をクリック

Slide 26

Slide 26 text

SDKの取得 SDKのURLをコピー

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

補⾜

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

補⾜おわり

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

ARカメラの設定 Zappar

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

マーカーの設定 Zappar

Slide 52

Slide 52 text

マーカーの設定 Image Tracking Target

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

表⽰するオブジェクトの取得これをクリック

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

Ctrl/Command + S で保存

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

Unity Editorでの動作確認

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

WebARとして公開 File

Slide 84

Slide 84 text

WebARとして公開 Build Settings

Slide 85

Slide 85 text

WebARとして公開 WebGL Switch Platform

Slide 86

Slide 86 text

WebARとして公開 Player Settings

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

WebARとして公開 Build

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

しばらく待つ

Slide 91

Slide 91 text

WebARとして公開アクセスを許可する

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

WebARとして公開 Projectsをクリック

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

WebARとして公開 Upload & Publish

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

WebARとして公開 Upload & Publish

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

動作確認

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

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

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

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

Slide 111

Slide 111 text

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

Slide 112

Slide 112 text

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

Slide 113

Slide 113 text

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

Slide 114

Slide 114 text

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

Slide 115

Slide 115 text

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

Slide 116

Slide 116 text

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

Slide 117

Slide 117 text

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

Slide 118

Slide 118 text

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

Slide 119

Slide 119 text

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

Slide 120

Slide 120 text

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