はいぬっかメモ

キャラクターモデルをVR空間で眺めたい

VRoidでかんたん!パーフェクトシンク(3/3)BlendShape Clip追加

f:id:hinzka:20200821073625p:plain

iPhoneフェイストラッキング向けBlendShape追加 VRoid編 

<概要>Unity上でBlendShapeClipを一括コピーします。
Clipの表情を作りこみ、最終的なVRMに仕上げます。
 
 

f:id:hinzka:20200821230024p:plain


 

____________________________________________________________________________________

!本記事の記載内容は過去の手順となります!

 

現在、VRoidにパーフェクトシンク対応のBlendShapeを実装するには

くにやんさん @nikutokuni 作の 超かんたんBlendShapeコピーツールがおすすめです

booth.pm

VRoid用の表情データセット同梱(VRoidStudio V0.11.3対応)
Blenderを経由せず、Unityだけで簡単にVRoidモデルのパーフェクトシンク対応ができます

Unity初めてのかたでもわかりやすいように手順書を書きました

hinzka.hatenablog.com

____________________________________________________________________________________

 

 

 

本解説で使用しているUnity・Blenderのバージョンは以下の通りです。

Unity:2019.4.0f1

Blender:v2.83.2

 

1.【Unity】BlendShapeClip追加

 
BlendShapeClipとは、VRMで定義されているBlendShapeのプリセットです。
モデル自身の持つBlendShapeを組み合わせて新たな表情を作ることができます。
詳しくはUniVRMのドキュメントを参照してください。

vrm.dev

 
 
雛形データセット」に含まれるVRMファイル(前章で使用したBlenderファイルとは別のもの)から、BlendShapeClipとその設定値をコピーします。
BlendShape52点に対応したClipが入っています。

f:id:hinzka:20200820211953p:plain

※BlendShape52点のClip名は下記に準じたものです

UnityEngine.XR.ARKit.ARKitBlendShapeLocation

 
前回作成したVRMと、上記の雛形VRMの両方をUnityにインポートします。

f:id:hinzka:20200820055351p:plain

モデルのInspectorの VRM Blend Shape Proxy にある Blend Shape Avatar をダブルクリックします。
または、モデル名+.BlendShapesフォルダにあるBlendShapeファイルを選択します。

f:id:hinzka:20200820060241p:plain

BlendShapeClipの一覧が表示されます。

VRoidには、デフォルトで18個のBlendShapeClipが存在します。

雛形モデルではさらに56個のBlendShapeClipを追加して全74個としています。

 また、Clipの形状を構成するBlendShapeを下部で確認できます。 

 

VRM設定複製ツールをインストールします。
インストールするとVRMのメニューに追加されます。
多機能なツールですが今回は「BlendShapeClipのみ」をコピーします。

f:id:hinzka:20200820060452p:plain

f:id:hinzka:20200820060509p:plain

Source Avatar に雛形のモデル(ここでは千駄ヶ谷渋モデル)、
Destination Avatar にコピー先のモデルをドラッグ&ドロップで登録します。
Vrm Blend Shape以外のチェックをはずしてコピー&ペースト実行します。

f:id:hinzka:20200820061347p:plain

コピー完了するとこのようになります。
 (コピー後のBlendShapeClip名には BlendShape. が自動で付加されるようです)
 

2.【Unity】BlendShapeClip調整

口の開きなどを調整して顔を仕上げます。
 
目の形状には個体差が大きく、雛形のシェイプキーをコピーしたBlendShapeでは正しく目を閉じないことがあります。
雛形のBlendShapeClipでは、まばたき・笑い目は(BlendShapeのコピー元ではなく)モデル本来のシェイプを参照するようにしています。
 
【eyeSquintLeft / eyeSquintRight】
笑いながらまばたきすると目が埋まるなどの場合は、eyeSquintのパラメータを弱めてみてください。
BlendShape名 " Fcl_EYE_Joy_L "
BlendShape名 " Fcl_EYE_Joy_R "

f:id:hinzka:20200820195841g:plain

 

【 jawOpen】

BlendShape名 " jawOpen " には、「あ」のモーフ100%が格納されています。

BlendShape名 " Fcl_MTH_A " のパラメータを追加すると、口をさらに大きく開くことができます。

f:id:hinzka:20200820200347g:plain

 

【mouthRollLower】
唇を噛む(口を引き結ぶ)と口が埋まって消えてしまう場合があります。
BlendShape名 " mouthRollLower " を弱めると口が埋まりにくくなります。
 f:id:hinzka:20200820201234g:plain
 

3.【Unity】マテリアル修正

Blenderを経由するとアウトラインが消えていたりするので修正します。
シーン上にモデルを配置し、Body, Hair, Faceの各オブジェクトのマテリアル設定を確認します。

f:id:hinzka:20200820205240p:plain

元々アウトラインが設定されていたマテリアルでは、アウトライン設定がWorldCoordinates の状態ですが、なぜかそのままでは線が表示されません。
いったん None を選択し、再度 WorldCoordinates に戻すとアウトラインが表示されます。

f:id:hinzka:20200820210209g:plain

アウトラインを表示させたいマテリアルについて、この再選択をしておきます。
 

4.【Unity】VRM出力

Hierarchy上でモデルを選択した状態でVRMエクスポートします。
こちらが最終ファイルになります。おつかれさまでした!
 
 
なお、VRMのBlendShapeClipを使ってiPhoneのフェイストラッキング(52点)をカバーするアプリは現状3つしかありません。
対応モデルが増えるとアプリも増えるかもしれないと期待しています。たのむー
 
 
 

5.VSCode

VRM IMPORTERアドオンにより、Faceオブジェクトがリネームされた影響として、VRoid Mobileで表情が動作しなくなります。


VSCodeを使うとオブジェクト名の編集ができます。

nodes以下のオブジェクト定義で ”Face.baked” を ”Face” に修正すると、VRoid Mobile上で表情が動くようになります(2箇所)。

 

qiita.com

 

 お着換えモデルへの顔移植を別エントリで解説しています。

hinzka.hatenablog.com

 
 
 
 

VRoidでかんたん!パーフェクトシンク(2/3)BlendShape追加、顔の入れ替え

f:id:hinzka:20200821073514p:plain

 

iPhoneフェイストラッキング向けBlendShape追加 VRoid編 

<概要>
iPhoneのフェイストラッキングに必要なBlendShapeを追加します。
雛形のモデルからシェイプキー転送します。
元のVRMに新しい顔を入れ替えます。

f:id:hinzka:20200821225941p:plain本解説で使用しているUnity・Blenderのバージョンは以下の通りです。

Unity:2019.4.0f1

Blender:v2.83.2

 

 

____________________________________________________________________________________

!本記事の記載内容は過去の手順となります!

 

現在、VRoidにパーフェクトシンク対応のBlendShapeを実装するには

くにやんさん @nikutokuni 作の 超かんたんBlendShapeコピーツールがおすすめです

booth.pm

VRoid用の表情データセット同梱(VRoidStudio V0.11.3対応)
Blenderを経由せず、Unityだけで簡単にVRoidモデルのパーフェクトシンク対応ができます

Unity初めてのかたでもわかりやすいように手順書を書きました

hinzka.hatenablog.com

____________________________________________________________________________________

 

 

1. 配布ファイル

使用するファイルをまとめてBOOTHで配布しています。
性別によってメッシュの構成が異なります。同一の性別の雛形を使用してください。

 


hinzka.booth.pm

 

2.【Blender】雛形モデルからBlendShape複製

2-1. BlendShape複製

(前回から引き続き)Blender上にモデルが表示されている状態です。

ここに雛形モデルをアペンドします。

f:id:hinzka:20200819122136p:plain

f:id:hinzka:20200819124014p:plain

Filter Blender IDs を有効にするとアペンドするファイルの種類を指定できます。

Objectsを選択状態にして、雛形の.blendファイルを選択します。objectフォルダの下にFaceオブジェクトがあります。

f:id:hinzka:20200819123917p:plain

Appendを選択すると、雛形の顔オブジェクトが追加で読み込まれます。

f:id:hinzka:20200819125521p:plain

(同名オブジェクトが存在するときは、後から読み込んだ方に自動で連番が付加されます)

 

【シェイプキーの転送】
シェイプキーを転送します。
 
 シェイプキーの転送を行うアドオン
転送元のシェイプキーをすべて転送します。
(雛形モデルからはデフォルトの表情を削除しているため重複はしません)

f:id:hinzka:20200819125939g:plain

スポイトツールでTargetオブジェクトとSourceオブジェクトをそれぞれ選択し、「シェイプキーを転送」を実行します。
頂点の状態が異なると転送に失敗します。転送先のモデルが前章の手順で作成されていることを確認してください。
 

2-2. 失敗するときの原因と対策

クリックで展開
・VRoid Studioのバージョンが配布データセットのものと異なる
   → 配布データセットに記載のVRoid StudioバージョンでVRM出力してお試しください。
・アクセサリ追加などのために他のツールを経由している
   → VRoid Studioから直接出力されたVRMをお使いください。
     本章の4で顔を差し替えるとき、アクセサリ追加されたVRMの体に差し替えてください。
・FBX Expoterのバージョンが異なる
   → UnityのPackageManagerから最新版を入れるようにしてください( v3.2.0以降 )。
     Asset Storeからインポートすると古いバージョンになってしまいます。
・雛形の種類が異なる
   → コピー元の.blendファイルはターゲットと同じ性別のものをお使いください。
     男性はさらに2種類あるので、一方で失敗したらもう片方も試してみてください。
 
※転送直後、BlendShapeリストの最後(tongueOut)が選択状態になります。エクスポート時にはBasisを選択状態にしてください。
 

2-3. iFacialMocapでの動作確認

クリックで展開
Blender上で顔の動作確認することができます。 
 
流用の予定がなければ、この動作確認は本章5の段階(マテリアル設定済)で行うのがおすすめです。ただし、5の段階ではメッシュの状態が共通ではなくなっています。
 
他のモデルへモーフを転送可能なVRoid用雛形として流用するなら、この段階でマテリアルを設定してモーフの形状を編集・.blendファイル保存するのがおすすめです。マテリアルの設定方法は前章のおまけに記載しています。
 
詳しくはiFacialMocapの解説を参照 

f:id:hinzka:20200830110513p:plain



 

2-4. シェイプキーのソートと追加

クリックで展開
手動で一部のシェイプキーを追加・作成した場合など、必要に応じてシェイプキーの並びをソートできます。
 
シェイプキーのソートを行うアドオン
iFacialMocap、FaceCapのそれぞれの命名規則にシェイプキー名が適合しているかをチェックします。
不足したキーをダミーで埋める機能もあります。全部手動でつくる場合など、入力ミスをなくすことができて大変便利です。
 
さらに、これらのBlendShapeがリストの先頭にくるように並べ替えます。
 ソート後はBasisが選択状態になります。
 
 
 
 転送に成功したことを確認したら、雛形のオブジェクトは忘れずに削除しておきます。
 

3.【Blender】BlendShape複製済のFBXモデル出力

 
 
BlenderでFBXを直接VRM出力するのに成功していないため(回転やスケールがおかしくなる…)VRM化の処理はUnity上で行います。
 
いったんFBXに出力します 
※エクスポートの際、BlendShapeの選択状態に注意
 (Basis以外のShapeKeysが選択されていると、その表情がデフォルトになってしまいます)
 
アドオン【Unity_tools 2.80 and newer.zip】
Unityにインポートしたときのアニメーション挙動が正しくなるよう回転を加えるアドオン
詳しくはこちら
ルートのTramsformでXが -90°になります。FBXエクスポートf:id:hinzka:20200819051125p:plainf:id:hinzka:20200819051459p:plain
以下の設定で出力
・エクスポート対象:Armature, Mesh
・Apply Scalings:FBX All
・!EXPERIMENTAL! Apply Transform:チェックあり
 f:id:hinzka:20200819053101p:plain
