プロのダンサーが踊った“動きのデータ”（モーションキャプチャ）を、Webブラウザ上の3Dアバターにそのまま踊らせる ― そんなスタジオを作りました。全身の動き・表情・視線・口パクまで、ブラウザだけで動きます。
はじめにお断りしておくと、動きもアバターも「既存の転用素材」です（動き＝Mixamoのモーションキャプチャ、アバター＝VRM・GVRMのサンプルモデル）。当社が独自に作ったのは“システム”の側 ― 動きのデータを解析し、別骨格のアバターへ移し替え、制御して、2方式で描画するまでを1つに束ねる部分です。
そして本記事で一番お伝えしたいのは、この「関節角度の時系列で身体を動かす」という枠組みが、そのままロボットの制御・デジタルツインと地続きだということです。
デモ映像
動きの主役は「実モーションキャプチャ」
まず、動きの入り口を整理します。モーションキャプチャ（mocap）とは、実際の人が動いたときの「関節の回り方」を記録したデータです。3Dの動きは、突き詰めれば関節を少しずつ回していくこと。その回し方を時系列で記録したものが mocap で、本システムでは指まで含めた52本のボーンを実キャプチャの角度で駆動します。
動きをアバターに移す ― FBX再生パイプライン
外部の mocap（FBX形式）を、アバターの骨格に適用するまでの流れです。
ここで地味ですが重要なのが ③リターゲットです。mocap の骨格とアバターの骨格は、ボーンの名前も向きも違います。そのままでは手足があらぬ方向を向いてしまうため、
- ボーン名の表記ゆれを正規化して VRM 標準骨格へ対応づけ、
- 親ボーンの静止姿勢を使って骨格差の向きのズレを補正する、
という処理を独自に実装しています。「ある身体で記録した動きを、別の身体で正しく再現する」 ― これは後述するとおり、ロボティクスの異機種間モーション移植とまったく同じ問題です。
1つのシステム × 2つのレンダリング
同じシステム・同じ mocap で、2種類の描画方式のアバターを踊らせられます。
- ポリゴン（VRM） ― いわゆる3Dキャラクター。メッシュをボーンに追従させて変形します。
- ガウシアン（GVRM） ― 写実的な Gaussian Splatting（点の集まりで見た目を表現する新しい手法）を、同じ骨格で駆動します。
描き方が違っても、動かしているのは同じ「関節角度」。ここが次の話につながります。
補足：外部素材ゼロでも動く「プロシージャル生成」
mocap を使わず、数式（正弦波の合成）から動きをその場で作る自前エンジンも積んでいます。idle（待機）・wave（手振り）・walk・run・spin・dance など25種をリアルタイム生成でき、外部の mocap 素材が一切なくてもアバターを動かせます。
細部も“それらしく” ― 表情・視線・物理
見た目の自然さは、細かな自動制御が支えています。
- 自動まばたき ― 自然な間隔で目を閉じる
- 視線制御 ― カメラや任意のターゲットを見る
- 口パク ― 母音（あ・い・う・え・お）に応じた口の形
- ばね物理 ― 髪や衣装の揺れを物理でリアルに（呼吸や体の微細な揺れも重畳）
ここが本題 ― デジタルツイン & ロボットとの共通性
さて、ここまでは「アバターを踊らせる」話でした。しかし当社がこの題材に取り組む理由は、ロボットにあります。
動きの本質は『関節角度の時系列』です。この一点で、人間アバターとロボットは同じ枠組みで扱えます。
- アバター ＝ 制御対象（実体／ロボット）のデジタルツイン ― 実キャプチャの関節角度は、そのままロボットのアクチュエータ目標角とみなせます。
- 人間の動きの処理 ＝ ロボットの動作の処理 ― VRMの標準骨格はロボットの URDF（機体定義）に相当し、mocap の移植は異機種間モーション移植と同じ問題です。
つまり、アバターを制御対象のデジタルツインとして扱えば、そのままシミュレーションへ応用できます。人の動きをロボットへ移す、ロボットの動きを画面上のツインで確かめる ― その基盤づくりを、扱いやすいアバターダンスの題材で先に固めているわけです。
システムアーキテクチャ
全体の構成です。外部システムからのコマンドを受け、モーション（mocap再生／数式生成）と表情・視線を統合し、ポリゴン／ガウシアンのいずれかで毎フレーム描画します。
技術スタック（概要）
- フロント ― React + TypeScript / React Three Fiber + Three.js
- アバター ―
@pixiv/three-vrm（骨格・表情・ばね物理）／ FBXLoader で mocap を読み込み - 写実描画 ― Gaussian Splatting（ポリゴンと切り替え）
- バックエンド ― Node.js + Express（設定APIを提供）
- 転用素材 ― Mixamo の mocap（FBX）／ VRM・GVRM のサンプルモデル
いずれも公開されているライブラリ・素材を組み合わせており、独自性は「それらを束ねて動かすシステム」にあります。
まとめ
- やっていること ― 実モーションキャプチャで、Webブラウザ上の3Dアバターを全身・表情・口パクまで踊らせる。
- 独自なのはシステム ― 解析 → リターゲット → 制御 → ポリゴン＆ガウシアン描画の統合。動き・アバターは転用素材（Mixamo mocap／VRM・GVRMサンプル）。
- 人間×ロボットの共通言語 ― 『関節角度の時系列』で、人間アバターとロボットは同じ枠組みで扱える。
- デジタルツインへ ― アバターを制御対象のツインとみなせば、そのままシミュレーションや実機への動作移植につながります。
身近な「アバターを踊らせる」題材の裏で鍛えているのは、人の動きとロボットの動きを同じ言葉で扱う基盤です。デモやご相談を承っています。