← 返回花園

Blender 到 Web 的 3D 模型管線

幼苗 3D 美術
建立於 2025年11月8日
blender gltf 3d pipeline

為什麼需要一套管線

在將 Blender 製作的 3D 模型放到網頁上展示時，我發現直接匯出的 GLB 檔案往往過大。一個中等複雜度的工業機台模型，未經處理可能達到 30-50MB，這在 Web 環境下完全無法接受。因此我建立了一套從 Blender 到瀏覽器的標準化管線。

匯出格式選擇

glTF 2.0 是目前 Web 3D 的事實標準。有兩種打包方式：

  • glTF + bin + textures：分離式，適合需要個別替換貼圖的場景
  • GLB：單一二進位檔案，適合部署

本專案統一使用 GLB 格式，簡化部署流程。

優化流程

1. Blender 端

在匯出前先做幾件事：

  • 套用所有 modifier（特別是 Subdivision Surface，降到合理的 level）
  • 合併不需要獨立操作的 mesh
  • 刪除隱藏的物件和未使用的材質
  • 確認 UV 是否正確展開

匯出時選擇「glTF Binary (.glb)」，勾選 Draco compression。

2. gltf-transform 後處理

Blender 的 Draco 壓縮選項有限。我用 gltf-transform CLI 做更精細的優化：

# 執行完整優化管線
npx gltf-transform optimize input.glb output.glb \
  --compress draco \
  --texture-compress webp

主要操作：

  • Draco 壓縮：geometry 資料壓縮率通常可達 80-90%
  • 貼圖轉 WebP：比 PNG 小 25-35%，比 JPEG 品質更好
  • 合併 mesh：減少 draw call
  • 移除未使用的資源：清理 Blender 匯出時殘留的冗餘資料

3. 大小分界

本專案的規則：

  • < 2MB 的 GLB → 放在 public/models/，隨網站部署

  • = 2MB 的 GLB → 上傳到 Cloudflare R2，透過 CDN 載入

實際成果

以一個自動化機台的模型為例：

  • Blender 原始匯出：42MB
  • Draco + WebP 優化後：3.8MB
  • 壓縮率約 91%

載入時間從 Wi-Fi 環境的 8 秒降到 0.7 秒。

載入端注意事項

在 Three.js 端使用 GLTFLoader 搭配 DRACOLoader 載入壓縮過的模型。Draco decoder 的 WASM 檔案需要正確設定路徑。同時所有載入的資源都要經過 ResourceTracker 註冊，確保頁面切換時正確釋放。

待整理

  • LOD（Level of Detail）在 Web 端的實作方式
  • 動畫資料的壓縮策略
  • 與 Gaussian Splatting 格式的比較

被引用於