VDRAWで3Dアバターでのリモートワークをしてみよう

こんにちは おぐらです。

昨今はリモートワークが推奨されている企業が多いことかと思いますので、
今回は私が作っている作業配信向け3Dアバター操作ソフト「VDRAW」（ブイドロー）を使ってSkype、Zoom、Meetなどのビデオ通話に参加するまでの手順を説明させていただきます。

こんな感じで3Dアバターの状態で仕事をしながら通話に参加することができます。
![20200424___.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332063/d16cb3b6-9d11-541b-6c93-17987b4bd77c.gif)

### 最低限必要なもの
- PC（Windows10推奨）
- マイク

以上です。Skypeなどで通話できるPCならば大体要件を満たしていると思います。
GPUを積んでいるとなおよしです。オンボードでも一応動きます。

### あるとよいもの
- Webカメラ
- 自分のアバターで使うVRMファイル

こちらはとりあえずはなくても大丈夫です。あるともっと楽しめます。
ちなみに↑のGifではWebカメラを使ったフェイストラッキングを有効にしています。

## VDRAWとは
元々は自分がお絵かき配信用に作っていたソフトを誰でも使えるようにVRMに対応した、作業配信向けソフトです。
マウスの動きやキーボードなど、入力デバイスに追従してアバターが動きます。
**VR機器などの高価なデバイスを使わず手軽**に3Dアバターを使えるのが特徴です。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">VDRAW 特徴・機能の紹介2020 <a href="https://t.co/1DpRHLAJdz">https://t.co/1DpRHLAJdz</a> <a href="https://twitter.com/YouTube?ref_src=twsrc%5Etfw">@YouTube</a>さんから</p>&mdash; おぐら@Vket4 ナーサリーライム（トーラス） (@OGOG_Ogura) <a href="https://twitter.com/OGOG_Ogura/status/1253379383986774021?ref_src=twsrc%5Etfw">April 23, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

- マウスの動きやキーボード入力をアバターが反映する → **「作業してる感」**が出る！
- ソフトから仮想Webカメラに映像出力ができる → ビデオ通話をするのにVDRAWを起動しておくだけでOK！（最小化してもOK！）

という点から、「いつもの感覚で作業をしつつ、ビデオ通話にもその様子を垂れ流すことができる」というメリットがあります。
もともとお絵かき配信用ソフトだったので「絵を描く」という作業自体を邪魔しない設計思想になっています。

キーボードの入力内容をそのまま反映するとなると色々問題が起こりそうですが、そんな時のために入力を隠蔽できる「ランダムタイピング機能」なんかも用意してあります。


## VDRAWの導入
BOOTHで無料体験版と有料版を販売しています。
<a href = "https://ogulabo.booth.pm/items/939389" target ="_blank">
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332063/983e8a9a-2430-3ce2-d4d0-03b5931e93e3.png)
</a>
https://ogulabo.booth.pm/items/939389

まずは無料のトライアル版ver1.8.0をダウンロードします。

## リモートワークっぽい画面づくり

VDRAWを起動すると、注意書きののちにトップ画面に移ります。
自分用のVRMファイルを持っている人は、真ん中の「ローカルのVRMファイルを読み込む」で読み込んでください。
持っていない人は、とりあえず右の「プリセットアバターを使う」でOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332063/5dcd7077-7088-5a9b-74be-cd4d3de3f698.png)

### ライセンス画面
VRMファイルにはライセンスが埋め込まれています。許可された範囲内で利用しましょう。
同意すると初回はチュートリアル画像が出ますが、右上の×ボタンで閉じてください。（右クリックメニューからいつでもチュートリアルを呼び出せます）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332063/e710feaf-613b-8761-9c5e-dbb932b6cf07.png)


### スタイル変更をする
初期状態では「ドローイングスタイル」というお絵かき向けの格好になっているので、これを「タイピングスタイル」に変更します。
マウスカーソルをVDRAWの左端にかざすとメニューが出てきます。この上から２番目のボタンでスタイル変更ができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332063/4fc638db-ca2f-c511-cca6-ac1dfef4cb85.png)


TYPING STYLEのアイコンをクリックすると、アバターが座ってキーボードを打つ姿勢になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332063/624702f8-feba-24ea-38d0-b54f3a4a3295.png)


### カメラアングルを変える
次はカメラアングルを変えます。
リモートワーク向けにカメラアングルのプリセットを用意してあるので、そちらを使います。

VDRAWの画面上どこでもいいので右クリックすると、右クリックメニューが開きます。
この中に「アングルプリセット」があり、その中に「リモートワーク」というプリセットがあるのでクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332063/ce1afd4a-06cd-634c-d138-ed10cb770a39.png)


すると一発でカメラアングルがこの通り。
モニターも消してあるので描画負荷も軽くなります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332063/2a2d6bdf-b4f2-8ead-7ad6-5b3194ae963e.png)


