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