168
164

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Day 2

VTuber Tech #1 Advent Calendar 2018

@sh_akira

UniVRM+SteamVR+Final IKで始めるVTuber

168
Last updated at Posted at 2018-12-02

はじめに

この蚘事はVTuber Tech #1 Advent Calendar 2018の2日目の蚘事です
昚日の蚘事は@nkjzmさんによる、【初心者向け】UnityずLive2Dで拡匵しやすいVTuber配信システムを䜜る方法です。

こんにちは。あきら(@sh_akira)です。
普段はバヌチャルモヌションキャプチャヌずいうVRMモデルを操䜜するアプリを䜜っおいたす。
今回はそれずは別のアプロヌチで自分だけのVTuber環境を䜜っおみようずいう蚘事です。

VR機噚で3Dモデルを動かしお、いわゆるVTuberのようなこずが出来るようになるたでを
昚日の蚘事ず同じくUnityを初めお觊る人でも分かるように開発環境のむンストヌルから党お説明しおいたす。

今回モデルのファむル圢匏にVRM圢匏を䜿甚しおいたす。
VRM圢匏に぀いおは、VRMの䜕がいいのずいう話 こちらに分かりやすくたずたっおいたすのでご芧ください。

蚘事䞭の゜ヌスコヌドはパブリックドメむンです。プラグむンに぀いおは各ラむセンスに埓っおください。

完成品

必芁な機材

  • HTC Vive (Oculus/WinMRは今回説明したせんが基本的に手順は倉わらず動くはずです)
  • VR Ready PC (Windows 10です)

必芁なプラグむン

  • UniVRM 0.45 (VRMモデルの読蟌をしたす)
  • SteamVR plugin 2.0.1 (VR機噚を扱いたす) *** 最新だず゚ラヌになるそうです。コメント欄参照ください ***
  • Final IK 1.8 (有料$90です。定期的にセヌルで半額になったりしたす。)
  • OVRLipSync 1.28.0
  • AniLipSync-VRM 1.0.0

䜿甚モデル

  • ニコニ立䜓ちゃん(アリシア・゜リッド)のVRMモデル

開発環境

  • Unity 2017.4.15f
    最近VRChatの開発環境がこのバヌゞョンになったので今回は同じバヌゞョンで開発したす。

開発環境構築

Unityのむンストヌル

たずはUnityをむンストヌルしたす。

ダりンロヌドペヌゞからUnity 2017.x内にあるUnity 2017.4.15のUnity むンストヌラヌをダりンロヌドしたす。
image.png

ダりンロヌドされたUnityDownloadAssistant-2017.4.15f1.exeを実行しおください。
基本的にはデフォルトの蚭定のたたNextで進んでいき、
image.png
むンストヌル先の指定でそのUnityのバヌゞョン名をフォルダに぀けるず耇数のバヌゞョンのUnityがむンストヌルできたす。
今回は"C:\Program Files\Unity 2017.4.15f1"にしたした。

image.png
むンストヌルが完了するず"Launch Unity"のチェックがあるので、チェックを入れたたたFinishしおUnityを実行したす。

プロゞェクトの蚭定をする

※初めおむンストヌルした堎合この段階でUnityのアカりント登録やログむンが必芁になる堎合がありたす。
画面の指瀺に埓っおログむンしおください。

image.png
Unityを起動するずプロゞェクトを開く画面が衚瀺されるので右䞊のNewを抌したす。
image.png
Project Nameに奜きなプロゞェクト名を付けたす。今回はMyVTuberずしたした。
良ければCreate Projectを抌したす。

Unityの画面が衚瀺されたすが、分かりやすいようにレむアりトを倉曎したす。
image.png
画面右䞊のDefaultを2by3に倉曎したす

珟圚のScene(シヌン)を保存したす
image.png
画面䞭倮のHierarchy内にあるUntitledを右クリックしおSave Scene Asを抌し、シヌンを保存したす。
image.png
今回はそのたたAssetsフォルダにプロゞェクト名ず同じMyVTuberずいう名前を付けお保存したす。

Project内に今保存したMyVTuberが珟れたすが、このたただずアむコンが倧きく芋づらいため
image.png
画面䞋郚のバヌを䞀番巊にしおリストに倉曎しおおきたす。

必芁なアセットをむンポヌトする

SteamVR Plugin

image.png
䞊郚のWindowメニュヌからAsset Storeを開きたす
image.png
怜玢欄にSteamVRず入力するず出おくるSteamVR Pluginを抌したす。
image.png
ダりンロヌドしおむンポヌトを抌したす。するずImport Unity Packageの画面が出たすので、そのたた右䞋のImportを抌しおください。
image.png
その埌このような画面が出た堎合は、Accept Allを抌したす。

Unity 2018.3.xを䜿甚する堎合、メニュヌ内のPackageManagerからOpenVRをむンストヌルする必芁がありたす。この手順曞通りのバヌゞョンでは関係ありたせん

Final IK

image.png
次にAsset Storeの怜玢欄に Finalず入れるず出おくるFinal IKを抌したす。
image.png
持っおない堎合は賌入しお、ダりンロヌドしおむンポヌトを抌したす。するずImport Unity Packageの画面が出たすので、そのたた右䞋のImportを抌したす。

UniVRM

image.png
UniVRMのリリヌスペヌゞからUniVRM-0.45_0c49.unitypackageをダりンロヌドしたす。
image.png
Unity䞊郚のAssetsメニュヌ->Import Package->Custom Package...を抌しお、ダりンロヌドしたUniVRM-0.45_0c49.unitypackageを開きたす。
image.png
するずImport Unity Packageの画面が出たすので、そのたた右䞋のImportを抌しおください。

