はじめに
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に公開されているグラフィックボードを推奨しています。
インストール
Package Managerを開き、
Advanced
からShow dependencies
とShow preview packages
をチェックします。
In Project
をクリックしてAll packages
に切り替えます。パッケージ一覧から
Unity Render Streaming
を探して右下のInstall
ボタンからインストールします。検索窓にStreaming
と入力するとパッケージ一覧を絞りこめるので探すのが楽です。
Unity Render StreamingはInput Systemに依存していて有効にするか確認ダイアログが出るので問題なければ
Yes
ボタンを押します。
-
Webサーバーとの連携はサンプルプロジェクトのスクリプトを流用すると楽なので取り込みます。
- もう一度Package ManagerからUnity Render Streamingを選択してHDRPの
Import in project
ボタンを押します。 - サンプルプロジェクトをインポートするダイアログが開くので
Scripts
のみ選択してインポート
ボタンを押します。 - サンプルプロジェクトは
High Definition RP
に依存していてImport in project
ボタンを押した時にインストールされています。ですが不要ならアンインストールしても構いません。
- もう一度Package ManagerからUnity Render Streamingを選択してHDRPの
Render Streamingの設定
まずはブラウザに表示するカメラをHierarhyに追加してSimpleCameraControllerをアタッチ、Audio Listenerを削除します。
次にRender Streaming用に空のGameObjectをHierarhyを追加してRenderStreamingをアタッチ、
CaptureCamera
にブラウザ用カメラを設定します。
メニュー > Render Streaming > Download web appからWebサーバーをダウンロードします。保存先はデフォルトでプロジェクト直下ですがどこに保存しても構いません。
Render Streamingを試す
- ダウンロードしたwebserver.exeを実行します。
- Unityエディタのプレイボタンを押してゲームを実行します。
- ブラウザで
http://localhost
を開きます。再生ボタンが表示されているのでクリックしてしばらく待つとゲーム画面が表示されます。 - ブラウザで左ドラッグすると移動、右ドラッグすると回転します。
この動画ではブラウザを操作した時にカメラのTransformが変化しているのが分かると思います。
Unity Render Streaming https://t.co/ak84aB2Gw8 @YouTubeさんから
— KOGA Mitsuhiro (@shiena) September 29, 2019
ブラウザ側のボタンカスタマイズ
残念ながらダウンロードしたバイナリのwebサーバーはボタンに関してカスタマイズできないようです。
Webサーバーソースをダウンロードして、app.js#L42-L67あたりを変更すると任意のテキストと色のボタンを作れそうです。
また、ブラウザの入力はブラウザ入力処理に従って送信されてRemoteInput.csでいい感じに処理がふりわけられるようです。
Top comments (0)