MediaPipe BlazePose GHUMとTensorFlow.jsを使用した3Dポーズ検出

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

・3D Pose Detection with MediaPipe BlazePose GHUM and TensorFlow.js

1. はじめに

ポーズ検出は、動画や画像で人体についてより深く理解するための重要なステップです。私たちの既存のモデルは、2Dポーズ推定をサポートしてきました。これは多くの人がすでに試したことがあるかもしれません。

本日、「TF.js pose-detection API」で最初の3Dポーズ推定のモデルをリリースします。3Dポーズ推定は、フィットネス、医療、モーションキャプチャなどのアプリに、新しい機能を提供します。これらの分野の多くで、TensorFlow.jsコミュニティからの関心が高まっています。良い例は、ブラウザでキャラクターアニメーションを制御するための3Dモーションキャプチャです。

・https://3d.kalidoface.com/

このデモでは、MediaPipeとTensorFlow.jsを利用した複数のモデル（FaceMesh、BlazePose、HandPose）を使用しています。 さらに良いことに、Webページにアクセスするだけで、利用できます。アプリをインストールする必要はありません。それを念頭に置いて、詳細を学び、この新しいモデルの動作を見てみましょう。

・Try out the live demo!

2. インストール

「pose-detection API」は、BlazePose GHUMに2つのランタイム（MediaPipeとTF.js）を提供します。APIとランタイムをインストールするには、htmlファイルで<script>タグを使用するか、NPMを使用します。

・スクリプトタグ

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

<!-- TF.jsランタイムを使用する場合は、以下のスクリプトを含める -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-core"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-converter"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-webgl"></script>

<!-- MediaPipeランタイムを使用する場合は、以下のスクリプトを含める -->
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/pose"></script>

・NPM

yarn add @tensorflow-models/pose-detection

# TF.jsランタイムを使用する場合は、以下のコマンドを実行
yarn add @tensorflow/tfjs-core @tensorflow/tfjs-converter
yarn add @tensorflow/tfjs-backend-webgl

# MediaPipeランタイムを使用する場合は、以下のコマンドを実行
yarn add @mediapipe/pose

JSコードでAPIを参照するには、ライブラリのインストール方法によって異なります。

「スクリプトタグ」でインストールした場合は、グローバル名前空間「poseDetection」でライブラリを参照できます。

「NPM」でインストールした場合は、最初にライブラリをインポートする必要があります。

import * as poseDetection from '@tensorflow-models/pose-detection';
// TF.jsランタイムを使用する場合は、以下の行のコメントを解除
// import '@tensorflow/tfjs-backend-webgl';
// MediaPipeランタイムを使用する場合は、以下の行のコメントを回jヒョ
// import '@mediapipe/pose';

3. 実行

はじめに、検出器を作成します。

const model = poseDetection.SupportedModels.BlazePose;
const detectorConfig = {
  runtime: 'mediapipe', // or 'tfjs'
  modelType: 'full'
};
detector = await poseDetection.createDetector(model, detectorConfig);

アプリのニーズに合った「modelType」を選択します。「lite」「full」「heavy」の3つから選択できます。 「lite」から「heavy」まで、精度は向上しますが、推論速度は低下します。デモを試して、比較してください。

検出器を作成したら、ビデオストリームを渡して、ポーズを検出します。

const video = document.getElementById('video');
const poses = await detector.estimatePoses(video);

「poses」は、画像フレームで検出されたポーズ予測の配列を表します。ポーズごとに、「keypoints」と「keypoints3D」が含まれています。 

「keypoints」は、以前に起動した2Dモデルと同じで、33個のキーポイントオブジェクトの配列であり、各オブジェクトにはピクセル単位のx、yがあります。

「keypoints3D」は、33個のキーポイントオブジェクトを持つ追加の配列であり、各オブジェクトにはx、y、zがあります。 x、y、zはメートル単位です。 人は、2m x 2m x2mの立方体の空間にいるかのようにモデル化されます。 各軸の範囲は-1から1になります（したがって、合計デルタは2mになります）。 この3D空間の原点は、股関節の中心（0, 0, 0）です。 原点から、zはカメラに近づくと正になり、カメラから遠ざかると負になります。

[
  {
    score: 0.8,
    keypoints: [
      {x: 230, y: 220, score: 0.9, name: "nose"},
      {x: 212, y: 190, score: 0.8, name: "left_eye"},
      ...
    ],
    keypoints3D: [
      {x: 0.5, y: 0.9, z: 0.06 score: 0.9, name: "nose"},
      ...
    ]
  }
]

APIの詳細については、「ReadMe」を参照してください。