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

概要

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

🔗 ツールを開く: GLB Compressor

[WEB Add] GLB Compressor

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

lain-lab.com

使い方

1. GLB を読み込む

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

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

2. ファイル情報の確認

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

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

プレビューエリアには対象の3Dモデルが描画され、マウス操作（回転・拡縮・パン）で状態を確認できる。

3. 圧縮設定を調整する

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

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

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

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

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

RESULT 表示例	内容
53.4 MB → 7.4 MB -86.2%	圧縮前サイズ → 圧縮後サイズ および 削減率

圧縮方式の使い分け

モデルの特徴	推奨設定	期待される効果
テクスチャが大きい（部屋・建築系）	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 変換)
フレームワーク	Astro + Vanilla JS
データ処理	全てブラウザ内、サーバー通信なし

---

対応ブラウザ

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