Slide 1
Slide 1 text
UE5 Pixel Streamingで実現する、
デバイスを選ばない
⾼負荷アプリケーション
2024.7.31
ゲームソリューション部 えがわ
Slide 2
Slide 2 text
Xへの投稿の際は、
ハッシュタグ
#cm_odyssey
でお願いいたします。
2
お願い
Slide 3
Slide 3 text
⾃⼰紹介
えがわ（頴川 武⽣）
3
ゲームソリューション部
ソリューションアーキテクト
好きなもの
● データベース(RDB, NewSQL)
● AI/ML
● パン屋
Slide 4
Slide 4 text
本⽇の内容
話さないこと
● UE5の操作⽅法
● ゲームの作り⽅
● AWSの細かい設定周り
○ EC2の作成やIAMなど
● Pixel Streamingの細かい実装⽅法
● Pixel Streamingの最適化
4
Slide 5
Slide 5 text
今⽇の内容 5
話すこと
● Pixel Streamingとは！
Slide 6
Slide 6 text
本題の前に
(UEってなに？)
6
Slide 7
Slide 7 text
UEとは？
UE(Unreal Engine)は、Epic Games社が開発した⾼度な
ゲームエンジン。リアルタイム3Dグラフィックスの
作成に使⽤され、ゲーム開発だけでなく、映画、建
築、シミュレーションなど多岐にわたる分野で利⽤
されています。
7
Slide 8
Slide 8 text
本題の前に
(⼀般のアプリケーションはどうなってる？)
8
Slide 9
Slide 9 text
⼀般的なアプリケーション
量販店でソフトを購⼊
ソフトにあったハードでゲームをプレイ
9
帰ったら遊ぼー！
ゲーム売ってるでー
Slide 10
Slide 10 text
⼀般的なアプリケーション
ユーザーの端末にアプリをインストール
端末の性能を使いアプリをプレイ
10
遊びたいから
インストールしよー
ゲーム配布してるでー
ダウンロード
Slide 11
Slide 11 text
⼀般的なアプリケーション
インストールしたはいいが、
スペックが⾜らず、動かないことも...
11
せっかくインストール
したのに...
もうやらん！
Slide 12
Slide 12 text
Pixel Streamingとは？
12
Slide 13
Slide 13 text
Pixel Streamingとは？
UE5アプリケーションをサーバー上で実⾏し、
ウェブブラウザでストリーミングすることが可能
13
ゲーム遊ぶよー レンダリングするでー
WebRTC(P2P)
動画、⾳声データ
⼊⼒
Slide 14
Slide 14 text
Pixel Streamingとは？
サーバーのGPUでフレームの計算を⾏うため、
ユーザーの端末は送られてきたフレームを描画するだけ
14
古いPCでも動く！
サイコー
ワイが頑張るで...！
WebRTC(P2P)
動画、⾳声データ
⼊⼒
Slide 15
Slide 15 text
デモ動画
(再⽣できたら)
15
Slide 16
Slide 16 text
デモ動画 16
Slide 17
Slide 17 text
デモ画像
(動画が再⽣できなかったら)
17
Slide 18
Slide 18 text
デモ画像 18
Slide 19
Slide 19 text
Pixel Streamingの特徴まとめ 19
● 低遅延のストリーミング
● ⾼品質なグラフィックス
● クロスプラットフォーム対応
UnrealEngineのアプリケーションで使⽤可能な
クラウドレンダリングの仕組み
Slide 20
Slide 20 text
低遅延のストリーミング
WebRTC(Web Real-Time Communication)を使⽤したP2P接続
クライアントとアプリサーバー間で通信
20
WebRTC(P2P)
動画、⾳声データ
⼊⼒
あんま違和感ないな ワイが頑張ってるからや！
Slide 21
Slide 21 text
⾼品質なグラフィック
UE5の⾼度なレンダリング技術を使⽤することにより
フォトリアルな画質を実現
21
● Naniteによる⾼詳細なジオメトリ (LOD)
● Lumenによるグローバルイルミネーション
Slide 22
Slide 22 text
クロスプラットフォーム対応
ユーザーの端末に依存せずブラウザで起動するため、
クラスプラットフォーム開発が容易
22
http://hogehoge
Slide 23
Slide 23 text
なんかよさそう
23
Slide 24
Slide 24 text
やってみる
24
Slide 25
Slide 25 text
まえに
25
Slide 26
Slide 26 text
構築のための⽤語集
26
Slide 27
Slide 27 text
WebRTCの登場⼈物
● シグナリングサーバー
○ 接続情報を交換する仲介サーバー
● STUNサーバー
○ ⾃⾝のIPアドレスを確認するためのサーバー
● TURNサーバー(必要ならば)
○ データを中継するためのサーバー
27
WebRTCを⾏うための登場⼈物
Slide 28
Slide 28 text
シグナリングサーバー 28
オファーアンサーモデルでSDP(Session Description Protocol
)や
ICE（Interactive Connectivity Establishment
）候補を交換
動画や⾳声はこんな感じで！
接続先の候補も送るね！
承知したやで！
ワイも送るで！
SDP、ICE候補
オファー
アンサー
Slide 29
Slide 29 text
N
A
T
STUNサーバー 29
外から⾒た時のパブリックIPを取得可能
NATを超えた接続で必要
N
A
T
IP:192.168.aaa.aaa IP:10.0.ccc.ccc
STUNサーバー
俺ってどう？ お前はIP: 200.bbb.bbb.bbbだ
IP: 200.bbb.bbb.bbb IP: 500.ddd.ddd.ddd
Slide 30
Slide 30 text
N
A
T
TURNサーバー 30
直接P2P接続が確⽴できない場合、
TURNサーバーを中継してデータを送信
N
A
T
IP:192.168.aaa.aaa IP:10.0.ccc.ccc
TURNサーバー
代わりに接続
おねがーい
しゃあなしやで
IP: 200.bbb.bbb.bbb IP: 500.ddd.ddd.ddd
Slide 31
Slide 31 text
やってみる
(ローカル編)
31
Slide 32
Slide 32 text
UE5のアプリケーションを作成
UnrealEngineのサンプルプロジェクトを使⽤します
32
※80GB以上あるので、容量には注意
Slide 33
Slide 33 text
PixelStreamingに対応
アプリケーションをPixelStreamingに対応させるには
プラグインを追加するだけです
33
※これにチェックいれるだけ！
Slide 34
Slide 34 text
サーバー構築(ローカル編)
GitHubにフロントエンド、バックエンドが⽤意されて
います
34
Slide 35
Slide 35 text
サーバー構築(ローカル編)
⼿順に従い実⾏するだけでサーバーが起動します
35
Slide 36
Slide 36 text
サーバー構築(ローカル編)
UE5アプリケーションを起動します。
アプリケーションがサーバーに接続すると、
コンソール「Streamer connected」と表⽰されます
36
Slide 37
Slide 37 text
サーバー構築(ローカル編) 37
アプリケーションがサーバーに接続できたので、
ブラウザで確認します
Slide 38
Slide 38 text
やってみる
(⼩規模AWS編)
38
Slide 39
Slide 39 text
AWSで試してみる 39
EC2(Windows)で試してみます。
可⽤性は考えず1台のEC2で試してみます。
Slide 40
Slide 40 text
サーバー構築(AWS)
UE5アプリケーションをS3に配置
40
Slide 41
Slide 41 text
サーバー構築(AWS)
EC2インスタンス(GPUが必要)に接続
以下をPowerShellで実⾏することでAWS CLIが使⽤できます
msiexec.exe /i https://awscli.amazonaws.com/AWSCLIV2.msi
41
そしてUE5アプリケーションをダウンロード
Slide 42
Slide 42 text
サーバー構築(AWS)
Nvidia ドライバーのインストール
42
Slide 43
Slide 43 text
サーバー構築(AWS)
Firewallの80, 8888ポートを開けておきます
43
Slide 44
Slide 44 text
サーバー構築(AWS)
サーバーを起動します
44
Slide 45
Slide 45 text
サーバー構築(AWS)
アプリのショートカットに以下の内容をTargetに追加します
-PixelStreamingURL=ws://127.0.0.1:8888 -RenderOffscreen
-AllowPixelStreamingCommands
45
※オフスクリーンでレンダリングすることで不要な
リソースを使わずに済みます。
Slide 46
Slide 46 text
サーバー構築(AWS)
ブラウザで仮想マシンのIPアドレスにアクセス
すると！
46
※軽いサンプルプロジェクトに変更してます
Slide 47
Slide 47 text
なんか⼤変そう
47
Slide 48
Slide 48 text
AWS MarketPalace
で簡単に構築できます！
48
Slide 49
Slide 49 text
AWS MarketPlace
Pixel Streaming⽤の製品が登録されてます
使⽤料はAWS費⽤だけ！
49
Slide 50
Slide 50 text
AWS MarketPlace
CloudFormationのパラメータを⼊⼒するだけ！
50
Slide 51
Slide 51 text
AWS MarketPlace
いかしたアーキテクチャを簡単に作れます！
51
Slide 52
Slide 52 text
簡単に構築できそうだし
デメリットは...?
52
Slide 53
Slide 53 text
⾼い！
53
Slide 54
Slide 54 text
(費⽤が)
めっちゃ⾼い！
54
Slide 55
Slide 55 text
費⽤について
クラウドでGPUを使⽤することになるので、
数千⼈がプレイするようなアプリケーションになると
とても⾼額になります
55
Slide 56
Slide 56 text
アプリケーションと
マッチするタイミングで
使⽤しましょう！
56
Slide 57
Slide 57 text
どんなアプリが適している？
57
Slide 58
Slide 58 text
どんなアプリが適している？
デバッグ会社のテスト環境
58
バグみつけてやるんだから！
Slide 59
Slide 59 text
どんなアプリが適している？
アイドルのコンサートでの3D合成やメタバースなど
59
Slide 60
Slide 60 text
No content
Slide 61
Slide 61 text
No content