ARDKハンズオン１のメインスライド

Transcript

1. #ARDKUG Zoomで質問受付中
   Niantic Lightship ARDK online
   Hands-on workshop #1
   佐久間捷矢 / デザイニウム
   1
   

   View Slide

2. #ARDKUG Zoomで質問受付中
   登壇者
   2
   Designium
   @ppengotsu
   佐久間
   Niantic
   白石
   Designium
   @marikocco
   マリコ
   Niantic
   Joe
   

   View Slide

3. #ARDKUG Zoomで質問受付中
   ハンズオンの質疑など
   3
   エラーで詰まった場合などは、Discordの”〇〇” Zoomのチャットで質問くださ
   い。
   zoomは、いいね！👍などリアクションもお願いします
   人数が人数ですので、もし自分のところでは、そのエラーなおったよー！みたい
   な方いたら、返信お願いします。
   Twitterで制作物などをつぶやくときは、#ARDK #ARDKUG をつけてツイートし
   てもらえるとたすかります。
   

   View Slide

4. #ARDKUG Zoomで質問受付中
   本日の流れ
   4
   

   View Slide

5. #ARDKUG Zoomで質問受付中
   ARDKの説明の前に、、
   5
   

   View Slide

6. #ARDKUG Zoomで質問受付中
   Unityで新規プロジェクトを作成
   6
   Unity2021.3.3f1で、新規3D(URP)プロジェクトを作成してください。
   作成後、プラットフォームをiOSに変更してください。
   

   View Slide

7. #ARDKUG Zoomで質問受付中
   ARDKの簡単な説明
   7
   

   View Slide

8. #ARDKUG Zoomで質問受付中
   ARDKとは？
   8
   NianticのLightshipに属するAR SDKとなります
   Niantic
   Lightship
   ARDK VPS
   

   View Slide

9. #ARDKUG Zoomで質問受付中
   ARDKを使った例
   9
   https://youtu.be/bQ8lUzU52Pc
   

   View Slide

10. #ARDKUG Zoomで質問受付中
    ARDKの特徴
    10
    特徴は、４つあります。
    ● メッシュ
    ● セマンティックセグメンテーション
    ● マルチプレイヤー
    ● VPS　←New!!
    

    View Slide

11. #ARDKUG Zoomで質問受付中
    ARDKの特徴 - メッシュ機能
    11
    ● iPhone8以上
    ● 2018年以降発売のハイエンド
    Android
    であれば、周りの環境に合わせて、
    メッシュを生成できます。
    https://youtu.be/4m_rdpFxJao
    この後、一緒に作ります。
    

    View Slide

12. #ARDKUG Zoomで質問受付中
    ARDKの特徴 - セマンティックセグメンテーション機能
    12
    後半、この機能のサンプル
    で遊びます。
    https://www.youtube.com/watch?v=fpKNd2LKAuk
    &t=3s
    

    View Slide

13. #ARDKUG Zoomで質問受付中
    ARDKの特徴 - マルチプレイヤー機能
    13
    iOS、Androidを相互に繋ぎ、
    複数端末を同期したARを作成できます。
    サーバは、Nianticが稼働させている
    ものを使います
    後半、この機能のサンプル
    で遊びます。
    https://youtu.be/bQ8lUzU52Pc
    

    View Slide

14. #ARDKUG Zoomで質問受付中
    ARDKの特徴 - VPS機能
    14
    現実の位置に合わせて、３Dモデルを
    設置できるようになる機能です。
    詳細
    https://lightship.dev/docs/ardk/vp
    s/concepts_and_terminology.html
    https://www.youtube.com/watch?v=wwFiZ7CU9LE
    &t=24s
    

    View Slide

15. #ARDKUG Zoomで質問受付中
    ARDKの特徴
    15
    特徴は、４つあります。
    ● メッシュ
    ● セマンティックセグメンテーション
    ● マルチプレイヤー
    ● VPS　←New!!
    

    View Slide

16. #ARDKUG Zoomで質問受付中
    ARDKの簡単な説明は終わり
    16
    

    View Slide

17. #ARDKUG Zoomで質問受付中
    初級編2の実践
    17
    

    View Slide

18. #ARDKUG Zoomで質問受付中
    目標
    18
    

    View Slide

19. #ARDKUG Zoomで質問受付中
    情報
    19
    参考元ブログ
    https://note.com/thedesignium/n/nbfba2a831469
    ブログは、少し古いARDKかつ、旧式レンダーラインで環境構築したものです。
    

    View Slide

