GLBファイルのDraco圧縮 - 87%のサイズ削減と精度への影響

# gltf-transformを使用
npx gltf-transform draco input.glb output-draco.glb

# オプション付き（高品質設定）
npx gltf-transform draco input.glb output-draco.glb \
  --quantize-position 14 \
  --quantize-normal 10 \
  --quantize-texcoord 12

# 元ファイルのHTTPレスポンスヘッダー
content-encoding: br
content-length: 61338605  # 約58.5MB

# Draco圧縮ファイルのHTTPレスポンスヘッダー
content-encoding: br
content-length: 12991149  # 約12.4MB

例: タイリング用UV
u: 0.0 ~ 10.0 (10回繰り返し)
v: 0.0 ~ 10.0

npx gltf-transform draco input.glb output.glb \
  --quantize-texcoord 14  # デフォルト10→14に増加

// シェーダー側でタイリング
vec2 tiledUV = fract(uv * 10.0); // 10回繰り返し

# 特定のメッシュを除外（手動で分離が必要）

# 詳細情報を表示
npx gltf-transform inspect model.glb

# 検証
npx gltf-transform validate model.glb

# テクスチャ圧縮（WebP）
npx gltf-transform webp input.glb output.glb

# テクスチャリサイズ
npx gltf-transform resize input.glb output.glb --width 1024 --height 1024

# 重複頂点の削除
npx gltf-transform dedup input.glb output.glb

# 最適化パイプライン（複数処理を一度に）
npx gltf-transform optimize input.glb output.glb

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';

const loader = new GLTFLoader();

// Dracoデコーダーの設定
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.5.6/');
loader.setDRACOLoader(dracoLoader);

// 読み込み
loader.load('model-draco.glb', (gltf) => {
  scene.add(gltf.scene);
});

# 一般的なWeb配信用
npx gltf-transform draco input.glb output.glb

# 高精度が必要な場合
npx gltf-transform draco input.glb output.glb \
  --quantize-position 16 \
  --quantize-normal 12 \
  --quantize-texcoord 14

# UV範囲が広い場合
npx gltf-transform draco input.glb output.glb \
  --quantize-texcoord 16