アニメーション付きGLBの最適化：CesiumManの事例

圧縮後にアニメーションのサンプル数や三角形数を減らすと、どれだけ効果があるのでしょうか。それぞれの効果を切り分けるため、公開されているスキニング済みキャラクターCesiumManで検証しました。容量削減の大部分はMeshoptによるもので、アニメーションのサンプリングレートを下げても追加の効果はごくわずかでした。

モデルとテスト条件

元のGLBは438,044バイトで、4,672個の三角形、1つのアニメーション、19個のジョイントを持つスキンを含みます。2026年10月2日にWindows上でネイティブ版gltfpack 1.3を実行しました。すべての書き出しは同じ元ファイルから行いました。テクスチャは元の形式を維持し、名前付きノード、名前付きマテリアル、extrasを保持しました。アニメーションのサンプリングは、15 FPSの試行を除き、既定の30 FPSとしました。

モデルの出典とライセンス · 測定データと元ファイルのハッシュをダウンロード

キー数だけでなく、ファイル全体を比較する

ここでのアニメーションキー数は、各アニメーションサンプラーの入力アクセサーの要素数を合計したもので、異なるポーズ数や描画フレーム数ではありません。すべての出力で、アニメーションは1つ、スキンのジョイントは19個のままです。これらの数値だけでは、タイミング、変換、変形が変わっていないとは証明できません。

各変更で得られた効果

Meshoptは三角形の削減を指定せずに、元ファイルから52.6%の容量を削減しました。Conservative設定での書き出しでもアニメーションデータは変化し、キー数は2,736から1,205に減りました。すべての三角形を保持しても、可逆の設定にはなりません。

15 FPSではキー数がさらにほぼ半分になりましたが、ファイルは30 FPSのMeshopt出力より1,528バイト小さくなっただけで、削減率は0.74%でした。このモデルでは、別途動きを確認して低いレートで問題ないと判断できない限り、30 FPSを維持するのがよいでしょう。キー数の減少率が、そのままファイル全体の削減率になるわけではありません。

三角形50%の目標は、2,336個で正確に達成されました。Meshoptのみの場合と比べて13,972バイト、6.72%の削減です。同じ目標で積極的な簡略化を有効にしても、このテストではバイト数と三角形数が同じだったため、追加の容量削減はありませんでした。この結果が他のメッシュにも当てはまるとは限りません。

同じポーズを比較してから、動きを確認する

これらの画像は、最初のアニメーションの0.5秒時点を、同じカメラと照明、Three.js 0.180.0でレンダリングしたものです。この視点ではテクスチャが表示され、キャラクターの全体的なシルエットも保たれています。静止画だけでは動きの品質を判断できず、すべての変形エラーも確認できません。お使いのビューアーで、肘、膝、ループのつなぎ目を確認してください。

時間にも違いがあります。Three.jsが報告するクリップの長さは、元ファイルでは2.0000秒、30 FPS出力では約2.0083秒、15 FPS出力では2.0417秒です。アプリケーションがクリップの長さに合わせて動作を同期している場合は、元のタイミングが保たれていると決めつけず、連携をテストしてください。

書き出しを再現する

以下のすべてのコマンドで、元のGLBをinput.glbとして使用してください。これらのコマンドはサイトのオプションに対応しています。Meshopt出力には対応するデコーダーが必要で、最適化されたファイルにはジオメトリ量子化への対応も必要です。

gltfpack -i input.glb -o conservative.glb -kn -km -ke
gltfpack -i input.glb -o meshopt.glb -cc -kn -km -ke
gltfpack -i input.glb -o fps15.glb -cc -af 15 -kn -km -ke
gltfpack -i input.glb -o half.glb -si 0.5 -cc -kn -km -ke

このアセットでは、まずすべての三角形を保持した30 FPSのMeshoptを選びます。ジオメトリの処理負荷が重要で、変形の確認にも問題がなければ、三角形数を半分にした版を検討してください。この測定は小さなキャラクター1体を対象としたもので、各種デバイスでのGPU処理時間、読み込み速度、アニメーションの再現性を測定したものではありません。

モデル：CesiumMan、© 2017 Cesium、CC BY 4.0ライセンス。レンダリング画像では、当サイトで最適化した派生モデルを元モデルと並べて表示しています。Cesiumのロゴはモデルの一部として残っていますが、商標権は別途扱われます。Cesiumは当サイトやこの比較を推奨していません。 CC BY 4.0 · 商標に関する注意事項

Three.jsでgltfpackモデルを読み込む → · gltfpackでGLBのポリゴンを削減する →