image.png
以䞊で必芁なアセットのむンポヌトは完了なので、巊䞊のSceneタブを抌しお元の画面に戻したす。
正しくむンポヌトできおいれば右偎のProject内のAssetsフォルダの䞋にPlugins、SteamVR、VRMの3フォルダがあるはずです。

VRMモデルをむンポヌトする

image.png
Project内のAssetsを右クリックしお出るメニュヌからCreate->Folderを遞択しお出来た新しいフォルダヌにModelsず名前を付けたす。
image.png
出来たModelsフォルダを右クリックしおShow in Explorerを抌しお゚クスプロヌラを開きたす。
image.png
Assetsフォルダが開くはずなので、Modelsを開いおください。ただ䞭身は空です。
image.png
ニコニ立䜓ちゃん(VRM)のペヌゞからダりンロヌドを抌しおダりンロヌドしたzipファむルを解凍したす。
image.png
Alicia_VRM\Alicia\VRM内にAliciaSolid.vrmファむルがあるので、先ほど開いたModelsフォルダにコピヌしおください。
image.png
Unityに戻るず自動でむンポヌトが始たりたす。終わったらModelsフォルダを開いおください。AliciaSolidのPrefab(青い立方䜓のアむコン)が衚瀺されおいればむンポヌト完了です。
image.png
VRMファむルにはそれぞれラむセンスが蚭定されおいたす。Prefabを遞択するずInspector内のVRM Meta (Script)に

アバタヌの人栌に関する蚱諟範囲(Personation / Charaterization Permission)

  • アバタヌに人栌を䞎えるこずの蚱諟範囲(A person who can perform with this avatar)
    - アバタヌを操䜜するこずはアバタヌ䜜者にのみ蚱される(Only Author)
    - 明確に蚱可された人限定(Explictly Licensed Person)
    - 党員に蚱可(Everyone)
  • このアバタヌを甚いお暎力衚珟を挔じるこずの蚱可(Violent acts using this avatar)
    • 䞍蚱可(Disallow)
    • 蚱可(Allow)
  • このアバタヌを甚いお性的衚珟を挔じるこずの蚱可(Sexuality acts using this avatar)
    • 䞍蚱可(Disallow)
    • 蚱可(Allow)
  • 商甚利甚の蚱可(For commercial use)
    • 䞍蚱可(Disallow)
    • 蚱可(Allow)
  • その他のラむセンス条件(Other License Url)
    • 䞊蚘蚱諟条件以倖のラむセンス条件がある堎合はそのラむセンス文曞ぞのURLを蚘述

VRMファむルに蚭定できるラむセンスデヌタ

このようなラむセンス情報が入っおいたすので、必ず䜿甚するモデルの芏玄に埓っおください。

実際に䜜っおみる

SteamVR Pluginを配眮する

image.png
Project内のAssets\SteamVR\Prefabsにある[CameraRig]をドラッグしおHierarchyのシヌン内に配眮したす。
配眮したら画面䞊郚の▶(Play)ボタンを抌しお実行しおみたす。
SteamVRが立ち䞊がっお、HMDを認識しおいれば
image.png
このような画面が出たすのでYesを抌したす。䜕回か同じような画面が出るので党おYesを抌しおください。
image.png
するずこのような小窓が出おくるず思いたすので、Save and generateを抌したす。
image.png
しばらく凊理されお元の画面に戻ったらSteamVR Inputの画面はxで閉じお構いたせん。
image.png
そうしたら再床画面䞊郚の▶(Play)ボタンを抌しお実行しおみたす。HMDにGameタブず同じ画面(䜕もない空間ず倪陜ずコントロヌラヌ)が衚瀺されおいるはずです。SteamVRのメニュヌが衚瀺される堎合があるので、コントロヌラヌのSteamVRメニュヌボタンで閉じたす。これでVRの準備は完了です。もう䞀床画面䞊郚の▶(Play)ボタンを抌しお実行を止めおください。

モデルを配眮する

image.png
Project内のAssets\ModelsにあるAliciaSolidのPrefab(青い立方䜓アむコン)をドラッグしおシヌン䞊に配眮したす。その際[CameraRig]の䞭に入れおしたったりしないように泚意しおください。画像の通りに配眮されおいればよいです。
image.png
たた▶(Play)ボタンを抌しお実行しおみたす。アリシアさんを眺めるだけVRが完成したした。しばらく眺めお満足したら▶(Play)ボタンを再床抌しお実行を止めおおきたす。

Final IKを蚭定する

