PhotonでOculusAvatarを動かす方法

Transcript

1. Photonで
   OculusAvatarを
   動かす方法
   @KzoNag
   XRミーティング 福岡 2019年7月17日
   #XRMTG #福岡XR部
   

   View Slide

2. 自己紹介
   ながみね
   @KzoNag
   Jollystics Inc. / 福岡XR部
   Unityを触っていることが多い
   XR/インタラクティブ/モバイル
   5
   

   View Slide

3. 発端
   6
   前にGoで試した
   OculusAvatarをマルチ
   プレイできるサンプルを
   Questでも試したかった
   

   View Slide

4. Questでは動かせないことが発覚！
   中で利用してるP2P通信などの機能はアプリIDを発行しないと使えない
   しかしデベロッパーサイトでのアプリ作成でPlatformをQuestにできない
   Questアプリの企画審査に通過する必要がある！？
   だがしかし
   7
   

   View Slide

5. そこで
   8
   https://developer.oculus.com/documentation/avatarsdk/latest/concepts/avatars-sdk-intro/ https://www.photonengine.com/ja-JP/PUN
   

   View Slide

6. ドキュメントがあります
   https://doc.photonengine.com/ja-jp/pun/current/demos-and-tutorials/oculusavatarsdk
   9
   

   View Slide

7. 今日の話の目的
   ドキュメントはOculus AvatarとPhotonを知ってることが前提
   コピペしたら動いたけど中身の理解のハードルはやや高そう
   いろいろ触ってチョット分かってきたので共有します
   10
   

   View Slide

8. Oculus Avatar
   Oculusが提供するアバターの仕組み
   Rift(S)/Go/Quest + SteamVRなどでも動かせる
   AvatarSDKで自作アプリに導入できる
   11
   https://developer.oculus.com/documentation/avatarsdk/latest/concepts/avatars-sdk-intro/
   

   View Slide

9. Oculus Avatar SDK
   Asset StoreでOculus Integrationを入れたらAvatarSDKも入る
   （以前は各種SDKの個別版も配布してたけど今は全部入りだけっぽい？）
   12
   

   View Slide

10. LocalAvatar （シンプルなサンプル）
    一人称視点と三人称視点の2つのアバターオブジェクト
    LocalAvatarはプレハブになっているのですぐに使える
    13
    Little_LocalAvatar
    LocalAvatar
    

    View Slide

11. LocalAvatarとRemoteAvatar
    16
    LocalAvatar
    HMDとコントローラーの情報
    をもとにアバターを制御
    RemoteAvatar
    シリアライズされたアバター
    データをもとにアバターを制御
    

    View Slide

12. LocalAvatarとRemoteAvatar
    17
    LocalAvatar RemoteAvatar
    アバター
    データ
    HMDとコントローラーの情報
    をもとにアバターを制御
    シリアライズされたアバター
    データをもとにアバターを制御
    

    View Slide

13. RemoteLoopback （シンプルなサンプル②）
    LocalAvatarから取得したアバターデータを
    RemoteAvatarに流し込むサンプル
    18
    RemoteAvatar
    LocalAvatar
    

    View Slide

14. LocalAvatar → アバターデータ
    19
    void Start()
    {
    LocalAvatar.RecordPackets = true;
    LocalAvatar.PacketRecorded += OnLocalAvatarPacketRecorded;
    }
    void OnLocalAvatarPacketRecorded(object sender, OvrAvatar.PacketEventArgs args)
    {
    using (MemoryStream outputStream = new MemoryStream())
    {
    BinaryWriter writer = new BinaryWriter(outputStream);
    ...
    byte[] avatarData = outputStream.ToArray();
    SendPacketData(avatarData);
    }
    }
    

    View Slide

15. アバターデータ → RemoteAvatar
    20
    void ReceivePacketData(byte[] data)
    {
    using (MemoryStream inputStream = new MemoryStream(data))
    {
    BinaryReader reader = new BinaryReader(inputStream);
    int sequence = reader.ReadInt32();
    OvrAvatarPacket avatarPacket;
    ...
    LoopbackAvatar.GetComponent().QueuePacket(sequence, avatarPacket);
    }
    }
    

    View Slide

