OBSとLuppetでアバターを使ったリモート登壇をしよう！

昨今コロナウイルスの影響で、リモートワークが流行っています。
会社でリモートワークの導入が急に進んだり、一部の大学では4月の講義が急にリモートで行うように方針が決まるなどしていますね。

そうした中で、アバターを通してビデオチャットをしたりリモートで勉強会に登壇したいという欲求を持つ人が増えてきていることや、学校の現場からLuppetの授業への利用のお問い合わせが何件か来ること、リモートワークはすぐには収まりそうも無いなーという情勢などを鑑みまして、Luppet開発者として情報を整理しておこうと思い記事を書いています。

記事概要

記事では、必要なソフトウェアやデバイスの導入方法、配信環境の構築などをお話します。
また最終的なゴールとして、リモートの勉強会のようなものを想定し、最終的にYoutubeやSHOWROOMなどに配信することを目標とします。

この記事を読むと、以下の画像のような映像が配信できるようになるでしょう。

(余談ですが、以前自分がリモート登壇した時の体験談などはこちら。)
https://negipoyoc.com/blog/babinikutoudan/

必要なもの

必須
* Windows 10が入ったPC
* OBS(Open Broadcaster Software)
* Luppet
* Webカメラ(Luppetで使います)
* 自分のアバター(VRM形式のもの)
* スライド

あると良いもの
* LeapMotion(Luppetによってアバターの手の動作を再生するのに使います。無くても動作するのでオプションです。)

OBS

https://obsproject.com/ja
からダウンロードできます。録画や生放送ができる無料でオープンソースのソフトウェアです。

Luppet

https://luppet.appspot.com/

この記事を書いてる人が作っている個人開発のアプリです。

WebカメラとLeapMotionで完結する、バストショット特化の3D VTuber向けトラッキングシステムです。
（ノートPCではインカメラを利用することで、外部デバイスは実質LeapMotionのみで動作させることが可能です。）

デバイス数やセットアップの面倒さを極力排除し、バストショット(胸より上)の表現に特化しているので、今回のようなリモート登壇に向いています。

LeapMotionが無くても、Webカメラによる顔認識だけでキャラクターは動作するので、気になった方は体験版をお試し下さい。

自分のアバター(VRM形式)

様々な方法があります。

・VRoid Hubで、利用可能なアバターを見つける
・Boothで利用可能なアバターを見つける
・VRoid Studioで、自分で制作する。
など。

どれを使うにしろ権利関係はお気をつけ下さいね。

個人的な感想を言うと、VRoid Hub利用可能なアバターを見つける手法は、無料な上に他者の利用に関する許諾が明示されているモデルが多くあります。
お試しで使うにはとても便利です。
Boothは有料となる場合が多いですが、かわいいモデルがとても多いですね。

スライド

自分はよくGoogle Slideを使うので、Google Slideを例に説明していきます。

といっても、以下の画像のように普通に開くだけでOKです。

OBSの設定をする

主に3つの要素から成り立っています。

GoogleSlideの取り込み

まず、ブラウザでGoogleSlideを開きます。(少し↑のスライドの項で説明したような感じ)

その上で、OBSの下部にある[ソース]に[ウィンドウキャプチャ]を追加します。その後、画像のように、Chromeのこのページをキャプチャに追加します。

しかし、このままでは余白やGoogleSlideのツールなども映ってしまうので、真ん中だけCropする必要があります。
OBSでこれをやるのは簡単で、Altキーを押しながら、四隅の赤い点をドラッグすることで、Cropすることができます。詳しくはこちら

これでOKです。

Luppetの取り込み

Luppetを起動し、同様にOBSの下部にある[ソース]に[ゲームキャプチャ]を追加します。
間違えてウィンドウキャプチャを選択しないようにしてください。

すると、グリーンバックでキャプチャする事ができたかと思います。

次に、背景の緑が邪魔なのでクロマキー処理を行います。
[ソース]のうち、Luppetがキャプチャされている[ゲームキャプチャ]を右クリックし、[フィルタ]を選択します。

