[WEB App] VRM Crowd Benchmark — @webxr-jp/avatar-optimizer によるVRMアバター多体表示ベンチマーク

VRM Crowd Benchmark

WebXR-JP の HALBY さん（@halby24）が開発した @webxr-jp/avatar-optimizer を使い、ブラウザ上で多数のVRMアバターを同時表示しながらDraw Calls・FPS・ポリゴン数をリアルタイムで計測・比較できるベンチマークツール。

テクスチャアトラス化・メッシュ結合・カスタムシェーダー（MToonAtlasMaterial）による最適化の効果を、ON/OFFの切替とパラメータ調整で即座に確認できる。Meta Quest 3 の WebXR にも対応。

VRM Crowd Benchmark

@webxr-jp/avatar-optimizerによるVRMアバター多体表示ベンチマーク。最適化ON/OFF比較、アニメーション、WebXR対応。

lain-lab.com

スクリーンショット（PC）

30種 × 52体表示（最適化ON）— FPS 44 / Draw Calls 496 / Triangles 2.2M

同条件（最適化OFF）— FPS 26 / Draw Calls 1420 / Triangles 3.4M

動画（PC）

スクリーンショット（VR）

Meta Quest 3 — 最適化ON / 4体表示（Draw Calls 38）

Meta Quest 3 — 最適化OFF / 4体表示（Draw Calls 124）

動画（VR）

CREDIT

動作検証で使用したモデルは、自作したもの以外に、衣装データを含め以下のクリエイターの方のモデルを使用させてもらっています。

Author: minipper 様

BOOTH - minipper 様

作ったものとかいろいろ置いときます。Vroid衣装は、コーデ名はAIに考えてもらってます。デザインはちゃんと自分で考えて自分で描いてますがレースとか柄とかに使うテクスチャをたまにAIに作ってもらってます。ソフトウェアはAIと作ったものがほとんどです。

minippa.booth.pm

Author: おしり服屋さん 様

BOOTH - おしり服屋さん 様

自キャラ用に作成した衣装だけど良かったら使ってねというスタイルの無料配布場です。

oshiri-chan.booth.pm

Author: SATORI 様

BOOTH - SATORI 様

3Dmodel素材、ロゴ製作、配布販売を行う場所です。何でも屋さん、宜しかったらフォローしてやって下さい＾＾

official-satori.booth.pm

Author: 桜田とまこ 様

VRoid Hub - 桜田とまこ 様

絵藍ミツアプロジェクト用にVRoid作成中です。プリセットの色変えモデルですが、自由に使ってください。

hub.vroid.com

Author: マユラ 様

VRoid Hub - マユラ 様

絵藍ミツアプロジェクト用にVRoid作成中です。プリセットの色変えモデルですが、自由に使ってください。

hub.vroid.com

使い方

1. モデルの読み込み

list.json に登録されたVRMモデルがページ読み込み時に自動で準備される。手持ちのVRMを使いたい場合は、画面にドラッグ&ドロップするか「D&D / 選択」ボタンから複数ファイルを選択。

2. 表示数の調整

スライダーまたは数値入力ボックスで表示するアバター数を指定。モデルはオンデマンドで読み込み・最適化され、指定数に満たない場合はラウンドロビンでクローンが配置される。

3. 最適化パラメータの変更

• 最適化 ON/OFF — 左下のボタンで切替。キャッシュクリア後にリロードされる
• Poly（ポリゴン残存率） — 10%〜100%（デフォルト50%）。meshoptimizerによるポリゴン削減
• Atlas（テクスチャ解像度） — 512 / 1024 / 2048 / 4096。アトラス統合後の解像度
• 「適用（再最適化）」ボタンでパラメータを反映（ページリロード不要）

4. アニメーションの再生

「Anim」バーの各ボタンでアニメーションを切替。

• T-Pose — 静止（アニメーション停止）
• Walk — 歩行アニメーション + 自律移動（ランダムに歩き回る）
• Idle — 待機アニメーション
• Random — 各アバターにランダムなアニメーションを割り当て（再生位置もずらす）

5. ベンチマーク値の確認

右上のStats パネルでリアルタイム表示。

• FPS — フレームレート
• Draw Calls — 1フレームあたりの描画呼び出し回数（最適化の効果が最も顕著に出る指標）
• Triangles — 総ポリゴン数
• Models — ロード済みモデルの種類数
• Displayed — 現在表示中のアバター数
• Optimized — 最適化の適用状態

6. VRモードで確認する（Meta Quest 2/3）

Questのブラウザで開き、表示数やアニメーションを設定したあと左下の「Enter VR」ボタンで没入。VR内では右スティック上下で表示数増減、Yボタンでアニメーション切替が可能。

⚠️ Quest VR モードの制限事項

VRモードはステレオレンダリング（左右2眼分）のためDraw Callsが実質2倍になります。Quest 3 では 5体を超えるとブラウザがクラッシュ する場合があります（Poly 20% / Atlas 512 の最軽量設定でも同様）。VRでのベンチマーク時は4体以下での使用を推奨します。

また、VR内のHTMLMesh UIはStats表示専用です。スライダー等のインタラクション操作はコントローラーのボタン/スティックで行ってください。

検証結果サマリー

PC（RTX 4070Ti + DDR4 64GB）

条件	FPS	Draw Calls	Triangles
52体 / 最適化ON	44	496	2.2M
52体 / 最適化OFF	26	1420	3.4M

最適化により Draw Calls 65%削減、FPS 約70%向上。

Meta Quest 3（WebXR）

条件	FPS	Draw Calls	Triangles
4体 / 最適化ON	66	38	105K
4体 / 最適化OFF	52	124	206K
6体以上	—	—	クラッシュ

技術スタック

• @webxr-jp/avatar-optimizer — VRMモデルの最適化（テクスチャアトラス、メッシュ結合、MToonAtlasMaterial）
• Three.js — 3Dレンダリング、WebXR、SkeletonUtils、HTMLMesh
• @pixiv/three-vrm — VRM読み込み・ヒューマノイドボーン制御
• @pixiv/three-vrm-animation — VRMAアニメーション読み込み
• Astro — ページビルド・スクリプトバンドル

技術記事

[Astro] #128 VRM Crowd Benchmark — @webxr-jp/avatar-optimizer によるVRMアバター多体表示の最適化と限界検証

avatar-optimizerの最適化アプローチ解説、実装詳細、PC/Quest 3での実測データ。

lain-lab.com

更新履歴

• [v1.1] (2026-09-06):

  • 画面外に出るプルプルバグを修正。
  • 「表示数」のスライダー値がテキストボックスに反映されなかったバグを修正。

• [v1.0] (2026-09-06): 初回公開。

  • @webxr-jp/avatar-optimizer (v0.3.0) によるVRM最適化パイプライン構築
  • list.json による自動モデル読み込み / ドラッグ&ドロップ対応
  • スライダー + 数値入力によるオンデマンド表示数制御
  • 最適化パラメータ（Poly / Atlas）の動的変更UI
  • VRMAアニメーション再生（T-Pose / Walk / Idle / Random）
  • Walk時の自律歩行（ランダム目標地点への移動・旋回）
  • WebXR対応（HTMLMesh Stats表示 / コントローラー操作）
  • リアルタイムベンチマーク表示（FPS / Draw Calls / Triangles）
  • Credits自動生成（list.jsonの作者情報から重複排除・リンク付き）