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>가 포함되어 있습니다.