met4citizen/TalkingHead

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

TalkingHead (3D) – 概要

TalkingHeadは、3Dアバター（Mixamo互換のリグを持つGLBモデル）をウェブページに配置し、リアルタイムで話したり、ジェスチャーをしたり、表情を見せたりできるようにするJavaScriptライブラリです。アバターは音声に合わせてリップシンクし、絵文字を表情として表示し、さまざまなAIサービス（OpenAI、Google TTS、Whisperなど）によって制御できます。レンダリングにはThree.jsを使用しており、完全にブラウザ内で動作します。CDNからロードするか、npm経由でインストールできます。

コア機能

機能	内容
リアルタイム・リップシンク	テキスト読み上げサービス（デフォルトはGoogle Cloud TTS）または`HeadAudio`のような音声駆動型モジュールからvisemeを生成します。標準で複数の言語（en, fi, de, fr, lt）をサポートしており、カスタムモジュールによる拡張も可能です。
フルボディ・アバター	Mixamoリグ、ARKit/Oculusブレンドシェイプ定義、髪や衣類用のダイナミックボーン物理学を備えたGLBファイルを受け入れます。
絵文字から表情へのマッピング	内蔵の絵文字辞書により、標準的な絵文字を顔のブレンドシェイプ値に変換します。
プラグイン可能なTTSバックエンド	Google Cloud TTS、ElevenLabs、Azure Speech、または単語レベルのタイムスタンプやviseme IDを返せるあらゆるサービスに対応しています。
LLM駆動制御	OpenAIの関数呼び出し（function calling）を使用して、アバターのジェスチャーや発話を制御する方法のデモ例を提供しています。
WebRTC対応	関連プロジェクト（`HeadAudio`）が、WebRTCを介した音声対話のための低遅延オーディオワークレットを提供します。
アドオン・エコシステム	関連モジュールとして、`HeadTTS`（ブラウザ専用ニューラルTTS）、`HeadAudio`（音声駆動型viseme検出）、`MotionEngine`（LLMセマンティック制御を備えた高度なジェスチャーライブラリ）があります。
設定可能なレンダリング	カメラ、照明、アバターレベルのオプションが広範なオプションオブジェクトを通じて公開されています。回転、パン、ズームの有効/無効、ムードの変更などが可能です。

代表的なユースケース (READMEに記載)

人間とAIのグループ会話 – 多人数チャットシミュレーション用のDialogLabツールキットで使用されています。
WebRTCによるリアルタイムAI音声 – HeadAudioのデモでは、リップシンクを伴う音声対話ストリーミングを実現しています。
ビデオ会議アバター – Oliviaという名前のアバターが文字起こしとAI生成の返信を追加するデモ。
完全ブラウザ内AIアシスタント – EdgeSpeakerサイトでは、WebGPUを使用してすべて（LLM、TTS、リップシンク）をローカルで実行し、外部APIキーを必要としません。
インタラクティブな3D体験 – リサイクルアドバイザー、Twitchアドベンチャーワールド、量子物理学の教育、AI駆動のデーティングプロフィールアバターなど。

はじめに (クイックスタート)

ライブラリの導入 – npm (npm i @met4citizen/talkinghead) またはCDNから直接読み込みます:

<script type="importmap">
{"imports":{"talkinghead":"https://cdn.jsdelivr.net/gh/met4citizen/TalkingHead@1.7/modules/talkinghead.mjs"}}
</script>

TalkingHeadインスタンスの作成:

import { TalkingHead } from "talkinghead";
const head = new TalkingHead(document.getElementById('avatar'), {
  ttsEndpoint: "/gtts/",   // Google TTSへのプロキシ
  jwtGet: myJwtFetcher,      // オプションのSSOトークン取得関数
  lipsyncModules: ["en","fi"],
});

アバターのロード (適切なリグを持つGLBファイル):

await head.showAvatar({
  url: "./avatars/avaturn.glb",
  body: "F",
  avatarMood: "neutral",
  ttsLang: "en-GB",
  lipsyncLang: "en",
});

話させる:
```
head.speakText("Hello, world!");
```

READMEには、Google TTS APIキーだけで動作する最小限のHTML例も用意されています。

拡張 / カスタマイズ

独自のTTSを追加 – 単語レベルのタイムスタンプまたはviseme IDを返すサービスを実装し、ttsEndpointを指定します（または直接Googleを呼び出すためのttsApikeyショートカットを使用します）。
新しい言語 – リップシンク言語モジュールを作成し、lipsyncModulesにリストします。
ダイナミックボーンと物理演算 – アバターオプションでmodelDynamicBonesを定義します（付録Eを参照）。
ジェスチャーライブラリ – セマンティックなLLM駆動ジェスチャーのためにMotionEngineをプラグインします。
アバター単体モード – avatarOnly: trueに設定すると、既存のThree.jsシーンに統合するためのarmatureオブジェクトのみを取得できます。

どのような人が使うのか？

研究者 – 具現化AIエージェント、対話型UIの研究、またはマルチモーダルなインタラクション実験を構築している方。
開発者 – バーチャルプレゼンター、AI駆動のカスタマーサービスアバター、またはゲームスタイルのNPCを作成している方。
教育者 / ホビーユーザー – 重いバックエンドインフラを扱わずに、ウェブデモに話す3Dキャラクターを素早く追加したい方。

ライセンスと入手方法

このライブラリはオープンソースライセンスでリリースされています（READMEにはGitHubのリリースとnpmパッケージへのリンクがあります）。すべてのコード、デモビデオ、および関連モジュールは公開されています。

結論: TalkingHeadは、グラフィックス、音声合成、LLM制御を橋渡しする、機能豊富なブラウザベースの3Dアバターフレームワークであり、インタラクティブなAI駆動型バーチャルキャラクターを構築するすべての人にとって実用的なツールです。