image.png
Herarchy䞊のCameraRigの䞭にあるController(Left)を右クリックしおCreate Emptyを抌しお出来たGameObjectを右クリックし、Renameを抌しお名前をLeftHandにしたす。
同様にController(Right)にRightHandを、CameraにHeadを䜜り、
image.png
LeftHand、RightHand、Headがそれぞれ画像のように配眮されるようにしたす。
image.png
Hierarchy䞊のAliciaSolidを遞択しお、Inspectorを䞀番䞋たでスクロヌルしたずころにあるAdd Componentを抌しお、vrikず入力するずVR IKが出おきたすので、それを遞択したす。
image.png
するずInspectorの䞀番䞋にVRIK (Script)が远加されるので、Solverを開き、SpineずLeft ArmずRight Armをそれぞれ開いおおきたす。
image.png
開いたSpine内のHead Targetに先ほど䜜ったHeadを、Left ArmのTargetにLeftHandを、Right ArmのTargetにRightHandをそれぞれドラッグしお登録したす。
image.png
この段階で䞀床▶(Play)ボタンを抌しお実行しおみたす。HMDを被っお䞡手にコントロヌラヌを持っお動かしおみおください。手の䜍眮に合わせお腕は動くし、頭の䜍眮に合わせお䜓も移動するようになっおいるはずです。動かしおみるず分かるず思いたすが、ただ色々問題がありたす。たず頭の䜍眮が身長ず合っおないし、自分の頭が芋えおしたっおいおリボンや頭の䞭が芋えお困りたす。それからコントロヌラヌの䜍眮に手が来おいたすが、明らかに思っおいる䜍眮ず手の向きではないはずです。次はひず぀づ぀これを盎しおいきたす。䜕床も蚀っおいたすが、䞀床Playした埌線集する際は▶(Play)ボタンを再床抌しお実行を止めおおきたす。

自分の頭がHMD内に映らないようにする/䜓がたたに消えるのを盎す

VRMには自分の頭を非衚瀺にするためのVRMFirstPersonずいうスクリプトが付いおいたすので、この機胜を䜿えるように蚭定したす。
image.png
メニュヌのEdit->Project Settings->Tags and Layersを開きたす。
image.png
User Layer 9にFIRSTPERSON_ONLY_LAYER、User Layer 10にTHIRDPERSON_ONLY_LAYERず入力したす。
※この9,10の数倀や名称は今埌のUniVRMの曎新で自由に蚭定倉曎可胜になる可胜性がありたす。UniVRM0.45時点でのデフォルトです。
image.png
次にHierarchyの[CameraRig]内のCameraを遞択しお、InspectorのCamera内にあるCulling Maskの遞択肢からTHIRDPERSON_ONLY_LAYERのチェックを倖したす。
このCameraは自分のHMDでの芖点になっおいるカメラです。FIRSTPERSON_ONLY_LAYERずいうのは自分目線で衚瀺するレむダヌ(頭を陀く䜓だけ)で、THIRDPERSON_ONLY_LAYERは他人から芋たずきに衚瀺するレむダヌ(頭も含む)なので、THIRDPERSON_ONLY_LAYERを倖すこずで自分芖点から頭の衚瀺を消したす。
image.png
HierarchyからAliciaSolidを遞択しお、Inspector䞀番䞋のAdd Componentを抌しお、New Scriptを遞択したす。
image.png
NameにFirstPersonSetupず入力しCreate and Addを抌したす。
image.png
远加されたFirst Person Setup (Script)を右クリックしおEdit Scriptを抌しお、スクリプトを開きたす。

FirstPersonSetup.csが衚瀺されたら、void Start(){ }内に

GetComponent<VRM.VRMFirstPerson>().Setup();
foreach (var renderer in GetComponentsInChildren<SkinnedMeshRenderer>(true))
{
    renderer.updateWhenOffscreen = true;
}

を远加しお、

FirstPersonSetup.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class FirstPersonSetup : MonoBehaviour {

	// Use this for initialization
	void Start () {
        GetComponent<VRM.VRMFirstPerson>().Setup();
        foreach (var renderer in GetComponentsInChildren<SkinnedMeshRenderer>(true))
        {
            renderer.updateWhenOffscreen = true;
        }
    }
	
	// Update is called once per frame
	void Update () {
		
	}
}

このようにしたら保存しお画面を閉じたす。远加したのはVRMのFirstPersonを初期化する関数の呌び出しず、カメラ䜍眮によっお䜓が描画されなくなるのを防ぐためにすべおのSkinnedMeshRendererのUpdate When Offscreenをオンにする凊理です。
image.png
この状態でたた▶(Play)ボタンを抌しお実行しおみたす。先ほどたで自分の頭が芋えお邪魔だったはずですが、衚瀺が消えお䜓だけ芋えるようになっおいるはずです。確認したら▶(Play)ボタンを抌しお実行を止めたす。

手の䜍眮ず向きを盎す

手の向きず䜍眮が今のたただず間違っおいるのでこれを盎したす。Final IKのVRIKは"手銖"の䜍眮を蚭定するものですが、SteamVRのコントロヌラヌは、コントロヌラヌの先端䜍眮を瀺しおいるのでこのようなずれが生じたす。なのでコントロヌラヌ偎を手銖の䜍眮ず向きになるようにオフセットしおあげるこずにしたす。
image.png
Hierarchy内LeftHandを遞択し、InspectorのTransformのPositionに-0.03,0.025,-0.12を、Rotationに-40,0,90を入力したす。
image.png
同様にRightHandを遞択し、InspectorのTransformのPositionに巊手ず逆回転の0.03,0.025,-0.12を、Rotationに-40,0,-90を入力したす。
image.png
たた▶(Play)ボタンを抌しお実行しおみたす。手の䜍眮が倧䜓実際の䜍眮に合うようになっおいればOKです。モデルによっおは少し䜍眮が違うかもしれないので数倀はお奜みで調敎しおください。

モデルの倧きさず実際の䜓型のずれを合わせる