20. #ARDKUG Zoomで質問受付中
    ステップ一覧
    20
    1. PlayerSettingsの変更
    2. ARDK本体のインポート
    3. ARDKライセンスキー発行
    4. ARDKライセンスキーの設定
    5. URP特有の設定
    6. シーン作成
    7. メッシュ生成機能の設定
    8. ボールを飛ばす設定
    9. ビルド
    

    View Slide

21. #ARDKUG Zoomで質問受付中
    PlayerSettingsの変更
    21
    　
    Bundle Identifier 各自（xcodeで設定し
    てもよい）
    Camera Usage
    Desciption
    “ForAR”などいれてく
    ださい
    Location Usage
    Desciption
    “ForAR”などいれてく
    ださい
    

    View Slide

22. #ARDKUG Zoomで質問受付中
    ARDK本体のインポート
    22
    事前準備でダウンロード済みのARDK本体を
    Unityにインポートしてください
    ARDK本体のダウンロード先
    https://lightship.dev/account/downloads
    途中表示される アラートはYESでよいです。
    

    View Slide

23. #ARDKUG Zoomで質問受付中
    ARDKライセンスキー発行 -1
    23
    https://lightship.dev/account/projects
    

    View Slide

24. #ARDKUG Zoomで質問受付中
    ARDKライセンスキー発行 -2
    24
    https://lightship.dev/account/projects
    わかりやすいものにしておくとよい
    わかりやすいものにしておくとよい
    ライセンス発行するボタン
    

    View Slide

25. #ARDKUG Zoomで質問受付中
    ARDKライセンスキー発行 -3
    25
    https://lightship.dev/account/projects
    ここのボタンで、ライセンスキーをコピーします
    

    View Slide

26. #ARDKUG Zoomで質問受付中
    ARDKライセンスキーの設定
    26
    Unityプロジェクトへ戻ります。
    1. /Assets/Resources/ARDK フォルダを作成
    2. 作成したフォルダで右クリックして
    ArdkAuthConfigを作成
    3. Api keyに、さきほどコピーしたキーを設定
    

    View Slide

27. #ARDKUG Zoomで質問受付中
    URP特有の設定
    27
    /Assets/Settings/URP-Balanc
    ed-Rendererの設定を変更しま
    す。
    ・ARSessionFeature
    ・DepthMeshRenderFeature
    の２つを追加してください。
    詳細：
    https://lightship.dev/docs/ardk/rendering/urp.html#doxid-urp
    

    View Slide

28. #ARDKUG Zoomで質問受付中
    シーン作成
    28
    1. シーンを新規作成し、シーン名を”Main”にしてください
    2. MainCameraを削除
    3. /Assets/ARDK/Extensions/Prefabs/ARSceneManagerをシーンに追加
    

    View Slide

29. #ARDKUG Zoomで質問受付中
    メッシュ生成機能の設定 - 1
    29
    /Assets/ARDK/Extensions/Meshing/ARMesh
    をシーンに追加してください
    

    View Slide

30. #ARDKUG Zoomで質問受付中
    メッシュ生成機能の設定 - 2
    30
    新しいマテリアルを作ってください
    透過設定にし、
    透過率を90前後に調整してみてください。
    

    View Slide

31. #ARDKUG Zoomで質問受付中
    メッシュ生成機能の設定 - 3
    31
    シーン上のARMeshの設定を変更します。
    ・MeshPrefabを
    /Assets/ARDK/Extensions/Meshing/ARMesh
    ColliderChunkに変更
    ・UseInvisibleMaterialをオンに変更
    ・InvisibleManterialに新規作成したMaterialに
    変更
    

    View Slide

32. #ARDKUG Zoomで質問受付中
    ボールを飛ばす設定 - 1
    32
    https://github.com/TheDesignium/public_ardkhandson1/blob/main/ActionM
    anager.cs
    上記、スクリプトをダウンロードして、Unityへインポートしてください
    

    View Slide

33. #ARDKUG Zoomで質問受付中
    ボールを飛ばす設定 - 2
    33
    シーンで、球体(Sphere)を作成し、”Ball”と名前を変
    えてください。
    作成後、
    ・Scaleを0.1に変更
    ・Rigidbody追加
    ・RigidbodyのMassを0.01に変更
    上記３つの変更をしてください。
    

    View Slide

34. #ARDKUG Zoomで質問受付中
    ボールを飛ばす設定 - 3
    34
    シーンで、空のオブジェクトを作成し、”Manager”に名前を変更し
    てください。
    ”Manager”オブジェクトに、ActionManager.csを追加してくださ
    い。
    次、ActionManager.csの紐づけ作業をします
    ・”BallPrefab”には、さきほど作成したBallおぶえジェクト
    ・”Main Camera”には、シーン上のARSceneManagerの小オブジェク
    トであるARSceneCameraオブジェクト
    のそれぞれを紐づけるようにしてください。
    

    View Slide

