[2026/8/31]

[WEB App] GLB Compressor v2 - GLBモデルの軽量化・解析・アニメーション再生

[WEB App] GLB Compressor v2 - GLBモデルの軽量化・解析・アニメーション再生

概要

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

🔗 ツールを開く: GLB Compressor

[WEB App] GLB Compressor v2 - GIF

v2 新機能

[WEB App] GLB Compressor - 4. 圧縮の実行とダウンロード [WEB App] GLB Compressor v2 - GIF

アニメーション再生

GLBファイルに含まれるアニメーションクリップを検出し、再生・停止が可能。複数クリップがある場合はセレクトボックスで切替。圧縮前後でアニメーションが正常に動作するか確認できます。

ノードツリー表示

モデルの階層構造（メッシュ、ボーン、グループ、ライト等）をツリー形式で表示。ノードをクリックすると該当オブジェクトが2秒間ハイライト。テクスチャ一覧との境界はドラッグでリサイズ可能。

バッチ圧縮

複数のGLBファイルをまとめて圧縮。COMPRESSIONセクションの設定（WebP Quality / Max Texture Size / Draco）がすべてのファイルに適用されます。ZIP出力チェックをONにすると1つのZIPファイルとしてダウンロード。

スクリーンショット出力

現在のビューポートをPNG画像として保存。Screenshotボタン一つで実行。

使い方

1. GLB を読み込む

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

  • ドラッグ＆ドロップ — .glb ファイルを破線エリア（Drop GLB file here）にドロップ
  • クリックで選択 — エリアをクリックしてファイル選択ダイアログから選ぶ
[WEB App] GLB Compressor - 1. GLB を読み込む

2. ファイル情報の確認

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

項目内容
Nameファイル名
Size現在のファイルサイズ
Triangles総ポリゴン（三角形）数
Vertices総頂点数
Materialsマテリアル数
Texturesテクスチャ数
Meshesメッシュ数
Animationsアニメーションクリップ数

プレビューエリアには対象の3Dモデルが描画され、マウス操作（回転・拡縮・パン）で状態を確認できる。右パネルにはテクスチャ一覧とノードツリーが表示される。

[WEB App] GLB Compressor - 2. ファイル情報の確認

3. 圧縮設定を調整する

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

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

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

▶ COMPRESS ボタンをクリックすると圧縮処理が開始される。右上のコンソールエリアに変換状況（テクスチャの縮小率など）のログが出力される。

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

RESULT 表示例内容
53.4 MB → 7.4 MB -86.2%圧縮前サイズ → 圧縮後サイズ および 削減率
[WEB App] GLB Compressor - 4. 圧縮の実行とダウンロード

5. アニメーションの確認（v2）

GLBにアニメーションが含まれている場合、ANIMATION セクションが表示される。クリップをセレクトボックスで選択し、Play/Stopボタンで再生・停止。圧縮前後でアニメーションの動作を確認できる。

6. バッチ圧縮（v2）

BATCH COMPRESS セクションに複数のGLBファイルをドロップすると、ファイルリストが表示される。COMPRESSIONセクションで設定した品質・サイズ設定が全ファイルに適用される。

  • ZIPでまとめてダウンロード — チェックONで1つのZIPファイルとして出力
  • 個別ダウンロード — チェックOFFで各ファイルを順次ダウンロード

圧縮方式の使い分け

モデルの特徴推奨設定期待される効果
テクスチャが大きい（部屋・建築系）WebP Quality 50〜75%, Draco OFF-70〜90%
ポリゴンが多い（フォトグラメトリ・スキャン系）WebP Quality 75%, Draco ON-80〜95%
テクスチャもポリゴンも多いWebP Quality 50%, Draco ON-85〜95%
既にWebPテクスチャ・低ポリ圧縮効果が薄い—

Draco 圧縮の注意点

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

import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('https://www.gstatic.com/draco/v1/decoders/');
gltfLoader.setDRACOLoader(dracoLoader);

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

技術仕様

項目内容
レンダリングThree.js (WebGL)
GLB パース・変換@gltf-transform/core, @gltf-transform/extensions, @gltf-transform/functions
ジオメトリ圧縮Draco (WASM モジュールによるローカルエンコード)
テクスチャ変換OffscreenCanvas API (WebP 変換)
アニメーションThree.js AnimationMixer
バッチ圧縮順次処理 + JSZip (ZIP出力)
フレームワークAstro + Vanilla JS
データ処理全てブラウザ内、サーバー通信なし

対応ブラウザ

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

更新履歴

  • [2026/08/30] v2:

    • アニメーション再生
    • ノードツリー表示（リサイズ対応）
    • バッチ圧縮（ZIP出力）
    • スクリーンショットPNG出力

  • [2026/07/18] v1:

    • 初版リリース
    • WebPテクスチャ変換
    • Dracoジオメトリ圧縮
    • 3Dプレビュー
    • テクスチャ一覧