圖形開發社群正在見證基於瀏覽器的3D渲染的一項令人振奮的進展，那就是 THREE-Nanite 專案的出現。該專案旨在使用 Three.js 復現 Unreal Engine 的 Nanite 風格動態細節層次（LOD）系統。這一發展恰逢基於瀏覽器的3D圖形在網路應用中日益重要之際。
 |
|---|
| 該圖展示了一個動態 LOD 系統，展現了3D模型如何根據與觀察者的距離改變其複雜度 |
動態LOD實現
該專案實現了一個複雜的網格處理系統，可以動態地對3D模型進行聚類和簡化。儘管仍處於早期階段，但它展現出令人印象深刻的效能，使用者反饋即使在較舊的硬體上也能獲得合理的幀率。正如一位社群成員所述，該系統在2010年代後期的 Celeron 處理器和整合顯示卡上也能達到20-40幀每秒的效能，有效處理數十萬個三角形。
效能指標：
- 可處理700,000個三角形
- 在傳統硬體上近景渲染可達20幀每秒
- 使用遠景LOD簡化後可達40幀每秒
技術挑戰與社群見解
該實現在開發社群中引發了深入的技術討論，特別是關於最佳化策略方面。雖然當前版本顯示出良好前景，但專家們指出了潛在的改進空間：
「即使是像帶有視錐體的LOD四叉樹剔除這樣的簡單方案，可能也會顯著減少三角形數量，進一步提升渲染速度。」
當前實現的功能特性：
- 網格聚類（小網格）
- 相鄰聚類分組
- 網格簡化至一半三角形（最大128個）
- 功能拆分為兩個部分
更廣泛的行業動向
該專案存在於推進瀏覽器3D圖形的更大背景之中。並行發展包括 WebGPU 版本的 Nanite 實現，甚至透過 WebGPU 在瀏覽器中執行 Unreal Engine 5（儘管目前還不支援 Nanite）。這些發展預示著瀏覽器中3D圖形功能正在向更復雜的方向發展。
未來發展路徑
專案的路線圖包括關鍵改進，如對LOD和DAG切割實現進行更廣泛的測試，以及最佳化向GPU的幾何體流式傳輸。社群的參與表明人們對這項技術的成熟度很感興趣，特別是對於需要高效處理複雜幾何體的基於網路的3D應用。
技術說明：LOD（細節層次）指的是隨著3D模型距離觀察者越遠而降低其複雜度的做法，而DAG（有向無環圖）用於高效組織和管理不同細節層次。
參考：THREE-Nanite