More than 3 years have passed since last update.

karidofaceでどのように3Dモデルを動かしているのか検証してみた（Mediapie, Three.js, VRM）　①口編

Last updated at 2021-11-17Posted at 2021-11-07

/**
 *  先日、rich yeemachineさんより、karidofaceでトラッキングに利用しているコードが公開されました🎉
 *  https://github.com/yeemachine/kalidokit
 *  ので、ナンバリングしていましたがこの企画は本記事にて終了します🙏
 */

はじめに

karidofaceというwebカメラとブラウザだけでLive2D & 3D トラッキングができるwebサービスがあり、
そこでMediapipeを使用してThree.js上でVRMモデルを動かしていて、どのように実現しているか気になったため検証してみました。

Mediapipeとは

動画などのメディアの推論をデバイスで行うためのフレームワーク
パイプライン（機械学習に必要な処理をまとめる仕組み）を提供
前処理から描画までを素早く行える

公式でカスタマイズ可能なオープンプンソースのSolutionが提供されており、karidofaceではそのうちのHolisticが使用されています。

https://google.github.io/mediapipe/solutions/holistic.html

口の動きの検証

取り合えずはじめに口のトラッキングを検証しました。
（今回は口だけの検証なのでHolisticではなくFaceMeshという顔のトラッキングのみを行うSolutionを使用しました。）

まずはじめに

VRMの口の動きは、 「a」 ~ 「o」 のどの形かを指定し、

次に 0 ~ 1 の数値を指定してどれくらいの開き具合かを指定して動かします。

一方 FaceMesh ではwebcameraの映像を基にトラッキングしたデータを、3d空間上の座標として取得できます。

[
  {
    x: 0.5567474961280823, 
    y: 0.5287743806838989, 
    z: -0.00007370980165433139, 
    visibility: undefined // 描画域に表示されるかどうか
  },
  ...
]

口の動きをVRMモデルに反映するためには、この座標データから 「a」 ~ 「i」 のうちどの形になっているかと、0 ~ 1 のうちどの開き具合かを検出する必要があります。

検証1 縦横比で母音検出

まずは縦横比を利用することを考えました。
「o」の場合は1:1というように、比率で各母音と開き具合を取得できるのではという案です。

※ FaceMeshで取得したlandmarkを口部分だけthree.jsで書き出したもの（数字は各landmarkのindex）
ただ縦横比だけだと正確に母音を検出できないケースがあり調べた結果、Tensorflow BlogではHu Momentsという画像の類似度判定アルゴリズムで解決していました。