35. #ARDKUG Zoomで質問受付中
    ビルド
    35
    作成した”Main”シーンをビルド対象に追加し、
    いつもどおりBuild&Runして、実機で動作させてみてください。
    何か詰まった！や質問などがあったら教えてください。
    

    View Slide

36. #ARDKUG Zoomで質問受付中
    おまけ
    36
    時間が余った方向け
    ● VPSの解説
    ○ https://note.com/thedesignium/n/n10cbe153a7c7
    ● Mesh1のシェーダをいろいろ変えてみると
    おもしろいかとおもいます。
    

    View Slide

37. #ARDKUG Zoomで質問受付中
    休憩　〜??:??
    37
    

    View Slide

38. #ARDKUG Zoomで質問受付中
    後半
    38
    

    View Slide

39. #ARDKUG Zoomで質問受付中
    ARDK公式サンプルを試す
    39
    

    View Slide

40. #ARDKUG Zoomで質問受付中
    流れ
    40
    ● ARDK公式サンプルインポートと設定
    ● ビルド
    ● セマンティックセグメンテーション
    ● マルチプレイヤー
    

    View Slide

41. #ARDKUG Zoomで質問受付中
    ARDK公式サンプルインポート-1
    41
    さきほどボールを出せるようになったUnityプロジェクトに、
    事前にダウンロードしていた”ardk-examples-2.0.0.unitypackage”をインポート
    してください。
    https://lightship.dev/account/downloads
    

    View Slide

42. #ARDKUG Zoomで質問受付中
    ARDK公式サンプルインポート-2
    42
    URPマテリアルに変更が必要です。
    まず、ARDKExamplesフォルダに含
    まれるマテリアルをURPに対応させ
    ます。
    ５番目で表示されたマテリアルを
    すべて選択してください
    １
    ３
    ４
    ２
    ５
    

    View Slide

43. #ARDKUG Zoomで質問受付中
    ARDK公式サンプルインポート-3
    43
    マテリアルを選んだ状態で、
    Editメニューの
    Rendering>Maerials>Convert
    Selected Build~~~URPを選んで
    ください。
    表示された警告はYesを選んでく
    ださい
    

    View Slide

44. #ARDKUG Zoomで質問受付中
    ARDK公式サンプルインポート-4
    44
    ダブったARDKライセンスキーファイルを削除
    します
    ARDKExamples>Resources>ARDK>ArdkAuthC
    onfig
    を削除します
    

    View Slide

45. #ARDKUG Zoomで質問受付中
    ARDK公式サンプルインポート-5
    45
    ビルド対象シーンにサンプルシーン全て追加し
    ます。
    Materialと同様に、ARDKExsampleフォルダの
    Sceneを全て選びます
    １
    3 2
    4
    

    View Slide

46. #ARDKUG Zoomで質問受付中
    ARDK公式サンプルインポート-6
    46
    さきほど選んだシーンを、ビルド対象に追加し
    てください。
    そして、SceneSelectorシーンを一番上にして
    ください。
    

    View Slide

47. #ARDKUG Zoomで質問受付中
    ビルド
    47
    ビルドしてください。たぶん時間かかるかと思います。。。
    

    View Slide

48. #ARDKUG Zoomで質問受付中
    セマンティックセグメンテーション - 1
    48
    SemanticSegmentationシーンを開いてみてください
    右上の”Change Feature Channel”で対象物を変えてみてください
    

    View Slide

49. #ARDKUG Zoomで質問受付中
    セマンティックセグメンテーション - 2
    49
    SemanticSegmentationExampleManagerでは、
    Update文で、セグメンテーションのテクスチャを使って
    マスクの設定をしています。
    

    View Slide

50. #ARDKUG Zoomで質問受付中
    マルチプレイヤー
    50
    ARNetworkingExampleManagerシーンを
    みてみましょう。
    

    View Slide

51. #ARDKUG Zoomで質問受付中
    マルチプレイヤー
    51
    1. 端末Aで矢印1のボタンを押し、ルームIDを作ります
    2. 端末１の矢印２に表示されたルームIDを、端末Bの矢
    印２に入力してください
    3. 端末Aで矢印３のボタンをおす
    4. 端末Bで矢印３のボタンをおす
    5. まわりをしばらく見渡すとローカライズできて、
    お互いの端末位置に立方体が表示されます
    1
    2
    3
    

    View Slide

52. #ARDKUG Zoomで質問受付中
    マルチプレイヤー
    52
    ARNetworkingExampleManagerには、バイト形式でデータ送受信している例があ
    ります
    送信
    受信
    

    View Slide

