PhotonでOculusAvatarを動かす方法

Transcript

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

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

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

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

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

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

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

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

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

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

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

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

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

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); } }

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<OvrAvatarRemoteDriver>().QueuePacket(sequence, avatarPacket); } }

16. マルチプレイの構成 21 アバター データ アバター データ アバター データ アバター データ

    PlayerA PlayerB LocalAvatar LocalAvatar RemoteAvatar RemoteAvatar ネットワーク経由のデータの 送受信をどうするか

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

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

    https://www.photonengine.com/ja-JP/PUN

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

20. ネットワークオブジェクトの生成 27 Client1 Client2 Instantiateを実行して オブジェクト生成 Client1に合わせて オブジェクト生成 ViewID=1 ViewID=1

    PhotonNetwork.Instantiate(prefabName, position, rotation); Cube Cube

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

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に流し 込む

23. 異なるプレハブ間の同期 30 ViewID=1 ViewID=1 LocalAvatar RemoteAvatar PhotonAvatarView PhotonAvatarView Client1 Client2

    こういう状態にしたい

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

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

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

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

    ViewID=1

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

29. Have a nice avatar life!

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