1枚のイラストから、まばたきや口パク、首振り、髪の揺れを表現する2Dアバターを作れるオープンソースツール「Mesh Avatar Studio」が公開されています。コーディングエージェントが初期設定やレイヤー画像を用意し、ローカルで動くエディタで仕上げる仕組みです。 作成したアバターは配信に使えるほか、Webアプリに組み込めます。
画像からアバターを作り、エディタで調整
制作の出発点は、正面を向いた人物のバストアップと透明な背景を持つPNG画像です。リポジトリでClaude CodeまたはCodexを使い、手順書に沿ってアバターを作るよう依頼すると、プロジェクトが用意されます。 作成を依頼するエージェントは、画像内の座標を読み取り、パーツをレイヤーに分けて設定を組み立てます。
プロジェクトをエディタで開くと、画像上の制御点をドラッグしてパーツの位置を調整できます。顔の向きや目の開閉をポーズ確認で試し、口の動きは母音の形を見ながら確かめられます。 切り抜きに使う輪郭などを変更した場合は、保存してレイヤーを作り直す操作が必要です。
目を閉じた画像や母音ごとの口の画像がなくても、メッシュ変形で目や口を動かせます。描き分け画像を加えると、まばたきや発話時の口の形に使えます。 笑顔や驚き、ウインクなどの表情も利用でき、表情用の画像を追加する方法も用意されています。
メッシュ変形とレイヤーを使う制作工程
メッシュは、画像の表面に置いた頂点を動かして形を変える仕組みです。Live2D Cubismでは、画像を読み込んだ際に表示される頂点と線でメッシュを確認し、頂点を動かしてテクスチャを変形します。 Cubismのチュートリアルでは、最初のメッシュは頂点が少ないため、必要に応じて自動または手動で細かくします。
手動でメッシュを編集するときは、頂点を追加・削除し、線を結んでポリゴンを作ります。眉、まつげ、口など大きく変形する部分は、個別にメッシュを調整する方法が示されています。 Mesh Avatar Studioも、エディタでパーツごとの制御点を動かし、プレビューで形を確認する工程を含みます。
Cubismの制作フローでは、動かす部分ごとにイラストを分け、動いたときに見える部分も用意してから、Cubism Editorで動きを設定します。 その後、アニメーション用の作業環境でキーフレームを作り、動画、GIF、連番画像、アプリやゲーム向けの形式に出力できます。 Mesh Avatar Studioは、エージェントが初期設定とレイヤー画像を作り、エディタで確認・修正する手順を案内しています。
配信とブラウザアプリでの利用
StudioのLive画面ではカメラを起動して正面の姿勢を登録し、顔の動きに合わせてアバターを動かせます。マイクの音量に応じた口パクにも対応し、カメラを使わず待機中の動きに口パクを組み合わせる使い方もできます。 カメラ映像とマイク音声は端末内で処理され、配信画面には数値化されたアバターの動きが送られます。
OBSでは、Studioが用意するURLをブラウザソースに追加してアバターを表示します。透明背景をそのまま使えるほか、別の取り込みソフトでは緑背景とクロマキーを使う方法も案内されています。 セットアップなしで試す場合は、ChromeまたはEdgeのPlayerでサンプルや.mavatarファイルを開き、カメラやマイクに合わせて動かせます。
Webアプリには、書き出したアバターを読み込むランタイム「mesh-avatar」を組み込めます。HTMLのcanvasに表示し、アプリから表情や顔の角度、視線、発話状態、音声レベルを指定する仕組みです。 TypeScriptの型定義があり、Reactへの依存はありません。
セットアップと共有形式
リポジトリのセットアップは、npx create-mesh-avatar-studioで始められます。ダウンロードと依存パッケージのインストールに加え、必要なツールを確認し、不足があれば案内します。 エディタとLive画面の利用にはNode.js 22.17以降とGitが必要です。
アバターは独自形式の.mavatarファイルに書き出せます。ファイルにはリグ設定や作成済みレイヤー、表情用画像などをまとめられ、元画像を含める設定は既定で有効です。 元画像を含めずに書き出した場合も再生できますが、エディタでの編集やレイヤーの再構築には使えません。
コードはMITライセンスで公開されています。一方、サンプルキャラクターのミコは同ライセンスの対象外で、キャラクターの利用条件が別に定められています。 制作には別途コーディングエージェントが必要で、アバターの位置や動きはエディタで確認しながら調整する工程が含まれます。