カスタマイズしたエクスポート設定は「Operator Presets」に保存しておくと便利です

4.【Unity】顔転送用のVRMモデル出力

4-1. FBX読み込み、マテリアル調整、VRM出力

 上記のFBXモデルをUnityにインポートします。(Assetフォルダの任意の場所にFBXをドラッグ&ドロップ)
 BlendShapeNormalをImportに、リグをHumanoidにそれぞれ設定します。
顔のマテリアルを、一番最初にインポートした元VRMのものに差し替えます。

f:id:hinzka:20200819060121p:plain

・Calculateのままだと表情が動いたとき影が不自然になることがあります

f:id:hinzka:20200819060158p:plain

VRM出力するためにはRigがHumanoidである必要があります

マテリアルスロットに、元VRMのマテリアルをドラッグ&ドロップします。
(同一プロジェクトにあるファイルでないとドラッグ&ドロップできないので注意 前章でFBX化したときと同じプロジェクトで作業すると効率よいです)

f:id:hinzka:20200819062413p:plain

f:id:hinzka:20200819062603p:plain

Unityのシーンに配置します(例ではマテリアルをすべて設定しています)。

顔以外の体や髪については不正な表示になることがありますが、ここでは気にしなくて大丈夫です。
この状態でVRM出力します。これがモデルのあたらしい顔になります。

f:id:hinzka:20200819062223p:plain

※いったんFBXを経由してVRM化したモデルには、元のマテリアルや揺れ物の設定がなくなっています。このため、元のVRMモデルに「顔だけ」コピーします。衣装替えモデルに顔を差し替える場合も同様の手順となります。

 

4-2. iFacialMocapでの動作確認

クリックで展開
 Unity上で顔の動作確認することができます。

 

5.【Blender】顔オブジェクトを、元VRMモデルの顔と差し替え

5-1. 顔の差し替え

 Blender上で元のVRMと3で作成したVRMの二つを読み込み、前者の顔だけを後者に差し替えます。
以下のアドオンをインストールします。

github.com

インポートの項目にVRMが追加されます。

先に、元々のVRM(BlendShapeをコピーしていない方)を読み込みます。

f:id:hinzka:20200819131556p:plain

VRMの設定どおりマテリアル設定も含めて正しく読み込まれます。
見やすくするため、collidersとsleletonをいったん非表示にします。

f:id:hinzka:20200819132609p:plain

さらに、Unityから出力したVRM(BlendShape52種を追加したモデル)を読み込みます。こちらもcollidersとsleletonをいったん非表示にします。

同じ位置に表示されるため一体に見えますが、2体読み込まれた状態です。

f:id:hinzka:20200819132910p:plain

Sceneのディレクトリ表示上で、

BlendShape入りのFaceオブジェクト(Face.baked.001)を、元モデルのものと同一の階層にドラッグして移動します。顔以外の残りの項目は不要なので削除します。

元モデルのFaceオブジェクト(Face.baked)も削除します。

BlendShape入りのFaceオブジェクトを、元の文字列(Face.baked)にリネームします。

f:id:hinzka:20200819133819g:plain

f:id:hinzka:20200819135653p:plain

FaceオブジェクトのShapeKeysを選択し、正しく動くことを確認します。

 

5-2. iFacialMocapでの動作確認

クリックで展開
Blender上で顔の動作確認することができます。 
 
詳しくはiFacialMocapの解説を参照 

f:id:hinzka:20200830110513p:plain

 
 
頭の位置について :
 同じモデル同士であれば顔も全く同じ位置にくるため位置調整は不要です。衣装替えモデルで靴の種類が異なる場合は高さのみ合わせる必要があります。
顔オブジェクトの位置を編集モードの”Basis”キー上で調整します(オブジェクトモードではないことに注意)。Basisでの位置・形状は他のすべてのシェイプキーに反映されます。
 

5-3. VRM出力

顔差し替え済みのモデルを改めてVRMに出力します。
・非表示にしてあった項目を再度表示します。
・3Dビュー上で「A」キーを押下し、すべてのオブジェクトを選択します。
この状態でVRMのエクスポートを実行します。

f:id:hinzka:20200819140140p:plain

※エクスポートの際、BlendShapeの選択状態に注意
 (Basis以外のShapeKeysが選択されていると、その表情がデフォルトになってしまいます)
 
最終調整は次エントリにてUnity上で行います。

VRoidでかんたん!パーフェクトシンク(1/3)VRoidモデルのFBXエクスポート

f:id:hinzka:20200821073149p:plain


 iPhoneフェイストラッキング向けBlendShape追加 VRoid編
<概要>
雛形モデルからターゲットモデルへ、Blender上でBlendShapeを複製するための条件を整える
 
 
ゴゴちゃんによるBlendShape転送の検証結果

 

BlenderVRM IMPORTERアドオンで直接VRMを読み込む
        → メッシュの状態が変わってしまう。シェイプキーのコピー失敗
・中間ファイルとしてGLTF(.glb)を経由
        → メッシュの状態が変わってしまう。シェイプキーのコピー失敗
・中間ファイルとしてFBXを経由
        → メッシュの状態は変更されない。シェイプキーのコピー成功
 
上記のリサーチ結果に基づき、メッシュ頂点の状態を維持したままBlenderにインポートするため、中間ファイルとしてFBXを採用しました。エクスポートにはUnityのFBX Exporterを使用します。
 

f:id:hinzka:20200821225841p:plain

 

 

____________________________________________________________________________________

!本記事の記載内容は過去の手順となります!

 

現在、VRoidにパーフェクトシンク対応のBlendShapeを実装するには

くにやんさん @nikutokuni 作の 超かんたんBlendShapeコピーツールがおすすめです

booth.pm

VRoid用の表情データセット同梱(VRoidStudio V0.11.3対応)
Blenderを経由せず、Unityだけで簡単にVRoidモデルのパーフェクトシンク対応ができます

Unity初めてのかたでもわかりやすいように手順書を書きました

hinzka.hatenablog.com

____________________________________________________________________________________

 

 

 

本解説で使用しているUnity・Blenderのバージョンは以下の通りです。

Unity:2019.4.0f1

Blender:v2.83.2

 

1.【Unity】VRMモデルをFBXにエクスポート

1-1.準備

VRMファイル
VRoid Studioの対応バージョンから直接出力されたVRMである必要があります。
 マテリアルやメッシュの削減は行わず、デフォルトの状態で出力してください。
 
 
 
■UniVRM
以下から最新版をDLしインストールしておきます。
 
 
VRMモデルをプロジェクトにドラッグ&ドロップすると読み込まれます。
今回は、BlendShapeのコピー先モデルとしてViviを使用します。
 
 
■FBX Exporter
Unity公式で提供されているFBX Exporterを使います。
最新版はPackage Managerからインストールします。
(アセットストアにあるFBX Exporterはバージョンが古く、正しくエクスポートできません)

f:id:hinzka:20200727055019p:plain f:id:hinzka:20200716092645p:plain

f:id:hinzka:20200716092727p:plain

1-2.FBXエクスポート

VRMモデルをプロジェクトに読み込み、Scene上に配置します。

Hierarchy ウィンドウでモデルを右クリックし、FBXエクスポートを行います。

f:id:hinzka:20200727055339p:plain f:id:hinzka:20200716101303p:plain

BlenderはASCII形式のFBXファイルをサポートしてないため、Binaryを選ぶ必要があります。

Exportを実行すると、Destinationで指定したディレクトリにFBXファイルが作成されます。デフォルトではプロジェクトのAssetフォルダ直下です。

 

2.【Blender】FBXモデルのインポートとマテリアル調整

2-1.FBXインポート

[ファイル]→[インポート]→[FBX(.fbx)] でFBXモデルをインポートします。

f:id:hinzka:20200727053740p:plain

3Dビューの表示設定をマテリアルプレビューモードに切り替えます。ボーンを非表示にします。

f:id:hinzka:20200727053720p:plain

読み込んだ直後はマテリアル設定が正しく行われていません。 

【比較用】アドオン( VRM_IMPORTER )でVRMをインポートした場合

f:id:hinzka:20200727054112p:plainf:id:hinzka:20200727054134p:plain


 

今回の作業ではBlendShapeをツールで自動コピーします。
また、顔以外は、最終的に元のVRMから持ってくるので修正の必要はありません。
このため(見た目はよくないですが)このままで作業を進めることにします。
マテリアルの割り当てはUnityでVRM化する際に行います。
 
ただし、一部マテリアルとメッシュとの対応関係がおかしくなっている部分があります。このメッシュ割り当てだけはここで修正しておきます。
 
Blenderのデフォルトだと、カメラが近づいたとき3D Viewの表示が欠けるのでビューの設定をしておきます。
クリックで展開

f:id:hinzka:20200727053052p:plainf:id:hinzka:20200727053118p:plain

 

2-2.メッシュへのマテリアル再割り当て

編集モードで作業します。

f:id:hinzka:20200727060017p:plain

 Faceオブジェクトで、以下のメッシュに対してマテリアルを再度割り当てます。

1) 耳

 耳のメッシュに「EyeExtra」のマテリアルが当たってしまっています。

メッシュをリンク選択して「Face_00_Skin」のマテリアルを割り当てます。

リンク選択では白目や口内もまとめて選択されてしまうため後で個別に直します(耳だけスマートに選択する方法があったら教えてください)

 リンク選択

f:id:hinzka:20200727061528p:plainf:id:hinzka:20200727061608p:plainf:id:hinzka:20200727062221p:plain

マテリアルの割り当て

f:id:hinzka:20200727062518p:plain

耳のメッシュに顔のマテリアルが適用されます。

 

 

2) EyeExtra

後ろから見ると、><の目のメッシュに「FaceMouth」のマテリアルが当たってしまっています。

メッシュを選択して「EyeExtra」のマテリアルを割り当てます。

f:id:hinzka:20200727063058p:plainf:id:hinzka:20200727063120p:plain

 

3) 白目

※EyeExtraのメッシュが邪魔なのでいったん非表示にしています。

メッシュを非表示にする(クリックで展開)

メッシュを選択した状態で、

[メッシュ] > [表示/隠す] > [選択物を隠す] でメッシュを非表示にできます。

[メッシュ] > [表示/隠す] > [隠したものを表示]で再表示されます。

f:id:hinzka:20200727063651p:plainf:id:hinzka:20200727063711p:plain

 耳のマテリアルを再設定したとき、白目のメッシュに「Face_00_Skin」のマテリアルが当たってしまうのでここで直します。

後ろから見ると、白目のメッシュに「FaceMouth」のマテリアルが当たってしまっています。

メッシュを選択して「EyeWhite」のマテリアルを割り当てます。

 

白目の裏にある交点を選択し、選択の拡大を2回繰り返すと白目を選択できます。

f:id:hinzka:20200727065007p:plain f:id:hinzka:20200727064805p:plain

f:id:hinzka:20200727065225p:plain

「EyeWhite」のマテリアルを割り当てます。

 

4) 口内

耳のマテリアルを再設定したとき、口内のメッシュに「Face_00_Skin」のマテリアルが当たってしまうのでここで直します。

白目と同様、中央の交点を選択し、選択の拡大を4回繰り返して唇の際まで選択します。「FaceMouth」マテリアルを適用します。

f:id:hinzka:20200727070638p:plainf:id:hinzka:20200727070738p:plain

 

 完了した状態 

f:id:hinzka:20200727070131p:plainf:id:hinzka:20200727070151p:plain

 

この状態で一旦Blenderファイルを保存します。

次の手順で、雛形モデルからBlendShapeをコピーします。

 

3.【おまけ】Blenderでマテリアル手動調整

