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

# はじめに

Unity Render StreamingとはUnityのゲーム画面をWebブラウザに流し、Webブラウザからはキーボード、マウス、タッチ、ボタンで入力できるようにした仕組みです。この仕組みでHDRPをサポートしないPCでもブラウザ経由で確認できるといったもののようです。詳細や制約などは[Unity & WebRTC – ブラウザーと Unity を繋げる – Unity Blog](https://blogs.unity3d.com/jp/2019/09/17/stream-high-quality-real-time-graphics-through-your-browser-with-our-new-webrtc-framework/)が詳しいです。
この仕組みは[チュートリアル](https://github.com/Unity-Technologies/UnityRenderStreaming/blob/1.1.1-preview/Packages/com.unity.renderstreaming/Documentation~/jp/index.md)が用意されていてHDRPのサンプルプロジェクトで動作確認できます。
なかなか面白い仕組みなのでサンプルプロジェクトを調べて自前のプロジェクトに組込む手順をまとめました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Unity Render Streaming <a href="https://t.co/ak84aB2Gw8">https://t.co/ak84aB2Gw8</a> <a href="https://twitter.com/YouTube?ref_src=twsrc%5Etfw">@YouTube</a>さんから</p>&mdash; KOGA Mitsuhiro (@shiena) <a href="https://twitter.com/shiena/status/1178352469711024129?ref_src=twsrc%5Etfw">September 29, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# 使い方

## 試した環境

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

更に[ドキュメント](https://github.com/Unity-Technologies/UnityRenderStreaming/blob/1.1.1-preview/Packages/com.unity.template.renderstreaming/Documentation~/jp/index.md)によるとGraphics APIは`DirectX11`のみをサポートして、[NVIDIA VIDEO CODEC SDK](https://developer.nvidia.com/video-encode-decode-gpu-support-matrix)に公開されているグラフィックボードを推奨しています。

## インストール

1. Package Managerを開き、`Advanced`から`Show dependencies`と`Show preview packages`をチェックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8995/569b98f3-3c23-4608-7500-d975ca8613fd.png)

1. `In Project`をクリックして`All packages`に切り替えます。
1. パッケージ一覧から`Unity Render Streaming`を探して右下の`Install`ボタンからインストールします。検索窓に`Streaming`と入力するとパッケージ一覧を絞りこめるので探すのが楽です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8995/5c144b34-c925-426e-8b9b-1384669717ea.png)

1. Unity Render StreamingはInput Systemに依存していて有効にするか確認ダイアログが出るので問題なければ`Yes`ボタンを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8995/c7aa2fa4-47bf-1a6c-25c8-f094c5069cef.png)

1. Webサーバーとの連携はサンプルプロジェクトのスクリプトを流用すると楽なので取り込みます。
	1. もう一度Package ManagerからUnity Render Streamingを選択してHDRPの`Import in project`ボタンを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8995/1a2af618-503d-ad52-545d-af3a72f201ef.png)

	1. サンプルプロジェクトをインポートするダイアログが開くので`Scripts`のみ選択して`インポート`ボタンを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8995/cd1063ad-3427-4221-b595-92554032ae72.png)

	1. サンプルプロジェクトは`High Definition RP`に依存していて`Import in project`ボタンを押した時にインストールされています。ですが不要ならアンインストールしても構いません。


## Render Streamingの設定

