met4citizen/TalkingHead

Talking Head (3D): A JavaScript class for real-time lip-sync using full-body 3D avatars.

TalkingHead (3D)

브라우저 측 JavaScript 클래스로, 음성 및 립싱크를 갖춘 실시간 3D 아바타를 구동합니다. 브라우저에서 실행되며, Three.js/WebGL로 렌더링하고, 머리카락과 같은 동적 기능을 위한 물리 엔진이 내장되어 있습니다. 또한 이모지를 얼굴 표정에 매핑하고, Mixamo 스타일 애니메이션(FBX)을 지원하는 전신 아바타(GLB 형식)를 지원합니다.

실제 기능

  • 말하기 및 립싱크: 텍스트를 음성 오디오로 변환하고(기본적으로 Google Cloud TTS 사용), 단어 수준 타임스탬프를 사용하여 아바타의 입을 동기화합니다. 내장 립싱크 언어 모듈은 영어, 독일어, 프랑스어, 브라질 포르투갈어, 핀란드어, 리투아니아어를 지원합니다. 모듈을 작성하거나 viseme ID를 직접 제공하는 외부 TTS(예: Microsoft Azure Speech SDK)를 사용하여 더 많은 언어를 추가할 수 있습니다.
  • 생동감 추가: 유휴 머리 움직임, 눈 맞춤 동작, 기분 상태(중립, 행복, 분노, 슬픔 등)를 유지합니다.
  • 오디오 재생 처리: 텍스트 음성 변환을 위한 speakText 메서드와 자동 viseme 감지로 오디오 파일을 재생하는 speakAudio 메서드를 포함합니다.

실행에 필요한 것

  1. 아바타: Mixamo 호환 리그와 ARKit/Oculus viseme 블렌드 셰이프가 있는 GLB 3D 모델(README의 부록 A에서 만드는 방법 설명).
  2. 텍스트 음성 변환 백엔드: Google Cloud TTS(프록시 + JWT 또는 API 키 사용) 또는 단어 수준 타임스탬프를 반환하는 외부 TTS.
  3. TalkingHead 모듈: 릴리스 페이지, NPM(@met4citizen/talkinghead) 또는 CDN 가져오기를 통해 사용 가능.

사용자 정의 가능한 항목

README에는 수십 가지 옵션이 문서화되어 있습니다. 예:

  • 음성 및 발화: 언어, 속도, 음높이, 볼륨.
  • 카메라 및 보기: 전체, 중간, 상체, 머리 — 회전/팬/줌 권한 포함.
  • 조명 및 렌더링: 주변광, 방향광, 스포트라이트 색상 및 강도.
  • 아바타 동작: 눈 맞춤 빈도, 머리 움직임, 초기 기분.
  • 침묵/활동 감지: 아바타가 듣고 있을 때 이벤트를 트리거.

중요성

README에는 다른 사람들의 실제 사용 사례가 나열되어 있습니다. 연구 프로젝트(인간-AI 그룹 대화, 디지털 데이팅 트윈, 임상 시험 모집 지원), Twitch 라이브 게임, 화상 회의, 재활용 조언자 앱 등 모두 TalkingHead를 기반으로 구축되었습니다.


README의 주요 주의 사항: 내장 Google TTS 경로는 클라이언트 측 코드에서 API 키를 노출하는 대신(프로덕션에서 명시적으로 경고) 프록시와 함께 Single Sign-On(SSO)을 사용할 것을 권장합니다.

관련

  • 프로젝트
  • 프로젝트
  • 프로젝트
  • 프로젝트
  • Dispatch