OBS向け放送プレビューVRオーバーレイをつくる

#はじめに

この記事は[VTuber Tech #1 Advent Calendar 2018](https://qiita.com/advent-calendar/2018/vtuber)の6日目の記事です。
昨日の記事は @kaikiofkaiki さんによる記事でした。

こんにちは。クレウス(@kleus_balut )です。
VRChatユーザーで、最近は[VIVEBatteryInfo](https://kleusbalut.booth.pm/items/969809)というVRオーバーレイアプリケーションを開発しています。
VRオーバーレイの需要が結構ありそうなので記事化してみました。
OBSの放送プレビューに限らず、応用すれば色々と使えると思いますので是非トライしてみてください。

アドベントカレンダーの投稿は初めてですので、色々と至らない点があると思いますがよろしくお願いします。

#つくるもの

私自身がVTuber的な配信をした際に「あるとよかったもの」を作りました。

![2aaf43cb0e37486c26c7e5055d8271c6.png](https://qiita-image-store.s3.amazonaws.com/0/59328/6f5efc60-1712-978c-a2a9-b7b8751f0788.png)

こんな感じで、左腕とHMD上に放送映像のプレビューがでます。

以前、[歌舞伎座.tech#15のLT](https://youtu.be/OiQqKWxRLE4)でバーチャルキャスト登壇した際に作ったものを単独で動かせるようにしました。

本アドベントカレンダー2日目のあきら(@sh_akira )さんの記事 [UniVRM+SteamVR+Final IKで始めるVTuber](https://qiita.com/sh_akira/items/81fca69d6f34a42d261c) でVTuberシステムを構築された方にも有用に思います。

#前提知識など
・Windows10(64bit)であること
・Unityの基本操作が行えること
・unitypackageの扱い方がわかること
・OBS Studioがインストールしてあること

#使用コンポーネントとダウンロード先
下記を予めダウンロードしておいてください
・[Unity 2017.4.15f1](https://unity3d.com/jp/get-unity/download/archive) ※`Unity 2017.x`タブから選択してダウンロードしてください
・[SteamVR 2.0.1](https://www.assetstore.unity3d.com/jp/?stay#!/content/32647)
・[uWindowCapture 0.1.2](https://github.com/hecomi/uWindowCapture/releases/tag/v0.1.2)
・[EasyOpenVROverlayForUnity 0.23](https://sabowl.sakura.ne.jp/gpsnmeajp/unity/EasyOpenVROverlayForUnity/) ※配布PreFabに同梱しているのでダウンロード不要です。

#配布
ある程度設定済のPreFabです。
https://github.com/kleusbalut/OBS_Overlay/releases

CC0ライセンスです (`EasyOpenVROverlayForUnity 0.23`同梱)

#手順

###プロジェクトの作成とコンポーネントのインポート
Unity 2017.4.15f1で新規プロジェクトを作ります。名前は「OBS_Overlay」など適当に。

SteamVR 2.0.1を`AssetStore`からインポートします。
※インポート後にプロジェクト設定の変更を要求されますが、そのまま`Accept All`を選択して設定を適用してください。

uWindowCapture 0.1.2をインポートします。

###Unity設定の変更

####VRオーバーレイアプリケーション用の設定

#####Player Settings
メニューから`File` - `Build Settings`を開いて`Player Settings`を開き、インスペクタ上の`XR Settings`の`Virtual Reality Supported`のチェックを外します。
![4dd6047795e29edec1624485ebe1eda9.png](https://qiita-image-store.s3.amazonaws.com/0/59328/8540cf48-96d5-50c4-ab46-f769a0f73bbc.png)
※紛らわしいのですが、VRオーバーレイアプリケーションを作る際はこの設定が必要です。
　このチェックを入れたままだと、VRChatなどと同様に単一のVRアプリケーションとして起動してしまいます。

#####Unity Preferences
メニューから `Edit` - `Preferences...`を選択して`Unity Preferences`を開きます。
`SteamVR`タブの`Automatically Enable VR`のチェックをはずします。
![af9cc4e522526284e050b6ffa2d757de.png](https://qiita-image-store.s3.amazonaws.com/0/59328/0e2b2ad8-cbb9-e900-81a4-2ae9b82ec5ef.png)

###OBS_Overlayのインポート
OBS_Overlayをインポートします。
OBS_Overlayの`PreFab`を`Hierarchy`にドラッグ&ドロップします。

#####オーバーレイ設定の変更
デフォルトで左腕とHMD右下に表示されるようになっています。
![74fcfd8c2f9c73d481a376d3607f2b3f.png](https://qiita-image-store.s3.amazonaws.com/0/59328/825980c4-6c69-afca-9cf9-594b620ad0a4.png)
どちらか片方が不要な方は`LeftHandOverlay`か`HMDOverlay`のGameObject自体を無効にしてください。

ここまで設定すればUnity側の設定は完了しています。

###OBSの起動と設定

お使いのOBS Studioを起動します。
※私の環境では22.0.2を使用しています

プレビュー画面を右クリックして`ウィンドウ プロジェクター (プレビュー)`を選択します。
放送のプレビュー画面が別ウィンドウに出てきます。

###Unity上で実行する

OBSの`ウィンドウ プロジェクター (プレビュー)`が出ている状態で`Play`ボタンを押します。
![b048fe1559c9e23e315a4bee45f4fb10.png](https://qiita-image-store.s3.amazonaws.com/0/59328/bc142c47-a980-d38a-e6c2-9b10c31284b7.png)
HMDを被り、しばらくしたら放送のプレビューが表示されていることを確認してください。
※この時、HMDやコントローラがトラッキングされていないと非アクティブと判断されて画面更新が行われない事があります。


以上でOBS向けの放送プレビューVRオーバーレイの作成は完了です。

###カスタマイズ

これらのコンポーネントを使用すると、OBSに限らず、Windows上で動く様々なウィンドウを取り込んでVRオーバーレイにすることができます。

####キャプチャするウィンドウを変更する
`Hierarchy`上の`WindowCapture`の`Inspector`を開きます。
`Uwc Window Texture (Script)`の`Target Partial Window Title`を好みのウィンドウ名に変更すると、そのウィンドウをキャプチャできます。
![39c1013554306e881df4f987b756b4d1.png](https://qiita-image-store.s3.amazonaws.com/0/59328/0cdf01c2-09ed-049a-3211-fb226ea2ee71.png)


####オーバーレイの位置や大きさを変更する
`Hierarchy`上の`LeftHandOverlay`か`HMDOverlay`の`Inspector`を開きます。
`Easy Open VR Overlay For Unity (Script)`の`Transform`の値や`Setting`の値を好みに変更します。
`DeviceTracking`の値を変更すると、オーバーレイが追従するデバイス(HMD、コントローラ、トラッカー等)を変更できます
![61a5ee4c5b63bb03b7aa7cd12ba4a452.png](https://qiita-image-store.s3.amazonaws.com/0/59328/b86e3aba-1ef7-bee9-ef7a-babc03c56852.png)


数値での変更はわかりにくいので、`Play`した状態で`Scene`タブを開き、上記の値を変更するとVRを起動した状態でリアルタイムで変更できます。
![0cc0984738446d635fdf683ffbc9deee.png](https://qiita-image-store.s3.amazonaws.com/0/59328/5fb59b30-43fe-9d5c-a0a5-66a9f7d2dbca.png)
ただし、終了すると値が元に戻ってしまうので、位置が決まったら、コンポーネントのコピー&ペーストで値を反映させてください。

コンポーネントのコピー&ペースト方法は下記記事が参考になります。
参考:[【便利な基礎 for Unity】Unity コンポーネントのコピー＆ペースト](https://qiita.com/aka0x0/items/f31ce5e346a9a31dd56d)


#おわり

以上、「OBS向け放送プレビューVRオーバーレイをつくる」でした。

明日はえむにわ(@m2wasabi)さんの「VTuberツール作成役に立ちそうな自作Unityアセット棚卸し祭り」です。

VTuber Tech Advent Calendar 2018 #1: https://qiita.com/advent-calendar/2018/vtuber
VTuber Tech Advent Calendar 2018 #2: https://qiita.com/advent-calendar/2018/vtuber2