DEV Community

loading...

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

shiena profile image KOGA Mitsuhiro Originally published at qiita.com ・3 min read

はじめに

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

使い方

試した環境

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

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

インストール

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

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

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

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

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

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

Render Streamingの設定

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

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

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

Render Streamingを試す

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

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

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

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

参考リンク

Discussion (0)

Forem Open with the Forem app