見出し画像

MediaPipe Facemesh

以下の記事を参考に書いてます。

MediaPipe Facemesh

1. はじめに

MediaPipe Facemesh は、顔の表面形状を486個のランドマークの3次元座標で予測する、軽量モデルです。モデルの特性については、モデルカードを参照してください。

このモデルは、携帯の 前面カメラ向け に設計されており、顔が画面の大部分を占有することが期待されます。そのため、遠くにある顔の特定は苦手です。Webカメラに映った顔のランドマークを検出するデモを参照してください。また、MediaPipe の一部としても利用できます。

2. インストール

◎ yarn

$ yarn add @tensorflow-models/facemesh

◎ npm

$ npm install @tensorflow-models/facemesh

このパッケージは、依存関係として @tensorflow/tfjs-core および @tensorflow/tfjs-converter が指定されています。

3. 使用方法

◎ npm

const facemesh = require('@tensorflow-models/facemesh');

◎ CDN

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/facemesh"></script>

◎ コード例

async function main() {
  // facemeshモデルの読み込み
  const model = await facemesh.load();

  // ビデオストリーム (または画像、キャンバス、3Dテンソル)を渡し、検出結果を取得
  const predictions = await model.estimateFaces(document.querySelector("video"));

  if (predictions.length > 0) {
    /*
    predictionsは、検出された各顔を示すオブジェクトの配列 :

    [
      {
        faceInViewConfidence: 1, // 顔が存在する確率
        boundingBox: { // 顔を囲むバウンディングボックス
          topLeft: [232.28, 145.26],
          bottomRight: [449.75, 308.36],
        },
        mesh: [ // 顔のランドマークの3次元座標
          [92.07, 119.49, -17.54],
          [91.97, 102.52, -30.54],
          ...
        ],
        scaledMesh: [ // 正規化された顔のランドマークの3次元座標
          [322.32, 297.58, -17.54],
          [322.18, 263.95, -30.54]
        ],
        annotations: { // セマンティックグループ
          silhouette: [
            [326.19, 124.72, -3.82],
             [351.06, 126.30, -3.00],
            ...
          ],
          ...
        }
      }
    ]
    */

    for (let i = 0; i < predictions.length; i++) {
      const keypoints = predictions[i].scaledMesh;

      // 顔のキーポイントのログ出力
      for (let i = 0; i < keypoints.length; i++) {
        const [x, y, z] = keypoints[i];

        console.log(`Keypoint ${i}: [${x}, ${y}, ${z}]`);
      }
    }
  }
}

main();

4. facemesh.load() のパラメータ

maxContinuousChecks : 何フレーム毎にBoundingBoxを検出するか (デフォルト:5)
・detectionConfidence : 予測破棄のしきい値 (デフォルト:0.9)
・maxFaces : 検出する顔の最大数 (デフォルト:10)
・iouThreshold : BoundingBoxの重なり具合のしきい値 (デフォルト:0.3)
・scoreThreshold : BoundingBoxのスコアに基づいた削除のしきい値 (デフォルト:0.75)

5. model.estimateFace() のパラメータ

・input : 分類する画像 (テンソル、DOM要素、ビデオ、キャンバス)
・returnTensors : 値ではなくテンソルを返すか (デフォルト:false)
・flipHorizontal : キーポイントを水平反転するか(デフォルト:false)

6. キーポイント

キーポイントは次のとおり。

画像1

これらのキーポイントのUV座標は、facemeshモデルの getUVCoords() を介して利用できます。これらは src/uv_coords.ts にもあります。


この記事が気に入ったらサポートをしてみませんか?