💡

[UE5]PixelStreamingDemoをAWSに実装する

2022/10/11に公開

AWS

Unreal Engine

pixelstreaming

tech

はじめに

Pixel StreamingはUEアプリをWeb上で動作させるための機能です。クライアント側は入力、イベント等の情報をサーバーに送り、サーバー側でリアルタイムにレンダリングされたフレームを再生する、といった具合です。
要はハイスペックマシンがなくても、通信環境さえ良ければキレイなUE5のコンテンツをWebで楽しめる素晴らしい機能です。

しかし、その背景には様々な課題があります。AWSやAzure等のクラウドサーバーを利用してPixelStreamingを実装する場合、おびただしい請求額があなたを襲うことでしょう。また、技術的な面でもUEだけでなく、Web、サーバー、データベースといったバックエンドの知識も必要になってきます(シンプルなコンテンツなら必要ないですが)。

この記事では、上述したような修羅の道を歩まんとするエンジニアの第一歩を後押しするため、Epic公式が用意しているPixelStreamingDemoをAWS上に実装するところまでを書こうと思います。

用意するもの

AWSアカウント
vCPU使用リミット引き上げ(申請に時間がかかる場合があるので事前に済ませておくと良い)
パッケージ化したPixelStreamingDemo
Node.jsインストーラー
お金

開発環境

Windows11
UE5.0.2 (ソースコードビルド)

私はソースコードビルドしたUEを使用していますが、パッケージ化できれば良いのでソースコードビルドでなくても構いません。

作業開始

全体の流れです。

PixelStreamingDemoのパッケージ化
インスタンスを作成する準備
EC2インスタンス作成
サーバーの設定
起動と確認

順番にやっていきましょう。

1. PixelStreamingDemoのパッケージ化

1.1 PixelStreamingDemoのダウンロード

下記のサイトからDemoをダウンロードして起動させます。

1.2. 初期設定の確認

プロジェクトが起動したら、PixelStreamingのプラグインを有効にします（最初から有効になっていると思います）。

もう一つ、プロジェクト設定からVirtualJoyStickを表示させておきます。DemoはJoyStickがなくても動かすことはできますが、念のため表示させておきましょう。

1.3. パッケージ化

設定は以上なので、パッケージ化します。パッケージ化の設定はデフォルトのままです。

1.4. PixelStreamingDemoのデフォルトサイトの設定

PixelStreamingDemoには最初からブラウザ（正確にはJavaScript）とUE5アプリとの素晴らしいイベント連携が用意されています。しかし、デフォルトではそのサイトは表示されません。
それを表示させる設定をします。

PixelStreamingDemoのプロジェクトフォルダにある「WebInterface」フォルダの中身全てを、パッケージ化した「Windows」フォルダの「\Windows\Samples\PixelStreaming\WebServers\SignallingWebServer\Public」にコピペします。

その後、
「\Windows\Samples\PixelStreaming\WebServers\SignallingWebServer」に行き、「config.json」をメモ帳等で開きます。

下の画像のように、「HomepageFile」という値を持ってきた「PixelDemo.htm」に変更します。

2. インスタンスを作成する準備

2.1. vCPU使用リミットの引き上げ

今回使うg4dn.xlargeは、GPUインスタンスといって、AWSアカウントを作成しただけでは使用できません。
制限緩和リクエストをする必要があります。
参考リンクを貼っておきますので、手順通りに申請してみてください。
自分は申請が通るまで2日程かかりました。

2.2. サーバーに持っていくものの準備

Node.jsインストーラー

私はv18.7.0を使っています。
最新版でもLTSでも問題ないと思います。
https://nodejs.org/ja/download/

2.3. IAMポリシーの作成

EC2インスタンスでUEアプリを動作させるにはNVIDIAドライバーが必要です。デフォルトでインストールされていないのでインストールしなければなりませんが、そのままではドライバーをダウンロードすることができません。
ドライバーをダウンロードするために、S3へのアクセス権限を付与します。

AWSのサービスでIAMを検索し、ポリシーを選択します。

ポリシーの作成を押して、JSONタブから下記のコードをコピペします。
ポリシー名は「NVIDIA-DriverAccess」にしました。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "s3:Get*",
                "s3:List*"
            ],
            "Resource": [
                "arn:aws:s3:::nvidia-gaming/*",
                "arn:aws:s3:::nvidia-gaming",
                "arn:aws:s3:::ec2-windows-nvidia-drivers/*",
                "arn:aws:s3:::ec2-windows-nvidia-drivers"
            ]
        }
    ]
}

2.4. IAMロールの作成

作成したポリシーを割り当てるロールを作成します。
ロールの作成を押して、ユースケースをEC2に選択し、次へ。

先ほど作成した「NVIDIA-DriverAccess」にチェックを入れて、次へ。
ロール名は「PixelStreaming_EC2Role」にしました。

3. EC2インスタンス作成

作成したロールを基にインスタンスを作成しましょう。
EC2ダッシュボードからインスタンスを起動します。

3.1. AMI

Microsoft Windows Server 2022 Base

3.2. インスタンスタイプ