当初は下記の通り丁寧にマテリアルを直していたのですが、よく考えたらここで見た目を綺麗にする必要はとくになかった

何かの役に立つかもしれないのでおまけとして残します。

3-1.マテリアルの透過設定

クリックで展開
オブジェクトモードで作業します。ここでは眉のマテリアルを編集しています。
 
・編集対象のマテリアルを選択し、Shadingタブに切り替えます。

f:id:hinzka:20200717074342p:plain

 マテリアルのノードが表示されます。

f:id:hinzka:20200716220037p:plain

ノードをいったん全部削除し、新規で作成します。
ここを参考に
 

f:id:hinzka:20200717074536p:plain

「追加」から以下の要素をノードエディタに追加して接続します。
  • 画像テクスチャ(Image Texture)
  • テクスチャ座標(Texture Coordinate)
  • 透過BSDF(Transparent BSDF)
  • ディフューズBSDF(Diffuse BSDF)
  • シェーダーミックス(Mix Shader)
  • マテリアル出力(Material Output)

f:id:hinzka:20200830080628p:plain

 画像テクスチャの項目で、対応するテクスチャ画像を割り当てます(ここでは眉)。

 
Layout表示に戻ります。
マテリアルの設定で、ブレンドモードにアルファクリップを設定します。

f:id:hinzka:20200717001505p:plain

3Dビューでテクスチャが透過表示されることを確認します。
 
ノードはコピペができます。複数のマテリアルに同一の設定を行うときはノード画面をコピペするのがよいと思います。画像テクスチャのみ差し替えます。
コピペした場合も、アルファクリップの設定は個別に行う必要があります。
 

3-2.メッシュへのマテリアル割り当て

クリックで展開
編集モードで作業します。ここではシャツに対してマテリアルを割り当てます。
 
シャツのメッシュを選択します。
頂点グループを追加していく方法もありますが、リンク選択が便利です。

f:id:hinzka:20200717080353p:plain

f:id:hinzka:20200717080430p:plain

f:id:hinzka:20200717080450p:plain

メッシュを選択した状態で対象のマテリアルを選択し、「割り当て」をクリックします。
 マテリアルが割り当てられ、メッシュにテクスチャが表示されます。

f:id:hinzka:20200717081224p:plain

 透過が必要な場合は、このマテリアルにも 2-2. のノード設定を行います。
 
マテリアル調整が完了した状態

f:id:hinzka:20200716064641p:plain

※髪や眉・睫毛等は頂点カラー未設定のため白くなっています
 
VRoid編(2/3)
BlendShape複製作業、VRMモデルの顔オブジェクト置き換え
 
VRoid編(3/3)
Unity上でのマテリアル調整、BlendShape Clipの追加、VRM出力
 
 
 

iPhoneトラッキング向けBlendShapeリスト

f:id:hinzka:20200821075712p:plain

 

追記(2021/12/2)

調査の結果を反映して資料を作り直しました。GIFアニメーションつきで解説しています。

 

日本語版 

hinzka.hatenablog.com

 

 

English version

hinzka.hatenablog.com

 

 

 

スマホだと表示が崩れます!上記記事内のリンクからGoogleDocsのファイルをご利用ください

  シェイプ名      

1

browInnerUp

 

▶ARKit資料

f:id:hinzka:20211216061510g:plain

f:id:hinzka:20211216071202g:plain



眉の内側を上げる

眉尻は動かさない

困った眉

眉に関連するシェイプキーは全部で4種

 - browInnerUp

 - browDownLeft / browDownRight

 - browOuterUpLeft / browOuterUpRight

 - noseSneerLeft / noseSneerRight

 

目の表情に関するシェイプキーは全部で3種

 - eyeBlinkLeft / eyeBlinkRight

 - eyeSquintLeft / eyeSquintRight

 - eyeWideLeft / eyeWideRight

 

目のシェイプ3種だけでは目元の表情を十分にカバーできない

眉のや頬のシェイプキーに目元の動きも含めることでバリエーションを豊かにすることができる

 

眉の複数のシェイプを同時に動かしたとき、顔のメッシュに埋まらないように注意

 

 

 

browInnerUpでは眉尻の位置を維持する

browInnerUpとbrowOuterUpLeft/browOuterUpRightはそれぞれ100%で合成すると「自然に上がった眉(=びっくりした眉)」の形になる

f:id:hinzka:20211216073917g:plain

(browInnerUp+browOuterUp)

2

browDownLeft

 

▶ARKit資料

f:id:hinzka:20211216061422g:plain

f:id:hinzka:20211216071321g:plain

f:id:hinzka:20211216071354g:plain




左眉全体を下げる

訝しむ眉

 

browDownでは眉全体を傾斜しつつ下降させる

f:id:hinzka:20211216073930g:plain

(browDown+browInnerUp)

 

上まぶたをわずかに押し下げる

上まぶたの動きは、まばたきと重なったときに目が埋もれて消えない程度にする

3

browDownRight

 

▶ARKit資料

f:id:hinzka:20211216061526g:plain

f:id:hinzka:20211216061537g:plain




f:id:hinzka:20211216071406g:plain

f:id:hinzka:20211216071414g:plain




右眉全体を下げる

訝しむ眉

同上

4

browOuterUpLeft

 

▶ARKit資料

f:id:hinzka:20211216061555g:plain



f:id:hinzka:20211216071434g:plain

f:id:hinzka:20211216071442g:plain




左眉の外側を上げる

眉頭の位置は維持

 

browOuterUpでは眉頭の位置を維持する

上まぶたの目尻側をわずかに持ち上げる

 

 

browInnerUpとbrowOuterUpLeft/browOuterUpRightはそれぞれ100%で合成すると「自然に上がった眉(=びっくりした眉)」の形になる

f:id:hinzka:20211216073959g:plain

(browInnerUp+browOuterUp)

 

5

browOuterUpRight

 

▶ARKit資料

f:id:hinzka:20211216061907g:plain

f:id:hinzka:20211216061915g:plain




f:id:hinzka:20211216071454g:plain

f:id:hinzka:20211216071502g:plain




左眉の外側を上げる

眉頭の位置は維持

同上

6

eyeLookUpLeft

 

▶ARKit資料

f:id:hinzka:20211216061936g:plain


※眼球の動きはボーン制御です

f:id:hinzka:20211216071521g:plain

f:id:hinzka:20211216071531g:plain




左目の瞳を上に向ける

※ここでは参考のために眼球を動かしています。実際には眼球は動きません。

ボーン制御の眼球を持つモデルでは、シェイプキーに眼球の動きを入れてはいけません。

 

左の上まぶたの中央を見開く

下まぶたの中央を持ち上げる

 

頂点が中央よりになるほど変化量が大きくなるように、Surprised目のシェイプキーを合成

 

上瞼全体を一様に上げ下げするのではなく、中央部を重点的に動かすことで、眼球をみまわしたとき目元がなめらかに動く

 

f:id:hinzka:20211216074050g:plain



7

eyeLookUpRight

 

▶ARKit資料

f:id:hinzka:20211216061955g:plain

f:id:hinzka:20211216062003g:plain

※眼球の動きはボーン制御です

片目だと見た目が怖いので両目を動かしています

f:id:hinzka:20211216071543g:plain

f:id:hinzka:20211216071552g:plain




右目の瞳を上に向ける

※ここでは参考のために眼球を動かしています。実際には眼球は動きません。

 

右の上まぶたの中央を見開く

下まぶたの中央を持ち上げる

 

同上

8

eyeLookDownLeft

 

▶ARKit資料

f:id:hinzka:20211216062014g:plain


※眼球の動きはボーン制御です

片目だと見た目が怖いので両目を動かしています

f:id:hinzka:20211216071622g:plain

f:id:hinzka:20211216071631g:plain




左目の瞳を下に向ける

※ここでは参考のために眼球を動かしています。実際には眼球は動きません。

 

左の上まぶたの中央を下げる

下まぶたの中央を下げる

 

頂点が中央よりになるほど変化量が大きくなるように、Surprised目のシェイプキーを合成

 

中央部を重点的に動かすことで、眼球をみまわしたとき目元がなめらかに動く

9

eyeLookDownRight

 

▶ARKit資料

f:id:hinzka:20211216062026g:plain

f:id:hinzka:20211216062034g:plain

 

※眼球の動きはボーン制御です

片目だと見た目が怖いので両目を動かしています



f:id:hinzka:20211216071643g:plain

f:id:hinzka:20211216071652g:plain




右目の瞳を下に向ける

※ここでは参考のために眼球を動かしています。実際には眼球は動きません。

 

右の上まぶたの中央を下げる

下まぶたの中央を下げる

 

同上

10

eyeLookInLeft

 

▶ARKit資料

f:id:hinzka:20211216062157g:plain

 

※眼球の動きはボーン制御です

片目だと見た目が怖いので両目を動かしています

f:id:hinzka:20211216071705g:plain

f:id:hinzka:20211216071712g:plain




左目の瞳を内側に向ける

※ここでは参考のために眼球を動かしています。実際には眼球は動きません。

 

左の目頭部分を見開く

目の頂点の中央から目頭側だけを動かす

 

頂点が目頭よりになるほど変化量が大きくなるように、Surprised目のシェイプキーを合成

 

変化量に傾斜をつけることで、眼球をみまわしたとき目元がなめらかに動く

11

eyeLookInRight

 

▶ARKit資料

f:id:hinzka:20211216062220g:plain

f:id:hinzka:20211216062235g:plain

※眼球の動きはボーン制御です

片目だと見た目が怖いので両目を動かしています




f:id:hinzka:20211216071726g:plain

f:id:hinzka:20211216071734g:plain

右目の瞳を内側に向ける

※ここでは参考のために眼球を動かしています。実際には眼球は動きません。

 

右の目頭部分を見開く

目の頂点の中央から目頭側だけを動かす

 

同上

12

eyeLookOutLeft

 

▶ARKit資料

f:id:hinzka:20211216062310g:plain

 

※眼球の動きはボーン制御です

片目だと見た目が怖いので両目を動かしています

f:id:hinzka:20211216071806g:plain

f:id:hinzka:20211216071814g:plain




左目の瞳を外側に向ける

※ここでは参考のために眼球を動かしています。実際には眼球は動きません。

 

左の目尻部分を見開く

目の頂点の中央から目尻側だけを動かす

 

頂点が目尻よりになるほど変化量が大きくなるように、Surprised目のシェイプキーを合成

 

変化量に傾斜をつけることで、眼球をみまわしたとき目元がなめらかに動く

13

eyeLookOutRight

 

▶ARKit資料

f:id:hinzka:20211216062157g:plain

f:id:hinzka:20211216062321g:plain

※眼球の動きはボーン制御です

片目だと見た目が怖いので両目を動かしています



f:id:hinzka:20211216071827g:plain

f:id:hinzka:20211216071836g:plain



左目の瞳を外側に向ける

※ここでは参考のために眼球を動かしています。実際には眼球は動きません。

 

右の目尻部分を見開く

目の頂点の中央から目尻側だけを動かす

 

同上

14

eyeBlinkLeft

 

▶ARKit資料

f:id:hinzka:20211216062412g:plain



f:id:hinzka:20211216071902g:plain

f:id:hinzka:20211216071910g:plain




左目を閉じる

 

ラッキングの際、まぶたの下降に伴う瞳の遮蔽を、iPhoneセンサーが瞳の下回転として検知する

このため、まばたきと同時に瞳がバウンドするような動きになることがある

 

 

通常の閉じ目

 

ここに、まばたきではなく「Joy目閉じ」を設定しておくと、フェイストラッキングで簡単に笑い目閉じができる(通常の閉じ目はできなくなる)

 

ラッキングによるアニメーションでは、目が閉じかけても瞳の回転は継続するため、

モデルによってはまばたき時に瞳メッシュがはみ出す場合がある

