Upgrade to Pro — share decks privately, control downloads, hide ads and more …

UnityとZapWorksで始めようWebAR開発

 UnityとZapWorksで始めようWebAR開発

2021年12月11日:ハンズオン資料を公開しました。
2022年02月26日:スライドをリニューアルしました。

TakashiYoshinaga

December 11, 2021
Tweet

More Decks by TakashiYoshinaga

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. #AR_Fukuoka
    ハッシュタグ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. Unity Hub起動
    Unity Hub

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. SDKの取得
    Download SDK

    View full-size slide

  25. SDKの取得
    Unity版をクリック

    View full-size slide

  26. SDKの取得
    SDKのURLをコピー

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  45. 補⾜おわり

    View full-size slide

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

    View full-size slide

  47. ARカメラの設定
    Zappar

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  50. マーカーの設定
    Zappar

    View full-size slide

  51. マーカーの設定
    Image Tracking Target

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  78. Ctrl/Command + S で保存

    View full-size slide

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

    View full-size slide

  80. Unity Editorでの動作確認

    View full-size slide

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

    View full-size slide

  82. WebARとして公開
    File

    View full-size slide

  83. WebARとして公開
    Build Settings

    View full-size slide

  84. WebARとして公開
    WebGL
    Switch Platform

    View full-size slide

  85. WebARとして公開
    Player Settings

    View full-size slide

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

    View full-size slide

  87. WebARとして公開
    Build

    View full-size slide

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

    View full-size slide

  89. しばらく待つ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  96. WebARとして公開
    Upload & Publish

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  99. WebARとして公開
    Upload & Publish

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  102. 動作確認

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  124. WebARとして動作確認
    Upload & Publish

    View full-size slide

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

    View full-size slide

  126. 動作確認

    View full-size slide

  127. #AR_Fukuoka
    ハッシュタグ

    View full-size slide