g4dn.xlarge

3.3. ネットワーク設定

大事なポイントです。
3つ設定しましょう。
TCP 8888はUE5アプリとSignallingServerが通信するためのデフォルトのポート番号です。
リモートデスクトップ（RDP）はセキュリティ的にマイIPにしておきましょう。

3.4. ストレージ設定

AMIをWindowsにしたら、自動的に30GBになっているはずです。
PixelStreamingDemoの容量は3GBちょいなのでそのままでも大丈夫です。
ちなみにスナップショットのサイズ的なエラーが出るため30GB未満には設定できません。

3.5. IAMロールの設定

一番下の高度な詳細から、IAMインスタンスプロフィールを「PixelStreaming_EC2Role」にしましょう。設定し忘れても後から変更できます。

以上で設定は完了です。起動しましょう。

4. サーバーの設定

4.1. サーバーに接続

接続方法は下記リンクを参考にしてください（丸投げ）。

4.2. ローカルからサーバーにファイル送信

用意しておいたNode.jsとパッケージ化したPixelStreamingDemoのフォルダ「Windows」をサーバーに送ります。ドラッグ&ドロップはできないですが、「Ctrl+C」、「Ctrl+V」ならそのままコピペできます。

4.3. Node.jsのインストール

持ってきたNode.jsインストーラーを起動してインストールしておきましょう。
デフォルトのままインストールでOKです。

4.4. NVIDIAドライバーのインストール

PowerShellを管理者権限で実行します。
下記のコードを打ちます。
まとめてコピペしてEnterで大丈夫です。

$Bucket = "nvidia-gaming"
$KeyPrefix = "windows/latest"
$LocalPath = "$home\Desktop\NVIDIA"
$Objects = Get-S3Object -BucketName $Bucket -KeyPrefix $KeyPrefix -Region us-east-1
foreach ($Object in $Objects) {
    $LocalFileName = $Object.Key
    if ($LocalFileName -ne '' -and $Object.Size -ne 0) {
        $LocalFilePath = Join-Path $LocalPath $LocalFileName
        Copy-S3Object -BucketName $Bucket -Key $Object.Key -LocalFile $LocalFilePath -Region us-east-1
    }
}

デスクトップにNVIDIAフォルダが作成されるので、インストーラーを実行します。

特にいじることなくインストールを完了させましょう。
もしかしたらここで一度再起動しておくとより安心かもしれません。

4.4. ファイアウォールの設定

ファイアウォールの設定を開きます。
外部と通信するためのTCP80と、SignallingServerと通信するためのTCP8888を開けておきます。

5. 起動と確認

5.1. SignallingServerの起動

先ほどからちょこちょこ出ているSignallingServerとはなんぞやという話ですが、UEアプリ内のPixelStreamingプラグインとブラウザを接続する仲介役のような役割を果たしてくれます。
なので、私たちはChromeなどのブラウザからAWSに構築されたSignallingServerに接続することで、SignallingServerがUEアプリに繋げてくれます。

SignallingServerは持ってきた「\Windows\Samples\PixelStreaming\WebServers\SignallingWebServer\platform_scripts\cmd」フォルダの中に入っています。

PowerShellを管理者権限で実行し、上記のフォルダまで移動し、「setup.ps1」を実行します。
これでSignallingServerを起動するために必要なものを取得してくれます。

その後、「Start_SignallingServer.ps1」を実行するとSignallingServerが起動しますが、いくつか起動オプションをつけます。
起動オプションについては公式ページに詳しく載っています。

とりあえず起動するだけなら下記のコードをコピペして、your.ipの部分をインスタンスのパブリックIPに変更してください。

./Start_SignallingServer.ps1 --publicIp your.ip --httpPort 80 --StreamerPort 8888

起動に成功すると、下の画像のようになります。

5.2. PixelStreamingDemoの起動

Demoを起動します。
コマンドプロンプトを管理者権限で実行し、「Windows」フォルダ直下にある「PixelStreamingDemo.exe」を起動しますが、ここでも起動オプションをつけます。
your.ipはインスタンスのパブリックIPです。

PixelStreamingDemo.exe -AudioMixer -PixelStreamingIP=your.ip -PixelStreamingPort=8888

起動すると、いつものアプリケーションのように画面が出てきます。

これで、PixelStreamingの準備が整いました！

5.3 Google Chromeから確認

PCでもスマホからでも良いです。おすすめはChromeですが、iPhoneの方はSafariでも問題ないです。
Chromeを開いて、アドレス欄にインスタンスのパブリックIPを打つと、Demoのサイトとアプリが動作していることが確認できるかと思います。

試しにキャラクターを変更してみると、サーバーで立ち上がっているアプリの方でも変更されると思います。

まとめ

久しぶりに大変な作業でした。
PixelStreamingは将来性を感じますが、私の2bit脳内メモリでは単純に知識量が足りないと痛感しました。やるときはWeb、サーバーのプロフェッショナルと一緒にやるべきですね。
PixelStreamingプラグインにはMatchmakerも入っているので、そちらの使い方も勉強してマルチプレイゲームでも作りたいなあ。