跳到主要內容
Lab Grimoire
TW EN
請喝咖啡
software

draco.js:純 JavaScript 的 Draco 網格解碼器,three.js 免 WASM 方案

24KB 純 JS 的 three.js DRACOLoader 替代方案,徹底省去 WASM 設定。最適合靜態站點部署時遭遇 WASM CORS 與 CSP 問題的開發者。以約 1.5 倍解碼速度換取零設定的簡潔體驗。僅支援三角網格。

Best For

在靜態託管平台(Cloudflare Pages、Vercel、Netlify)上部署含 Draco 壓縮 GLB 模型的 three.js 場景,且不想處理 WASM 設定問題的前端開發者。

How I Actually Use It

我評估 draco.js 的起因是考慮在靜態部署的生醫教育網站加入 3D 分子與細胞結構視覺化。它真正吸引人的地方在於:換一個 import,刪掉 WASM 檔案和 Worker 設定,Draco 解碼就能直接運作。不需要 setDecoderPath,不需要除錯 CORS 標頭,也不需要為 wasm-unsafe-eval 新增 CSP 例外。API 與 three.js 的 DRACOLoader 完全向下相容,現有程式碼幾乎不需修改。

Where It Is Strong

  • 極小的 bundle:gzipped 後僅 24KB,對比官方 WASM 解碼器的 104KB,縮減 4.3 倍。
  • 零設定部署:單一 ES module 匯入。無需託管 .wasm 檔案,無需設定 Worker,無需處理 CORS。
  • 即插即用相容:接受相同的 DRACOLoader API。setDecoderPathsetDecoderConfig 呼叫會被靜默接受以維持向下相容。
  • 輸出經過驗證:逐元素比對確認解碼幾何與官方 WASM 版本完全一致。
  • 作者可信度高:由 three.js 的創始人兼核心維護者 mrdoob 本人撰寫。

Where It Fails

  • 解碼速度較慢:約慢 1.4 至 1.6 倍。超過 100k 頂點的網格會產生可感知的延遲。
  • 僅支援三角網格:只支援 glTF 使用的 EdgeBreaker 路徑。不支援 point-cloud、KD-tree 遍歷及 metadata 解碼。
  • 專案尚在早期:僅 1 個 commit,0 個正式 release。程式碼品質成熟,但版本管理尚未到位。
  • 不適合重度 3D 應用:若場景包含數百萬三角面,或需要即時串流解碼,仍應使用 WASM 版本。

Pricing, Difficulty, and Risk

價格:完全開源,MIT 授權。解碼邏輯移植自 Google Draco(Apache-2.0),無授權衝突。

上手門檻:中等。需要具備 three.js 及其 loader 管線的基礎知識。替換本身很簡單,但判斷速度取捨是否影響你的實際模型,需要針對場景做效能分析。

風險:低。純前端解碼,資料不離開瀏覽器。考量作者身分,供應鏈風險極低。主要隱憂在於長期維護:僅有一個 commit,後續修復取決於 mrdoob 是否持續投入。

Verdict

如果你在靜態站點部署含 Draco 模型的 three.js 場景,且曾被 WASM 設定搞得頭大,draco.js 是乾淨俐落的解法。若解碼速度是關鍵需求,或你需要 point-cloud 支援,則不適用。

Source