AIBit - オープンソースプロジェクトの発見 AIBit - オープンソースプロジェクトの発見

LivLiv Player：リップシンクと顔トラッキングに対応した軽量ウェブアバター

LivLiv Playerは、リップシンクと任意で利用できるウェブカメラトラッキングを備えた2.5D、VRM、PNG Tuberキャラクターをブラウザーに表示します。依存関係のない小さなコアで動作します。

ウェブサイトや配信に反応するキャラクターを追加するには、多くの場合、重量級のランタイム、特定のプラットフォーム専用ツール、または独自アニメーションコードの組み合わせから選ぶ必要があります。LivLiv Playerは、よりコンパクトなアプローチを採用しています。2.5Dキャラクターをブラウザーで描画し、オプション機能としてリップシンクとウェブカメラを利用した顔トラッキングを提供します。

コアはWebGL2を使用し、依存関係はなく、サイズはgzip圧縮で約30 KBです。1つのAPIでLivLivモデル、VRMアバター、シンプルなPNG Tuber素材を読み込めるため、インタラクティブなサイト、デスクトップアプリ風のウェブアプリ、配信オーバーレイに活用できます。

キャラクターを画面に表示する

npmパッケージをインストールし、Playerをcanvasに紐付けます。

npm install @livliv-dev/player

import { Player } from '@livliv-dev/player'

const canvas = document.querySelector('canvas')
const player = new Player(canvas)

await player.load('/characters/k01/')
player.setExpression('smile')
player.act('nod')
player.params.mouthOpen = 0.6 // 0から1までの値

LivLivキャラクターは、model.jsonとtextures/を含むディレクトリ、または.livlivパッケージから読み込めます。表情とアクションIDはplayerから利用できるため、アプリケーション側でボタンとして表示したり、会話の状態に紐付けたり、独自のアニメーションロジックから起動したりできます。

プロジェクトのリポジトリには、すぐに読み込める注目キャラクターが21体含まれています。npmパッケージに含まれるのはplayerであり、キャラクターファイルは含まれていません。使用するキャラクターを自分のプロジェクトにコピーし、それぞれのアセットのライセンスに従ってください。

必要に応じて音声とウェブカメラトラッキングを追加する

音声とトラッキングは個別にインポートするため、不要なアプリケーションではplayerの初期設定に含めずに済みます。リップシンク付きの音声再生には、次のようにします。

import { createSpeech } from '@livliv-dev/player/voice'

const speech = createSpeech(player)

button.onclick = () => {
  speech.unlock() // ブラウザーの音声ポリシーを満たすため、ユーザー操作から呼び出す
  speech.say('/reply.mp3')
}

playerは、マイク入力、音声、動画からのリップシンクに対応しています。ウェブカメラによる顔トラッキングにはMediaPipeを使用し、別途インポートします。利用には@mediapipe/tasks-visionが必要です。

import { startFaceTracking } from '@livliv-dev/player/tracking'

await startFaceTracking(player)

この分離は、パフォーマンスと同意の両面で実用的です。カメラへのアクセスは隠れた必須要件ではなく、明示的に有効化する機能です。またREADMEによると、トラッキングはブラウザー内で実行され、カメラ映像はデバイス内に留まります。player自体はAIサービスを呼び出さず、与えられたファイルを描画します。カメラ機能を使うアプリでは、そのアクセスを求める理由を明確に説明し、トラッキングを停止する方法を用意してください。

2D風アバターと3Dアバターを1つのAPIで扱う

LivLiv Playerは、body-playerインターフェースを通じてPNG Tuber画像とVRMモデルにも対応しています。形式ごとに描画要件は異なりますが、共通のアプリケーションフローに組み込めます。

import { BodyPlayer } from '@livliv-dev/player/body'
import { PngBody } from '@livliv-dev/player/png'
import { VrmBody } from '@livliv-dev/player/vrm'

const png = new BodyPlayer(canvasA, new PngBody())
await png.load({ closed: '/me-closed.png', open: '/me-open.png' })

const vrm = new BodyPlayer(canvasB, new VrmBody())
await vrm.load('/avatars/me.vrm')

