KlakSpoutを使ってUnityのカメラ映像をShoostへ送信する

## はじめに
ShoostへUnityのカメラ映像を送信する方法は下記に記載されているのですが、Unityの操作で不明な箇所があったため、まとめます。

https://muro.fanbox.cc/posts/6706440

### 使用ツール・素材
- [Unity 2022.3.22f1](https://unity.com/ja/releases/editor/whats-new/2022.3.22)
- [Shoost](https://muro.fanbox.cc/posts/3419623) v0.12.1
- [KlakSpout](https://github.com/keijiro/KlakSpout) v2.0.3
- 3Dキャラクター用のデータ
  - [レグニア-Legnia-【オリジナル3Dモデル】](https://fukanja.booth.pm/items/4300022)
- 3D背景用のデータ
  - [【ワールド パーツ販売】針葉樹フィールド](https://littlemarsh.booth.pm/items/3571882)

## 問題
- KlakSpout（Spout）をUnityにインストールする方法がわからない
- ShoostへUnityのカメラ映像を送信する方法がわからない

## 解決方法
### KlakSpoutのインストール方法
Project Settingsで適切な値を設定した後、Package ManagerにてKlakSpoutをインストールできる。

#### Project Settingsの設定
- Edit > Project Settings を開く
- Package Manager > Scoped Registriesを選択
- Name,URL,Scope(s)を設定。設定値は下記
  - Keijiro
  - https\://registry.npmjs.com
  - jp.keijiro
- Saveを押下
- Project Settingsを閉じる

![Project Settings > Package Manager > Scoped RegistriesにてName,URL,Scope(s)を設定した際の画面キャプチャ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/bcd172d7-840c-095c-0d52-00dd60a44574.png)

#### Package Managerの設定
- Window > Package Manager を開く
- Packages: My Registries を選択
- Package Managerウィンドウの右上にある、検索ボックスで「KlakSpout」を検索
- Keijiro Takahashi > KlakSpout を選択
- 検索ボックス直下のInstallボタン を押下
- InstallボタンがRemoveボタンに変わったことを確認し、Package Managerを閉じる

![Package ManagerにてKlakSpoutをInstallした際の画面キャプチャ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/42f75a24-61fa-a9b8-b40d-658d5f4a1015.png)

### ShoostへUnityのカメラ映像を送信する方法
Unityで下記を作成することでShoostへカメラ映像を送信できる。
- Render Texture
- Camera
- Spout SenderをAdd ComponentしたGameObject

本記事では、3Dキャラクターと3D背景を別々にShoostへ送信するため、Render Texture,Camera,GameObjectを2つずつ作成する。

#### Render Textureの作成
- Assets上で右クリック > Create > Render Texture を選択するとRender Textureが作成される
- Sizeの値は1920×1080を設定


![キャラクター用のRender TextureのInspectorの画面キャプチャ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/e76fb9f3-fe55-5b31-369a-f867199c98da.png)
![3D背景用のRender TextureのInspectorの画面キャプチャ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/85a083e8-bc35-03ae-4e14-b40425769537.png)


#### Cameraの作成
- Hierarchy上で右クリック > Camera を選択するとCameraが作成される
- （3Dキャラクター用のCameraのみ）ClearFlagsはSolid Colorに変更し、BackgroundでR,G,B,Aすべて0を設定
- Target Textureは3Dキャラクター用、3D背景用のRender Textureを設定
- Culling Maskで3Dキャラクターのみ映す設定、3Dキャラクター以外を映すよう設定

![3Dキャラクター用のCameraのInspectorの画面キャプチャ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/7e8582f4-9a49-9712-a185-37843a16f1fd.png)

![3D背景用のCameraのInspectorの画面キャプチャ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/37745849-b5a6-58fd-9085-fa424e3fc360.png)


##### Culling Maskに3Dキャラクターのみを映す設定値（Character）がない場合
下記操作を行うことでCulling Maskで3Dキャラクターのみ映す設定が行える
- Edit > Project Settings を開く
- Tags and Layers > Layersを選択
- 任意のUser LayerへCharacterを設定する

![Project Settings > Tags and Layers > LayersにてCharacterを設定した画面キャプチャ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/1ef6bd1a-03ec-649d-8ae4-3d0147dc5bd1.png)
- 3DキャラクターのInspectorのLayerからCharacterを選択する

![3DキャラクターのInspectorのLayerからCharacterを選択した際の画面キャプチャ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/d65fd3a0-833f-41f3-d3a2-3543d663c980.png)

#### Spout SenderをAdd ComponentしたGameObjectの作成
- Hierarchy上で右クリック > Create Empty を選択するとGameObjectが作成される
- Add ComponentでSpout Senderを追加
- Spout NameはShoostで表示される値のため3Dキャラクター用、3D背景用で見分けられる値を設定する
- Capture MethodはTextureを設定
- Source Textureは3Dキャラクター用、3D背景用のRender Textureを設定

![3Dキャラクター用のゲームオブジェクトにSpout Senderを設定した際の画面キャプチャ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/fb8efbed-045d-cab8-d564-10bd66a5c60e.png)

![3D背景用のゲームオブジェクトにSpout Senderを設定した際の画面キャプチャ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/3c340171-49a2-2fbf-18bf-cd0c046ba143.png)


#### Shoostの設定
- Settingsタブ > Spout Settings > Spout Capture をFalseからTrueへ変更
- Leyerタブ > LeyerセクションでSpout Capture を選択すると、Unityで設定したSpout Senderが選択できる

![Leyerタブ > LeyerセクションでSpout Capture を選択した際の画面キャプチャ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/072ef174-f3c2-79be-d80b-fc7bd7b493ee.png)


## おわりに
![Shoostの画面とUnity画面の比較](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/01e73864-2d76-a302-77da-78b48c0ab651.png)
![Shoostを使って出力した映像（Gif画像）](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818066/10bd249e-5057-d832-8f9a-e2a677533896.gif)
今までは別アプリで3Dキャラクターの静止画を作成しShoostに読み込ませていたのですが、Unity経由で3Dキャラクターや3D背景の映像を送れるようになったことでポーズや表情を気軽に変更できるようになりました。

とても便利なので、ぜひ使ってみてください。