spite/FaceMeshFaceGeometry

解決する課題

FaceMeshFaceGeometryは、MediaPipeのFace Landmarker（またはTensorFlow.js）から得られる2Dの顔ランドマークを、three.js環境内で使用可能な3Dメッシュに変換する方法を提供します。ビデオフィードに合わせた3Dジオメトリへの手動マッピングという問題を解決し、同時に頭部の姿勢、表情スコア、虹膜追跡といった重要なデータを提供します。

仕組み

このライブラリは、提供されたランドマークに基づいて頂点と法線を更新する BufferGeometry を作成します。いくつかの動作モードをサポートしています：

• Video Space: 頂点は入力ビデオのピクセルにマッピングされ、2D/3Dオーバーレイを容易にします。
• Metric Mode: 頂点はセンチメートル単位で計算され、パースペクティブカメラの使用を可能にし、標準的な顔モデルに対する頭部の姿勢を示す Matrix4 を提供します。
• Texture Mapping: マスクやメイク用の固定UV座標、または顔交換やビデオテクスチャリングなどのエフェクト用にビデオフィードに追従する動的UVを生成できます。
• Smoothing: One Euro filterを使用して、大きな遅延を発生させることなく、ランドマークと頭部の姿勢のジッターを軽減します。

対象ユーザー

three.jsとMediaPipeを使用して、ARフェイスフィルター、バーチャルアバター、3D顔追跡アプリケーション、インタラクティブなインスタレーションを構築する開発者。

ハイライト

• 統合された頭部姿勢: 3Dオブジェクト（メガネなど）を頭部に簡単に取り付けるための変換行列を提供します。
• リアルタイム表情追跡: インタラクティブなアニメーションのためにブレンドシェイプスコア（例：jawOpen、mouthSmileRight）にアクセスできます。
• 虹膜追跡: 視線方向を推定するために、両方の虹膜の位置と半径を含みます。
• 表面追跡: track() メソッドにより、3Dオブジェクトを顔表面の特定の三角形に固定できます。
• カスタムカメラコンポーネント: ウェブカメラへのアクセスと管理を簡素化するスタンドアロンのカスタム要素 <gum-av> が含まれています。