Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
UnityとZapWorksで始めようWebAR開発
Search
TakashiYoshinaga
December 11, 2021
Technology
0
3.8k
UnityとZapWorksで始めようWebAR開発
2021年12月11日:ハンズオン資料を公開しました。
2022年02月26日:スライドをリニューアルしました。
TakashiYoshinaga
December 11, 2021
Tweet
Share
More Decks by TakashiYoshinaga
See All by TakashiYoshinaga
Nreal Light / Air 開発入門ハンズオン
takashiyoshinaga
0
990
MediaPipeのハンドトラッキングで作るARライトセイバー
takashiyoshinaga
1
320
Getting Started with WebAR for HoloLens2 and Meta Quest
takashiyoshinaga
0
2.3k
Getting Started with HoloSDK
takashiyoshinaga
0
260
Getting Started with Non-Programming AR Development with MRTK v2.4.0
takashiyoshinaga
0
2.3k
Getting Started With MRTK (for Beginner)
takashiyoshinaga
0
700
始めようWebAR/VR開発
takashiyoshinaga
1
910
Getting Started with Azure Kinect DK
takashiyoshinaga
1
5.6k
Getting Started with WebVR Contents Creation for Oculus Quest
takashiyoshinaga
2
590
Other Decks in Technology
See All in Technology
「経験の点」の位置を意識したキャリア形成 / Career development with an awareness of the “point of experience” position
pauli
4
100
AI AgentOps LT大会(2025/04/16) Algomatic伊藤発表資料
kosukeito
0
140
Making a MIDI controller device with PicoRuby/R2P2 (RubyKaigi 2025 LT)
risgk
1
260
CodePipelineのアクション統合から学ぶAWS CDKの抽象化技術 / codepipeline-actions-cdk-abstraction
gotok365
5
200
Spring Bootで実装とインフラをこれでもかと分離するための試み
shintanimoto
7
850
AIコーディングの最前線 〜活用のコツと課題〜
pharma_x_tech
3
1.8k
Classmethod AI Talks(CATs) #21 司会進行スライド(2025.04.17) / classmethod-ai-talks-aka-cats_moderator-slides_vol21_2025-04-17
shinyaa31
0
600
AIと開発者の共創: エージェント時代におけるAIフレンドリーなDevOpsの実践
bicstone
1
320
Notion x ポストモーテムで広げる組織の学び / Notion x Postmortem
isaoshimizu
1
120
システムとの会話から生まれる先手のDevOps
kakehashi
PRO
0
290
クラウド開発環境Cloud Workstationsの紹介
yunosukey
0
180
SREの視点で考えるSIEM活用術 〜AWS環境でのセキュリティ強化〜
coconala_engineer
1
290
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
4 Signs Your Business is Dying
shpigford
183
22k
Speed Design
sergeychernyshev
29
900
Unsuck your backbone
ammeep
670
57k
Music & Morning Musume
bryan
47
6.5k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Designing Experiences People Love
moore
141
24k
For a Future-Friendly Web
brad_frost
176
9.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
41
2.2k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.4k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
119
51k
Transcript
Unityで始めようWebAR ZapWorksを使ったAR開発
⾃⼰紹介 ⽒名︓吉永崇(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/pr eparation2022_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.works ARコンテンツは専用のウェブサイトで管理されます
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プロジェクトに導⼊ Window Package 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.git URL URLをペースト Clone
補⾜︓SDKのダウンロード ダウンロード完了 universal-ar-unityになればOK
補⾜︓SDKをUnityプロジェクトに導⼊ Add package from git disk..
補⾜︓SDKをUnityプロジェクトに導⼊ Document内のGitHubフォルダ universal-ar-unity
補⾜︓SDKをUnityプロジェクトに導⼊ package.json Open
補⾜︓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 Tracking Targetダブルクリック
マーカーの設定 デフォルトのマーカーが近くに表⽰される
マーカー画像の差し替え 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
表⽰するオブジェクトの取得 Import
表⽰するオブジェクトの取得 Robot Kyleが追加されればOK
表⽰するオブジェクトの設定 Assets - Robot Kyle - Model
表⽰するオブジェクトの設定 Robot Kyle Zappar 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として公開 WebGL Switch Platform
WebARとして公開 Player Settings
WebARとして公開 Resolution and Presentation Zappar2019を選択
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として公開 Upload & Publish
WebARとして公開 QRが発⾏される
動作確認 スマホでQRコードを読む
動作確認
問題点 マーカーを⾒失っても表⽰される
マーカー検出と表⽰の連動 Zappar Image Tracking Target の⼦要素を表⽰
マーカー検出と表⽰の連動 Zappar Image Tracking Target
マーカー検出と表⽰の連動 On Seen Event (マーカーを検出した時) +
マーカー検出と表⽰の連動 RobotKyleをドラッグ&ドロップ
マーカー検出と表⽰の連動 No Function と書かれた ドロップダウンメニューを開く
マーカー検出と表⽰の連動 GameObject->SetActive
マーカー検出と表⽰の連動 チェックをオン
マーカー検出と表⽰の連動 On Not Seen Event (マーカーを⾒失った時) +
マーカー検出と表⽰の連動 RobotKyleをドラッグ&ドロップ
マーカー検出と表⽰の連動 GameObject->SetActive
マーカー検出と表⽰の連動 チェックはオフのまま
マーカー検出と表⽰の連動 Preview Image
マーカー検出と表⽰の連動 チェックをオフ
マーカー検出と表⽰の連動 File -> Build Settings
マーカー検出と表⽰の連動 Build
マーカー検出と表⽰の連動 既にあるzipを削除 プロジェクト名->出⼒先フォルダ (この資料ではbuildフォルダ)
マーカー検出と表⽰の連動 ファイルとフォルダを全て選択
マーカー検出と表⽰の連動 Zipが⽣成される
WebARとして動作確認 ここにzipファイルをドラッグ&ドロップ
WebARとして動作確認 任意のバージョン名 (ex. 0.0.2)
WebARとして動作確認 Upload & Publish
WebARとして動作確認 スマホでQRコードを読む
動作確認
完成︕
#AR_Fukuoka ハッシュタグ