## 仮想Webカメラに映像出力する
では最後に、今の画面を仮想Webカメラに出力しましょう。
画面左のメニューから、一番下の歯車アイコン「詳細設定」を開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332063/5eecd82b-10e1-e763-54cd-7d8b544b9120.png)

上のタブの中から「システム／その他」をクリックしてタブを切り替えます。
少しスクロールすると、「仮想Webカメラ出力」という項目があります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332063/3d70e9c2-0bce-47f5-d07c-7d1162ce67d7.png)



最初に仮想WebカメラをPCにインストールする必要があるので、「Not installed [Open installer folder]」ボタンを押してインストーラーがあるフォルダを開きます。
開いたフォルダ内の`Install_vdraw_virtual_webcam.bat`を右クリックから「管理者として実行」でインストールしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332063/a68ad10a-4ca3-f350-7c49-32e5d07651df.png)

そして、VDRAWで「映像を出力する」にチェックを入れます。

## ビデオ通話で仮想Webカメラを使う
いざ、ビデオ通話へ！
今回はGoogleのMeetを例に挙げます。
先程仮想Webカメラ「VDRAW Virtual Webcam」をインストールしたので、通話に使うデバイスの中から選んでください。
もし「デバイスが起動できませんでした」等のエラーが出た場合は、一度PCを再起動してみてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332063/6375d846-db3c-6e6a-48d7-3219be961986.png)

※左右反転しているのはMeetの仕様です。他の人が見る映像はVDRAWそのままの映像となります。

デバイスは起動できているものの映像が流れて来ない場合は、出力解像度の設定が合っていない可能性があります。
VDRAWのウインドウの大きさ＝出力解像度 になるので、ビデオ通話側でVDRAWの解像度（デフォルトは1280*720）と同じ解像度の映像を受けるように設定するか、
VDRAWのアプリ解像度自体を変更して対応してください。VDRAW側の解像度変更は、仮想Webカメラのメニューのすぐ下でできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332063/ea1853b2-7dca-1e63-7a64-380b4d8e975d.png)


これでビデオ通話への映像出力も完璧です！

ここまでの工程を面倒に感じる方も多いかと思いますが、VDRAWは終了時のカメラアングルなどを自動で保存されるので
**次回からはVDRAWを起動してアバターを読み込むだけでOK**です。

また、設定する時に色々とメニューを開きますが、**これらのUIは仮想Webカメラの映像には載りません。**
なので設定の微調整などは他の人を気にせずに操作できます。便利！

## その他の設定
### フェイストラッキングを使う
画面左のメニューの下から2番目のボタンからフェイストラッキングを有効にできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332063/7abf5250-b5c4-8360-7085-5fedaefeab94.png)

フェイストラッキングを使う場合、**VDRAWがあるパスに日本語文字が含まれているとフェイストラッキングが正しく機能しません。**
ダメな例：`C:\Users\おぐら\Documents\VDRAW` PCのユーザー名が日本語の人はハマりやすいので注意してください。
Cドライブ直下など、間に日本語を挟まない場所にVDRAWをフォルダごと移動させてください。

### ランダムタイピングを使う
詳細設定の「キーボード,ゲームパッド」タブから設定できます。（有料版限定機能です）

### アバターの口パクに使うマイクを変更する
仮想Webカメラ設定の下に、音声入力デバイスを変更できるところがあります。

### 背景画像を変更する
画面左のメニューの下から3番目のボタンから、背景画像を変更できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332063/d6db9a0d-636f-0ddf-fa29-5501572a4c86.png)

# 他のアバターも使ってみたい
VRMファイルは[BOOTH](https://booth.pm/ja/search/VRM%E3%83%A2%E3%83%87%E3%83%AB)や[VRoidHub](https://hub.vroid.com/)、[ニコニ立体](https://3d.nicovideo.jp/search?word=%E7%AC%AC%E4%B8%89%E8%80%85%E4%BD%BF%E7%94%A8%E5%8F%AF%E8%83%BD%E3%83%A2%E3%83%87%E3%83%AB&page=1&limit=28&word_type=tag&category=all&work_type=vrm&download_filter=all&sort=created_at&order=1&perfect_match=1&usable_animation=)、[THE SEED ONLINE](https://seed.online/)などのWebサイトで販売・配布されているものがあります。
また、VDRAWではスマホアプリ「[カスタムキャスト](http://customcast.jp/)」で作成したキャラクターモデルも使えます。
カスタムキャストのアバター導入は[VDRAWオンラインマニュアル兼ブログ](https://ogog-ogura.hatenablog.jp/entry/2019/11/13/121441)の方に詳しく書いていますので、興味がある方はそちらをどうぞ。

それでは、健康に気をつけてよいアバターライフを！