mcpField
O
optimize-3d-assets

optimize-3d-assets

github.com/skinnyeクリエイティブ・メディア541 回インストール20 週間前に更新
リポジトリ

optimize-3d-assets について

optimize-3d-assetsは、見た目を保ちながら3Dモデルを軽量化し、Web配信を改善するワークフロースキルです。アセットの検査、圧縮、任意のReact Three Fiber変換、ランタイムデコーダー設定、結果確認を案内します。

主な機能

  1. 01GLBアセット内容の検査
  2. 02ジオメトリとテクスチャの圧縮
  3. 03大きすぎるテクスチャの縮小
  4. 04型付きR3Fコンポーネントへの変換
  5. 05出力サイズと外観の確認

活用シーン

  1. 01Web配信用GLBモデルの準備
  2. 02大きすぎるジオメトリやテクスチャの縮小
  3. 03編集可能なTypeScript R3Fコンポーネントの生成
  4. 04最適化後も描画が保たれるか確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/skinnye/3d-web-pack --skill optimize-3d-assets

インストール後、Claude Code で/optimize-3d-assetsを入力して読み込まれたか確認します。

詳細

Web 向けに 3D アセットを最適化する

見た目を損なわずに、モデルを軽量化して高速化します。必ずオリジナルを保持し、最適化した出力は新しいファイルに書き込み、最適化前後のサイズを報告してください。

ステップ 0 — 調査

npx @gltf-transform/cli inspect model.glb

注：ファイルサイズ、メッシュ／プリミティブ数、テクスチャの数と解像度、ドローコールの推定数、すでに Draco／KTX2 を使用しているかどうかを確認します。

ステップ 1 — 一括最適化（ここから開始）

npx @gltf-transform/cli optimize model.glb model.opt.glb \
  --compress draco \
  --texture-compress ktx2

未使用データの削除、重複排除、頂点の統合、インスタンス化、ジオメトリの Draco 圧縮、テクスチャの KTX2 圧縮を行います。

ステップ 2 — 個別の処理（必要な場合）

サイズの大きすぎるテクスチャをリサイズします：

npx @gltf-transform/cli resize model.opt.glb model.opt.glb --width 2048 --height 2048

より積極的な meshopt の代替手段（一部のモデルでは Draco より小さくなることがよくあります）：

gltfpack -i model.glb -o model.pack.glb -cc

（gltfpack は別途インストールが必要な場合があります：npm i -g gltfpack。）

その他の便利な gltf-transform コマンド：dedup、prune、weld、instance、draco、meshopt、KTX2 の品質段階を指定する etc1s／uastc。

ステップ 3 — R3F コンポーネントに変換（任意）

npx gltfjsx model.opt.glb -t -T
  • -t は TypeScript を出力し、-T は変換／圧縮を実行します。型付きの useGLTF コンポーネントと JSX シーングラフを含む Model.tsx が生成され、メッシュごとに簡単に編集できます。

ステップ 4 — 実行時デコーダー（R3F／drei）

圧縮済みアセットには、実行時にデコーダーが必要です。drei の useGLTF を使用すると Draco + meshopt + KTX2 は処理されますが、デコーダーのパスが解決されることを確認してください：

import { useGLTF } from '@react-three/drei'
// drei sets up DRACOLoader / KTX2Loader / MeshoptDecoder automatically.
useGLTF.preload('/models/model.opt.glb')

バニラ Three.js では、DRACOLoader、KTX2Loader（および renderer.detectSupport）、MeshoptDecoder を GLTFLoader に設定します。

ステップ 5 — 検証と報告

  • サイズを比較します：original X MB → optimized Y MB (−Z%)。
  • モデルがシーン内で引き続き読み込まれ、正しく表示されること（スケール、マテリアル、マップの有無）を確認します。
  • テクスチャが色あせて見える場合は、KTX2 の品質を上げる（uastc を指定して --texture-compress ktx2 を使用する）か、法線マップの圧縮を省略します。

目標

  • GLB は可能であれば数 MB 以下（主役となるアセットの場合）。テクスチャは KTX2、ジオメトリは Draco／meshopt を使用し、シーンごとのドローコールを約 100 回未満に抑えます。

コマンドでエラーが発生した場合は、gltf-transform／gltfpack の現在のフラグをドキュメントで確認してください。

コメント

Markdown 対応