閉じ目のシェイプに瞳のスケールを入れることで貫通対策ができる

15

eyeBlinkRight

 

▶ARKit資料

f:id:hinzka:20211216062424g:plain

f:id:hinzka:20211216062432g:plain




f:id:hinzka:20211216072144g:plain

f:id:hinzka:20211216072152g:plain




右目を閉じる

 

ラッキングの際、まぶたの下降に伴う瞳の遮蔽を、iPhoneセンサーが瞳の下回転として検知する

このため、まばたきと同時に瞳がバウンドするような動きになることがある

通常の閉じ目

 

同上

16

eyeSquintLeft

 

▶ARKit資料

f:id:hinzka:20211216062444g:plain



f:id:hinzka:20211216072219g:plain

f:id:hinzka:20211216072227g:plain




左目を笑顔にする

 

左の下まぶたを持ち上げて笑った目

 

ARKitのリファレンスでは瞳は閉じておらず、いわゆる『Joy目閉じ』ではないことに注意

閉じ目と合成されるため、単純にJoy目閉じを設定すると破綻する

 

フェイストラッキングのみで『Joy目閉じ』をつくるには

 ①「閉じ目」のシェイプ100%をマイナス

 ②「Joy目閉じ」のシェイプ100%をプラス

することで可能

 

 ただし、円弧状の「Joy目閉じ」はフィクションなので、通常の目から変形させると中間で不自然な表情になりがち

 フェイストラッキングではこの中間の表情が中心となるため相性がよくない。一瞬で切り替わるキー入力を採用したほうが無難

 

下まぶただけを押し上げると目の大きいキャラクターは顔の印象が変わってしまいがち(面長になる)

 

17

eyeSquintRight

 

▶ARKit資料

f:id:hinzka:20211216062524g:plain

f:id:hinzka:20211216062532g:plain




f:id:hinzka:20211216072239g:plain

f:id:hinzka:20211216072246g:plain




右目を笑顔にする

右の下まぶたを持ち上げて笑った目

 

同上

18

eyeWideLeft

 

▶ARKit資料

f:id:hinzka:20211216062541g:plain



f:id:hinzka:20211216072300g:plain

f:id:hinzka:20211216072316g:plain




左目を見開く

左目を見開く

 

瞳の大きなキャラクターの場合、まぶたを開いただけでは白目の見え方が十分でない場合がある

瞳を縮小して白目が適度に見えるように調整する

19

eyeWideRight

 

▶ARKit資料

f:id:hinzka:20211216062553g:plain

f:id:hinzka:20211216062602g:plain




f:id:hinzka:20211216072325g:plain

f:id:hinzka:20211216072333g:plain




右目を見開く

右目を見開く

 

同上

20

cheekPuff

 

▶ARKit資料

f:id:hinzka:20211216062616g:plain

f:id:hinzka:20211216062624g:plain




f:id:hinzka:20211216072348g:plain

f:id:hinzka:20211216072357g:plain




頬を膨らませる

頬を膨らませるシェイプキー

正面から見てもわかるようにふくらませるとよい

唇は少し前に出る。とがらせると可愛い

狭めすぎるとmouthPuckerと同時に動いたとき破綻するので注意

 

 

狙って発動しやすい表情

mouthPucker以外の他シェイプと混ざりにくいためキメ顔を工夫しやすい

21

cheekSquintLeft

 

▶ARKit資料

f:id:hinzka:20211216062635g:plain



f:id:hinzka:20211216072409g:plain

f:id:hinzka:20211216072416g:plain




左頬をもちあげる

 

左頬で笑顔を作る 頬の上昇に伴った動き

 

アニメ風モデルでは、頬全体を動かすより「口角」「下まぶた」などパーツを動かした表現のほうが破綻が少ない

 

横に伸ばすと笑ったときの口がのびのび広がる

このとき口角付近は伸ばさないほうが口の印象を維持できる

22

cheekSquintRight

 

▶ARKit資料

f:id:hinzka:20211216062647g:plain

f:id:hinzka:20211216062656g:plain




f:id:hinzka:20211216072430g:plain

f:id:hinzka:20211216072440g:plain




右頬をもちあげる

右頬で笑顔を作る 頬の上昇に伴った動き

 

同上

23

noseSneerLeft

 

▶ARKit資料

f:id:hinzka:20211216062709g:plain



f:id:hinzka:20211216072457g:plain

f:id:hinzka:20211216072505g:plain




左の鼻と眉をしかめる

 

眉を顔の中心にぎゅっと寄せる表情

鼻をしかめる動きに付随した動きとして左眉をしかめる

眉頭を下げて寄せる

眉全体の位置は維持

 

browDownと合成されるので下げすぎに注意

f:id:hinzka:20211216074126g:plain

(browDown+noseSneer)

24

noseSneerRight

 

▶ARKit資料

f:id:hinzka:20211216062722g:plain

f:id:hinzka:20211216062731g:plain




f:id:hinzka:20211216072516g:plain

f:id:hinzka:20211216072524g:plain




右の鼻と眉をしかめる

 

眉を顔の中心にぎゅっと寄せる表情

鼻をしかめる動きに付随した動きとして右眉をしかめる

 

同上

25

jawOpen

 

▶ARKit資料

f:id:hinzka:20211216062751g:plain

f:id:hinzka:20211216062803g:plain




f:id:hinzka:20211216072546g:plain

f:id:hinzka:20211216072554g:plain




口を開く

キャラクターの顔の印象を左右するシェイプキー

 

大きく口を開いた状態を設定する

この開きが小さいと口パクがあまり動かない

 

mouthCloseと対になり、双方100%のときに「顎を開けたまま口を閉じる」形になる。顎のみが動くことで咀嚼する動作となる

f:id:hinzka:20211216062824g:plain

(jawOpen+mouthClose)

 

 

 

基本的に、歯を動かすのは顎にかかわるシェイプキーのみ

・jawOpen

・jawForward

・jawLeft

・jawRight

 

・jawOpenとmouthUpperUp/mouthLowerDownを合わせたシェイプが、縦方向の口の開きの最大値

・jawOpenとmouthDimple、mouthStretchなどをそれぞれ合わせたシェイプが、横方向の口の開きの最大値

26

jawForward

 

▶ARKit資料

f:id:hinzka:20211216062955g:plain

f:id:hinzka:20211216063003g:plain




f:id:hinzka:20211216072607g:plain

f:id:hinzka:20211216072615g:plain




顎を前に動かす

 

下顎全体が前に動く

顎と舌・下顎の歯を同時に動かす

27

jawLeft

 

▶ARKit資料

f:id:hinzka:20211216063017g:plain



f:id:hinzka:20211216072627g:plain

f:id:hinzka:20211216072635g:plain




顎を左に動かす

 

下顎全体が左に動く

顎と舌・下顎の歯を同時に動かす

 

通常あまり動くことがなく、意識的にコントロールしやすい動きのため、特定の表情を意図的に発動させることも可能

28

jawRight

 

▶ARKit資料

f:id:hinzka:20211216063058g:plain



f:id:hinzka:20211216072649g:plain

f:id:hinzka:20211216072659g:plain




顎を右に動かす

 

下顎全体が右に動く

顎と舌・下顎の歯を同時に動かす

 

同上

29

mouthFunnel

 

▶ARKit資料

f:id:hinzka:20211216063123g:plain

f:id:hinzka:20211216064351g:plain




f:id:hinzka:20211216072719g:plain

f:id:hinzka:20211216072731g:plain




ウの口

唇をとがらせてわずかに開き、閉じた歯を見せる

唇をつきだしてじょうごのように広げる形

サシスセソの歯を見せる表情を構成する

 

歯は一切動かさない

★キャラクター表現として、歯を極力見せたくない場合はこのシェイプキーに歯を隠す動きを追加

 

口角を狭めて鋭角にすると口元に力が入っている雰囲気が出る

唇をめくりあげて突き出す

 

舌先を少し持ち上げる(人がこの口の形をつくるとき舌先が縮まるため)

 

歯が埋まらないよう口内のメッシュを調整する

30

mouthPucker

 

▶ARKit資料

f:id:hinzka:20211216064415g:plain

f:id:hinzka:20211216064424g:plain




f:id:hinzka:20211216072746g:plain

f:id:hinzka:20211216072754g:plain




唇の横幅を狭める

唇の横幅を狭める

狭めた分、くちびるがふっくらして前に出る

mouthFunnelとの合成でキスの口になる

f:id:hinzka:20211216074153g:plain

(mouthFunnel+mouthPucker)

 

jawOpenと合成したとき、口を細めた形状が縦に細長くなりすぎないよう注意

 

唇と同時に舌を狭める(口角の貫通対策)

 

 

31

mouthLeft

 

▶ARKit資料

f:id:hinzka:20211216064436g:plain

 

 

f:id:hinzka:20211216072812g:plain

f:id:hinzka:20211216072820g:plain




口角ではなく、口全体を左に寄せる

口全体を左上に寄せる

歯は一切動かさない

 

舌のみを口に追従して回転させることで自然に舌を動かすことができる

f:id:hinzka:20211216074308g:plain

(tongueOut+mouthLeft)

32

mouthRight

 

▶ARKit資料

f:id:hinzka:20211216064449g:plain

f:id:hinzka:20211216064637g:plain

f:id:hinzka:20211216072835g:plain

f:id:hinzka:20211216072843g:plain




口角ではなく、口全体を右に寄せる

口全体を右上に寄せる

歯は一切動かさない

舌のみを口に追従して回転させることで自然に舌を動かすことができる

 

 

33

mouthRollUpper

 

▶ARKit資料

f:id:hinzka:20211216064723g:plain

f:id:hinzka:20211216064733g:plain




f:id:hinzka:20211216072910g:plain

f:id:hinzka:20211216072919g:plain




上唇を噛む

 

特にトゥーン調のモデルではテクスチャが埋まると口自体が消えてしまう

上唇のエッジが見えている状態を維持しつつ唇を噛む形状をつくる

 

mouthRollLowerとセットで動作し、口元のもぐもぐした表情をつくる

実際に動くときはjawOpenが少し混ざるため、作成したシェイプよりは浅い動きになる

f:id:hinzka:20211216074345g:plain

(mouthRollUpper+mouthRollLower)

34

mouthRollLower

 

▶ARKit資料

 

f:id:hinzka:20211216064830g:plain

f:id:hinzka:20211216064838g:plain




f:id:hinzka:20211216072935g:plain

f:id:hinzka:20211216072945g:plain




下唇を噛む

同上

35

mouthShrugUpper

 

▶ARKit資料

f:id:hinzka:20211216064901g:plain



f:id:hinzka:20211216073010g:plain

f:id:hinzka:20211216073018g:plain




上唇をぎゅっと持ち上げる

上唇を持ち上げるシェイプ

mouthShrugLowerとセットで動作し、口元をしかめて閉じた「への字の口」を作る

 

さらにmouthPressと同時に動くと口元をぎゅっと引き結ぶ表情になる

f:id:hinzka:20211216064943g:plain



(mouthShrug+mouthPress)

 

口角を引き下げる動きは、上唇・下唇に均等に分けると口角がガタつくため、上唇・下唇のどちらかにまとめて入れること

36

mouthShrugLower

 

▶ARKit資料

f:id:hinzka:20211216064924g:plain



f:id:hinzka:20211216073034g:plain

f:id:hinzka:20211216073042g:plain




下唇をぎゅっと持ち上げる

下唇を持ち上げるシェイプ

mouthShrugUpperとセットで動作し、口元をしかめてへの字を作る

37

mouthClose

 

▶ARKit資料

f:id:hinzka:20211216065006g:plain



 

f:id:hinzka:20211216073110g:plain

f:id:hinzka:20211216073119g:plain




顎を開いたまま口を閉じる