1. まずはブラウザに表示するカメラをHierarhyに追加して[SimpleCameraController](https://github.com/Unity-Technologies/UnityRenderStreaming/blob/1.1.1-preview/Assets/Scripts/SimpleCameraController.cs)をアタッチ、Audio Listenerを削除します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8995/6034e9c8-0d1e-a7fa-a8da-5ab739789b0f.png)

1. 次にRender Streaming用に空のGameObjectをHierarhyを追加して[RenderStreaming](https://github.com/Unity-Technologies/UnityRenderStreaming/blob/1.1.1-preview/Assets/Scripts/RenderStreaming.cs)をアタッチ、`CaptureCamera`にブラウザ用カメラを設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8995/f515be86-372a-4f23-1a25-13dc7ca5bffe.png)

1. メニュー > Render Streaming > Download web appからWebサーバーをダウンロードします。保存先はデフォルトでプロジェクト直下ですがどこに保存しても構いません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8995/fc18ddf1-fff1-8095-ef7f-1aa1341bd5f2.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8995/ca259d22-680e-f7b3-a8d4-389879f87e65.png)


## Render Streamingを試す

1. ダウンロードした[webserver.exe](https://github.com/Unity-Technologies/UnityRenderStreaming/releases/tag/1.1.1-preview)を実行します。
1. Unityエディタのプレイボタンを押してゲームを実行します。
1. ブラウザで`http://localhost`を開きます。再生ボタンが表示されているのでクリックしてしばらく待つとゲーム画面が表示されます。
1. ブラウザで左ドラッグすると移動、右ドラッグすると回転します。

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

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Unity Render Streaming <a href="https://t.co/ak84aB2Gw8">https://t.co/ak84aB2Gw8</a> <a href="https://twitter.com/YouTube?ref_src=twsrc%5Etfw">@YouTube</a>さんから</p>&mdash; KOGA Mitsuhiro (@shiena) <a href="https://twitter.com/shiena/status/1178352469711024129?ref_src=twsrc%5Etfw">September 29, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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

残念ながらダウンロードしたバイナリのwebサーバーはボタンに関してカスタマイズできないようです。
[Webサーバーソース](https://github.com/Unity-Technologies/UnityRenderStreaming/tree/1.1.1-preview/WebApp)をダウンロードして、[app.js#L42-L67](https://github.com/Unity-Technologies/UnityRenderStreaming/blob/1.1.1-preview/WebApp/public/scripts/app.js#L42-L67)あたりを変更すると任意のテキストと色のボタンを作れそうです。
また、ブラウザの入力は[ブラウザ入力処理](https://github.com/Unity-Technologies/UnityRenderStreaming/blob/1.1.1-preview/Packages/com.unity.template.renderstreaming/Documentation~/jp/input.md)に従って送信されて[RemoteInput.cs](https://github.com/Unity-Technologies/UnityRenderStreaming/blob/1.1.1-preview/Assets/Scripts/RemoteInput.cs)でいい感じに処理がふりわけられるようです。

# 参考リンク

* [Unity & WebRTC – ブラウザーと Unity を繋げる – Unity Blog](https://blogs.unity3d.com/jp/2019/09/17/stream-high-quality-real-time-graphics-through-your-browser-with-our-new-webrtc-framework/)
* [チュートリアル](https://github.com/Unity-Technologies/UnityRenderStreaming/blob/1.1.1-preview/Packages/com.unity.renderstreaming/Documentation~/jp/index.md)
* https://github.com/Unity-Technologies/UnityRenderStreaming/
	* [ドキュメント](https://github.com/Unity-Technologies/UnityRenderStreaming/blob/1.1.1-preview/Packages/com.unity.template.renderstreaming/Documentation~/jp/index.md)
	* [ブラウザ入力処理](https://github.com/Unity-Technologies/UnityRenderStreaming/blob/1.1.1-preview/Packages/com.unity.template.renderstreaming/Documentation~/jp/input.md)
	* [Webサーバーソース](https://github.com/Unity-Technologies/UnityRenderStreaming/tree/1.1.1-preview/WebApp)
	* [app.js#L42-L67](https://github.com/Unity-Technologies/UnityRenderStreaming/blob/1.1.1-preview/WebApp/public/scripts/app.js#L42-L67)
	* [SimpleCameraController.cs](https://github.com/Unity-Technologies/UnityRenderStreaming/blob/1.1.1-preview/Assets/Scripts/SimpleCameraController.cs)
	* [RenderStreaming.cs](https://github.com/Unity-Technologies/UnityRenderStreaming/blob/1.1.1-preview/Assets/Scripts/RenderStreaming.cs)
	* [RemoteInput.cs](https://github.com/Unity-Technologies/UnityRenderStreaming/blob/1.1.1-preview/Assets/Scripts/RemoteInput.cs)
* [NVIDIA VIDEO CODEC SDK](https://developer.nvidia.com/video-encode-decode-gpu-support-matrix)