Pixel Streaming使用して 企業紹介ページ作ってみた

【オンライン】Unreal Engine もくもく会 in 富山 (UEMT)＃20 で使用したLT資料になります。

Transcript

1. Pixel Streaming使用して 企業紹介ページ作ってみた 【オンライン】Unreal Engine もくもく会 in 富山 (UEMT)＃20 2023年10月14日 まいけるさん（@MasoronaT）
2. まいけるさん（@MasoranaT） 都内に住むITエンジニア。 UEは2023年に入って少ししてから始めました！ 業務では今回紹介するPixel Streaming関連やVR関連を 触っています！ まだまだ修行中の身です📜 趣味: ドラム 自己紹介
3. 早速ですが、Unreal Engineを使用してWebコンテンツを作 りたくないですか？
4. そんなあなたにPixel Streaming！！
5. 今回触れない内容 - × Pixel Streamingの実装方法 - × Pixel Streamingをさくっと試すためにやるべきことの解説 - 〇 Pixel Streamingの概要 - 〇 Pixel Streamingを利用して実際に自社ホームページに採用するにあたって良かった点・考慮した点・辛み点 ※ 試す場合には、 公式以外に加えて以下の解説ページがわかりやすいかと思います。 - 1.ローカル編　UE4 Pixel Streamingを試す #クラウドゲーミング - 誰でもどこでも、 PCでもスマホでも。❝ Microsoft Azure x Pixel Streaming❞を活用した万能テストプレイ環境を構築してみる
6. Pixel Streamingとは？ 一言で表すと... サーバーでUEのゲームを動かして、 それをWebブラウザで楽しもう！ という機能です。
7. Pixel Streamingとは？ Unreal Engine製のアプリケーションをサーバーで動作させ、レンダリング結果を WebRTCという技術を利用して映像や音声をユーザーへ送信したり、 ユーザーの入力をUnreal Engine側に送ったりすることで WebブラウザでUnreal Engineアプリケーションを体験できる機能のこと
8. 具体的な仕組みは？ ① ユーザーがSignalling Serverへアクセス（Webページへアクセス） ② Signalling Serverがユーザー（ブラウザ）と UEアプリ間の接続確立を行う（ユーザー、 UEとはそれぞれ WebSocket通信） ③ ユーザーとUE間でWebRTC（P2P）接続を開始し、UE側から映像や音声・イベントの送信、ユーザー側か らイベントの送信ができるようになる 　 なお、この接続中もSignalling ServerとユーザーやUEアプリはWeb Socket通信で常時接続を行っていま す（何らかの事象でストリームを中断することがなどがあるため）
9. 何が嬉しいの？ - サーバーでレンダリング等を行うため、多くの場合において ユーザーの端末のスペックに左右されず に複雑なシーン を体験してもらうことが可能 - ユーザーは実行ファイルやコンテンツファイルをダウンロードやインストールする必要がなく、ストリームのダウンロード のみでアプリケーションを体験できる。このため、ユーザー側は手軽に、 作成側は流出されたくない 3Dモデルを使用 することができます。 - マルチプラットフォーム対応する際、 個別のパッケージを作る必要がない 詳細: https://docs.unrealengine.com/5.2/ja/overview-of-pixel-streaming-in-unreal-engine/
10. 採用するにあたって工夫した点ある？ - サーバー1台で複数のUEアプリを立ち上げたかったため、 クオリティをできる限り維持しながら処理負荷を下げるよう な工夫をしました - FPSの固定化 - スケーラビリティの調整 - UEアプリの起動時にコマンドライン引数にて UEアプリ自体の解像度を少し落とした状態で固定 - ライティング・シャドウの調整 - UIはできるだけWebフロントで処理 - ネットワーク状況によっては、（基本的には）ストリームの品質が落ち、画質が荒れる場合があります。そのた め、UIはWebフロントで制御をし、クリックイベントなどを WebRTCのData Channelを通じてUE側へ送信（それ ぞれUEのプラグインやWebフロントのライブラリで対応しています） - 同時接続者数の制限や体験可能時間を制限するといった仕様であることやユーザーからリクエストされた時に UEア プリを起動する形としたため、サーバー実装をテンプレートから改造
11. 工夫を踏まえて実際どんな感じに組んだの？ こちらを利用したサイトは、 2023/10/23公開予定です！！問題が発生したため、公開を延期しています。
12. 採用してみて辛かった点・困った点ある？ - GPUを搭載する関係でサーバー代が気になる。 - 注: 中古でGPUを購入し、自分でホスティングする場合は初期費用 + 月々の電気代 + 月々のネットワークや負荷分散用に導入したサービス費 用で済む場合もあります。 - 必要な技術範囲が広かった - 配信系のWebサービスに求められる知識 + ゲーム開発に必要な知識 - 但し、サーバーのサンプル実装やフロントエンドのライブラリ、サーバーセッティングの方法がまとめられたgithubリポ ジトリなど参考にできるものがいくつもあったため大分助けられました - 1台で複数のUEアプリケーションを立ち上げる関係上、GPU負荷を考えて実装や調整などを行ったため、本当にPixel Streamingという選択肢で良かったのか？といった不安に駆られた（これは、普通にWebGL・WebGPUなどで十分満たせる のではないかという不安） - 後ほど説明しますが、デザイナーさんと 2人での開発であったため、 UEを使えて良かったことから不安と書きつつも採用して良かったと感じては います。 - なぜかChromeだと映像が止まる瞬間が多い（ 原因不明の未解決事件）
13. 採用してみて良かった点はある？ - ゲーム開発に豊富な知見がある状態ではないところからデザイナーさんと二人三脚で始めたため、 最初から高クオリ ティ絵が出てくるUnreal Engineで開発できた点が本当によかったです。 - 容易に複数のプラットフォーム対応できた 点 - 特に制限なく、Unreal Engineの機能を使用できた点 - サーバーレンダリングのため、通信環境さえ安定していたら「この端末で動かない（自分の環境では動いたのに ...）」 「この端末ではスペックが ...」といったことが起きにくいため、 営業時などに自社の宣伝をする際に手軽に触ってもらい やすかった点
14. よく参考にしていたサイト - https://github.com/TensorWorks/PixelStreamingCloudGuide - https://github.com/EpicGames/PixelStreamingInfrastructure - https://www.docswell.com/s/EpicGamesJapan/Z2EL9K-UE_UFE22S_Amocc - https://tech.isid.co.jp/entry/unreal-engine-pixel-streaming - https://tensorworks.com.au/blog/ - https://tensorworks.com.au/blog/an-open-architecture-for-scalable-pixel-streaming