53. #ARDKUG Zoomで質問受付中
    マルチプレイヤー
    53
    エラーコード
    https://lightship.dev/docs/ardk/multiplayer/low_level_networking_errors.h
    tml
    

    View Slide

54. #ARDKUG Zoomで質問受付中
    残り時間、各シーン試してみてください
    54
    

    View Slide

55. #ARDKUG Zoomで質問受付中
    ボール発射するサンプルのネットワーク版
    55
    ボールを飛ばすトリガーを送受信するようにしてみます
    時間がある場合
    

    View Slide

56. #ARDKUG Zoomで質問受付中
    ボール発射するサンプルのネットワーク版
    56
    Assets/ARDKExamples/ARNetworking/ARNetworkingシーンを複製し、
    ”ARNetworkingWithBall”という名前にしてください
    その後、作成したシーンを開いてください
    

    View Slide

57. #ARDKUG Zoomで質問受付中
    ボール発射するサンプルのネットワーク版
    57
    /Assets/ARDK/Extensions/Meshing/ARMesh
    をシーンに追加してください
    

    View Slide

58. #ARDKUG Zoomで質問受付中
    ボール発射するサンプルのネットワーク版
    58
    シーン上のARMeshの設定を変更します。
    ・MeshPrefabを
    /Assets/ARDK/Extensions/Meshing/ARMesh
    ColliderChunkに変更
    に変更
    

    View Slide

59. #ARDKUG Zoomで質問受付中
    ボール発射するサンプルのネットワーク版
    59
    シーンで、球体(Sphere)を作成し、”Ball”と名前を変
    えてください。
    作成後、
    ・Scaleを0.1に変更
    ・Rigidbody追加
    ・RigidbodyのMassを0.01に変更
    上記３つの変更をしてください。
    

    View Slide

60. #ARDKUG Zoomで質問受付中
    ボール発射するサンプルのネットワーク版
    60
    https://github.com/TheDesignium/public_ardkhandson1/blob/main/ActionNe
    tworkManager.cs
    をダウンロードし、Unityプロジェクトへ追加してください。
    

    View Slide

61. #ARDKUG Zoomで質問受付中
    ボール発射するサンプルのネットワーク版
    61
    シーンで、空のオブジェクトを作成し、”Manager”に名前を変更し
    てください。
    ”Manager”オブジェクトに、ActionNetworkManager.csを追加して
    ください。
    次、ActionNetworkManager.csの紐づけ作業をします
    ・”BallPrefab”には、さきほど作成したBallおぶえジェクト
    ・”Main Camera”には、シーン上のARSceneManagerの小オブジェク
    トであるARSceneCameraオブジェクト
    のそれぞれを紐づけるようにしてください。
    

    View Slide

62. #ARDKUG Zoomで質問受付中
    ボール発射するサンプルのネットワーク版
    62
    ビルドします
    ビルド対象に、”ARNetworkingWithBall”シーンを追加し、
    シーンリストの先頭にし、ビルドしてください
    

    View Slide

63. #ARDKUG Zoomで質問受付中
    ボール発射するサンプルのネットワーク版
    63
    送信部分
    ボールを発生させたい位置と飛ばしたい方向を送信してます。
    

    View Slide

64. #ARDKUG Zoomで質問受付中
    ボール発射するサンプルのネットワーク版
    64
    受信部分
    受信した位置、方向に向かって
    ボールを発射する処理をしている
    

    View Slide

65. #ARDKUG Zoomで質問受付中
    ボール発射するサンプルのネットワーク版
    65
    今回のサンプルは、発射トリガーだけを送受信してます。
    そのため、飛ばした後のボールの位置は同期されません。
    今回のような低レイヤーの実装なら、常に位置情報を送受信する修正を行う必要があります。
    高レイヤーの場合は、位置同期便利クラスを使うとよいかもれしれないです
    https://lightship.dev/docs/ardk/multiplayer/HLAPI/network_spawning.html#doxid-hlapi-network-
    spawning
    

    View Slide

66. #ARDKUG Zoomで質問受付中
    サンプル補足
    66
    ● 深度取得しているサンプルやVPSのサンプルもあります
    ● 公式のテンプレートもあります
    ○ 公式テンプレートは、新しいシーン
    を作ってから、各テンプレを選ぶと
    よさそうです。
    

    View Slide

67. #ARDKUG Zoomで質問受付中
    Q&A
    67
    

    View Slide

68. #ARDKUG Zoomで質問受付中
    Nianticからの話
    68
    

    View Slide

69. #ARDKUG Zoomで質問受付中
    おわり
    69
    

    View Slide