【unity道場スペシャル...

おっさんでも美少女になれる？！

VRアイドルの作り方

株式会社インフィニットループシステム開発部 山口直樹

対象者

・VRの開発をやったことない人

・VRの開発って難しいって思ってる人

・美少女になりたい人

VR機材はHTC Viveを想定しています昨年同様 ノーコーディングで進行します

株式会社インフィニットループとは

・ゲーム開発

・モバイルアプリ開発

・Webアプリ開発

・Linuxサーバ構築運用

サーバのことなら任せとけって会社です

そんなサーバな会社がなぜVR？

去年エイプリールフールのネタが軽くバズったからですちなみに今年はそうでもなかったです

自己紹介（１）

札幌のソフト会社で２０年ほど低レイヤーのネットワーク管理に従事その後、インフィニットループに転職

山口 直樹

得意な言語 そもそもプログラムなんてやってない

特技 UTPケーブルの８字巻き

自己紹介（２）会社でVRのコンテンツをはじめて見て「これ出来ればあんなことやこんなこともできるじゃん！！」と思って覚え始めた2年前の１２月

あいえるたんさわさわ Vive あいえるたんお姫様だっこ

せかいぬりえ

どんなことやってるのか？

どんなことやってるのか？

どんなことやってるのか？

VRアイドルって何？

定義が不明

たぶん３Dのモデルキャラを動かしたらVRアイドルになれるのではないか？

FaceRigやKinectを使ってVRアイドルと言ってる人たちもいるので・・・

VRアイドルやってました

今の定義がVRアイドルでしたら個人的に4年以上前からやってました

もしかして今ブーム？？？

VR Live Studio

・多人数での空間共有・コメントAPIにフックしてコメントの可視化

（Youtube ニコ生 Twitter等）・描画クライアントはなんでもOK・ライブ配信に特化したシステム

（字幕機能やダンス等）・画面共有、カメラ切り替え

ディスクトップキャプチャー機能その他いろいろ

第一章

美少女を動かしてみよう！

美少女の用意

弊社マスコットキャラクターの「あいえるたん」を使用します

ホームページからUnityアセットがダウンロードできます

http://www.infiniteloop.co.jp/special/iltan/3d-dl.php

美少女の用意

アセットをインポート後、アセットの中に【ILtan】プレファブがあるので置いてみる

美少女の用意

美少女ではなく、社長になりたい方はアセットの中にうちの社長が入ってるのでこちらをどうぞ

IKコンポーネントの用意

ちょっとお高いけど、美少女になるためです。出費しましょう。

キャラクターを動かすためのコンポーネントです。

（定番）

IKコンポーネントの用意

IKコンポーネントの中の【VRIK】コンポーネントをILtanに入れます

IKコンポーネントの設定1.適当なオブジェクト作成

（ここではCube 大きさは0.1に)

2.作成したオブジェクトをVRIKのLeft Arm→Targetへ

できたもの

ということは・・・

TargetのところをHTC Viveコントローラにすれば両手を自由に動かせれるのでは？

（ついでに頭のところをHMDにしちゃう）

第二章

美少女になろう！

SteamVR Pluginのインポート

UnityでHTC Viveを使うには、とりあえずこれがないとはじまりません。（なくても使えるけど・・・ってツッコミはなしの方向で）

HTC Viveを使えるようにする

いらない

１. [CameraRig]プレファブをヒエラルキーに置く

2. カメラが二つになるので最初にあるカメラを削除

VRIKの設定

[CameraRig]の中の

Controller(right) → Right ArmのTarget

Controller(left) → Left ArmのTarget

Camera(eye) → Head Target

IKポイントを設定します

できたもの

大失敗

IKの基準が地面なのをやめて無条件にHMDが頭にくるようにする（美少女が宙に浮くけど、美少女だから問題なし）

顔の描画をやめる

解決策その１

解決策その２

失敗１．

美少女の背丈とリアルの背丈があっていない（そのため目線が頭の上）

失敗２．

目線が頭の中なので、頭の中(顔の裏）しか見えない

解決策 その１

ここのチェックを外す

以上

解決策 その２

顔の部分のレイヤーをDefault以外にする

解決策 その２

CameraのCulling Maskで顔のレイヤーを外す（これで描画しない）

できたもの

自分の姿が見えない！！

第２．５章

鏡の作成

鏡の作り方

・板を作って、そこにカメラを置いて

カメラの映像を板に映せば出来るんじゃない？

（Render Texture）

やってみる鏡用のRenderTextureとマテリアルの作成

テクスチャサイズを1024x1024に

ShaderをUnlit/Textureに

テクスチャを作成したRenderTextureに

やってみる

適当に板作成（Quadで作成）

作成した板のマテリアルを先ほど作成したマテリアルに設定

やってみる

その板に、カメラを追加

カメラの向きが反対なのでy=180に設定

カメラ以外は使わないのでAudio Listener等余計なものは削除

TargetTextureは作成したRenderTextureを設定

できたもの

自分の姿は見えたけど・・・

鏡なのに左右が変

鏡なのになんか比率？が変（近づいたら巨大）

全体的に変で鏡ではない！！

鏡なのに左右が変

鏡の板のScaleを変更

（xをマイナスに）

鏡なのになんか比率？が変

間違い

正解

カメラの画角にぴったり合わさるように

カメラを後ろに配置する必要あり

カメラの距離の求め方

https://docs.unity3d.com/jp/530/Manual/FrustumSizeAtDistance.html

Unityのドキュメントにありました。

（しかも日本語）

カメラの距離の求め方

1 60(PI * 2) / 360

良い子のみんなはちゃんとプログラムで書こう

鏡（板）の大きさ カメラのField of Viewの値

カメラの距離の求め方

良い子のみんなはちゃんとプログラムで書こう

先ほど求めた値をカメラの距離（Z)に入れる

