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 キーを公開するのではなく、プロキシを使用したシングルサインオン(SSO)を推奨しています(本番環境では明示的に警告されています)。

関連

  • プロジェクト
  • プロジェクト
  • プロジェクト
  • プロジェクト
  • Dispatch