2021年12月11日：ハンズオン資料を公開しました。 2022年02月26日：スライドをリニューアルしました。
Unityで始めようWebARZapWorksを使ったAR開発
View Slide
⾃⼰紹介⽒名︓吉永崇(Takashi Yoshinaga)専⾨︓ARを⽤いた医療⽀援や運動計測Volumetric Videoコミュニティ︓ARコンテンツ作成勉強会 主催
ARコンテンツ作成勉強会の紹介p 2013年5⽉に勉強会をスタート。p ARコンテンツの作り⽅をハンズオン形式で学ぶp ⼈数は5~10名程度の少⼈数で実施p 参加条件はAR/VRに興味がある⼈(知識不要)p 各地で開催 (福岡、熊本、宮崎、⻑崎、⼤分、 ⿅児島、⼭⼝、広島、札幌、関東)
Twitterと勉強会ページで情報を発信しています@AR_Fukuoka Googleで「AR勉強会」で検索
#AR_Fukuokaハッシュタグ
今⽇のゴール自然な特徴量を用いたマーカーを用いたWebAR開発を体験https://youtu.be/u26tuv_C1qk
事前準備http://arfukuoka.lolipop.jp/zapworks/preparation2022_2.pdf
演習⽤素材のダウンロードhttp://arfukuoka.lolipop.jp/zapworks/sample.zip
Unity Hub起動Unity Hub
プロジェクトの作成 (1/6)①Projects②New Project
プロジェクトの作成 (2/6)ここをクリック
プロジェクトの作成 (3/6)2019.4.X
プロジェクトの作成 (4/6)3D
プロジェクトの作成 (5/6)プロジェクト名(例: AR_Test)保存場所Create Project
プロジェクトの作成 (6/6)Unity Editorが起動すればOK
Unity Editorの概要Sceneタブオブジェクトの配置を行うオブジェクトの一覧プロジェクト内のフォルダやファイルの一覧
ZapWorksのプロジェクト作成https://zap.worksARコンテンツは専用のウェブサイトで管理されます
ZapWorksのプロジェクト作成Log in
ZapWorksのプロジェクト作成Create Project
ZapWorksのプロジェクト作成Universal AR
ZapWorksのプロジェクト作成Unityを選択
ZapWorksのプロジェクト作成QR codeを選択
ZapWorksのプロジェクト作成ここを好きな名前に編集
SDKの取得Download SDK
SDKの取得Unity版をクリック
SDKの取得SDKのURLをコピー
このサイトはまたあとで使うので開いておきましょう
SDKをUnityプロジェクトに導⼊WindowPackage Manager
SDKをUnityプロジェクトに導⼊▼をクリック
SDKをUnityプロジェクトに導⼊In Project
SDKをUnityプロジェクトに導⼊+をクリック
SDKをUnityプロジェクトに導⼊Add package from git URL
SDKをUnityプロジェクトに導⼊先ほどZapWorksのページでコピーしたSDKのURLを貼り付ける
SDKをUnityプロジェクトに導⼊Add
SDKをUnityプロジェクトに導⼊しばらく待つとUniversal ARが追加される
補⾜
補⾜下記のようなエラーが出てUniversal ARがインストールされない場合︓GitHubの設定を⾒直すとうまく動作するかと思います。ただし、今回はリモートでのハンズオンで環境確認が難しいので別の⽅法でSDKを取得して開発を続けましょう。
補⾜︓SDKのダウンロードGitHub Desktopを起動してClone Repository on your Hard Driveをクリック。 (下記のような表⽰でない場合は次のページ)Clone Repository from Internet
補⾜︓SDKのダウンロードGitHub Desktopを起動してClone Repository...をクリックFile -> Clone Reapository...
補⾜︓SDKのダウンロードWebブラウザで先ほどコピーしたURLを貼り付けるhttps://github.com/zappar-xr/universal-ar-unity.gitURLURLをペーストClone
補⾜︓SDKのダウンロードダウンロード完了universal-ar-unityになればOK
補⾜︓SDKをUnityプロジェクトに導⼊Add package from git disk..
補⾜︓SDKをUnityプロジェクトに導⼊Document内のGitHubフォルダuniversal-ar-unity
補⾜︓SDKをUnityプロジェクトに導⼊package.jsonOpen
補⾜︓SDKをUnityプロジェクトに導⼊Universal ARが追加されていればOK
補⾜おわり
ARカメラの設定Main Cameraを削除
ARカメラの設定Zappar
ARカメラの設定Camera-> Rear Facing Camera
ARカメラの設定Zappar Cameraが追加される
マーカーの設定Zappar
マーカーの設定Image Tracking Target
マーカーの設定Zappar Image Tracking Targetが追加される
マーカーの設定Zappar Image TrackingTargetダブルクリック
マーカーの設定デフォルトのマーカーが近くに表⽰される
マーカー画像の差し替えZappar
マーカー画像の差し替えEditor -> Open Image Trainer
マーカー画像の差し替えマーカーにしたい画像を選択
マーカー画像の差し替えStartをクリック
マーカー画像の差し替えOKをクリックしばらく待つと特徴点抽出が終わりマーカーのデータが⽣成される
マーカー画像の差し替えZappar Image Tracking Target
マーカー画像の差し替えTargetから画像名.zptを選択(ex. marker.zpt)※新しいマーカーの情報がすぐTargetのリストに反映されないことがあります
マーカー画像の差し替え画像が差し変わればOK
表⽰するオブジェクトの取得Window
表⽰するオブジェクトの取得Asset Store
表⽰するオブジェクトの取得Asset StoreタブKyleで検索
表⽰するオブジェクトの取得これをクリック
表⽰するオブジェクトの取得Download
表⽰するオブジェクトの取得Import
表⽰するオブジェクトの取得Robot Kyleが追加されればOK
表⽰するオブジェクトの設定Assets- Robot Kyle- Model
表⽰するオブジェクトの設定Robot KyleZappar Image Tracking Imageに重ねるようにドラッグ&ドロップ
表⽰するオブジェクトの設定Robotが表⽰される
表⽰するオブジェクトの設定Zappar Image Tracking Targetの⼦要素になっていることを確認
表⽰するオブジェクトの設定Robot Kyle
表⽰するオブジェクトの設定移動/回転/伸縮移動 回転 伸縮
表⽰するオブジェクトの設定こんな感じRotationを直接操作してもOK(Y=180で反対向き)
Ctrl/Command + S で保存
Unity Editorでの動作確認Playボタン
Unity Editorでの動作確認
Unity Editorでの動作確認Playボタンをもう⼀度クリックして停⽌
WebARとして公開File
WebARとして公開Build Settings
WebARとして公開WebGLSwitch Platform
WebARとして公開Player Settings
WebARとして公開Resolution and PresentationZappar2019を選択
WebARとして公開Build
WebARとして公開新しいフォルダーわかりやすい名前に変更(この資料ではbuild)フォルダーの選択
しばらく待つ
WebARとして公開アクセスを許可する
WebARとして公開buildフォルダを開く
WebARとして公開ファイルとフォルダを全て選択してzipに圧縮
WebARとして公開Zipファイルが⽣成される(名前は任意)
WebARとして公開Projectsをクリック
WebARとして公開今回作成したプロジェクトを開く
WebARとして公開Upload & Publish
WebARとして公開ここにzipファイルをドラッグ&ドロップ
WebARとして公開任意のバージョン名 (ex. 0.0.1)
WebARとして公開QRが発⾏される
動作確認スマホでQRコードを読む
動作確認
問題点マーカーを⾒失っても表⽰される
マーカー検出と表⽰の連動Zappar Image Tracking Targetの⼦要素を表⽰
マーカー検出と表⽰の連動Zappar Image Tracking Target
マーカー検出と表⽰の連動On Seen Event(マーカーを検出した時)+
マーカー検出と表⽰の連動RobotKyleをドラッグ&ドロップ
マーカー検出と表⽰の連動No Function と書かれたドロップダウンメニューを開く
マーカー検出と表⽰の連動GameObject->SetActive
マーカー検出と表⽰の連動チェックをオン
マーカー検出と表⽰の連動On Not Seen Event(マーカーを⾒失った時)+
マーカー検出と表⽰の連動チェックはオフのまま
マーカー検出と表⽰の連動Preview Image
マーカー検出と表⽰の連動チェックをオフ
マーカー検出と表⽰の連動File -> Build Settings
マーカー検出と表⽰の連動Build
マーカー検出と表⽰の連動既にあるzipを削除プロジェクト名->出⼒先フォルダ(この資料ではbuildフォルダ)
マーカー検出と表⽰の連動ファイルとフォルダを全て選択
マーカー検出と表⽰の連動Zipが⽣成される
WebARとして動作確認ここにzipファイルをドラッグ&ドロップ
WebARとして動作確認任意のバージョン名 (ex. 0.0.2)
WebARとして動作確認Upload & Publish
WebARとして動作確認スマホでQRコードを読む
完成︕
takashiyoshinaga
arthur1
sbtechnight
sakaitakeshi
sosuiiii
ikuyamada
kazumax55
kazeburo
carta_engineering
line_developers
jacopen
kthrtty
caitiem20
62gerente
kastner
hursman
brettharned
lauravandoore
maltzj
productmarketing
matthewcrist
frogandcode
stephaniewalter
moore