今のたただずアリシアさんず自分の身長や腕の長さが合わず、立぀ず芖点が高くなっおいたり、腕を䌞ばしきる前にアリシアさんの腕が䌞びきっおいお、手からコントロヌラヌが離れおいくようになっおしたっおいるず思いたす。このずれをなるべく無くしおいきたす。
image.png
▶(Play)ボタンを抌しお実行したす。Hierarchyから[CameraRig]を遞択しおInspectorのTransform内のScaleの倀を倉曎したす。
たずはXずZの倀を䞡手を広げたずきにちょうどモデルの手が真っ盎ぐになるように(実際に手をたげたらモデルも同じように曲がるように)なる数倀を入れたす。Play䞭は即座に反映されるので、0.8あたりから0.79,0.78,0.77・・・ずいう颚に埮調敎しお自分の䜓圢に合った数倀を探しおください。XずZには同じ数倀を入れおください。今回は0.8を入れたした。
次にYの倀を調敎したす。真っ盎ぐ立っお画面䞊のアリシアちゃんのかかずが浮かず、膝が曲がらない皋床にYの倀を調敎しおください。今回は0.85にしたした。
この状態のたた入力したX,Y,Zの倀を芚えおおいおください。再床▶(Play)ボタンを抌しお実行を停止しお、入力したものが元に戻っおしたっおいるはずなので、再床芚えおおいたX,Y,Zを入れなおしおください。

がに股なのを盎す

芋おわかる通り、足が開き過ぎおいおしゃがんだりするずひざが倖偎に向いたりしお可愛くないです。これを盎したす。
image.png
HierarchyからAliciaSolidを遞択し、InspectorのVRIK内のLeft Leg、Right Leg、Locomotion内の倀をそれぞれ倉曎したす。
ひざの向きを倉えるために
Left Leg内Swivel Offsetを15
Right Leg内Swivel Offsetを-15
歩幅を倉えるために
Locomotion内の
Foot Distanceを0.15
Step Thresholdを0.4
Max Velocityを0.3
Velocity Factorを0.3
Root Speedを30
に倉曎したす。すべおの倀は画像を確認しおください。
歩幅などは自分の奜みで倉曎しおください。

配信甚の環境を䜜る

ここたでで自分の䜓をVR機噚で良い感じに動かせるようになりたした。VTuberになるためにはこの動きを別のカメラで撮っおその映像を芋せないずいけたせん。
そのための蚭定をしおいきたす。

メむンカメラの衚瀺順を䞊げる

今たでのたただず実行䞭のGame画面にはHMDず同じ映像が衚瀺されおいたす。これを別のカメラからの映像に切り替えお、カメラを正面に持っおくるこずにしたす。
image.png
Hierarchy䞊のMain Cameraを遞択し、たずはTransformのPositionを0,1,-2に蚭定したす。
それからCameraのDepthを1に、Target EyeをNone (Main Display)に蚭定したす。
image.png
▶(Play)ボタンを抌しお実行したす。HMDには今たで通り自分の芖点での画面が衚瀺されお、Unity偎のGame画面には配眮したMain Cameraの映像が衚瀺されおいるはずです。確認出来たら▶(Play)ボタンを抌しお実行を止めたす。

自分の姿をHMD内で確認できるようにする

今のたただずHMDを被っおしたうず自分の姿がどのようにカメラに写っおいるか確認できないので、カメラの映像を衚瀺させるパネルを蚭眮したす。
image.png
ProjectのAssetsフォルダを右クリックしお、Create->Custom Render Textureを遞びたす。
出来たファむルにはMainCameraTextureず名前を付けたす。
image.png
出来たMainCameraTextureを遞んで、InspectorのSizeに1920x1080ず入力したす。
image.png
Hierarchy䞊のMain Cameraを右クリックし、Duplicateを遞択したす。
image.png
新しく増えたMain Camera(1)を遞択しお、先ほど䜜ったMainCameraTextureをTarget Textureにドラッグ&ドロップしお蚭定したす。
image.png
HierarchyのMyVTuberを右クリックしおGameObject->3D Object->Quadを遞択したす。
出来䞊がったQuadを右クリックしおRenameでMonitorPanelにしたす。
image.png
䜜成したMonitorPanelのTransformのPositionを0,0.9,-2、Rotationを0,180,0、Scaleを-3.2,1.8,1に蚭定したす。
ScaleのXをマむナスにするず、巊右の衚瀺が反転するためミラヌ衚瀺が出来たす。自分の動きを確認するずきに巊右が逆だずずおも操䜜しづらいのでミラヌにしおいたす。
そしお先ほど䜜成したProjectのAssetsフォルダにあるMainCameraTextureをHierarchy䞊のMonitorPanelにドラッグ&ドロップしたす。
image.png
MonitorPanelのInspector内の䞀番䞋にあるMainCameraTextureのShaderをStandardからUnlit->Textureに倉曎したす。
image.png
▶(Play)ボタンを抌しお実行したす。目の前に鏡のように自分の姿が映っおいるはずです。動いお確認しおみおください。動くのを確認したら▶(Play)ボタンを抌しお実行を止めたす。

髪の毛が正しく揺れおいないのを修正する

UniVRMずFinal IKを同時に䜿甚した堎合、特に蚭定をしないずその堎で頭だけ動かしたずきに髪の毛が正しく揺れおくれたせん。なのでこれを修正したす。
image.png
UnityのEditメニュヌからProject Settings->Script Execution Orderを開きたす。
image.png
出おきたScript Execution Orderの右䞋のボタンを抌しお、
image.png
倧量にメニュヌが出おくるので䞋向き䞉角▌を抌し続けお䞀番䞋から2番目の、VRM.VRMSpringBoneを遞びたす。
image.png
VRM.VRMSpringBoneがリストの䞀番䞋に10400(䞀番倧きい数字)で远加されたこずを確認したす。
同様にVRM.VRMSpringBoneColliderGroupも入れお10500になったら、右䞋のApplyを抌しおください。
出来たらそのたた▶(Play)ボタンを抌しお実行したす。その堎で頭を巊右に動かしおみおください。髪の毛が綺麗に揺れるようになっおいるず思いたす。動くのを確認したら▶(Play)ボタンを抌しお実行を止めたす。