ラッキング上でこのシェイプが単体で動作することはない

 

口を閉じたまま顎を開閉することで、咀嚼する顎の動きになる

f:id:hinzka:20211216073149g:plain



(jawOpen+mouthClose)

破綻したシェイプに見えますがモデルの異常ではありません

 

顎を開いたまま口を閉じる動作

jawOpenと対になり、双方100%のときに「顎は全開だが、口はぴったり閉じている」形になる

 

jawOpenの顔から、口の周りを選択して徐々に選択範囲を狭めながら口だけ閉じさせ、「顎が全開で口がぴったり閉じている」形に整える

この状態からさらにjawOpenをマイナスすることでmouthCloseのシェイプを作成できる

 

女性モデルは顎が伸びるとあまり可愛くないので、サンプルモデルFemaleでは顎の開きを控えめにしています

f:id:hinzka:20211216070459g:plain

f:id:hinzka:20211216070212g:plain

 

舌を出したとき下唇を貫通しないよう、舌先を上向きに移動

 

38

mouthSmileLeft

 

▶ARKit資料

f:id:hinzka:20211216070657g:plain



f:id:hinzka:20211216073216g:plain

f:id:hinzka:20211216073224g:plain




左の口角を上げる

 

 

左の口角を引き上げた笑顔の表情

笑ったときの口の形を構成する(口角を鋭角・鈍角にするなど)

jawOpenと合成したとき自然な笑顔の口になること

f:id:hinzka:20211216074435g:plain



(jawOpen+mouthSmile)

 

中央から単純に左右に分割すると不自然な動きになる

左右のシェイプを足して100%になるように変化量をグラデーションさせる

 

舌をやや下げる(人が強く舌を出すときは口角が上がるため)

f:id:hinzka:20211216074508g:plain



(tongueOut+mouthSmile)

 

口角が上がることにより口全体が上にずれ、キャラクターとしての顔の印象が変わってしまうことがある

適宜口全体を下げ、位置を維持するようにバランスをとる

 

歯は一切動かさない

★キャラクター表現として、歯を極力見せたくない場合はこのシェイプキーに歯を隠す動きを追加

39

mouthSmileRight

 

▶ARKit資料

f:id:hinzka:20211216070713g:plain



f:id:hinzka:20211216073236g:plain

f:id:hinzka:20211216073243g:plain




右の口角を上げる

右の口角を引き上げた笑顔の表情

 

歯は一切動かさない

★キャラクター表現として、歯を極力見せたくない場合はこのシェイプキーに歯を隠す動きを追加

 

同上

 

40

mouthFrownLeft

 

▶ARKit資料

f:id:hinzka:20211216070726g:plain



f:id:hinzka:20211216073259g:plain

f:id:hinzka:20211216073308g:plain




左の口角を下げる

主に口を閉じた状態で動作する

 

左の口角を引き下げた不快の表情

jawOpenと合成したとき自然な口の形状になること

f:id:hinzka:20211216074524g:plain



(jawOpen+mouthFrown)

41

mouthFrownRight

 

▶ARKit資料

f:id:hinzka:20211216070737g:plain



f:id:hinzka:20211216073320g:plain

f:id:hinzka:20211216073328g:plain




右の口角を下げる

主に口を閉じた状態で動作する

 

右の口角を引き下げた不快の表情

 

同上

42

mouthDimpleLeft

 

▶ARKit資料

f:id:hinzka:20211216070751g:plain



f:id:hinzka:20211216073347g:plain

f:id:hinzka:20211216073355g:plain




左の口角を後ろに引っ張る

開いた口をさらに大きく横に開く

左の口角を横に広げる

 

mouthSmileなどと合成した際に口角の形状を変えないためには、口角付近ではなく「唇の中央部分」を伸ばす

f:id:hinzka:20211216074546g:plain



(jawOpen+mouthDimple)

43

mouthDimpleRight

 

▶ARKit資料

f:id:hinzka:20211216070802g:plain



f:id:hinzka:20211216073407g:plain

f:id:hinzka:20211216073415g:plain




右の口角を後ろに引っ張る

開いた口をさらに大きく横に開く

右の口角を横に広げる

 

同上

44

mouthUpperUpLeft

 

▶ARKit資料

f:id:hinzka:20211216070827g:plain



f:id:hinzka:20211216073430g:plain

f:id:hinzka:20211216073438g:plain




左の上唇を持ち上げ、歯をむき出す

 

顎を動かさずにmouthFunnel(ウの口)の状態で歯をむき出し、口を横に広げたときに最も歯がよく見える

f:id:hinzka:20211216074608g:plain

(mouthFunnel+mouthUpperUp

+mouthLowerDown

+mouthDimple)

左の上唇を持ち上げる

歯は一切動かさない

 

下唇と比べて、人の上唇は口角部分がより大きく上がる

上唇全体が落花生のような形になる

 

中央から単純に左右に分割すると不自然な動きになる

左右のシェイプを足して100%になるように変化量をグラデーションさせる

 

jawOpenとmouthUpperUp/mouthLowerDownを合わせたシェイプが、縦方向の口の開きの最大値

 

 

 

45

mouthUpperUpRight

 

▶ARKit資料

f:id:hinzka:20211216070837g:plain



f:id:hinzka:20211216073450g:plain

f:id:hinzka:20211216073458g:plain




右の上唇を持ち上げ、歯をむき出す

右の上唇を持ち上げる

 

同上

46

mouthLowerDownLeft

 

▶ARKit資料

f:id:hinzka:20211216070856g:plain



f:id:hinzka:20211216073531g:plain

f:id:hinzka:20211216073539g:plain




左の下唇を引き下げ、歯をむき出す

 

左の下唇を引き下げる

歯は一切動かさない

 

上唇と比べて、人の下唇は中央部分がより大きく下がる

 

中央から単純に左右に分割すると不自然な動きになる

左右のシェイプを足して100%になるように変化量をグラデーションさせる

 

jawOpenとmouthUpperUp/mouthLowerDownを合わせたシェイプが、縦方向の口の開きの最大値

47

mouthLowerDownRight

 

▶ARKit資料

f:id:hinzka:20211216070906g:plain



f:id:hinzka:20211216073553g:plain

f:id:hinzka:20211216073604g:plain




右の下唇を引き下げ、歯をむき出す

右の下唇を引き下げる

 

同上

48

mouthPressLeft

 

▶ARKit資料

f:id:hinzka:20211216070918g:plain



f:id:hinzka:20211216073617g:plain

f:id:hinzka:20211216073626g:plain




口を閉じた状態で、左の口角をぎゅっと持ち上げる

 

アヒル口をつくると認識されやすい

左の口角を押し上げてつぶす

口をぎゅっとした時のみに動作するため、意識的にコントロールしやすい

猫口やアヒル口などのニュアンスを追加することができる

f:id:hinzka:20211216074637g:plain

(mouthShrug+mouthPress 猫口バージョン)

 

猫口は、左右対称でないと歪な口元になる

あらかじめ用意した猫口シェイプを左右のmouthPressに均等に追加することで左右対称にできる

49

mouthPressRight

 

▶ARKit資料

f:id:hinzka:20211216070927g:plain



f:id:hinzka:20211216073638g:plain

f:id:hinzka:20211216073646g:plain




口を閉じた状態で、右の口角をぎゅっと持ち上げる

 

アヒル口をつくると認識されやすい

左の口角を押し上げてつぶす

 

同上

50

mouthStretchLeft

 

▶ARKit資料

f:id:hinzka:20211216070939g:plain



f:id:hinzka:20211216073703g:plain

f:id:hinzka:20211216073712g:plain



左口角を下に引き下げる

mouthFrownに比べ、口が開いているときにより大きく動く

 

 

左口角を引き下げて口をさらに開く

 

口を大きく開けたとき、口角が上がってしまうのに対して口角を下げてバランスをとるような動き

 

閉じた状態で口角を下げて作ると綺麗な動きになりにくい

 

jawOpen100%のシェイプから理想的な形になるよう口角を引き下げ、そこからjawOpenを‐100%することで適切な動きになる

f:id:hinzka:20211216074700g:plain

(jawOpen+mouthStretch)

51

mouthStretchRight

 

▶ARKit資料

f:id:hinzka:20211216070950g:plain



f:id:hinzka:20211216073816g:plain

f:id:hinzka:20211216073835g:plain

右口角を下に引き下げる

mouthFrownに比べ、口が開いているときにより大きく動く

右口角を引き下げて口をさらに開く

 

同上

52

tongueOut

 

▶ARKit資料

f:id:hinzka:20211216071000g:plain



 

舌を出す

舌を唇からまっすぐに突き出す

 

口を開いたときに下方向に曲げる変形はjawOpenで行う

jawOpenと合成して舌が曲がったとき、アーチが下唇を越えられるように出幅を調整

 

 

 

 

 

 

以下はリサーチ経過の資料として残しています。

間違ってるところも多いのでそのうち整理します。

--------------------------------------------------------------

 

 
 
 
 
 
 
 
 
FaceID対応のBlendShapeリスト(Apple Developer Center)
 
 

モデリングソフトで52個の新規シェイプキーを追加します

一部のBlendShapeは、モデル標準のBlendShapeから形状をコピーして作ることができます(Blenderの場合 頂点メニュー「任意のシェイプキーを選択部に合成」)

 

おすすめ便利ツール

 

sort_shapekeys 

Appleが定義したBlendShape文字列で空シェイプキーを52個一括作成できるアドオン

一部のアプリ・ツールは、この文字列が異なると動作しません。入力ミスを防ぐためにも便利なツールです
github.com

 

iFacialMocap

Blenderアドオンを使うと、Blender上で顔をリアルタイムに動かしながらBlendShapeを作成することができます

iFacialMocap

www.ifacialmocap.com

 

 

 

 

 

 

 

iPhoneラッキング向けBlendShapeリスト

項目名からAppleDeveloperCenterの各項目にリンクしています

リンク先に各シェイプの参考図があり、具体的な形状を確認できます

f:id:hinzka:20210525104049p:plain

 

 

 眉関連

browInnerUp

 
眉の内側を中心として眉全体を持ち上げる 眉尻の位置はあまり動かさない
左右の眉頭をすこし離すとリラックス感が出る
 
他のすべての眉シェイプキーと関連して動くため、合成したときの形状に注意すること
 眉にかかわる他のシェイプキーは以下の3種
 browDown(Left・Right)
 browOuterUp(Left・Right)
 noseSneer(Left・Right)

browDownLeft

browDownRight

眉全体を下げる 眉尻側をやや下げる
 

browOuterUpLeft

browOuterUpRight

眉山を持ち上げる 眉頭の位置は動かさない
 
 
 

視線関連

ほとんどのVRMで、眼球そのものの動きはボーンにより制御されている
これらのBlendShapeの設定はなくてもよいが、ボーンの動きに伴って目元も変化させることでより自然な表情にできる
(動かしすぎると まばたき・笑い目と重なったとき破綻するので注意)
 
 

eyeLookUpLeft

eyeLookUpRight

例:上下のまぶたをわずかに上げる
 

eyeLookDownLeft

eyeLookDownRight

例:上まぶたをわずかに下げる
 

eyeLookInLeft

eyeLookInRight

例:目頭側をわずかに開く
 

eyeLookOutLeft

eyeLookOutRight

例:目尻側をわずかに開く
 
 

eyeBlinkLeft

eyeBlinkRight

まばたき 目を閉じる形
モデル標準の閉じ目をそのまま流用可能
 
 

eyeSquintLeft

eyeSquintRight

笑い目
モデル標準でよくある「完全に閉じた笑い目」だと、まばたきと重なったとき破綻する 閉じ方を弱める必要がある
キャラクターの個性によるが、下まぶたをしっかり持ち上げると印象的な笑い目になる
 

eyeWideLeft

eyeWideRight

