takeda_san’s blog

KotlinとVRを頑張っていく方向。

バーチャルユーチューバーになりたい その1

読み始める前に

バーチャルユーチューバーおじさんが登場します。
精神に負荷がかかるシーンが多少ありますので、心に余裕がある方のみ読み進めてください。

成果発表


バーチャルユーチューバーになりたい

なぜ、やるのか

かわいい女の子になってみたかったんです。
あと、Youtubeに動画上げてみたい。

つかったもの

  • HTC Vive
    ヨドバシで購入 85,000円ぐらいでした。

  • GTX1060 VRAM6G
    おなじくヨドバシで購入 40,000円ぐらいでした。
    GTX960を使っていて、これでもギリギリ動くっぽいのですが、公式的には1060以上らしいので買い替え。
    取り替えて、いくつかゲームしてみましたが快適動作でした。

  • Final IK
    IK…少ないトラッカーで人間型のモデルを動かすスーパ技術のことらしい。
    今回はHMDとコントローラー2つという少なさなので必須。
    90ドル。

  • OVRLipSync
    リップシンクさせるために使いました。
    使うときはまずは動作確認で、LipSync Demoで声を出したときに動くか見たほうがいいかもしれない。

  • UnityCam
    Unityの映像をWebカメラ映像として出力できるプラグイン
    撮影に使います。
    GitHub - mrayy/UnityCam: Unity3D Virtual webcam plugin, streams unity viewport contents to other applications as virtual camera

  • ユニティちゃん
    動画ではアセットストアで購入したモデルを使ってますが、その前のお勉強中はユニティちゃんを使いました。
    unity-chan.com スクリプトが初めから全部入りで、サクサク進められました。
    (インポートして少し設定しただけでカワイイ!なものが出来上がる)
    あと、ライセンスがちゃんと書いてあって安心して使えるのも良いですね。

  • Unity 2017入門
    モデルとの同期をUnityで実装するのですが、一度も使ったことないので入門書を一冊。
    プログラム初学者でもつまづかないぐらいの絵の多さと説明の丁寧さで、スイスイ読み進められました。
    とにかくすべての手順にスクリーンショットがあるし、躓きそうなところにはヒントがたくさん。
    これとC#の文法勉強用に何か一冊あれば最初は十分なのかなぁという感じ。
    (Unityがすごすぎて、あんまりコードは書かなくて良いんだけどこの機会にC#も覚えたいという動機)

実践編

Unity、VR未経験者がこんなかんじで勉強してみました。という記録です。
何かの参考になれば。

VRで遊ぼう

何はともあれ、ワクワクが止まらないので遊んでみる。
我が家は6畳ワンルームなのですが、お掃除したらギリギリ、ルームスケール使えました。
でも、数歩あるくと壁に当たってしまってあんまり意味ないかなぁという感想。

お試しで、無料のThe Labというゲームをやってみました。(Valve製!)
途中、ドローンをラジコンで飛ばせるんだけど、これがすごい楽しくて気が付くと1時間ほどたってました。
f:id:takeda_san:20180130231541j:plain

↑ドローンを追いかける犬っぽい何かの様子

シューティング、ホラーなどなど、こんなことできまっせ的なショウケースゲームでした。
(個人的には、ポータルのキャラクターが出てきたのが、すごくうれしい)

ユニティちゃん編

Unity 2017入門をひと通りやり終えて、"""""Unity完全に理解した"""""感あるので、VRしてみる。

とはいいつつ、この辺の内容をそのまま、ポチポチ設定すれば動いてしまった。
偉大な先駆者の皆様のおかげで私もかわいい女の子になれました。

VRで「結月ゆかり」になって生放送する - Qiita

【Unity道場スペシャル 2017札幌】おっさんでも美少女になれる?!VRアイドルの作り方

違うところは、ユニティちゃんを使ったところ。
そのままの設定だと右手首が真逆に曲がってたので、ちょっと調整。

f:id:takeda_san:20180201230027p:plain

あと、当たり前すぎて書いてないんだろうけど↓が最初に必要。

  • SteamVR -> Prefabs 内の [CameraRig][Status][SteamVR]Hierarchyのところに入れておく
  • メインカメラは削除する
  • [CameraRig] -> Controllerのleftとright配下のModelを削除しておく(そのままだとviveのコントローラーが表示される)
  • 毎回出てくるSteamVRのポップアップはSteamVR_Settings.csのconst bool recommended_ShowUnitySplashScreen = false;tureにする
    stackoverflow.com

うん、これ一時間ぐらい悩んだ…

f:id:takeda_san:20180201230643g:plain

© Unity Technologies Japan/UCL

自分の姿が見えないので、鏡をおいてみました。
自分、かわいい。

Naokoさん編

上の動画を撮った後にちょっとした事故があり、Stageをイチから作り直しになりました…
気分転換にモデルも変えようということで、Asset Storeでモデルを買って再出発。

Naoko - Asset Store

Naokoさんです。
同じようにViveとFInalIK設定を済ませて、リップシンク用の設定を確認。

OVRLipSync設定

ユニティちゃんのようにあ・い・う・え・おの口の形は、ないようだが、表情用の設定があるのでそれを使う。
(Naoko -> Root_M -> RootPath1_M -> Spine1_M -> Chest_M -> 'Neck_M' -> Head_M -> Face_AのSkinned Mesh Rendererの各項目)

Face_smile = 100にしたときのご尊顔。
表示がちょっとおかしいですが、後の設定で直します。
f:id:takeda_san:20180202231344p:plain

はまったところ

  • なぜか数回に一回うまく設定できる

わからん…デバッグの仕方もわからんし、どこでエラーが出てるのかもわからん…
1回目…動かないプロジェクトごと再作成
2回目…動かないプロジェクトごと再作成
3回目…なぜか動く、手順確認のためプロジェクト再作成
4回目…動かない 深夜4時
とりあえず、切り戻して3回目のプロジェクトで再開。
Unityわからない…Unityこわい…

ちなみに設定値はこちら。
パッとみて違和感がないぐらいの調整ぶりです。
f:id:takeda_san:20180203035021p:plain

表情をつけよう

Viveのコントローラーのボタンを押している間は表情を変えるようにしてみます。
コントローラーの入力は下記を参照しました。

Unity+HTC Vive開発メモ - フレームシンセシス

表情の変更はNaokoさんのデモ用SceneのUIの設定を参考にしました。

で、これを右手にアタッチしてNaokoさんをAnimatorに指定しておきます。

f:id:takeda_san:20180203111157p:plain

f:id:takeda_san:20180203111215g:plain

にっこり。

表示がおかしいのを直す

Naokoさんの周りにオレンジ色の何かと緑色の何かが出る件を対応します。
f:id:takeda_san:20180202231344p:plain

Naokoさんのデモ用Sceneではアップにしても同じ現象が起きないので、設定を比較してところ、CameraのField of Viewという設定値を10にすると表示が直った。
Field of Viewとは何ぞや。
カメラ - Unity マニュアル

ローカル のY 軸方向の角度から算出した、カメラ視野角の広さ。
この値が、VRデバイス側から更新されるため表示が変になっているらしい。
視野角が広いと表示がおかしくなるというのが、いまいち納得できないが撮影用のカメラの設定を変えれば良さそうなのでいったん保留。

【2018/02/15 追記】
自分のHMDで見たときもちゃんと表示されるように設定できました。

takeda-san.hatenablog.com

撮影用のカメラを作る

撮影に使いたいアングルでカメラを設置して、Target Eye に Noneを設定する。
こうすることでHMDとモニタ上に映る映像を別にできた。

カメラの設定値
f:id:takeda_san:20180203123231p:plain

f:id:takeda_san:20180203123136p:plain

下の撮影用のカメラはアップで映しても、Field of Viewが変更されないのできれいに映る。
あと、自分かわいい。

撮影編

最低限の設定はしたと思うので、映像を録画できるように環境を構築する。

UnityCam

github.com

ここからプロジェクトまるごとzipで落としてきて、適当な場所に解凍。
あとはReadmeのUsage通りだと思います。

OBS

Open Broadcaster Software | ホーム

ここからインストーラをダウンロードしてきて、インストール。
Unityのほうを実行状態にして、
起動後、画面下のソースの+ボタンから映像キャプチャデバイス -> 新規作成でOK -> デバイスをUnityCamを選択
録画しようとするとUnityがフリーズするので調べてみると、設定 -> 詳細設定 -> 自動的に再接続をオフ。

f:id:takeda_san:20180203133049p:plain

ばっちりですね。

カメラ、撮影の準備

自分がどう映っているのかがわからないと不安なので、鏡をカメラの後ろに置きます。
あと、カメラ目線がカワイイと気が付いたのでカメラの位置に適当なオブジェクトを置きました。

台本作成・撮影・編集

何かをほかの人に説明するというのが非常に苦手なので、完全台本にしました。
バーチャルユーチューバーのレジェンド方を参考に作成。

撮影は途中で止めずに最後までやり切って、編集時に聞き取りにくかったりする良くないシーンだけ撮り直して差し替えました。
なんか、プレゼンテーションの練習してるみたいでひどく疲れた。

動画編集はShotcutというソフトを使いました。
デフォルトで使いやすくて、UIも直感的、キャプション入れるのにHTML+JSが使えるのに惚れました。

www.shotcut.org

動画公開

こうしてできたのが、記事の最初の動画です。
ここまでHTC Viveが届いてから二週間ぐらいでした。
Unityを使ったことがある人なら週末で出来ちゃうぐらいのお手軽さでバーチャルユーチューバーデビューできるとは素晴らしい世の中。

やってみての感想

  • 設定を進めるほど自分がかわいくなっていくのがうれしい
  • プログラムをほとんど書かない(10行ぐらいしか書いてない)
  • かわいいというのは、高い癒し効果がある

次回予定

これ、すごく楽しかったのでもちっとだけ続きます。
ちょっとずつ出来ることを増やしてよりカワイイを目指します。

  • 物を持てるようにする
  • 手の形を変えられるようにする

このあたりはVRChatとかで見かけて、是非とも取り入れたい機能なので真っ先に作ります。