[WEB Add] VRM to GLB Animation + Pose Export - VRMへのアニメーション適用とGLB出力

概要

VRM モデルに VRM Animation（.vrma）やポーズデータを適用し、アニメーション付きの汎用 GLB ファイルとしてブラウザ上で変換・エクスポートするツール。 アップロード不要で、すべての処理はローカル環境（ブラウザ内）で実行され、外部サーバーには送信されません。

Three.js (r183) の GLTFExporter を使用し、VRChatやVRM規格で利用されるボーン構造（J_Bip_C_Hips や J_Bip_C_Chest など）や表情モーフターゲット（BlendShapes）を保持したまま、アニメーションがバインドされた標準的な .glb ファイルを出力します。

🔗 ツールを開く: VRM to GLB Animation + Pose Export

[WEB Add] VRM to GLB Animation + Pose Export

PROTOCOL.LAIN // VRMへのアニメーション適用とGLBエクスポート

lain-lab.com

使い方

1. VRM を読み込む

画面左上のエリアからモデルを読み込む。

• ドラッグ＆ドロップ — .vrm ファイルを破線エリア（Drop VRM file here）にドロップ
• クリックで選択 — エリアをクリックしてファイル選択ダイアログから選ぶ

2. アニメーション（VRMA）を読み込む・適用する

画面右上の ANIMATIONS セクションからアニメーションデータを適用する。

• .vrma ファイルの追加 — アニメーションドロップエリア（Drop VRMA files here）に .vrma ファイルを読み込ませる。
• 再生・切替 — 一覧に追加されたアニメーション名（例: walk など）をクリックして再生・停止やループ状態を切り替える。

中央の 3D プレビューエリアで、モデルにアニメーションがリアルタイム適用されていることを確認できる。

3. エクスポートオプションを設定する

EXPORT OPTIONS セクションで出力時のカスタマイズ項目を設定する。

パラメータ / オプション	操作	概要
Remove BlendShapes (morph targets)	チェックボックス	表情などのブレンドシェイプデータを除去してファイル容量を削減する。
Remove SpringBone nodes	チェックボックス	髪や衣装などの揺れもの（SpringBone）用ノードを除去し、メッシュ構造を軽量化する。
Convert to Unlit materials	チェックボックス	MToon 等の特殊シェーダーマテリアルを、汎用性の高い標準 Unlit マテリアルに変換して出力する。

4. GLB の出力とダウンロード

▶ EXPORT GLB ボタンをクリックすると、設定されたアニメーションおよびボーン構造をバインドした GLB エクスポート処理が開始される。

処理完了後、RESULT セクションにファイルサイズが表示され、⬇ DOWNLOAD ボタンをクリックして [元のファイル名]_anim.glb ファイルをローカルにダウンロードできる。

RESULT 表示例	内容
5.1 MB - 48.0%	出力された GLB ファイルのサイズおよび削減率

エクスポート設定の使い分け

用途や移動先のプラットフォームに合わせてオプションを切り替えて使用します。

利用目的・ターゲット	推奨設定	理由
Blender / Unity 等での二次利用	全オプション OFF	ボーン構造・表情・メッシュを完全に保持して持ち出せるため。
軽量なWeb3Dビューワーでの表示	Remove SpringBone, Convert to Unlit ON	不要な軽量化要素を取り除き、描画負荷を大幅に軽減できるため。
アニメーションポーズのみの固定軽量化	Remove BlendShapes ON	モーフターゲット（表情キー）を削除し、純粋なポーズ付きモデルとして容量削減するため。

ボーン構造とアニメーションの保持

本ツールは Three.js の GLTFExporter を内部で使用しており、VRM 固有のヒューマノイドボーン階層をそのまま保持した状態で GLB のアニメーショントラック（AnimationClip）へと変換・書き出しを行います。

保持・変換される構造:

• ヒューマノイドボーン構造 — J_Bip_C_Hips, J_Bip_C_Chest, J_Bip_L_UpperArm などの親子階層を完全に維持
• モーフターゲット（BlendShapes） — Fcl_ALL_Fun, Fcl_EYE_Close などのフェイス表情キー
• アニメーショントラック — 位置（Position）、回転（Quaternion）、スケール（Scale）のタイムラインデータ

互換性に関する注意

出力されるファイルは標準的な .glb (glTF 2.0 Binary) 形式です。

プラットフォーム / ツール	動作状況	備考
Three.js / WebGL ビューワー	✅ 完全対応	アニメーションクリップとして即時再生可能
Blender	✅ 対応	インポート後にタイムラインでアニメーションを確認可能
Unity (glTFast / UniGLTF)	✅ 対応	glTF インポーター経由で読み込み可能
VRChat	⚠ 要変換	FBX への変換または Unity 上でのインポートが必要

関連ツール

ツール	用途
VRM Optimizer	VRMモデルのファイルサイズを軽量化
GLB Compressor	GLBモデル（VRM以外）の軽量化
VRM Texture Replacer	VRMテクスチャの確認・差し替え・再エクスポート
VRM Thumbnail Generator	VRMモデルのサムネイル生成

技術仕様

項目	内容
レンダリング	Three.js (WebGL) + @pixiv/three-vrm
アニメーション再生	Three.js AnimationMixer + @pixiv/three-vrm-animation
GLB エクスポート	Three.js GLTFExporter (r183)
フレームワーク	Astro + Vanilla JS
データ処理	全てブラウザ内、サーバー通信なし

---

対応ブラウザ

WebGL および ES6 モジュール対応のモダンブラウザ（Chrome / Edge / Firefox / Safari）。 アニメーションのリアルタイム適用およびバイナリエクスポート処理を伴うため、PC環境での利用を推奨。