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

PhotonでOculusAvatarを動かす方法

 PhotonでOculusAvatarを動かす方法

Keizo Nagamine

July 17, 2019
Tweet

More Decks by Keizo Nagamine

Other Decks in Technology

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