VRChat　VRCFaceTracking5.x完全対応 アイトラッキング 作成方法

<iframe width="560" height="315" src="https://www.youtube.com/embed/tneM8O-9mK0?si=Rom1xYPeo4erNBeW" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
　

2024Mar09 Write Defaultesに関する記載を追加
 　
　
VRChat用のOSCソフトは複数ありますが、ここでは最も寡占してると思われるVRChatFaceTreackingのバージョン5.xの変数に対応したアイトラッキングの実現方法を書いていきます。
 
VRCFaceTrackingは以下からダウンロードできます。
https://docs.vrcft.io/docs/vrcft-software/vrcft
インストール等については数多の記事があるのでそちらを参考にしてください。
　
VRCFaceTrackingですが、バージョンが4.xから5.xに上がっています。今のところ4.xの変数でも動きますがレガシー扱いされていますのでここでは全て5.xの変数を用います。
　
　
　
　
　
　
#下準備
　
VRChatにはデフォルトで疑似的に目を動かしているように見える機能「EYE Look」が搭載されています。これを無効にします。無効状態では「Enable」と表示されます。
　
次にExpressionのメニューとパラメータを設定します。何も入っていない場合はデフォルトのものを入れて下さい。何か入っている場合はそのままでいいです。
　
![図１.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201026/207c14cf-d472-b4a1-13d2-7fa963dfe853.png)
　
　
　
　
　
　
#目の上下左右
　
上下左右についてはBOOTHで無料公開してますので面倒な方はそっちをダウンロードしてください。
https://nekogahora.booth.pm/items/5493686
![BOOTH.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201026/9f383c06-021c-c432-40fe-7dedc1e7f5f5.png)
　
　
EXpressionParameterに以下のように変数を追加します。
　
v2/EyeLeftY：左目上下軸 -1.0（下）～1.0（上）のFloat変数
v2/EyeLeftX：左目左右軸 -1.0（左）～1.0（右）のFloat変数
v2/EyeRightY：右目上下軸 -1.0（下）～1.0（上）のFloat変数
v2/EyeRightX：右目左右軸 -1.0（左）～1.0（右）のFloat変数
になります。登録の順番は自由です。上下軸をどちらかの目の変数１つで共用している例を見ますが、使っている側の目をウインクで瞑ると目が動かなくなるのでお勧めしませんです。
　
![図２.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201026/68e10fdb-57b3-2ea2-03fc-1e6e594ab583.png)
　
マウス右クリック、Creat-> Animation Controllerを選びAnimation Controllerを作ります。分かりやすいようにここでは、Eye Move Animator Controllerという名前に変えておきます。
　
![図３.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201026/dd01403f-95ae-41bf-2669-803df494de66.png)
　
　
Eye Move Animator Controllerを以下の2か所に設定します。
![図3p5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201026/a0de2f24-80ca-faaf-c721-2353da47450c.png)
　
　
Animationタブを開きます。
![図４.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201026/4213056d-c58a-3eb2-4d03-bd430b518528.png)
　
　
Hierarchyのアバターを選択した状態で、AnimationタブのCreateを押します。
![図５.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201026/72da7a98-bf70-f05f-6704-d890a7509d25.png)
　
ここでは5つのAnimationを作成します。
##StraightL （左目まっすぐ）
Add Propertyを押し、AnimatorにあるLeft Eye Down-UpとLeft Eye In-Outを追加します。
![図６.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201026/05f6a66f-5272-9c43-a26b-4b447079922b.png)
　
横軸1:00にあるマーカーを削除します。
![図７.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201026/9e8068fa-c31e-2e87-d6e8-054d76bb8e69.png)
　
　
　
##Horizontal_LeftL（左目を左）
以下図参照
![図８.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201026/065d6b8e-705c-ed73-89cb-e3d84f60bc88.png)
ここで4としている数値を大きくするとより大きく目が左へ動きます。どの程度動かすと最適かはアバターの目の形状によるのでAnimationを再生して調整してください。これ以降に出てくるAnimationの数値も同じで個々に調整してみてください。
　
　
　
##Horizontal_RightL（左目を右）
以下図参照
![図９.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201026/70a8cd02-3a64-8148-1c83-d93acec5bc8f.png)
　
　
　
##Vertical-down L（左目を下）
以下図参照
![図１０.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201026/8a65dca5-6c87-e666-5b76-9ea50832995c.png)
　
　
　
##Vertical-up L（左目を上）
以下図参照
![図１１.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201026/35c43921-bfea-715b-20e7-617bbed1355f.png)
　
　
　
右目も同様にAnimator.Right Eye In-OutとAnimator.Right Eye Down-Upを使って作成します。
　
　
最後に作ったAnimationを選びLoop Timeのチェックを外しておきます。
![図１２.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201026/b80a93ff-bf6c-e685-4dde-a4ee789d1ad4.png)
　
　
AnimatorタブでBase Layerにある作ったAnimationの箱を全て削除します。
![図１３.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201026/8fa957bf-9ee8-5dbc-18be-acd5bc9f390a.png)
　
Parametersタブで先ほどExpressionParameterに追加したパラメータをFloatで追加します。
![図１４.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201026/d8df0147-62a8-f301-045d-a856cb498276.png)
　
Projectsタブ上でマウスを右クリックしAvator Maskを作成します。
![図１５.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201026/1722f552-2a3c-9eda-a864-8e6b8fff5697.png)
名前をAvator Mask Headにします。
InspectorでHumanoidを開き頭だけを緑にします。
![図１６.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201026/925f5774-6aa9-c270-dcc2-47f9701041c7.png)
　
　
AnimatorタブのLayerでEye Movement LとEye Movement Rのレイヤーを追加します。Weight＝0.5、Mask＝無し、Blending＝Overrideにします。
　
Base LayerのMaskに先ほど作成したAvator Mask Headを設定します。
![図１８.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201026/f01cf61b-4ad9-a074-0faa-5870e2509de0.png)
　
Eye Movement Lを選びマウス右クリックでFrom New Blend Treeを選びます。
![図１９.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201026/009e4eff-aee5-60e1-cb94-01092b8a1477.png)
　
Blend TreeをクリックするとInspectorが以下のように表示されます。Write Defaultsのチェックを外し、MotionのBlendTreeをダブルクリックします。
![追加図１.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201026/73218f8a-6235-1fc3-89c3-8e8822c0b04f.png)

　
以下の画面になるので、これを以下のように設定します。
![図２１.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201026/9170310f-fc1b-0137-2464-3834308e0dbf.png)
　
　
ここでXとYの値は-1.0～1.0ですが、そこまで大きな値は出ないので目の動きに合わせて小さめに調整してください。左がマイナスで右がプラス、上がプラスで下がマイナスです。
　
　
右目もこれの応用で以下のように設定してください。
![図２２.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201026/b6211a6e-20c2-2167-8a95-4c1d59248512.png)
　
　
最後にアバターのAnimatorに設定したAnimatorを外します。目の上下左右はこれで設定完了です。
![図２３.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201026/ac24237e-8ebb-fcb6-1fa9-31232527d5c8.png)
　
　
　
　
　
　
　
#ウインクと見開き
　
VRCFaceTrackingのv2/EyeLidLeftとv2/EyeLidRightの2つの変数を使います。0.0～1.0に変化する変数ですが、値によって異なったはたらきをします。
　
0.00：目を完全に閉じた状態
0.75：目を完全に開いた状態
0.75以上1.00：目を大きく見開いた状態
になります。
　
まず、ExpressionParameterに変数をFloatで追加します。
![図１.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201026/10234ba7-a461-eea8-485a-553c77711a38.png)
　
AnimatoinはFXレイヤーに追加していきます。どんなアバターでもすでにFXにAnimatorが設定されていると思われますので、そこへ追加していきます。
　
アバターのAnimatorにFXへ設定されているAnimatorを設定します。
![図２.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201026/ea48677a-d720-b8ca-7d25-596312507431.png)
　
目の上下左右の時と同じようにAnimationを作成していきます。
　
からっぽのAnimationをEmpty-Animationという名前で作成します。
![図３.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201026/bc0e0778-4442-e449-430b-f16403892733.png)
　
アバターの顔のシェイプキーから左目閉じを探し、Eye_Left_BlinkというAnimationの名前で以下のような設定で作成します。
![図４.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201026/f4fad848-6e93-465b-8419-c9a3230ecfec.png)
　
右目はEye_Right_Blinkという名前で同じように作成します。
　
左右目共に目をクワッ！と見開いた状態を顔のシェイプキーをいろいろブレンドしてEye_Wideという名前でAnimationを作ります。アバターによってシェイプキーが異なるのでご自身でいろいろ研究してみてください。
![図５.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201026/f4be50d5-fd17-cc2e-c123-2ab39e395a0d.png)

