そろそろVR Pixel Streamingを試してみたい

第1回 Unreal Engine KYUSHU LT会で登壇した際に使用した資料です。
本当はクラウドで動かしたかったのですが...

Transcript

1. そろそろVR Pixel Streamingを 試してみたい
2. 自己紹介 まいけるさん（@MasoranaT） 都内に住むITエンジニア。 UEは2023年に入って少ししてから始めました！ 業務では今回紹介するPixel Streaming関連やVR関連を 触っています！ 九州との繋がり: 福岡のリモートで企業で働いています！！ まだまだ修行中の身です📜 趣味: ドラム
3. 今回の概要 - Pixel Streamingの概要 - ローカル環境（手元の環境）でVRのPixel Streamingを試す - クラウド環境でVRのPixel Streamingを試す
4. Pixel Streamingとは 一言で表すと... サーバーでUEのゲームを動かして、 それをWebブラウザで楽しもう！ という機能です。
5. Pixel Streamingとは 通常、Unreal Engine製のアプリケーションを遊ぶ時には、手元のPCでゲームを動かす と思います。 しかし、Pixel Streaminでは、アプリケーションをサーバーで動作させ、レンダリング結果 をWebRTCという技術を利用して映像や音声をユーザーへ送信したり、 ユーザーの入力をUnreal Engine側に送ったりすることで WebブラウザでUnreal Engineアプリケーションを体験できるようにしています。
6. Pixel Streamingとは 今回はこちらを利用して、VR Pixel Streamingを試してみたいと思います。 ※ ちなみに、VRのPixel StreamingはUE5.3の段階でも一応ドキュメント上は実験段階 ・開発中の機能とのことです。 ※ 今回は、UE5.2で試しています。
7. ローカルで試してみます - 公式のドキュメントに沿って行けば簡単に試すことができますが、Pixel Streaming を試さないでVR Pixel Streamingを試す場合、少し困った部分が出てきますのでそ ちらを込みで説明していきます。
8. 事前準備 - PixelStreamingに必要なサーバーなどが入ったリポジトリを入手 - どのような方法でも大丈夫です。 gitを持っている方はgit cloneで、持っていない方は、 Download ボタンからダウンロードしてください - Epicが公式で用意してくれている簡易サーバー処理と Webフロントエンドのパッケージが入ったリポ ジトリです。。
9. プロジェクト作成 - 通常プロジェクトを作成するような形でlauncherからバージョンを指定してエンジン を起動し、Virtual Realityテンプレートからプロジェクトを作成してください。 - なお、今回はUE5.2.1を利用 しています。
10. プラグインの整理 - Pixel Streamingに必要なプラグインの追加とともに今回はOpenXRのプラグイン が不要のため、OpenXRプラグインを無効化します。
11. 不要なファイルの削除 - 今回、B_AssetGuideline_VRTemplateは不要なため、削除してください。 - また、合わせてこのファイルを使用していたVRPawnをcompileしてください。
12. エディタ実行時の追加パラメータについて - 今回、エディタからスタンドアロンモードで実行して試します。 - その際に追加で必要なパラメータがありますのでそちらを追加します。 - Edit > Editor Preferences > Level EditorのPlay > Additional Launch Parameter に「-PixelStreamingURL=ws://127.0.0.1:8888 -PixelStreamingEnableHMD」を記 述
13. HTTPS化について - VRのPixel Streamingを利用する場合、HTTPS環境が必要となります。今回、ロー カル環境のため、簡易的にHTTPS化を行います。 - この後の操作ではコマンドを打って行います。以下のうちお好みの方法・アプリケー ションを利用して行ってください。 - Git Bashと呼ばれるGitやLinux・macOSでよく使われるシェルなどを使用できるようするアプリケー ションを利用する。ドキュメントには、こちらが書かれています（個人的にはアプリケーション入れる だけで済むのでこちらのほうが簡単だと思います）。インストールの方法は こちらを参照してくださ い。 - PowerShellもしくはコマンドプロンプトでやりたいんだ !!!という方は、OpenSSLを導入するやり方で 行ってください。導入には こちらの記事がわかりやすいかと思います。 ※ 各種インストールの詳しい方法は、今回の内容とは離れた内容になりますので割愛します。
14. HTTPS化について 1. 事前準備で追加したPixelStreamingInfrastructureのSignallingWebServerとい うフォルダに「certificates」を追加してください。 2. GitBashやPowerShellなどでPixelStreamingInfrastructure > SignallingWebServer > certificatesへ移動してください。 3. 「openssl req -x509 -newkey rsa:4096 -keyout client-key.pem -out client-cert.pem -sha256 -nodes 」を 実行してください。いろいろと質問されますが、すべてエンターで大丈夫です。 4. SignallingWebServer内にあるconfig.jsonを開き、UseHTTPSというプロパティを trueに変更してください。
15. HTTPS化について
16. HTTPS化について
17. HTTPS化について
18. サーバー準備 - Pixel Streamingでは、WebRTCという技術を用いるに当たり、UEアプリを動かす サーバー以外にSignalling Serverというサーバーが必要になります。 - そのための手順が次ページ以降のものになります。
19. サーバー準備 1. setup.batの実行（Epicのサンプルでは、nodejsを利用してサーバーを立ち上げており、こ れらの必要なものを整えるbatファイルです。） 2. 上記の実行終了後にStart_SignallingServer.ps1ファイルを実行してください。 ※ Start_SignallingServer.ps1が動かない場合は、セキュリティポリシーの関係で動かな いかもしれないです。 管理者権限でPower Shellを実行し、「Set-ExecutionPolicy RemoteSigned」をセットしてください。 今回、普段Power Shellのスクリプトを積極的に動かしていない環境で試したとき、初期状 態がスクリプトを許可しない「Restricted」という状態であったため、PowerShellのスクリプトが 動きませんでした。そのため、上記のセキュリティポリシーの設定が必要でした。 - ※ もしかしたら、 .bat（windowsのバッチファイル）などでスクリプトを組んで、そこから実行させると実行できるかもしれませんが、今回はわき 道にそれるため補足として記述するのみにしておきます。
20. サーバー準備 1. setup.batの実行（Epicのサンプルでは、nodejsを利用してサーバーを立ち上げて おり、これらの必要なものを整えるbatファイルです。） 2. 上記の実行終了後にStart_SignallingServer.ps1ファイルを実行してください。
21. サーバー準備
22. サーバー準備
23. サーバー準備の注意事項 - Start_SignallingServer.ps1が動かない場合は、セキュリティポリシーの関係で動 かないかもしれないです。 - その場合は、管理者権限でPower Shellを実行し、「Set-ExecutionPolicy RemoteSigned」 をセットしてください。 - 今回、普段Power Shellのスクリプトを積極的に動かしていない環境で試したとき、 初期状態がスクリプトを許可しない「Restricted」という状態であったため、 PowerShellのスクリプトが動きませんでした。そのため、上記のセキュリティポリ シーの設定が必要でした。 - ※ もしかしたら、.bat（windowsのバッチファイル）などでスクリプトを組んで、そこから実行させると実行できるかもしれませんが、今 回はわき道にそれるため補足として記述するのみにしておきます。
24. サーバー準備の注意事項 - Start_SignallingServer.ps1が動かない場合は、セキュリティポリシーの関係で動 かないかもしれないです。 - その場合は、管理者権限でPower Shellを実行し、「Set-ExecutionPolicy RemoteSigned」 をセットしてください。 - 今回、普段Power Shellのスクリプトを積極的に動かしていない環境で試したとき、 初期状態がスクリプトを許可しない「Restricted」という状態であったため、 PowerShellのスクリプトが動きませんでした。そのため、上記のセキュリティポリ シーの設定が必要でした。 - ※ もしかしたら、.bat（windowsのバッチファイル）などでスクリプトを組んで、そこから実行させると実行できるかもしれませんが、今 回はわき道にそれるため補足として記述するのみにしておきます。
25. サーバー準備の注意事項
26. いざ実行 Meta Quest3を利用して実際に試してみます。 1. UEのエディターでスタンドアロンモードで実行します。 2. PCとMeta Questが同じネットワーク（Wifiなど）内で接続されているかどうかを確 認し、Meta Questのブラウザを使用して接続します。 a. 接続するURLですが、PCのIPアドレスを打ち込んで接続する必要があります。 PowerShellで ipconfigコマンドを打ち込み、「 IPｖ４アドレス」欄のIPアドレスを確認してください。このアドレスが接続 先になります。 b. 192.168.◦◦.◦◦のようなものです。 3. 接続が安全でないようなページになりますが、詳細設定を開き、接続してください。
27. いざ実行
28. 実行した!!!!!!! …と思いきや
29. 実行した!!!!!!! …と思いきや 1. 床にカメラが埋まっている... - HMDなどのトラッキングは Webフロント側の実装で「 WebXRController」というclassで実装されて います。 - WebXR Device APIを利用して実装されていますが、自分の環境ではうまく床からの位置が調整で きていないのかこのような現象になっています。 2. 動画では伝わらないのですが、寄り目になるような（右と左の映像がずれてしまって いるため起こる現象だと思われます）形になる - こちらについては、Quest2だときれいに見えるようです。しかし、他のデバイスだとうまくいかないよ うです。 - issue: https://github.com/EpicGames/PixelStreamingInfrastructure/issues/242 3. サムスティックの動作がおかしい（前に入力しているのに下の入力になってしまう）
30. 解放されているXR固有のイベントについて - Pixel Streamingのフロントエンドライブラリでは、各種イベントがdispatchEventと して登録されています。 - XRでは、「xrFrame」「xrSessionStarted」「xrSessionEnded」が存在しています。 - また、ライブラリの処理としては、PixelStreamingInfrastructure > Frontend > library > src > WebXR > WebXRController.tsを見に行くことでライブラリで行わ れている実装を確認できます。