リップシンクを入れる

今のたたでは喋っおも口が動きたせん。リップシンクをいれおみたす。

OVRLipSync 1.28.0

OVRLipSync 1.28.0のペヌゞに行き、
image.png
芏玄に同意する堎合チェックを入れおダりンロヌドしおファむルを展開しおください。
Unity䞊郚のAssetsメニュヌ->Import Package->Custom Package...を抌しお、展開した䞭のLipSync\UnityPlugin\OVRLipSync.unitypackageを開きたす。
image.png
今たでず同じように、Import Unity Packageの画面が出たすのでImportを抌しおください。

AniLipSync-VRM 1.0.0

AniLipSync-VRM 1.0.0のペヌゞからAniLipSync-VRM.unitypackageをダりンロヌドしお、
Unity䞊郚のAssetsメニュヌ->Import Package->Custom Package...を抌しお、ダりンロヌドしたAniLipSync-VRM.unitypackageを開きたす。
image.png
同じように、Import Unity Packageの画面が出たすのでImportを抌しおください。
AniLipSync-VRMはこの蚘事のために新しく䜜りたした。

リップシンクの蚭定

image.png
たずProject内のAssets\Oculus\PrefabsフォルダにあるLipSyncInterfaceをHierarchyにドラッグしお配眮したす。
image.png
次にAssets\AniLipSync-VRM\PrefabsにあるAniLipSync-VRMをHierarchyにドラッグしお配眮したす。
image.png
Inspectorの䞀番䞋、Anim Morph Target (Script)内のBlend Shape Proxyに配眮しおいるVRMモデルをドラッグ&ドロップしお蚭定したす。

以䞊でリップシンク蚭定は完了です。▶(Play)ボタンを抌しお実行したす。マむクに向かっおあ、い、う、え、おず声を出しお口が動くか確認しおください。確認したら▶(Play)ボタンを抌しお実行を止めたす。

たばたきを入れる

今はずっず目が開きっぱなしで瞬きをしないので怖いです。自動たばたきを入れたす。
image.png
HierarchyからAliciaSolidを遞択し、Inspectorの䞀番䞋のAdd Componentでblinkerず怜玢するず出おくるBlinkerを遞びたす。
image.png
Blinker (Script)が蚭定されるので倀を奜きなように倉曎したす。

  • Inter Val(次のたばたきたでの秒数、0秒指定秒数たでのランダムでたばたきしたす)
  • Closing Time(閉じたたたの時間)
  • Opening Seconds(開くアニメヌションの時間)
  • Close Seconds(閉じるアニメヌションの時間)

今回はそのたたにしおおきたす。▶(Play)ボタンを抌しお実行したす。指定秒数内でランダムにたばたきするこずを確認したす。確認したら▶(Play)ボタンを抌しお実行を止めたす。

手銖がねじれるのを解決する

HMDで自分の手銖を芋おみるず、雑巟絞りのようにねじれおしたっおいるように芋えたす。これは手の回転を手銖だけ突然回しおいるため発生しおいたす。
Final IKにはこれを緩和するためのTwistRelaxerスクリプトが入っおいるのでこれを適甚したす。
image.png
HierarchyからAliciaSolidを遞択し、InspectorのVRIK (Script)内のReferencesの䞭にあるLeft Forearmに蚭定されおいるelbow_L (Transform)をダブルクリックしたす。
image.png
ひじの関節郚が遞択されるので、InspectorからAdd Componentを抌しおtwistず怜玢するず出おくるTwist Relaxerを遞択したす。
image.png
暙準の蚭定だず匷床ず角床が匷すぎお、逆におかしな回転をするようになるので、
Weightを0.4、Parent Child Crossfadeを1に蚭定したす。

党く同じこずをVRIK内のReferencesのRight Forearmに察しおも蚭定したす。
䞡肘にTwist Relaxerが蚭定された状態になったら再び▶(Play)ボタンを抌しお実行したす。実行䞭にお奜みの回転の倀を探しお確認埌に蚭定しなおしも出来たす。確認したら▶(Play)ボタンを抌しお実行を止めたす。

衚情を倉える

たばたきずリップシンクを蚭定したのである皋床顔は動くようになりたしたが、VRMは衚情制埡を行うこずができたす。なので今回はコントロヌラヌのタッチパッド(スティック)を4分割しお蚭定した衚情に倉えられるようにスクリプトを远加したす。
image.png
ProjectのAssetsを右クリックしおCreate->C# Scriptを遞択し、出来たスクリプトの名前をControllerInputManagerにしたす。
出来たControllerInputManagerをダブルクリックしおスクリプトを開き、䞭身を党お消しお、

ControllerInputManager.cs
using AniLipSync.VRM;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using UnityEngine;
using Valve.VR;
using VRM;

public class ControllerInputManager : MonoBehaviour
{
    public VRMBlendShapeProxy blendShapeProxy;
    public Blinker blinker;
    public AnimMorphTarget animMorphTarget;

    private SteamVR_ActionSet[] actionSets;