びっくり目
モデル標準のびっくり目をそのまま流用可能
 

cheekPuff

ほっぺプクー 空気が漏れないよう唇を閉じ気味にする
正面から見たときも膨らみがわかるよう、下方向にも膨らませるのがおすすめ
左右の頬だけでなく、口の部分も前に出す(歯と唇の間に空気を入れるイメージ)とよりかわいい感じになる

 歯や舌を動かしてしまわないよう注意

 

cheekSquintLeft

cheekSquintRight

口角を吊り上げる、口を横に広げる
Smileの口に動きを追加し、より大きな笑顔をつくる
笑ったときの口の形を決定する(口角を鋭角・鈍角にするなど)

 

noseSneerLeft

noseSneerRight

鼻をしかめる 鼻自体は目立たないため動かすメリットは少ない
眉をぎゅっとしかめる動作として実装することができる 眉頭を下げ、眉を内側に寄せる(このとき眉全体の位置は変えないこと)
追加メッシュを使い、眉間にシワを追加するなどの演出も可能
 
ほかの眉シェイプキーと合成したときの形状に注意
特にbrowDown(Left・Right)と合成したときに眉が下がりすぎないこと
 

jawOpen

顎を開いた状態の唇の開き、歯と舌の位置を決定するシェイプキー
 
口を開いた状態の歯の位置はここで設定する(他のBlendShapeでは動かさないこと!)
本来、上あごの歯は頭蓋骨に固定されていて一切動かないのですが
3Dモデルのウソとして上あごの歯が上に上がります
 
歯は目立たないほうが可愛い印象になります 上の歯をより上に・下の歯をより下に動かし、唇の裏に隠すのがおすすめ
 
 
口回りのあらゆるシェイプキーと関わってきます
・mouthPucker:メインの口のフォルムを形成する
 合成したときに口が丸形・やや縦長 の形になること
・mouthClose:唇を閉じたまま顎をひらいたとき、あいてしまう口を閉じる
 合成したときに口が閉じること
 
 
VRoidのMTH_Aの舌は丸めて収納されており、TongeOutで舌を出したときに口を開くと舌が自然に曲がってくれる

 

jawForward

下顎・下の歯・舌を前に出す  上の歯は動きません

jawLeft

下顎・下の歯・舌を左に動かす  上の歯は動きません

舌だけ単独でさらに左に動かすと、じっさいに舌をうごかしたとき、自然にモデルの舌が動きます (人間は舌を横に動かすとき顎が動くため)

jawRight

下顎・下の歯・舌を右に動かす  上の歯は動きません

舌だけ単独でさらに右に動かすと、じっさいに舌をうごかしたとき、自然にモデルの舌が動きます(人間は舌を横に動かすとき顎が動くため)

 

mouthFunnel

唇を剥き出してじょうごのように広げる形
口がすこし開きます
歯は動かないので単体だと人を威嚇するような表情です
mouthPuckerと同時に動かすとキスの口になります
 

mouthPucker

口の横幅を小さくすぼめ、唇が突き出る形 「う」の口
jaw openとともにメインの口のフォルムを形成します
 
「任意のシェイプキーを選択部に合成」を使うときれいに作ることができます
 メッシュ全体を選択し、初期状態の顔にjawOpenの形状を+1で追加する
  ⇒唇の頂点を選択し、やや前方に出す
  ⇒唇の頂点を選択し、幅を縮めて縦長に整える
  ⇒唇の中央部分を選択し、プロポーショナル編集でX方向にやや拡大する
   (これをしないと下唇が下に尖って▽のような口になりがち)
  ⇒メッシュ全体を選択し、jawOpenの形状を-1で削除する
 

 

mouthLeft

左の口角を左上に持ち上げるように動かす

舌だけ単独でさらにXZ座標上で左に回転させると、じっさいに舌をうごかしたとき、自然にモデルの舌が動きます (人間は舌を横に突き出すとき口が動くため)

mouthRight

右の口角を右上に持ち上げるように動かす
 舌だけ単独でさらにXZ座標上で右に回転させると、じっさいに舌をうごかしたとき、自然にモデルの舌が動きます (人間は舌を横に突き出すとき口が動くため)
 

mouthRollUpper

上の歯に上唇をかぶせて丸め込む ものを口に含んでモグモグするときの形
 

mouthRollLower

下の歯に下唇をかぶせて丸めこむ ものを口に含んでモグモグするときの形
 

mouthShrugUpper

上唇をぎゅっと引き結ぶ形
mouthShrugLowerと同時に動かしてきれいに引き結ばれること
mouthFrownと同時に動いてへの字の口を形成する

mouthShrugLower

下唇をぎゅっと引き結ぶ形
mouthShrugUpperと同時に動かしてきれいに引き結ばれること
 mouthFrownと同時に動いてへの字の口を形成する

mouthClose

唇を閉じた状態でjawOpenで顎を開くと口がぽっかり空いてしまうため これを閉じるためのシェイプキー
逆に、jawOpenに対してmouthCloseが大きすぎると口が埋もれてしまう
jawOpenと同時に動かしたとき口がぴったり閉じること
 
「任意のシェイプキーを選択部に合成」で、jawOpenの形状を唇にマイナス値で適用
 

mouthSmileLeft

左の口角を引き上げて笑顔の口をつくる
笑ったときの口の形を決定する(口角を鋭角・鈍角にするなど)
jawOpenと合成したとき自然な笑顔の口になること
 舌だけ単独で下に動かすと(MTH_Aなど口を開けたときの舌を流用)、じっさいに舌を出したとき、自然にモデルの舌が下に伸びます(人間は舌を伸ばすとき口角があがるため)

mouthSmileRight

右の口角を引き上げて笑顔の口をつくる
笑ったときの口の形を決定する(口角を鋭角・鈍角にするなど)
jawOpenと合成したとき自然な笑顔の口になること
 舌だけ単独で下に動かすと(MTH_Aなど口を開けたときの舌を流用)、じっさいに舌を出したとき、自然にモデルの舌が下に伸びます(人間は舌を伸ばすとき口角があがるため)
 
 

mouthFrownLeft

左の口角を引き下げ への字の口をつくる
口を開いた状態のときより、口を閉じた状態のときに大きく動く
mouthShrugUpper(上唇をぎゅっと引き結ぶ形)
mouthShrugLower(下唇をぎゅっと引き結ぶ形)と同時に動くことが多い
JawOpen、またはmouthShrugUpper・mouthShrugLowerと合成したとき自然な「不機嫌そうな口」になること
 


mouthFrownRight

左の口角を引き下げ への字の口をつくる
口を開いた状態のときより、口を閉じた状態のときに大きく動く
mouthShrugUpper(上唇をぎゅっと引き結ぶ形)
mouthShrugLower(下唇をぎゅっと引き結ぶ形)と同時に動くことが多い
JawOpen、またはmouthShrugUpper・mouthShrugLowerと合成したとき自然な「不機嫌そうな口」になること
 
 

mouthDimpleLeft

左の口角を奥側に引っ張る(横顔で確認)
横側から見たときの口の表情を形成する

mouthDimpleRight

右の口角を奥側に引っ張る(横顔で確認)
横側から見たときの口の表情を形成する
 
 

mouthUpperUpLeft

mouthUpperUpRight

上唇を上に引き上げて上の歯を剥き出す
サシスセソの口がくっきりする 変顔もできる

 

作成時は上唇全体で作成し、最後に左右に分ける

このとき、顔の中央の頂点はそのままだと合成されて2倍のウエイトがかかってしまう

Basisのシェイプキーを0.5かけてウエイトを半分に減衰させること

 

mouthLowerDownLeft

mouthLowerDownRight

下唇を下に引き下げて下の歯を剥き出す
サシスセソの口がくっきりする 変顔もできる

 

作成時は下唇全体で作成し、最後に左右に分ける

このとき、顔の中央の頂点はそのままだと合成されて2倍のウエイトがかかってしまう

Basisのシェイプキーを0.5かけてウエイトを半分に減衰させること

 

 

mouthPressLeft

mouthPressRight

口角を押し上げてつぶす 口元の生々しい動きに寄与する
口元を猫っぽくするなど、ちょっとした演出に使える
 

mouthStretchLeft

mouthStretchRight

口角を斜め下に引き下げつつ広げる
人間は口を開けていくと口角も上がるため、そのままだと笑顔の口になってしまう
上がった口角を下げて口を丸く整えるためのシェイプキー
これにより、口を大きく広げたときにのびのびと気持ちよく開くことができる
jawOpenと合成したときやや口角が下がること
 

 

tongueOut

舌を出す
標準状態の舌をまっすぐ伸ばし、閉じた口から見えるサイズに調整する
 
以下、試行錯誤してみて効果的だった追加動作 ほかにもあるかも
jawOpen 下に曲げつつ下げる(MTH_Aの舌)
jawLeft/jawRight 左右に移動
mouthLeft/mouthRight 左右に回転
mouthSmileLeft/mouthSmileRight 下に曲げつつ下げる(MTH_Aの舌を追加)
 
 
 

パーフェクトシンク対応モデルにするには?

BlendShapeを作成したあと、さらにUnityで
BlendShapeClipを52個作成する必要があります
手動でぽちぽち作るのは大変なので以下のツールがおすすめです
 

Hana_Tool ClipBuilderツール

Unityアセット
52個のBlendShapeClipを作成し、それぞれに同名BlendShapeを設定
 
HANA_App パーフェクトシンク化ボタン
Windowsアプリ
52個のBlendShapeClipを作成し、それぞれに同名BlendShapeを設定
 

アバターを使ってZoomミーティングに参加する手順

 

f:id:hinzka:20200402075734p:plain

 
 
アバターとは、ユーザーの分身となって画面に表示されるキャラクターです
Windowsアプリを使ったZoomミーティングで、生身の自分のかわりにアバターを画面に表示させる手順について説明します
 
 

1. 準備

  全体的な流れ

 ①Webカメラを使ってリアルタイムにアバターを操作するソフトウェアを実行
   ↓
 ②映像をOBS(ストリーミング配信ソフト)上に表示
   ↓
 ③映像ソースとしてZoomに流し込む

 

 OBS上に表示している映像がそのままZoomに送られます
 複数のソースを組み合わせることで、さらに背景や字幕を重ねることも可能です

 
 必要なハードウェア
Webカメラおよびマイクが接続されたWindowsPC
  ※スマホ単体でZoomにアバター参加するのはいまのところ難しそう
 

2. アバターの表示

概要

アバター表示用ソフトウェアと、それに対応するモデルデータを用意します
 
アバターを表示・操作するソフトウェアには様々なものがあり、対応するモデルの形式も複数存在します
いずれもOBSを経由させることでZoom上に表示させることができます
 

アバター表示ソフト

Webカメラでユーザーの動きをキャプチャしてリアルタイムにモデルに反映する、簡易的なVtuber支援ソフトです
以下に一部を紹介します
 
・FaceRig(有料)Live2Dモデル対応※モデルはソフトウェアに同梱
  ※FaceRigを使う場合はこの記事ではなく以下を参照してください

qiita.com


 
・Luppet(無料体験版あり)VRMモデル対応

luppet.appspot.com

・3tene(無料版あり)Live2Dモデル・VRMモデル対応

3tene.com

・VMagicMirror(無償版・ブースト版あり)VRMモデル対応

アバターのモデルデータ( VRM形式)

主要な3Dアバター表示用ソフトウェアは、VRMという形式に対応しています
 
VRMのモデルデータは、たとえばVRoid Hubからダウンロードすることができます

f:id:hinzka:20200402124417p:plain