VRMの利用にはthreeと@pixiv/three-vrmが必要です。PNG Tuberは画像素材を使い、通常は口を閉じた画像と開いた画像を用意し、必要に応じて目を閉じた画像も追加します。これにより、最初はシンプルな画像アバターで製品を始め、キャラクター関連のコードを全面的に置き換えることなく、後からより本格的なリグ付きモデルを提供できます。

埋め込みとセルフホスティングを選ぶ

手早くデモを作成したり、OBSオーバーレイとして使ったりする場合、LivLivが提供する透明背景のiframeエンドポイントを利用できます。

<iframe
  src="https://livliv.ai/live/k01"
  width="480"
  height="640"
  allow="camera; microphone"
  style="border: 0; background: transparent"
></iframe>

より細かく制御するには、playerとキャラクター素材をセルフホストします。サンプルはローカルでnpm installとnpm run buildを実行してビルドし、任意の静的サーバーから配信できます。デモでは?model=パラメーターを使って別のキャラクターを選択でき、PNG TuberとVRMの読み込みを示すサンプルもそれぞれ用意されています。

注目キャラクターには、512 × 768、それぞれ約50 KBのcover.webpポスターが含まれています。player.load(source, { poster })にポスターを渡すと、キャラクターの最初のフレームが読み込まれる間に表示できます。JavaScriptの実行前にすぐ画像を表示するには、リポジトリの読み込みサンプルのように、canvasの下にポスターを配置してキャラクターをフェードインさせてください。

形式、互換性、プロジェクトの範囲

playerはLivLivパッケージ形式（.livlivおよびmodel.json v4）に対応しています。v4より前にエクスポートされたパッケージについては別途説明があり、引き続き再生できます。形式のドキュメントとJSON Schemaはリポジトリに含まれています。playerはLive2Dランタイムではありません。Live2DソフトウェアやCubism SDKを使用せず、.moc3または.cmo3ファイルを読み込むこともできません。

ブラウザー要件はWebGL2とES2023です。記載されている最低バージョンは、ChromeおよびEdge 97以降、Firefox 104以降、Safari 15.4以降です。現行のデスクトップブラウザーでテスト済みとされていますが、スマートフォンではまだテストされていないため、リリース前にモバイルでのパフォーマンスと互換性を検証してください。

キャラクターのライセンスも導入時に確認する

コードはApache-2.0ライセンスですが、注目キャラクターにはそれぞれ独自の利用条件があり、このライセンスの対象ではありません。大半は「Characters: LivLiv (livliv.ai)」とクレジットを記載すれば、個人の非商用プロジェクトで利用できます。リポジトリのキャラクターライセンスでは、販売、商用利用、AIの学習が禁止されています。Kujira、Kujira Q、Penは他者の作品をもとにしており、別途クレジット表記と利用条件が定められています。meta.authorやmeta.licenseなどのパッケージメタデータを保持し、アバターを公開する前に該当するライセンスを確認してください。

LivLivのキャラクター作成サービスではAIを使用しています。LivLivで作成したキャラクターを一般公開するユーザーには、手描きや手作業でリギングした作品であるかのように見せず、AIを使用したことを明示するようプロジェクトは求めています。こうした違いは、レンダラーを選ぶときだけでなく、一般向け製品を作る際にも重要です。

自分のスタックで試す

リポジトリにはTypeScriptのソースコード、APIと形式のドキュメント、サンプル、テストが含まれています。一般的なローカル開発手順は次のとおりです。

git clone https://github.com/livliv-dev/player
cd player
npm install
npm run check
npm run build
npm test

ユニットテストとファズテストは、ブラウザーを使わずにNode 22.18以降で実行できます。ブラウザーテストでは、ヘッドレスChromiumで注目キャラクターを描画します。FirefoxとWebKitエンジンのテストも利用可能で、ブラウザーのインストール方法とWebGLの要件はREADMEに記載されています。

LivLiv Playerは、軽量なウェブアバターに、必要に応じて追加できるインタラクション機能と、複数のキャラクター形式を求めるアプリケーションに適しています。小さなコアにより基本的なレンダラーを導入しやすく、音声とトラッキングのモジュールは、体験に必要なときだけ開発者が追加できます。

ソース

livliv-dev/player：リップシンクとウェブカメラ顔トラッキングに対応した、軽量なウェブ向け2.5Dキャラクタープレイヤー。