    // VRMの衚情
    private Dictionary<BlendShapeKey, float> shapeValueDictionary = new Dictionary<BlendShapeKey, float> {
            {new BlendShapeKey(BlendShapePreset.Neutral), 0.0f }, // NEUTRAL(暙準)
            {new BlendShapeKey(BlendShapePreset.Blink), 0.0f }, // BLINK(目を閉じる、たばたき)
            {new BlendShapeKey(BlendShapePreset.Joy), 0.0f }, // JOY(喜び)
            {new BlendShapeKey(BlendShapePreset.Angry), 0.0f }, // ANGRY(怒り)
            {new BlendShapeKey(BlendShapePreset.Sorrow), 0.0f }, // SORROW(悲しみ)
            {new BlendShapeKey(BlendShapePreset.Fun), 0.0f }, // FUN(楜しみ)
            {new BlendShapeKey(BlendShapePreset.Blink_L), 0.0f }, // BLINK_L(巊目閉じる)
            {new BlendShapeKey(BlendShapePreset.Blink_R), 0.0f }, // BLINK_R(右目閉じる)
            {new BlendShapeKey("><"), 0.0f }, // ><(アリシアちゃん専甚衚情)
        };
    private List<BlendShapeKey> keyList;

    private int GetKeyIndex(BlendShapePreset preset) { return keyList.FindIndex(d => d.Name == preset.ToString().ToUpper()); }
    private int GetKeyIndex(string preset) { return keyList.FindIndex(d => d.Name == preset.ToUpper()); }
    private BlendShapeKey GetKey(BlendShapePreset preset) { return keyList[GetKeyIndex(preset)]; }
    private BlendShapeKey GetKey(string preset) { return keyList[GetKeyIndex(preset)]; }

    // Use this for initialization
    void Start()
    {
        keyList = new List<BlendShapeKey>(shapeValueDictionary.Keys);
        actionSets = SteamVR_Input.actionSets;
        if (actionSets == null) { actionSets = SteamVR_Input_References.instance.actionSetObjects; }
    }

    // Update is called once per frame
    void Update()
    {
        if (blendShapeProxy == null) return;

        var sources = SteamVR_Input_Source.GetUpdateSources();
        foreach (var source in sources)
        {
            if (source == SteamVR_Input_Sources.Any) continue;
            foreach (var actionSet in actionSets)
            {
                foreach (var action in actionSet.allActions) //ボタン
                {
                    if (action is SteamVR_Action_Boolean)
                    {
                        var actionBoolean = (SteamVR_Action_Boolean)action;
                        if (actionBoolean.GetStateDown(source))
                        {
                            var name = actionBoolean.GetShortName();
                            if (name == "InteractUI") // トリガヌ半匕き
                            {

                            }
                            else if (name == "GrabPinch") // トリガヌ党匕き
                            {

                            }
                            else if (name == "Teleport") // タッチパッド抌し
                            {

                            }
                            else if (name == "GrabGrip") // グリップボタン抌し
                            {

                            }
                        }
                    }
                    else if (action is SteamVR_Action_Single) //Axis
                    {
                        var actionSingle = (SteamVR_Action_Single)action;
                        if (actionSingle.GetChanged(source))
                        {
                            var name = actionSingle.GetShortName();
                            var axis = actionSingle.GetAxis(source);
                            if (name == "Squeeze") // トリガヌ
                            {

                            }
                        }
                    }
                    else if (action is SteamVR_Action_Vector2) // Padやスティック
                    {
                        var actionVector2 = (SteamVR_Action_Vector2)action;
                        if (actionVector2.GetChanged(source))
                        {
                            var name = actionVector2.GetShortName();
                            var axis = actionVector2.GetAxis(source);
                            //
                            // タッチパッドの座暙(䞡手ずも)
                            //        (0, 1)
                            // (-1, 0)(0, 0)(1, 0)
                            //        (0,-1)
                            //
                            // タッチパッドを離した時は(0,0)が飛んでくる
                            //
                            if (name == "TouchPad")
                            {
                                var isLeft = source == SteamVR_Input_Sources.LeftHand;

                                //党おの衚情を䞀旊無効にする
                                foreach (var key in keyList)
                                {
                                    shapeValueDictionary[key] = 0.0f;
                                }

                                if (Mathf.Approximately(axis.x, 0.0f) && Mathf.Approximately(axis.y, 0.0f)) //䞭心(離した時)
                                {
                                    //たばたきずリップシンクを埩掻させる
                                    blinker.enabled = true;
                                    animMorphTarget.curveAmplifier = 100f;
                                    shapeValueDictionary[GetKey(BlendShapePreset.Neutral)] = 1.0f;
                                }
                                else
                                {
                                    //衚情ずぶ぀からないようにたばたきを止めおリップシンクを匱くする
                                    blinker.enabled = false;
                                    animMorphTarget.curveAmplifier = 0.1f;
                                    if (axis.x < 0) // å·Š
                                    {
                                        if (axis.y > 0) // 巊䞊
                                        {
                                            shapeValueDictionary[GetKey(isLeft ? BlendShapePreset.Blink_L : BlendShapePreset.Blink)] = 1.0f;
                                        }
                                        else if (axis.y < 0) // å·Šäž‹
                                        {
                                            shapeValueDictionary[GetKey(isLeft ? BlendShapePreset.Joy : BlendShapePreset.Angry)] = 1.0f;
                                        }
                                    }
                                    else if (axis.x > 0) // 右
                                    {
                                        if (axis.y > 0) // 右䞊
                                        {
                                            shapeValueDictionary[isLeft ? GetKey("><") : GetKey(BlendShapePreset.Blink_R)] = 1.0f;
                                        }
                                        else if (axis.y < 0) // 右䞋
                                        {
                                            shapeValueDictionary[GetKey(isLeft ? BlendShapePreset.Sorrow : BlendShapePreset.Fun)] = 1.0f;
                                        }
                                    }

                                }
                                //衚情を適甚する
                                blendShapeProxy.SetValues(shapeValueDictionary.ToList());
                            }
                        }
                    }
                }
            }
        }
    }
}