VRoidHubは、ユーザーが作成したキャラクターモデルを他の人と共有するためのサービスです
モデルごとに利用条件やダウンロードの可・不可が設定されており、
「他の人の利用 OK」となっているモデルはダウンロードして利用できます
ただし、ダウンロード可能なモデルでも、アバターとしての利用が制限されているものや、用途により利用不可なもの(商用利用など)、利用時にクレジット表記が必要なものなどがあります ライセンス内容に注意してください

f:id:hinzka:20200402124349p:plainf:id:hinzka:20200402124458p:plain

 
 
BOOTHなどで配布・有償販売されているモデルもあります
VRoid hubと同様に、アバター利用等が明示的に許可されているモデルを探してみましょう
 
 
 
使いたいVRMのキャラクターモデルをダウンロードしておきます
 

アバター表示ソフトの使用例

今回はVMagicMirrorで説明します
 
VMagicMirrorのZipファイルをダウンロードし、解凍してexeファイルを実行します
VRoid hubでダウンロードしたキャラクターのVRMファイルを読み込みます
顔のキャプチャに使うカメラを選択します

f:id:hinzka:20200402010734p:plain

使用するマイクを設定すると口パクしてくれます
視線の動きは マウスを追跡(デフォルト)/Webカメラから判定/固定 の3種から選択
その他、影のオンオフなどをここで設定できます
 
フリーカメラにチェックを入れ、必要に応じてキャラクターの向きを調整できるようにしておきましょう
 
 Webカメラに向かって頭を動かし、モデルの動作をテストします
 自分の動きに従って、画面上のキャラクターが動けばアバターの準備完了です
 
 
 

3. Zoom導入

Zoomアカウントの作成

Zoom公式サイトの「サインアップ」からアカウントを作成

f:id:hinzka:20200402103023p:plain

 

Zoomのインストール

f:id:hinzka:20200402102958p:plain

f:id:hinzka:20200402103014p:plain

 

仮想カメラ対応パッチのインストール

 Zoomの最新版ではカメラデバイスのチェック処理が追加されており、そのままではOBSの映像を表示させることができません
 仮想カメラを使用可能にするため、非公式のパッチを当てます(自己責任でお願いします)
 このページの下のほうにある「 ok_zoomer.zip」をクリックしてダウンロードし解凍
 Zoomが起動していない状態で実行してください
 (起動中だった場合Zoomを再起動するまで有効になりません Zoomを完全に再起動するにはOSの再起動が必要な場合があります)
 
 (最新バージョンの組み合わせでは不要になったようです)
 

4. OBS導入

OBSのインストール

f:id:hinzka:20200402102322p:plain

 Windowsインストーラをダウンロードしてインストール
 
 
OBSの映像ソースに、キャプチャ対象のウインドウ(今回はVMagicMirror)を追加します
ソースの「+」をクリックしてゲームキャプチャを選択します

f:id:hinzka:20200402162811p:plain

 新規作成を選び、新しい映像ソースに名前をつけます(デフォルトは「ゲームキャプチャ」)OKをクリックするとプロパティ画面が開きます

f:id:hinzka:20200402163525p:plain

 モードに「特定のウインドウをキャプチャ」
 ウインドウのメニューからアバター表示ソフトのウインドウ(今回は「VMagicMirror」)を指定します
 ※VMagicMirrorのウインドウは設定画面と表示画面の2つあるので注意
 OBSの画面にアバター表示ソフトの画面が表示されます
 「カーソルをキャプチャ」のチェックは外しておきましょう
 OKで設定画面を閉じます
 
 OBSの画面にきちんとおさまるように、アバター表示ソフトのウインドウをリサイズします
 また、画面内に表示されたアバターの位置を調整します
  OBS側でもキャプチャ対象ウインドウのリサイズや位置調整ができます

 OBS仮想カメラの追加

github.com

f:id:hinzka:20200402102346p:plain

 OBSが起動していない状態でインストールしてください

 

 
 OBSを起動すると、ツールのメニューにVirtualCamが追加されているはずですf:id:hinzka:20200402162657p:plain

 

 OBSのメニューから、ツール > VirtualCam を選択します
 VirtualCamのウインドウが表示されます

f:id:hinzka:20200402163915p:plain

 TargetCameraに「OBS-Camera」が選択されていることを確認して Start をクリックします
 (リストにはOBS-Camera、OBS-Camera2、OBS-Camera3、OBS-Camera4 の4つがあります ここで選択した仮想カメラと同じものをZoomで指定してください)
 VirtualCamのウインドウはバッテンで閉じます
 
 

5. Zoom上にアバター映像を表示

 Zoomを起動します
 右上の歯車マークをクリックし、設定ウインドウを開きます
 設定ウインドウの左のメニューから「ビデオ」を選択します
 カメラのプルダウンメニューから「OBS-Camera」を選びます
 上部のプレビュー画面にアバターの映像が表示されることを確認します
 ※ここで現実側のWebカメラを選択するとリアル側の映像が流れてしまいます
 
 設定ウインドウの仮想背景で任意の背景を選び
 ウインドウ下部の「グリーンスクリーンがあります」にチェックを入れます
 
 映像が表示されない場合、OBSのVirtualCamがStartされているかを確認してください
 
 
 
 
 
 

【BlendShapeBuilder】Unity単体でVRMモデルにほっぺモーフを追加する

iPhoneのFaceIDでフェイストラッキングしたい

・VRoidで作ったうちの子に表情を追加したい

・でもBlenderとかさわったことない…

 

⇒ ほっぺプクー 程度なら、Unityだけでもわりとかんたんに追加できたよ!

  という記事です

 

f:id:hinzka:20200210152742g:plain

 

Blend Shape Builder & Vertex Tweaker
UnityJapan提供のアセット
 
メッシュの頂点を動かしてBlendShapeを追加できるアセットです
 Blenderなどのモデリングツールを使わず、Unity単体でBlendShapeを追加できます
 
今回はこれを使って「ほっぺをふくらます」モーフを追加します
※モデルの改変を伴います ライセンスにご注意ください
 
 
また、そもそもiPhoneのFaceIDに対応させたくてBlendShapeを追加しているので
FaceIDについてもあとで追記します 
 

準備

VRMモデル
 
Unity 今回は2019.3.0f5を使用しました 
 
BlendShapeBuilder
 
UniVRM
 
 
 
Scene上にモデルを配置します

f:id:hinzka:20200210142843p:plain

必要アセットとモデルを配置した状態

Blend Shape Builder

HierarchyからモデルのFaceを選択
メニューの Window>Blend Shape Builder をクリック
BS Builderウインドウが開きます

f:id:hinzka:20200210142946p:plain

BlendShapeBuilderウインドウを開く

f:id:hinzka:20200210143114p:plain

Add BlendShapeBuilder to Face ボタンをクリック
BlendShape追加画面になります

f:id:hinzka:20200210143328p:plain

+ボタンをクリックするとFrameを追加します

これによりFaceメッシュのコピーがScene上に追加されます

f:id:hinzka:20200210143550p:plain

 
コピーされたメッシュを編集して、モーフ変化のターゲットを作っていきます
 ターゲットとなるFrameを複数作成すると(50%のときの形状、100%のときの形状など)変化量に応じた動きを設定することができます
今回は100のターゲットを1つだけ作成します

f:id:hinzka:20200210143437p:plain

該当FrameのEditボタンをクリックすると、VetrexTweakerウインドウが開きます
メッシュの頂点を直接動かし、形状を変化させていきます
 
ところで、メッシュが重なったままではScene上で非常に見づらいです
編集しないメッシュはいったん非表示にしましょう
FaceオブジェクトとHairオブジェクトについて、
InspectorでSkinned Mesh Rendererのチェックを外しておきます
(編集が終わったら戻しましょう!)

f:id:hinzka:20200210143713p:plain

髪オブジェクトはまるごと無効にしてもよいですが、
Faceオブジェクトをまるごと無効にするとコンポーネント(BlendShapeBuilder)にアクセスできなくなるので注意してください
 
 

VetrexTweaker

 
 f:id:hinzka:20200210160933p:plain
 
Move:頂点移動
メッシュの頂点を移動させます
 
Soft Moveがオフの状態では、
頂点の選択方法をSelectオプションで選ぶことができます
Shiftを押しながら連続して選択していくと複数の頂点を選択できます
 
Singleツール    クリックした頂点を選択します
Rect    矩形選択ツール    これとなげなわツールではFront Side Onlyのチェックを外しておくと隠れた頂点も選択されます
Lasso    なげなわツール
Brush    ブラシツール
 
Edge    該当メッシュ全体のメッシュのエッジがすべて選択されます
Hole    選択した頂点を含む連続した面の端部がぐるっと囲むように選択されます
Connected    選択した頂点に連続した面の頂点がすべて選択されます
All    全選択
Clear    選択の全解除
Invert    選択状態の反転
 
☆VetrexTweakerには左右対称に編集できるミラーリングオプションがあります
がVRoidモデルは厳密にシンメトリーではないためエラーになってしまいました
f:id:hinzka:20200210155421p:plain
 
☆また、投影機能を使って
既存のBlendShapeモーフからコピーできないかやってみましたが
目や口元の密集した頂点を正しい頂点に対応させるのはちょっと無理でした…
 
 
 Soft Moveで頬をふくらませます

f:id:hinzka:20200210162048g:plain


今回は、横に広げる+前に出す の2ストローク動かしています
 
さらに、なげなわ選択とScaleツールで口を小さくします
 f:id:hinzka:20200210162016g:plain
 
 
ターゲットメッシュの編集が完了したら、BS Builderウインドウに移動してBlendShapeを作成します

f:id:hinzka:20200210162352p:plain

Update Meshをクリックすると、FaceのBlendShapeに「cheekPuff」が追加されます

f:id:hinzka:20200210161014p:plain

 
確認するために、今度はターゲットメッシュを非表示にして、Faceオブジェクトのメッシュを表示させましょう

 ただし、Faceオブジェクトのインスペクタに追加されたcheekPuffモーフは

スライダーを動かしてもScene上のモデルの表情に反映されません

(他のBlendShapeのスライダは反映される…)
 
BlendShapeAvatarアセットを開きます
表示されるBlendShapeスライダを動かすと、プレビューウインドウのモデル表示に反映されます

f:id:hinzka:20200210162742p:plain

f:id:hinzka:20200210204431p:plain

このように新しいBlendShapeを作成することができました
今回作ったターゲットメッシュは、モーフが完成したら削除してかまいません(他のモーフに流用することもできます) 
 
BlendShapeの追加が完了したら、
非表示にしておいたメッシュを再度表示させてから
VRMを書き出して完成です
 
 
なお、VRMモデルでは、複数のBlendShapeを組み合わせたBlendShapeClipを作成することで
さらに複雑な表情を登録することができます
 LuppetなどのVRM対応アプリで呼び出して使ってみましょう
おつかれさまでした!
 
 
 
 

 FaceID

がんばればフェイストラッキングに必要なモーフをUnityだけでつくることもできなくはない
 
※あとで追記します~~~~
 
iPhoneX以降に搭載されている顔認識技術FaceIDでは、52個のBlendShapeを使って表情をキャプチャします
対応したBlendShapeをモデル側に追加することで、VRMモデルの表情を豊かに動かすことができます
 
FaceIDで3Dモデルの表情を動かすツール3つ
 
52個のうち、8個は視線コントロール用のキーです
VRoidなどのボーンで視線制御するモデルではこちらは使用しません
 
また、VRoidのデフォルトBlendShapeから流用できそうなキーがいくつかあります
eye blink left
eye blink right
jaw open
 
mouth funnel
漏斗状の口
 
mouth pucker
キス顔
 
特殊な表情として、舌を出すもの
tangue out
ボーン入りの舌を追加するにはBlenderなどの他ツールを使う必要があるため
Unity単体で実現する場合はテクスチャの切り替えで出現させるといいかも
 
 
 