16. マルチプレイの構成
    21
    アバター
    データ
    アバター
    データ
    アバター
    データ
    アバター
    データ
    PlayerA
    PlayerB
    LocalAvatar
    LocalAvatar
    RemoteAvatar
    RemoteAvatar
    ネットワーク経由のデータの
    送受信をどうするか
    

    View Slide

17. PlatformSDKのP2P通信を利用してアバターデータを送受信
    ルーム制御やボイスチャットなどOculusRooms的な機能が実現されてる
    SocialStarter（しっかりしたサンプル）
    22
    XR部のメンバーに手伝ってもらって
    アバターが動くことを確認した
    

    View Slide

18. Photon
    マルチプレイゲームに必要なネットワーク機能を提供するサービス
    無料プランあり
    Unity向けパッケージ : Photon Unity Networking (PUN)
    25
    https://www.photonengine.com/ja-JP/PUN
    

    View Slide

19. ネットワークオブジェクト
    26
    PhotonView
    同期するコンポーネントを監視する役割
    同じViewIDを持つ相手と同期する
    オブジェクトの所有権などの情報も持つ
    Photon***View
    同期するコンポーネント
    TransformやRigidbodyなどは用意されている
    自作することも可能
    

    View Slide

20. ネットワークオブジェクトの生成
    27
    Client1 Client2
    Instantiateを実行して
    オブジェクト生成
    Client1に合わせて
    オブジェクト生成
    ViewID=1 ViewID=1
    PhotonNetwork.Instantiate(prefabName, position, rotation);
    Cube Cube
    

    View Slide

21. ネットワークオブジェクトの同期
    28
    Client1 Client2
    プレイヤー操作で
    移動
    Client1に
    同期して移動
    ViewID=1 ViewID=1
    

    View Slide

22. IPunObserbable
    29
    PhotonViewの監視対象となるインターフェイス
    public class PhotonAvatarView : MonoBehaviour, IPunObservable
    {
    public void OnPhotonSerializeView(PhotonStream stream, PhotonMessageInfo info)
    {
    if(stream.IsWriting)
    {
    byte[] data = null;
    stream.SendNext(data);
    }
    if(stream.IsReading)
    {
    byte[] data = (byte[])stream.ReceiveNext();
    }
    }
    }
    ここでLocalAvatarのアバターデータを送信
    受信したアバターデータを RemoteAvatarに流し
    込む
    

    View Slide

23. 異なるプレハブ間の同期
    30
    ViewID=1 ViewID=1
    LocalAvatar RemoteAvatar
    PhotonAvatarView PhotonAvatarView
    Client1 Client2
    こういう状態にしたい
    

    View Slide

24. 異なるプレハブ間の同期（手順）
    31
    ViewID=0
    LocalAvatar
    PhotonAvatarView
    Client1 Client2
    ①通常のInstantiateでオブジェクト生成
    

    View Slide

25. 異なるプレハブ間の同期（手順）
    32
    ViewID=1
    LocalAvatar
    PhotonAvatarView
    Client1
    ②手動でViewIDを割り当て
    

    View Slide

26. 異なるプレハブ間の同期（手順）
    33
    LocalAvatar
    PhotonAvatarView
    Client1 Client2
    ③ViewIDを指定して生成イベント発行
    ViewID=1
    ViewID=1で
    生成して
    

    View Slide

27. 異なるプレハブ間の同期（手順）
    34
    ViewID=1
    LocalAvatar RemoteAvatar
    PhotonAvatarView PhotonAvatarView
    Client1 Client2
    ④指定されたViewIDでオブジェクト生成
    ViewID=1
    

    View Slide

28. そんなこんなでできたもの
    36
    https://twitter.com/KzoNag/status/1149360901205610497?s=20
    

    View Slide

29. Have a nice avatar life!
    

    View Slide

30. CREDITS
    Special thanks to all the people who made
    and released these awesome resources for
    free:
    ▪ Presentation template by SlidesCarnival
    ▪ Photographs by Unsplash
    38
    

    View Slide