できたもの

第三章

美少女でしゃべろう！

声に合わせて口パク

https://developer.oculus.com/downloads/package/oculus-ovrlipsync-for-unity-5/

声に合わせて口パク

とりあえず、全部インポート

表情の変更方法

ILtanの場合は

U_Char_1（頭部分）のSkinned Mesh Render内

BlendSharpsの値を変更すると表情が変化します

表情の変更方法

BlendSharpsの名前から判断して、ここを変更すれば「あ」「い」「う」「え」「お」の口の形に

なるのかなぁ？と予想

コンポーネントの設定

【LipSyncInterface】をヒエラルキーに入れる

コンポーネントの設定

【OVR Lip Sync Mic Input】【OVR Lip Sync Context Morp Target】【OVR Lip Sync Context】

これらのコンポーネントを入れます

（Audio Sourceが勝手に入ります）

コンポーネントの設定【OVR Lip Sync Mic Input】

Mic Controlを Constant Speakに変更

【OVR Lip Sync Context】Audio Muteのチェックを外す

（実行したら常にマイクONにしたいので）

（自分の声をイヤホンで聞きたいので）

コンポーネントの設定BlendShapesのインデックス値を確認（上から順番に数えて「あ」「い」「う」「え」「お」のIndex値を求める）

「あ」 → 27「い」 → 28「う」 → 29「え」 → 30「お」 → 31

【結果】

Element 0 無音Element 1 PPElement 2 FFElement 3 THElement 4 DDElement 5 kkElement 6 CHElement 7 SSElement 8 nnElement 9 RRElement 10 aa ←「あ」（27）Element 11 E ←「え」（30）Element 12 ih ←「い」（28）Element 13 oh ←「お」（31）Element 14 ou ←「う」（29）

コンポーネントの設定【OVR Lip Sync Context Morp Target】を設定します

できたもの

声が美少女じゃない！！

第四章

美少女の声になろう！

ボイスチェンジャーを探す

https://www.assetstore.unity3d.com/jp/#!/content/54963

ボイスチェンジャーの設定

【Voice Changer Filter】をILtanに入れる

Formant 1.6ぐらいPitch 2.3に設定

できたもの

なんか違う！！

ボイスチェンジャーを探す

https://developer.oculus.com/downloads/package/oculus-ovrvoicemod-for-unity-5/

OVRVoiceModのインポート

先ほど入れたOVR LipSyncに同じスクリプトがあるので削除

OVRVoiceModのインポート

まだ、怒られるので削除！削除！

ボイスチェンジャーの設定

【OVRVoiceModInterface】をヒエラルキーに入れる

ボイスチェンジャーの設定

前回入れた【Voice Changer Filter】を削除して

新たに【OVRVoiceMod】をILtanに入れる

そして、パラメータを設定する

ボイスチェンジャーの設定

パラメータの詳細

一つ一つ数字を変えて、「これかなぁ～」と手作業で設定

（パラメータの詳細はソースに書いてありますが、意味不明）

できたもの

なんか違う！！！！

さらに

結論

ソフトウェアで処理するには限界

（特にUnity上でボイスをいじるに限界がある）

ハードウェアでやればよい！！

ハードウェアの準備（ここからUnityとは関係ありません）

2chを見て試行錯誤して揃えてみました

構成図（ここからUnityとは関係ありません）

¥18,000

¥17,500（中古）

¥10,800

約¥50,000

¥29,800

¥21,000

合計 ¥147,100

ちょっとお高いけど、美少女になるためです。出費しましょう。

できたもの

第五章

美少女デビューしよう！

美少女デビュー！

・このまま動画を撮って流すのも良いですが、

Live配信してみましよう！

美少女デビュー！

・配信する映像（カメラをどうするか？）

鏡の映像(RenderTexture）を配信映像にしよう！

配信映像にするにはどうすればいいのか？

方法その１ UnityCam

https://github.com/mrayy/UnityCam

WindowsにUnityCam用VirtualCamデバイスを登録して、Unityのカメラ映像をWebcam経由で各種アプリケーションにもっていけるアセット設定も簡単で便利

ただし、かなり重い！

方法その２ Windowに表示

鏡で使用しているカメラの映像をそのままWindowに表示（通常はHMDの映像がWindowに表示されています）

Windowの映像を配信ソフトにキャプチャーして配信映像とします。

鏡の映像をWindowに表示する

Window表示用のカメラを作成します

Transformの値は鏡で使用した値と同じ

Target Eyesを Noneに変更

配信ソフトを探す

https://obsproject.com/

配信ソフトは色々ありますがフリーで情報も多いOBSを選びました。

（OBS Studio）

ビルドして実行Youtube Liveのヘルプより

解像度 1280x720と書いてあるので、その解像度で実行

配信ソフトの設定具体的な方法はググってください。

基本的には、配信サーバ、ストリームキーの設定解像度の設定ビットレート等の設定

配信開始

OBSの映像ソースにウインドウキャプチャを追加してUnityのWindowを指定すれば映像が出ます。

その状態で【配信開始】！！

実際にやってみた

まとめ

・色々と問題はありますが、VRアイドルになれました

・まばたきや眼球運動、呼吸や足の制御、物理挙動（髪の毛、スカート）など問題点はまだまだいっぱい

・ゲーム作りたいからUnity始めた方が多いかと思いますが美少女になりたいからUnityを始めてもいいのでは？

まとめ

可愛いは作れる！！（要、技術かお金）

今回かかった費用その他諸々（ケーブル代等も含めて） 約20万円

インフィニットループでは正社員、アルバイトを募集しています

一緒に楽しいことしましょう！

ご清聴ありがとうございました