Unite Tokyo 2019で発表されたUnity Render Streamingを試す

はじめに

Unity Render StreamingとはUnityのゲーム画面をWebブラウザに流し、Webブラウザからはキーボード、マウス、タッチ、ボタンで入力できるようにした仕組みです。この仕組みでHDRPをサポートしないPCでもブラウザ経由で確認できるといったもののようです。詳細や制約などはUnity & WebRTC – ブラウザーと Unity を繋げる – Unity Blogが詳しいです。
この仕組みはチュートリアルが用意されていてHDRPのサンプルプロジェクトで動作確認できます。
なかなか面白い仕組みなのでサンプルプロジェクトを調べて自前のプロジェクトに組込む手順をまとめました。

Unity Render Streaming https://t.co/ak84aB2Gw8 @YouTubeさんから

— KOGA Mitsuhiro (@shiena) September 29, 2019

使い方

試した環境

• Windows 10
• Unity2019.2.6f1
• Unity Render Streaming 1.1.1

更にドキュメントによるとGraphics APIはDirectX11のみをサポートして、NVIDIA VIDEO CODEC SDKに公開されているグラフィックボードを推奨しています。

インストール

1. Package Managerを開き、AdvancedからShow dependenciesとShow preview packagesをチェックします。
   

2. In ProjectをクリックしてAll packagesに切り替えます。

3. パッケージ一覧からUnity Render Streamingを探して右下のInstallボタンからインストールします。検索窓にStreamingと入力するとパッケージ一覧を絞りこめるので探すのが楽です。
   

4. Unity Render StreamingはInput Systemに依存していて有効にするか確認ダイアログが出るので問題なければYesボタンを押します。
   

5. Webサーバーとの連携はサンプルプロジェクトのスクリプトを流用すると楽なので取り込みます。

   1. もう一度Package ManagerからUnity Render Streamingを選択してHDRPのImport in projectボタンを押します。
   2. サンプルプロジェクトをインポートするダイアログが開くのでScriptsのみ選択してインポートボタンを押します。
   3. サンプルプロジェクトはHigh Definition RPに依存していてImport in projectボタンを押した時にインストールされています。ですが不要ならアンインストールしても構いません。

Render Streamingの設定

1. まずはブラウザに表示するカメラをHierarhyに追加してSimpleCameraControllerをアタッチ、Audio Listenerを削除します。
   

2. 次にRender Streaming用に空のGameObjectをHierarhyを追加してRenderStreamingをアタッチ、CaptureCameraにブラウザ用カメラを設定します。
   

3. メニュー > Render Streaming > Download web appからWebサーバーをダウンロードします。保存先はデフォルトでプロジェクト直下ですがどこに保存しても構いません。
   
   

Render Streamingを試す

1. ダウンロードしたwebserver.exeを実行します。
2. Unityエディタのプレイボタンを押してゲームを実行します。
3. ブラウザでhttp://localhostを開きます。再生ボタンが表示されているのでクリックしてしばらく待つとゲーム画面が表示されます。
4. ブラウザで左ドラッグすると移動、右ドラッグすると回転します。

この動画ではブラウザを操作した時にカメラのTransformが変化しているのが分かると思います。

Unity Render Streaming https://t.co/ak84aB2Gw8 @YouTubeさんから

— KOGA Mitsuhiro (@shiena) September 29, 2019

ブラウザ側のボタンカスタマイズ

残念ながらダウンロードしたバイナリのwebサーバーはボタンに関してカスタマイズできないようです。
Webサーバーソースをダウンロードして、app.js#L42-L67あたりを変更すると任意のテキストと色のボタンを作れそうです。
また、ブラウザの入力はブラウザ入力処理に従って送信されてRemoteInput.csでいい感じに処理がふりわけられるようです。

参考リンク

• Unity & WebRTC – ブラウザーと Unity を繋げる – Unity Blog
• チュートリアル
• https://github.com/Unity-Technologies/UnityRenderStreaming/
  • ドキュメント
  • ブラウザ入力処理
  • Webサーバーソース
  • app.js#L42-L67
  • SimpleCameraController.cs
  • RenderStreaming.cs
  • RemoteInput.cs
• NVIDIA VIDEO CODEC SDK