BlendShapeの設定では、登録順序や名前が重要になる場合が多いです
Unityデフォルトの機能ではリネームやソートができません
 
 今回の記事で紹介したツール BlendShapeBuilder に含まれる BlendShapeInspectorWindow.cs の改変スクリプトが@flammpfeilさんから
公開されており
こちらに差し替えるとリネーム・順序変更ができるようになります
(やりかた
GitHubのコード表示の右上にある RAW をクリックするとテキストが表示されます
これを全選択してコピー、メモ帳に張り付けてファイル名をBlendShapeInspectorWindow.csにして保存します
Assets\UTJ\BlendShapeBuilder\Editor にあるBlendShapeInspectorWindow.csを削除し、
作成した.csファイルをここにドラッグ&ドロップします)
 
 
VRoidモデルが着てるパーカーはこちらです✨
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

UnityとPhotoshopでふつうに作るAR写真

f:id:hinzka:20191208210250j:plain

作成したAR写真

概要

趣味でカメラを始めたら、使いみちのない写真が毎日増える

キャラクター3Dモデルの背景に使うことで有効活用したい

作例に基づいて作成手順を書きました

 

ふつうにUnityで画像作って ふつうにフォトショで合成してるだけです

 

【当エントリは おきゅたんbot アドベントカレンダー2019 の6日目の記事です】

 

VRすきまガールズ! / おきゅたんbot Advent Calendar 2019

https://adventar.org/calendars/3941 

 

おきゅたんbot VRM

https://hub.vroid.com/characters/8571450162826387711/models/7130334606365861657

 

鹿さんはオノッチさんからお借りしました!

 

 

 

 

f:id:hinzka:20191209002917p:plain

元の画像 アドカレ担当の前日、地元のクリスマスマーケットで撮った写真

作業の流れ

  1. Unityでキャラクターのグリーンバック画像を作成
  2. Lightroomで現実の写真を読み込む
  3. Photoshopでグリーンバック画像と写真を合成
  4. Lightroomで最終調整

 

今回の画像の作業時間は(モデルを用意したりの環境構築を除くと)Unityでのポージングに30分、撮影と微調整を繰り返しながら画像を出力するのに1時間(たのしいので…)、Photoshopでの合成と後工程に1時間 という感じです  慣れるともっと速いよ

 

Unityでグリーンバック画像を作成

Unityはゲームの製作環境ですが今回は静止画を出力するためだけに使います
 
スマホやPC向けに、VRMのキャラクターモデルにポーズをつけてキャプチャできるツールは様々に存在する
つまりこの工程は本来必要ないのですが
 ・おきゅたんにVRoidの服を着せたい
 ・マフラーとか小物も追加したい
 ・髪をマフラーに合わせて整えたい
 ・指とか細かく動かしたい
というきもちで今回はUnityです
 
 
備考 VRMモデルにポージング&背景画像と合成できるツールいろいろ

■PC用
まじかる☆ですくとっぷ (テスト版)v0.15 #MagicalDesktop #VRoid #VRoidHub - BOOTH

VRMお人形遊びPC版 - 120byte - BOOTH


スマホアプリ
・VPocket
 Google Play:http://play.google.com/store/apps/details?id=com.BooApps.VPocket
 App Store:http://itunes.apple.com/jp/app/vpocket-vrm-viewer/id1426245522?mt=8

Vismuth Model Uploader - Vismuth Model Uploader

BNUT - Vスタンプ (App Store, Google Play)

 

 

キャラクターを配置する

VRMファイルをUnityで扱うには以下の追加パッケージが必要
UniVRM

 

おきゅたんVRMはVRoidではないため、VRoid用のお洋服をVRoid Studio上で着せることができない

おきゅたんに体型を近づけたVRoidモデルをVRoid Studioで新たに作ります

(まじかる☆ですくとっぷでターゲットモデルを表示させながら調整するとらくちん)

※髪は作らない、ベースヘアー非表示、頭を小さめにする

好きな服を着せてVRM出力

Unityに読み込み、おきゅたんモデルと重ねて配置

VRoidモデルはfaceを非表示に

おきゅたんモデルは首から下を非表示に(テクスチャが頭部と共通の箇所については、テクスチャの該当部分をPhotoshop等で透明化)

同じモーションを再生することで、おきゅたんがVRoid服を着た状態にできる

f:id:hinzka:20191209011506p:plain

重なった状態

f:id:hinzka:20191209011536p:plain

不要なメッシュのチェックを外す




さくまさんのチェック柄ボアコート


ユウヘイさんのタクティカルブーツ

 

アクセサリーを追加する

オブジェクトをモデルの子に配置する

マフラーはneckの子にしています

 

潮だまりさんのマフラー マフラー - 潮だまり - BOOTH

 

手に物を持たせる

中心点が支点からずれていて回転などの位置調整が難しい場合は、補助のCubeを使う
Cubeを作成しサイズを小さくする MeshRendererのチェックを外す
対象のオブジェクトを中に入れてCubeの中での位置を調整する(実際に握る部分がCubeの中心点になるように)
指などにアタッチして角度を調整する
 

くろすけさんの紙袋 てさげぶくろ - くろすけの物置 - BOOTH

 

 

canvasに写真を貼る

写真がカメラに追従するため、カメラアングルを自由に動かして背景との位置を合わせながらポージングが行える

(撮影のときは非表示にすること)

 

接地感を意識すると最終成果物のクオリティが上がる

 

演技をつける

今回はVeryAnimationを使用

Very Animation - Asset Store

 

既存のモーションから改変すると作りやすいかも

無料のモーションがいっぱい入ったアセット(モデルもかっこいいよ)

Taichi Character Pack - Asset Store

 

 

f:id:hinzka:20191209010521g:plain

写真上の位置を確認しながらモーション調整

ポーズだけでも写真は撮れるけど、動かしながら撮るととてもたのしい

 

全身のバランスのとりかたについては篠房六郎せんせいの一連のツイートを指針にしています といいつつもむずかしい~~

 

プロシージャルな演技

手付けアニメーションにスクリプト制御を追加すると簡単にいきいきと動いてくれる

また、ランダム性が生まれるため差分を無限に生成できてお得です

 

・視線追従(VRMのオプション)

  HeadにモデルのHeadを設定

  空(から)のオブジェクトをシーンに追加してTargetに設定

  LateUpdateにしないと動かない

・ランダムまばたき [Unity]BlendShapeBlink - ブレンドシェイプでまばたき

・微細眼球運動 Unityで微細眼球運動っぽい何か · GitHub

・呼吸 スクリプトで呼吸させる - 第2回 | Unity3D - MEBIUSTOSのブログ

・風 VRMに風っぽい効果を与える方法 - Bakulog

 

メッシュ頂点を微調整

Blend Shape Builder & Vertex Tweaker

https://github.com/unity3d-jp/BlendShapeBuilder

 Unity上でメッシュ頂点を直接編集できる

髪をマフラーの中におさめたり、マフラーの形を整えたりしました

 

撮影

自分はたまたま持っているAVPro Movie Captureを使ってキャプチャ出力してますが

Unity提供のUnity Recorderで同じことができるようだ

Unityのメニューから、[Window]>[Package Manager]を開く
[Advanced]>[Show Preview Packages]にチェックを入れるとUnity Recorderがリストに表示されるのでインストール

f:id:hinzka:20191209003602g:plain

Unity Recorder

 連番ファイルを30枚くらいずつ出力しては眺めてかわいいショットを選ぶ

貫通や破綻を見つけたらモーション修正に戻る

 

これ!という絵が撮れたら写真と合成します 

 

 

 

Lightroomで現実の写真を読み込む

最終的な仕上がりをイメージしてざっくり色調整

加工は合成後に行うのでここではあまり細かくさわらない

「他のツールで編集」でPhotoshopに送る(こうすることによりLightroom上でバージョン管理される)

 

Photoshopでグリーンバック画像と写真を合成

グリーンバックを透過

開いた画像にキャラクターのグリーンバック画像を重ねる

グリーンバック画像のグリーンを[選択範囲]>[色域指定]で削除

これがキャラクターのレイヤーになります

 

オクルージョン

写真に写っている現実のオブジェクトでキャラクターの一部が隠れると実在感が上がる

背景レイヤーから、キャラクターより前面にくる部分を選択してコピー・ペーストで新規レイヤーを作成

([編集]>[特殊ペースト]>[同じ位置にペースト]でペーストすると位置がずれない)

このレイヤーと背景レイヤーでキャラクターのレイヤーを挟む

 

背景を加工した場合は加工後の画像に差し替えるのを忘れずに

(加工で境界が不明瞭になるときれいに選択できない あらかじめオクルージョン用のレイヤーを作成しておき、加工後の背景をコピーしてクリップするのがよさそう)

 

ポスタリゼーション

背景写真から情報量を減らしアウトラインをつけてキャラクター画像となじみやすくする

また、画面の中で情報量を保ちたい部分と減らしたい部分をコントロールする

 

今回は中央のクリスマス飾りは残したい、映り込んだ人の姿はぼかしたい

中央エリアを矩形で範囲選択、選択範囲を反転

[選択範囲]>[選択範囲を変更]>[境界をぼかす] でぼかしたい領域の境界をぼかす

[フィルター]>[ぼかし]>[ぼかし(ガウス)] で情報量を減らす

 

[フィルター]<[フィルターギャラリー] でエッジのポスタリゼーション実行

ガウスぼかしされた周辺部分は粗く、中央部分はディテールが残った状態でポスタリゼーションされる

 

※フィルターギャラリーがグレーアウトしている場合

画像ファイルが16bitだとフィルターギャラリーが無効

[イメージ]>[モード]>[8bit/チャンネル]8bitに変換する

 

キャラクターの色調整

[フィルター]>[Camera Rawフィルター]

背景の色温度に合わせる

色が薄くコントラストが低い場合は[かすみの除去]でくっきりさせる

彩度を調整して背景に合わせる

 

f:id:hinzka:20191209011017p:plain

調整前

f:id:hinzka:20191209011024p:plain

調整後

キャラクターに影をつける

キャラクターのレイヤーを複製し、元のレイヤーの上に置く

複製したレイヤーのキャラクター部分を背景色で塗りつぶし、レイヤーの透明度を下げる

レイヤーをずらすと影っぽくなる 適宜回転させたりして調整

クリッピングマスクをかけると本体からはみだした部分が非表示になる

 

拡大するとわかるけどほぼずらしただけです 省エネ

 

f:id:hinzka:20191209014511g:plain

影のオンオフ

背景にキャラクターの影をつける

足元に影を落とすと実在感が上がる

背景にクイックマスクモードの選択ブラシで影領域を作成

マスク解除し、選択部分を反転 調整レイヤーでこの部分を暗くする

今回は[レイヤー]>[新規調整レイヤー]>[トーンカーブ] でカーブを下振れさせています

 

バランス調整

キャラクターにも適宜ガウスぼかし+ポスタリゼーションを行って背景とのバランスをとる

今回は鹿さんの色が背景に埋もれてしまったので、重なった部分の背景を調整レイヤーで明るくして浮き上がらせてみました

 

 

終わったらPhotoshop上で保存

 

Lightroomで最終調整

Photoshop上で保存された画像がLightroom上に表示される

 

仕上げです

白く目立ちすぎるところは補正ブラシで露光を下げる

右上のビルの光、白い看板やスタッフさんの服を暗くする

 

周辺光量補正でまわりを暗くして主題を目立たせる

 

 

Lightroomには多彩なフィルターとプリセットがあるのでいろいろ試してあそぼう

f:id:hinzka:20191209012158g:plain

プリセットいろいろ

Lightroomから最終画像を出力して完成です

スマホのフィルターアプリで追加加工するのもたのしいよ

 

f:id:hinzka:20191209002631g:plain

kirakiraおきゅたん

kirakira+

https://apps.apple.com/jp/app/kirakira/id955687901