Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
そろそろVR Pixel Streamingを試してみたい
Search
Maichele
February 20, 2024
Programming
1
830
そろそろVR Pixel Streamingを試してみたい
第1回 Unreal Engine KYUSHU LT会で登壇した際に使用した資料です。
本当はクラウドで動かしたかったのですが...
Maichele
February 20, 2024
Tweet
Share
More Decks by Maichele
See All by Maichele
Pixel Streaming使用して 企業紹介ページ作ってみた
genki28
0
320
Other Decks in Programming
See All in Programming
1年目の私に伝えたい!テストコードを怖がらなくなるためのヒント/Tips for not being afraid of test code
push_gawa
1
490
新宿駅構内を三人称視点で探索してみる
satoshi7190
2
110
sappoRo.R #12 初心者セッション
kosugitti
0
270
Django NinjaによるAPI開発の効率化とリプレースの実践
kashewnuts
1
200
SwiftUI Viewの責務分離
elmetal
PRO
2
260
Unity Android XR入門
sakutama_11
0
170
Formの複雑さに立ち向かう
bmthd
1
900
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
2
260
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
14
4.5k
技術を改善し続ける
gumioji
0
100
昭和の職場からアジャイルの世界へ
kumagoro95
1
410
PHPカンファレンス名古屋2025 タスク分解の試行錯誤〜レビュー負荷を下げるために〜
soichi
1
640
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
693
190k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Building an army of robots
kneath
303
45k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
RailsConf 2023
tenderlove
29
1k
Docker and Python
trallard
44
3.3k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
360
Raft: Consensus for Rubyists
vanstee
137
6.8k
Fireside Chat
paigeccino
34
3.2k
Music & Morning Musume
bryan
46
6.4k
Transcript
そろそろVR Pixel Streamingを 試してみたい
自己紹介 まいけるさん(@MasoranaT) 都内に住むITエンジニア。 UEは2023年に入って少ししてから始めました! 業務では今回紹介するPixel Streaming関連やVR関連を 触っています! 九州との繋がり: 福岡のリモートで企業で働いています!! まだまだ修行中の身です📜
趣味: ドラム
今回の概要 - Pixel Streamingの概要 - ローカル環境(手元の環境)でVRのPixel Streamingを試す - クラウド環境でVRのPixel Streamingを試す
Pixel Streamingとは 一言で表すと... サーバーでUEのゲームを動かして、 それをWebブラウザで楽しもう! という機能です。
Pixel Streamingとは 通常、Unreal Engine製のアプリケーションを遊ぶ時には、手元のPCでゲームを動かす と思います。 しかし、Pixel Streaminでは、アプリケーションをサーバーで動作させ、レンダリング結果 をWebRTCという技術を利用して映像や音声をユーザーへ送信したり、 ユーザーの入力をUnreal Engine側に送ったりすることで
WebブラウザでUnreal Engineアプリケーションを体験できるようにしています。
Pixel Streamingとは 今回はこちらを利用して、VR Pixel Streamingを試してみたいと思います。 ※ ちなみに、VRのPixel StreamingはUE5.3の段階でも一応ドキュメント上は実験段階 ・開発中の機能とのことです。 ※
今回は、UE5.2で試しています。
ローカルで試してみます - 公式のドキュメントに沿って行けば簡単に試すことができますが、Pixel Streaming を試さないでVR Pixel Streamingを試す場合、少し困った部分が出てきますのでそ ちらを込みで説明していきます。
事前準備 - PixelStreamingに必要なサーバーなどが入ったリポジトリを入手 - どのような方法でも大丈夫です。 gitを持っている方はgit cloneで、持っていない方は、 Download ボタンからダウンロードしてください -
Epicが公式で用意してくれている簡易サーバー処理と Webフロントエンドのパッケージが入ったリポ ジトリです。。
プロジェクト作成 - 通常プロジェクトを作成するような形でlauncherからバージョンを指定してエンジン を起動し、Virtual Realityテンプレートからプロジェクトを作成してください。 - なお、今回はUE5.2.1を利用 しています。
プラグインの整理 - Pixel Streamingに必要なプラグインの追加とともに今回はOpenXRのプラグイン が不要のため、OpenXRプラグインを無効化します。
不要なファイルの削除 - 今回、B_AssetGuideline_VRTemplateは不要なため、削除してください。 - また、合わせてこのファイルを使用していたVRPawnをcompileしてください。
エディタ実行時の追加パラメータについて - 今回、エディタからスタンドアロンモードで実行して試します。 - その際に追加で必要なパラメータがありますのでそちらを追加します。 - Edit > Editor Preferences
> Level EditorのPlay > Additional Launch Parameter に「-PixelStreamingURL=ws://127.0.0.1:8888 -PixelStreamingEnableHMD」を記 述
HTTPS化について - VRのPixel Streamingを利用する場合、HTTPS環境が必要となります。今回、ロー カル環境のため、簡易的にHTTPS化を行います。 - この後の操作ではコマンドを打って行います。以下のうちお好みの方法・アプリケー ションを利用して行ってください。 - Git
Bashと呼ばれるGitやLinux・macOSでよく使われるシェルなどを使用できるようするアプリケー ションを利用する。ドキュメントには、こちらが書かれています(個人的にはアプリケーション入れる だけで済むのでこちらのほうが簡単だと思います)。インストールの方法は こちらを参照してくださ い。 - PowerShellもしくはコマンドプロンプトでやりたいんだ !!!という方は、OpenSSLを導入するやり方で 行ってください。導入には こちらの記事がわかりやすいかと思います。 ※ 各種インストールの詳しい方法は、今回の内容とは離れた内容になりますので割愛します。
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に変更してください。
HTTPS化について
HTTPS化について
HTTPS化について
サーバー準備 - Pixel Streamingでは、WebRTCという技術を用いるに当たり、UEアプリを動かす サーバー以外にSignalling Serverというサーバーが必要になります。 - そのための手順が次ページ以降のものになります。
サーバー準備 1. setup.batの実行(Epicのサンプルでは、nodejsを利用してサーバーを立ち上げており、こ れらの必要なものを整えるbatファイルです。) 2. 上記の実行終了後にStart_SignallingServer.ps1ファイルを実行してください。 ※ Start_SignallingServer.ps1が動かない場合は、セキュリティポリシーの関係で動かな いかもしれないです。 管理者権限でPower
Shellを実行し、「Set-ExecutionPolicy RemoteSigned」をセットしてください。 今回、普段Power Shellのスクリプトを積極的に動かしていない環境で試したとき、初期状 態がスクリプトを許可しない「Restricted」という状態であったため、PowerShellのスクリプトが 動きませんでした。そのため、上記のセキュリティポリシーの設定が必要でした。 - ※ もしかしたら、 .bat(windowsのバッチファイル)などでスクリプトを組んで、そこから実行させると実行できるかもしれませんが、今回はわき 道にそれるため補足として記述するのみにしておきます。
サーバー準備 1. setup.batの実行(Epicのサンプルでは、nodejsを利用してサーバーを立ち上げて おり、これらの必要なものを整えるbatファイルです。) 2. 上記の実行終了後にStart_SignallingServer.ps1ファイルを実行してください。
サーバー準備
サーバー準備
サーバー準備の注意事項 - Start_SignallingServer.ps1が動かない場合は、セキュリティポリシーの関係で動 かないかもしれないです。 - その場合は、管理者権限でPower Shellを実行し、「Set-ExecutionPolicy RemoteSigned」 をセットしてください。 -
今回、普段Power Shellのスクリプトを積極的に動かしていない環境で試したとき、 初期状態がスクリプトを許可しない「Restricted」という状態であったため、 PowerShellのスクリプトが動きませんでした。そのため、上記のセキュリティポリ シーの設定が必要でした。 - ※ もしかしたら、.bat(windowsのバッチファイル)などでスクリプトを組んで、そこから実行させると実行できるかもしれませんが、今 回はわき道にそれるため補足として記述するのみにしておきます。
サーバー準備の注意事項 - Start_SignallingServer.ps1が動かない場合は、セキュリティポリシーの関係で動 かないかもしれないです。 - その場合は、管理者権限でPower Shellを実行し、「Set-ExecutionPolicy RemoteSigned」 をセットしてください。 -
今回、普段Power Shellのスクリプトを積極的に動かしていない環境で試したとき、 初期状態がスクリプトを許可しない「Restricted」という状態であったため、 PowerShellのスクリプトが動きませんでした。そのため、上記のセキュリティポリ シーの設定が必要でした。 - ※ もしかしたら、.bat(windowsのバッチファイル)などでスクリプトを組んで、そこから実行させると実行できるかもしれませんが、今 回はわき道にそれるため補足として記述するのみにしておきます。
サーバー準備の注意事項
いざ実行 Meta Quest3を利用して実際に試してみます。 1. UEのエディターでスタンドアロンモードで実行します。 2. PCとMeta Questが同じネットワーク(Wifiなど)内で接続されているかどうかを確 認し、Meta Questのブラウザを使用して接続します。
a. 接続するURLですが、PCのIPアドレスを打ち込んで接続する必要があります。 PowerShellで ipconfigコマンドを打ち込み、「 IPv4アドレス」欄のIPアドレスを確認してください。このアドレスが接続 先になります。 b. 192.168.◦◦.◦◦のようなものです。 3. 接続が安全でないようなページになりますが、詳細設定を開き、接続してください。
いざ実行
実行した!!!!!!! …と思いきや
実行した!!!!!!! …と思いきや 1. 床にカメラが埋まっている... - HMDなどのトラッキングは Webフロント側の実装で「 WebXRController」というclassで実装されて います。 -
WebXR Device APIを利用して実装されていますが、自分の環境ではうまく床からの位置が調整で きていないのかこのような現象になっています。 2. 動画では伝わらないのですが、寄り目になるような(右と左の映像がずれてしまって いるため起こる現象だと思われます)形になる - こちらについては、Quest2だときれいに見えるようです。しかし、他のデバイスだとうまくいかないよ うです。 - issue: https://github.com/EpicGames/PixelStreamingInfrastructure/issues/242 3. サムスティックの動作がおかしい(前に入力しているのに下の入力になってしまう)
解放されているXR固有のイベントについて - Pixel Streamingのフロントエンドライブラリでは、各種イベントがdispatchEventと して登録されています。 - XRでは、「xrFrame」「xrSessionStarted」「xrSessionEnded」が存在しています。 - また、ライブラリの処理としては、PixelStreamingInfrastructure >
Frontend > library > src > WebXR > WebXRController.tsを見に行くことでライブラリで行わ れている実装を確認できます。