AdobeMaxJapan2018でVtuberとライブペイントをした時のとある裏方の話

![7W5A4005.jpg](https://qiita-image-store.s3.amazonaws.com/0/312137/907a381e-afeb-62cb-d0cc-9d2addea6157.jpeg)

この記事はVTuber Tech #2 Advent Calendar 2018の17日目の投稿です。
https://qiita.com/advent-calendar/2018/vtuber2

本記事ではVtuberがリアルイベントに登壇する際にどういう機器、構成で登壇するのか。
というよくありそうでなかった例をお伝えさせていただきます。

ちょうど同日に同じ内容を扱った記事を書いてくださっているので合わせて読むとよいかもしれません
https://qiita.com/advent-calendar/2018/vtuber

さて、今回AdobeMAXJapan2018に登壇する株式会社INEIさんの機材裏方として作業しました。
INEIの富安さんがライブペイントしながらVtuberとトークをするという内容です。

Vtuberがリアルイベントに登壇する時の手法は当時調べてもあまり表に出てこなかったため
今回まとめておき他のVtuberの方が登壇する際の参考にでもなれば幸いです。

###筆者の経験
　簡単に自分の経験をまとめておきます。
　エンジニアもどき。現在はVtuberとブロックチェーンでのスタートアップを準備中（興味あったらDMしてください）
　ライブ配信に最近は興味あって1年位前から配信番組のプロデュース、機材のお手伝いをしてたりします
　リアルでの大きな会場登壇や配信などはほぼ経験がないため本当に素人位のスキルだと思ってください。

###INEIとは
　コンセプトアートのスペシャリスト集団。
　絵を描くだけにとどまらずコンセプトメイキングから入り一枚の絵に落とし込む上から下までの作業をすることが特徴的。
　代表作 METAL GEAR RISING, DRAGON QUEST X, FINAL FANTASY XI
[INEI Youtube Channel](https://www.youtube.com/channel/UC-u9zbbcEAqlCInJbCAUDcQ)

###キラリネオンとは
　クリエイター系Vtuber ライブ配信をメインに活動している。毎週水曜INEIライブペインティング放送のアシスタントとして参加。
[Twitter](https://twitter.com/n3on_ch)

##要件　
　・登壇者はライブペイントしながらトークセッションをVtuberと行う
　・登壇者は一人で壇上に立つ
　・同時にセッションの内容をYoutuberLive配信をし、視聴者や会場の人がコメントで登壇者に話しかけることができる。

　*使用機材や会場の設備などは記事の下に記載しております

今回行ったイベントのアーカイブはこちら
[Adobe MAX Japan 2018 デザイナー・イラストレーター必見！世界的コンセプトアーティストがライブペイントで魅せる脅威のPhotoshopマル秘テク2018](https://maxjapan.adobe.com/archive/2018/design-session-2/)


###課題
　１．いかにしてライブペイントとVtuberの挙動をスクリーンに取り込むか
　２．登壇スペースに生身の登壇者は一人のみ

####課題１　いかにしてライブペイントとVtuberの挙動をスクリーンに取り込むか

![20181120_0190.jpg](https://qiita-image-store.s3.amazonaws.com/0/312137/56c80611-81a9-2b15-b455-81201ae88899.jpeg)
iMacだけであったりVtuberの挙動のみであればシンプルにそのまま画面を描画すればよいのですが
今回ライブペイントをする側とVtuberの挙動を取り込みスクリーンに描画する必要がありました。

そのため「OBSで画面結合し全画面プロジェクターでスクリーンに描画」という手法を最終的に採択しました。

![OBS.png](https://qiita-image-store.s3.amazonaws.com/0/312137/e61e4f30-9182-7763-018a-487c10b1efaf.png)
＊OBSには全画面プロジェクター機能がある。

iMacの描画している画面を一度Windowsに取り込みWindowsで動いているVtuberシステムとOBSで結合。その後全画面プレビューにてスクリーンに描画。という流れです。

iMacの画面をそのまま取り込んで結合しているため
登壇者は特に何も気にすることなく作成したスライド資料を使って話したり、Photoshopなどでライブペイントを行うことができます。

#### 課題2．登壇スぺースに登壇者は一人
<img src="https://qiita-image-store.s3.amazonaws.com/0/312137/e1e4131c-e164-ad17-fb10-6bf2ad4de0b2.jpeg" width=100%>
　今回Windowsマシンによって画面が結合されているため登壇者のiMacとは物理的に近いほうが色々楽です。
　なので画面結合や配信マシンも登壇スペースに設置し、アシスタントとして私が登壇スペースに座る。という構成を提案したのですが
　登壇者側から登壇している際は登壇者のみがステージにいるのが好ましい。という要望が出たため
　会場スペースから物理的に見れないくらいの距離に離れつつiMacの画面を取り込む必要が出てきました。
　実際余分な情報が目に入ると気が散るのでごもっともな意見ですね！（設置してる側としては涙目）
　結果「物理で殴る」ということで
　登壇者スペースから延長ケーブル15mほどをつなぎ登壇裏側スペースに伸ばし
　私が操作するWindowsマシンまで繋ぐこととしました。
　*ネットの記事を見る限り10m以上は保証持てない。　ということがよく書いてあったのでリスキーだったかと思います。
　
###失敗したところ
　・当時手持ちにRazor BladeというVR ReadyなVRノートPCを使って画像合成するつもりでしたが
　CPU使用率がなかなかに高く100%までたまにあがってしまうことを恐れ
　VRReadyなデスクトップを急遽用意することとなった。
　・会場の設営の問題もありリハーサルの時間があまり持てず延長ケーブルは大人買いすることに
　・ダッシュで買いに行けるビックカメラ最強、すぐに配達してくれるAmazonPrime最強！
　・Qiitaに記事かいてなさすぎて画像が2MBまでしかあげられなかったこと！！！！
　・OBSにはカーソルキャプチャという機能があるのですがこういう案件では悪さします
　・Stream LabというOBS拡張のソフトでやろうとしたらOBSでやろうとした全画面プレビューがないので注意

##事前に会場に確認すべきこと
・有線LANは存在するか
・電源の場所はどこにあるか
・ステージ裏等があるか（もしVtuberの方が会場にいらっしゃる場合は特に）

##最後に
割ととりとめもない記事になってしまいましたがリアルでのイベントで登壇する際の構成の1案として
良かったら参考になれば幸いです。

ちなみに先日alive2018で発表されたVmeetsというアバター専用の会議ツールを使うと登壇やトークセッションなども気楽にできそうな予感がしてます
> https://twitter.com/niwak_A_me/status/1069448802661097472

再三になりますが、今回行ったイベントのアーカイブもせっかくなので見ていってください。
INEI富安のライブペインティング能力に目を見張ると思います！
https://maxjapan.adobe.com/archive/2018/design-session-2/


会場設備や持ち込んだ機材は下記に書いておきます。

##会場要件
 プロジェクター センター解像度4800×1080
 サイド 解像度1920 x 1080
 持ち込み機材用映像出力プラグ 
 マイク：ピン/ヘッドセットまたはハンドマイク 
 Wi-Fi / 有線インターネット回線アリ
 *
###持ち込み機材と役割
　iMac Pro
　　スライドでのセッション
　　PhotoShopでのライブペイント
　Windows
　　Vtuber関連ソフトの起動
　　OBSでのライブ配信
　　iMacの画面取り込み
　　スクリーンへの投影

####使用ソフトウェア
　OBS
　Game Capture HD
　Unity

####使用機材
　配信用コンデンサマイク ＊ ２
　AG03
　elgato HD60S iMacの画面をWindowsPCに取り込むためのキャプチャボード

####ケーブル類
　LANケーブル20m
　HDMIケーブル 10m
　USB延長ケーブル 10M 登壇者の顔をWebカメラで取得するため

####おまけ
会場の登壇台の裏側
![IMG_20181119_184245.jpg](https://qiita-image-store.s3.amazonaws.com/0/312137/9ba241d0-e103-c7b5-108a-29e7b157022a.jpeg)