すると以下のような画面が出現するかと思います。
左下にある[+]ボタンからクロマキーを選択して、緑色を透過させてください。
（髪が緑色のキャラクターを使う場合は[類似性]スライダーで値を調整すると良い感じになります。）

なぜウィンドウキャプチャではなく、ゲームキャプチャなのか？

ウィンドウキャプチャでは、画面外や最小化されたウィンドウをキャプチャできないからです。
一方で、ゲームキャプチャではそれができます。

Luppetは元々バーチャル登壇をコンセプトに作られていたため、ウィンドウが最小化されていても動作をするように作られています。
なので、運用していくにあたっては、ゲームキャプチャでOBSに取り込んだ上で最小化してしまうのが良いでしょう。
アプリが邪魔でスライドが読めないと本末転倒ですからね。

背景画像

スライドとLuppetだけでは、余白ができてしまうので埋めているだけです。
[ソース]の[画像]を選択して、任意の画像を入れておいて下さい。

以上の準備でできた配信風景

・OBSで自分がどのように映っているのかの確認
・スライドの操作
が最小限できればよいので、以下のように1画面に収まるようになっています。

（OBSはファイル(F)より常に手前に表示オプションを有効化、Luppetは最小化してバッググラウンドでの動作になっています。）

ここまで準備できたら配信する映像はバッチリなので、あとは配信を開始しましょう。
(Youtubeへの配信方法)
(Showroomへの配信方法)
他の配信サイトもストリームキーさえ設定できれば良いかなと思います。(詳細)

あとは左端に見えているGoogleSlideのスライドサムネをぽちぽちしてスライドを切り替えつつ、配信されている映像を確認しながら話をしていけばOKです！

お疲れさまでした！

補足

Chrome画面の取り込みがうまく行かない場合があります。
こちらを参考にやってみてください。

(今回OBSのバージョンを25.0.1にしたのは、ここが理由です。)

おまけ

リモートミーティングでアバターを利用したい時

概要

OBSの映像を仮想カメラに対して映像をストリームするプラグインがあります。
あとは、各種ビデオチャットツールでこの仮想カメラを選択するだけです。

必要なこと：

・OBSのバージョンを24.0.3にしてください。
・OBS-VirtualCamのダウンロードとインストールをしてください。

VirtualCamのインストールは、ダイアログに従っていけばOKです。
また、OBSを24.0.3にする必要があるのは、OBS-VirtualCamがOBS25にまだ対応していないためです。

配信方法

正しくインストールできれば、OBSのツール(T)以下にVirtualCamというものがでてきます。
同時に、OBS Camera(2,3,4)という名前の仮想カメラが4つ設定されているはずです。

ここまでできたら、OBSのツール(T)からVirtualCamを開きます。
TargetCameraが「OBS-Camera」になっていることを確認し、[Start]ボタンを押します。

あとは、各種ビデオチャットツールで、このOBS-Cameraを指定することで、映像を相手に伝達できます。(プレビューでは反転していますが問題ありません。)

補足

昨今リモートワークではZoomが使われますが、2020/04/05の最新版(4.6.9(19253.0401))におけるZoomでは、なぜかOBS-Cameraを指定することができません。
この問い合わせは既にZoom側に伝えてあるので、対応されるのを待ちましょう。

なお、
・これ以前のZoomを利用する
・サードパーティのパッチを当てる
ことで、これらは解決します。
OBS VirtualCamのIssue欄で、パッチの情報を含めこれらは活発に議論されています。

2020/04/09追記：

無事使えるようになりました。(バージョン 4.6.20033.0407)

おわりに

今回ご紹介した内容はVTuber配信にも応用が効きます。
例えば、今回の記事のスライド部分をゲームキャプチャに置き換えるなどすれば、よくVTuberがやってるような配信風景になりますね。
なので、リモート登壇に飽き足らずVTuberやってみたかったんだよねーって人も今回を期に始めてみるのはどうでしょうか！

また、今回は開発者ということもありLuppetを利用する場合について話しましたが、他のアプリでも同様にできると思いますのでいろいろ試すのも良いかと思います！