Three.js 轉向 WebAssembly,以 10KB 極致體積挑戰原生效能
Three.js 轉向 WebAssembly,以 10KB 極致體積挑戰原生效能。
Three.js 專案近期發布了 three.wasm,宣稱將核心完全重寫為 WebAssembly,旨在擺脫 JavaScript 的垃圾回收與 JIT 預熱限制,追求極致的效能表現。
核心變革與效能three.wasm 的出現標誌著 Three.js 試圖從 JavaScript 轉向 WebAssembly 的激進嘗試,其核心特點包括:
- 體積大幅縮減:從原先的 175KB 降至 10KB。
- 極致效能:在旋轉立方體範例中達到 480+ fps,強調矩陣運算達到原生速度。
- 消除延遲:徹底移除垃圾回收(Garbage Collection)暫停與 JIT 預熱時間。
- 無依賴性:完全不依賴 JavaScript,實現純粹的二進位運作。
開發者體驗與反思
儘管該專案在效能上展現了強大潛力,但其開發哲學帶有強烈的反諷與極簡主義色彩:
- 類型系統:作者嘲諷 TypeScript 的複雜性,強調 WebAssembly 在指令層級即具備強型別(如
i32、f64),無需處理any或複雜的型別斷言。 - 實用性存疑:面對「是否能取代現有 Three.js 功能」的質疑,作者以「能轉動立方體,還需要什麼?」作為回應,展現了對當前 Web 開發過度複雜化的批判。
- 潛在風險:對於「是否應將生產環境應用遷移至此」的問題,作者以反諷口吻回答「絕對可以,能出什麼錯?」,暗示這項技術目前仍處於實驗性質,並非成熟的生產環境替代方案。
技術現況
目前 three.wasm 是一個真實的 WebAssembly 二進位檔案,透過 WebGL2 渲染管線運作。然而,相關的 AI 輔助工具在嘗試除錯時,因無法處理 WebAssembly 程式碼而請求撤回,顯示出目前開發工具鏈對於此類底層轉換的支援仍有顯著落差。
The future of Three.js is WebAssembly pic.twitter.com/oA0JRdBnZB
— Three.js (@threejs) April 1, 2026
10KB. 480+ fps. Faster than native.
— Three.js (@threejs) April 1, 2026
Try it: https://t.co/CrT20oj0N2
Source: https://t.co/93lmUaHgUc pic.twitter.com/hIK6FxIg7W
Debugging your app has never been easier.
— Three.js (@threejs) April 1, 2026
Your AI will love this! pic.twitter.com/hXICDrnBTO
Sorry guys, our AI had thinking mode off.
— Three.js (@threejs) April 2, 2026
After turning it back on, it realized it can't debug wasm and is begging us to revert. pic.twitter.com/fSDJttnpRQ