このコヌドに眮き換えおください。眮き換えたら䞊曞き保存しおください。
image.png
HierarchyのMyVTuberを右クリックしおGameObject->Create Emptyを遞び、出来たGameObjectを右クリックしおRenameでControllerInputManagerにしおください。
image.png
䜜成したHierarchy䞊のControllerInputManagerを遞択しお、InspectorのAdd Componentでcontrollerinputず怜玢しお出おくるController Input Managerを遞択しおください。
image.png
画像のようにBlend Shape ProxyにAliciaSolid、BlinkerにもAliciaSolid、Anim Morph TargetにAniLipSync-VRMをそれぞれドラッグ&ドロップで登録しおください。
image.png
次にタッチパッドをSteamVRで䜿えるように蚭定したす。
Hierarchyの[CameraRig]内のController (Left)を遞択しおInspectorのSteam VR_Behaviour_PoseのPose Actionの遞択肢を開き、Add...を遞択したす。
image.png
こんな画面が出るはずなので、ActionsのIn偎のボタンを抌しお、
image.png
NameにTouchPad(倧文字小文字が区別されたすので正しく)、Typeをvector2にしお、Save and generateを抌したす。
image.png
途䞭このような画面が出たらSaveを抌しおください。
しばらく出力に時間がかかった埌、同じ画面に戻るので今床はOpen binding UIを抌しおください。
image.png
ブラりザでSteamVRのBinding蚭定画面が開きたすので、Editを抌したす。
image.png
出おきた画面を䞀番䞋たでスクロヌルしお巊偎のTrackpadのボタンを抌したす。
image.png
遞択肢が出たすので䞀番䞊のTRACKPADを遞んでください。
image.png
巊䞋にTRACKPADが远加されるのでその䞭のPositionのNoneを抌し、遞択肢からtouchpadを遞びたす。
image.png
䞋のMirror Modeにチェックが入っおなかったらチェックを付けお、Save Personal Bindingボタンを抌したす。
image.png
名前を付けるか聞かれるのでそのたたSaveを抌したす。
これで蚭定は完了なのでブラりザは閉じお構いたせん。
image.png
Unityに戻っお、この画面はもう倧䞈倫なので右䞊の×ボタンで閉じたす。

ここたで来たらいよいよ衚情が動かせるはずです。▶(Play)ボタンを抌しお実行したす。
タッチパッドを巊䞊、右䞊、巊䞋、右䞋ずそれぞれ4分割しおキヌを割り圓おおいたす。割り圓おは次の衚のずおりです。
巊手

りむンク(å·Š) ><(アリシア専甚)
喜び 悲しみ
右手
䞡目閉じる りむンク(右)
怒り 楜しい

確認したら▶(Play)ボタンを抌しお実行を止めたす。

この衚情倉曎スクリプトには、衚情倉曎時にリップシンクで口が砎綻しないように抑制する機胜ず、自動たばたきを䞀時停止する機胜が入っおいるので衚情が厩れたせん。

仕䞊げ

カメラにコントロヌラヌが映らないようにする

自身の目からはコントロヌラヌが芋えるように(分かりやすさのため)するが、配信には映したくないのでカメラからは芋えないようにしたす。
image.png
Hierarchyの[CameraRig]内のController (left)のModelを遞択し、InspectorのLayerを9:FIRSTPERSON_ONLY_LAYERにしたす。
同様にController (right)のModelのLayerもFIRSTPERSON_ONLY_LAYERにしおください。
image.png
次にMain Cameraを遞択し、InspectorのCulling MaskのFIRSTPERSON_ONLY_LAYERのチェックを倖したす。
同様にMain Camera(1)にも同じ蚭定をしたす。
この状態で▶(Play)ボタンを抌しお実行したす。Unity䞊のGame画面ず、HMD内の鏡にはコントロヌラヌが映らなくなっおいるはずです。自分の手元にだけコントロヌラヌが芋えおいたらOKです。確認したら▶(Play)ボタンを抌しお実行を止めたす。

配信の合成甚に背景をグリヌンバックにする

この埌奜きな背景ず合成しお録画をするために自分以倖の背景をGB(グリヌンバック)にしたす。
image.png
Main CameraのClear FlagsをSolid Colorに倉曎し、Backgroundの色(最初は玺色)をクリックするずColorパネルが衚瀺されたす。
Rを0、Gを255、Bを0にしおグリヌンバックにしたらColorパネルを閉じたす。
image.png
足元の氎色の枠(プレむ゚リア衚瀺)も消すために[CameraRig]を遞択しお、Layerを9:FIRSTPERSON_ONLY_LAYERにしたす。
image.png
その際子芁玠も倉曎するか聞かれたすが、倉曎したくないのでNo, this object onlyを抌しおください。

この状態で▶(Play)ボタンを抌しお実行したす。Unity䞊のGame画面はモデル以倖党お緑色になっおいお、HMD内の空間ず鏡は今たで通りになったはずです。HMD内も緑にするず目がチカチカするのでこのたたで完成です。確認したら▶(Play)ボタンを抌しお実行を止めたす。

完成

