Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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フォルダ)
Slide 121
Slide 121 text
マーカー検出と表⽰の連動 ファイルとフォルダを全て選択
Slide 122
Slide 122 text
マーカー検出と表⽰の連動 Zipが⽣成される
Slide 123
Slide 123 text
WebARとして動作確認 ここにzipファイルをドラッグ&ドロップ
Slide 124
Slide 124 text
WebARとして動作確認 任意のバージョン名 (ex. 0.0.2)
Slide 125
Slide 125 text
WebARとして動作確認 Upload & Publish
Slide 126
Slide 126 text
WebARとして動作確認 スマホでQRコードを読む
Slide 127
Slide 127 text
動作確認
Slide 128
Slide 128 text
完成︕
Slide 129
Slide 129 text
#AR_Fukuoka ハッシュタグ