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
790
そろそろ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
280
Other Decks in Programming
See All in Programming
MCP with Cloudflare Workers
yusukebe
2
270
非ブラウザランタイムとWeb標準 / Non-Browser Runtimes and Web Standards
petamoriken
0
410
EC2からECSへ 念願のコンテナ移行と巨大レガシーPHPアプリケーションの再構築
sumiyae
3
540
QA環境で誰でも自由自在に現在時刻を操って検証できるようにした話
kalibora
1
110
月刊 競技プログラミングをお仕事に役立てるには
terryu16
1
1.1k
オニオンアーキテクチャを使って、 Unityと.NETでコードを共有する
soi013
0
350
Scalaから始めるOpenFeature入門 / Scalaわいわい勉強会 #4
arthur1
1
380
Findy Team+ Awardを受賞したかった!ベストプラクティス応募内容をふりかえり、開発生産性向上もふりかえる / Findy Team Plus Award BestPractice and DPE Retrospective 2024
honyanya
0
130
htmxって知っていますか?次世代のHTML
hiro_ghap1
0
400
Cloudflare MCP ServerでClaude Desktop からWeb APIを構築
kutakutat
1
630
Androidアプリのモジュール分割における:x:commonを考える
okuzawats
1
260
Запуск 1С:УХ в крупном энтерпрайзе: мечта и реальность ПМа
lamodatech
0
870
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
The Cost Of JavaScript in 2023
addyosmani
46
7.2k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.1k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Producing Creativity
orderedlist
PRO
343
39k
Thoughts on Productivity
jonyablonski
68
4.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
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を見に行くことでライブラリで行わ れている実装を確認できます。