[2026/7/21]

[WEB Add] VRM Optimizer - VRMモデルのファイルサイズを軽量化

概要

VRM モデルのファイルサイズをブラウザ上で圧縮・軽量化するツール。アップロード不要で、ファイルはローカル環境（ブラウザ内）で処理され、外部サーバーには送信されません。

GLBバイナリを直接操作することで、VRM拡張メタデータ（ヒューマノイドボーン定義・ブレンドシェイプ・SpringBone・MToonマテリアル等）を破壊せずにテクスチャ圧縮とジオメトリ圧縮を適用します。

🔗 ツールを開く: VRM Optimizer

[WEB Add] VRM Optimizer

PROTOCOL.LAIN // VRMモデルのファイルサイズを軽量化

lain-lab.com

使い方

1. VRM を読み込む

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

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

2. ファイル情報の確認

読み込みが完了すると、FILE INFO セクションに元のモデルの解析データが表示される。

項目	内容
Name	ファイル名
Size	現在のファイルサイズ
VRM Version	VRM仕様バージョン（0.x / 1.x）
Triangles	総ポリゴン（三角形）数
Vertices	総頂点数
Materials	マテリアル数
Textures	テクスチャ数
Meshes	メッシュ数
Bones	ヒューマノイドボーン数
BlendShapes	ブレンドシェイプ（表情）数
SpringBones	SpringBone（揺れもの）グループ数

プレビューエリアにはVRMモデルが描画され、マウス操作（回転・拡縮・パン）で状態を確認できる。 VRMLoaderPluginによりMToonマテリアルやSpringBoneの動きがリアルタイムで反映される。

3. 圧縮設定を調整する

COMPRESSION セクションで軽量化のパラメータを指定する。

パラメータ	操作	概要
WebP Quality	スライダー（10〜100%）	テクスチャをWebP形式へ変換する際の画質。数値を下げるほど容量が減るがノイズが増える。
Max Texture Size	スライダー（256〜4096）	テクスチャの最大解像度。指定値を超えるテクスチャは縦横比を維持して縮小される。
Draco Geometry Compression	チェックボックス	頂点データ（メッシュ）のDraco圧縮を有効にする。ファイルサイズが劇的に下がるが、読み込み側にDracoデコーダーが必要になる。

右パネルの TEXTURES セクションには各テクスチャの名前・フォーマット・サイズが一覧表示され、圧縮後に個別の削減率が確認できる。

4. 圧縮の実行とダウンロード

▶ COMPRESS ボタンをクリックすると圧縮処理が開始される。

処理完了後、RESULT セクションに結果が表示される。 ⬇ DOWNLOAD ボタンをクリックすると、圧縮後の [元のファイル名]_optimized.vrm ファイルがローカルに保存される。

RESULT 表示例	内容
`9.9 MB → 6.0 MB -38.9%`	圧縮前サイズ → 圧縮後サイズおよび削減率

[WEB Add] VRM Optimizer - 4. 圧縮の実行とダウンロード

圧縮方式の使い分け

モデルの特徴	推奨設定	期待される効果
テクスチャが大きい（高解像度テクスチャ多数）	WebP Quality 50〜75%, Draco OFF	-40〜70%
ポリゴンが多い（ハイポリモデル）	WebP Quality 75%, Draco ON	-50〜80%
テクスチャもポリゴンも多い	WebP Quality 50%, Draco ON	-60〜85%
既にWebPテクスチャ・低ポリ	圧縮効果が薄い	—

VRM拡張メタデータの保持

本ツールはGLBバイナリを直接操作してテクスチャを差し替えるため、VRM固有の拡張データが破壊されません。

Draco圧縮の適用時は gltf-transform を経由しますが、処理前にVRM拡張を退避し、処理後に復元する方式を採用しています。

保持される拡張データ:

VRM 0.x — VRM (humanoid, blendShapeMaster, firstPerson, materialProperties, secondaryAnimation)
VRM 1.x — VRMC_vrm, VRMC_springBone, VRMC_node_constraint, VRMC_materials_mtoon
ノード・マテリアル単位の拡張 — 各ノード・マテリアルに付与されたVRM拡張も個別に退避・復元

互換性に関する注意

本ツールはWebブラウザ（Three.js）での表示に最適化されたVRMを生成します。

機能	Three.js / WebGL	VRChat	VRoid Hub
WebP テクスチャ	✅ 対応	⚠ バージョン依存	⚠ 未確認
Draco 圧縮	✅ DRACOLoader で対応	❌ 非対応	❌ 非対応

他プラットフォームへの持ち出しが必要な場合は、Dracoチェックを OFF にし、WebP圧縮のみで使用してください。

Draco 圧縮の注意点

Draco圧縮を適用したVRMファイルは、読み込み側にDracoデコーダーが必要になる。Three.jsの場合は DRACOLoader を使用する。

import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('./draco/');
gltfLoader.setDRACOLoader(dracoLoader);

Draco未対応の環境で表示する場合はDracoチェックをOFFにしてWebP圧縮のみを使用する。

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

技術仕様

項目	内容
レンダリング	Three.js (WebGL) + @pixiv/three-vrm
GLB パース・変換	GLBバイナリ直接操作（VRM拡張保持）
ジオメトリ圧縮	Draco (WASM モジュールによるローカルエンコード) via gltf-transform
テクスチャ変換	OffscreenCanvas API (WebP 変換)
フレームワーク	Astro + Vanilla JS
データ処理	全てブラウザ内、サーバー通信なし

対応ブラウザ

WebGL および WebAssembly 対応のモダンブラウザ（Chrome / Edge / Firefox / Safari）。 WASMモジュールの実行およびメモリ上のバイナリ処理を伴うため、PC環境での利用を推奨。

概要