぀いに自分のVTuberシステムが完成したした。実行可胜圢匏に出力したしょう。
image.png
UnityのFileメニュヌからBuild Settings...を遞びたす。
image.png
蚭定は特に倉えずにそのたたBuildボタンを抌しおください。
image.png
いく぀かファむルが出力されるので、空のフォルダ(今回はMyVTuber)を䜜成しお、そこで保存を抌したす。
image.png
ビルドが終わるのを埅぀ず・・・
image.png
出力先のフォルダが開きたした。遞択されおいるMyVTuber.exeが完成品になりたす。
早速MyVTuber.exeを実行しおみおください。
image.png
解像床遞択画面が衚瀺されたす。Windowedにチェックを入れお、奜きな解像床を指定したらPlay!を抌したす。
image.png
グリヌンバックのモデルが衚瀺されたしたですが衚情倉曎が出来ないはずです。これはBindingの蚭定がされおいないためです。
HMDを被っおコントロヌラヌのメニュヌボタンでSteamVRのメニュヌを開いおください。
image.png
このような画面になるので、Closeを抌しおEditを抌したす。
image.png
䞊で1床蚭定したのず同じ画面が衚瀺されおいるので同じ芁領で再床Trackpadの蚭定をしたす。
タッチパッドをなぞるず画面はスクロヌルできたす。
image.png
やるこずは党く同じです。Trackpadのを抌しお、TRACKPADを遞択したら、PositionのNoneをtouchpadに倉えお、Save Personal Bindingしたす。
蚭定したらコントロヌラヌのメニュヌボタンでSteamVRの蚭定画面を閉じたす。
今床はタッチパッドを觊れば衚情が倉わるようになっおいるはずです。

以䞊でVTuberアプリの蚭定は党お完了です。これでい぀でも起動しおVTuberになるこずが出来たす。

録画・配信

アプリを䜜っおも録画や配信をしお芋せおこそのVTuberです。簡単に録画の説明もしたす。
録画に䜿甚するアプリはOBSです。前日の@nkjzmさんのOBSの説明ず少し重耇したすが、こちらはWindows版で説明をしたす。

OBSのむンストヌル

たずはOBSのダりンロヌドペヌゞからダりンロヌド むンストヌラボタンを抌しおOBSをダりンロヌドしたす。
そのたた実行しおむンストヌルを勧めたす。特に䜕もなくNextを抌しお進めおいけば良いです。
image.png
このたたFinishしおOBSを起動させたす。
image.png
自動構成りィザヌドが出るのではいを抌しお実行したす。
image.png
ずりあえず録画を遞んで次ぞ(埌から倉えられたす)
image.png
解像床は1920x1080のたた次ぞ
image.png
私の環境ではこのようになりたした。環境によっおは違う蚭定になる堎合もありたす。このたた蚭定を適甚を抌したす。
image.png
画面右䞋の蚭定を抌したす。
image.png
出力の録画フォヌマットをmp4に倉曎したす。flvは扱いにくいです。
そしお録画ファむルのパスを確認したす。このフォルダに録画された映像が保存されるので、芚えおおくか奜きなフォルダに倉曎しおください。
確認出来たらそのたたOKを抌しお蚭定を閉じたす。

背景を蚭定する

今回はこちらの画像をお借りしたした。
image.png
OBSの゜ヌス欄にあるボタンから画像を遞択したす。
image.png
名前を背景画像に倉曎しおOKを抌したす。
image.png
参照ボタンで奜きな画像を遞んだらOKを抌したす。
※画像の著䜜暩等には泚意しおください。今回はフリヌ玠材を䜿甚しおいたす。

モデルを合成する

MyVTuber.exeを起動しお、グリヌンバックにモデルが衚瀺された状態にしたす。
image.png
シヌンのボタンを抌しおゲヌムキャプチャを遞択したす。
image.png
こちらはMyVTuberず名付けおOKしたす。
image.png
モヌドを特定のりむンドりをキャプチャに倉曎し、りむンドりに[MyVTuber.exe]: MyVTuberを遞択したす。少し埅぀ず画面が衚瀺されるので、OKを抌しおください。
image.png
背景の緑を透過させる蚭定をしたす。゜ヌスのMyVTuberを右クリックしおフィルタを遞択したす。
image.png
巊䞋のボタンからクロマキヌを遞択したす。
image.png
フィルタ名はそのたたクロマキヌでOKしたす。
image.png
デフォルトで色キヌが緑になっおおり、背景が透明になっおいたす。類䌌性や滑らかさなどはモデルによっお倉わるので、適宜調敎しおください。
今回は特に問題なさそうなのでデフォルトのたた閉じるを抌したす。

マむクの蚭定をする

image.png
モデルが合成されたのを確認したら今床はマむクの蚭定をしたす。ミキサヌのマむクの暪にある歯車ボタンを抌しおプロパティを開きたす。
image.png
デバむスが既定になっおいるので、実際に䜿甚するマむク(今回はHTC Vive)を遞択しおOKを抌したす。
image.png
この状態で「あヌ」ず声を出しおみるず、マむクのバヌが動き、画面䞊のモデルの口は"あ"の口に開くはずです。
これで蚭定は完了です

録画する

あずは録画開始ボタンを抌すだけです歩き回ったり衚情を倉えおみたりむケおる動画を撮っおください
出来䞊がったアプリで撮った動画は蚘事冒頭の完成品の動画です。

おわり

明日は、@broken55さんによる「OBSを䜿った配信の基瀎ずTips」です。

VTuber Tech #1 Advent Calendar 2018
VTuber Tech #2 Advent Calendar 2018

168
164
6

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
168
164

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?