ウインクと見開きで使ったすべてのシェイプキーをリセットするAnimationを作成します。名前はResetとします。これはWrite DefaultsをOFFにするために必要になります。
ここでの例ではこのようになります。
![Reset.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201026/8fa5a35d-8aca-3413-9fab-1863f51e2a0e.png)





最後に作ったAnimation全てを選びLoop Timeのチェックを外しておきます。
　
　
　
FXに設定されたAnimation ControllerのParameterタブを開きv2/EyeLidRightとv2/EyeLifLeftをFloatで追加します。
![図６.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201026/48004311-f9c6-5857-646c-6cabcd876ee4.png)
　
LayerタブでLeft EyeとRight Eyeを追加します。
![図７.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201026/c792fe1b-9f5e-cb4f-5103-c418a31a9387.png)
　
Left Eyeレイヤーでマウスを右クリックし、From New Blend Treeを選びます。Inspectorに下図のように表示されるます。
Write Defaultのチェックを外しておきます。赤で囲ったBlend Treeをダブルクリックします。
![図８.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201026/8bd9c291-e6ec-7494-c9b1-9b298a147169.png)

　
Blend Treeの中身が表示されますので、変数を設定し、＋を押してMotionを追加し下図のようにします。
![図９.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201026/317c3fb6-4efd-cb5a-7c69-072586aa4c3d.png)
　
　
Right Eyeレイヤーは同じように以下のようになります。
![図１０.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201026/51b49151-9938-ca06-4489-9804fe76b1be.png)
　
　
　
Write Defaultを外しているのでリセット処理が必要になります。先ほど作ったReset Animationを一番最初のLayerのデフォルトステートに設定します。
ここではAllPartsレイヤーを選び、次にデフォルトのステートを選びます。Inspectorに設定されているMotionをResetに変えます。
![デフォルトステート.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201026/ada08078-392d-2bcc-1b87-adaebb9c793d.png)
![リセットに変える.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201026/1bcccc35-eadd-cd4c-d3b4-0840e7325493.png)

Write DefaultsがVRChatで非推奨になってからさほど経っていないので、アバターによってはWrite DefaultsがONとOFFで混在するかもしれませんが全部OFFにしたい場合は各種ツールがBOOTH等に出ていますのでそれを試してみてください。


最後にアバターのAnimatorにセットしたAnimation Controllerを外します。
![図１１.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201026/5f589273-8c26-2a3d-f67c-cc2a4882f652.png)




以上でアバターのセットアップは終了です。