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
980
そろそろ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
430
Other Decks in Programming
See All in Programming
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
1
13k
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
250
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
550
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
120
10 Costly Database Performance Mistakes (And How To Fix Them)
andyatkinson
0
330
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
280
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
390
RailsGirls IZUMO スポンサーLT
16bitidol
0
180
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
470
Porting a visionOS App to Android XR
akkeylab
0
460
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
570
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Fireside Chat
paigeccino
37
3.5k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Code Reviewing Like a Champion
maltzj
524
40k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
The Language of Interfaces
destraynor
158
25k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
What's in a price? How to price your products and services
michaelherold
246
12k
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を見に行くことでライブラリで行わ れている実装を確認できます。