Three.js r186 正式支援 3DGS、體積霧與瀏覽器雕刻：WebGPU 正在改變 Web 3D 的技術邊界

一、Three.js r186：這次更新為什麼值得關注？

2026 年 9 月，開源 JavaScript 3D 圖形函式庫 Three.js 推出 r186 版本。日本 CGWORLD 在 10 月 3 日報導這次更新，特別介紹原生 3D Gaussian Splatting、體積霧、逆反射材質與網格雕刻等功能。

Three.js 長期以來是 Web 3D 生態的重要工具，常用於互動網站、產品展示、建築視覺化、教育模擬及瀏覽器遊戲。

過去，網頁 3D 主要依賴 WebGL，開發者需要在瀏覽器環境中處理模型、材質、光源與動畫。

隨著 WebGPU 與 Three.js Shader Language 持續發展，Three.js 正逐步具備更複雜的 GPU 運算與渲染能力。

r186 最值得注意的地方，不是單一功能的畫質提升，而是讓更多原本需要專門工具或客製化渲染器的技術，開始能融入一般 Three.js 專案。

二、什麼是 3D Gaussian Splatting？

傳統 3D 圖形主要使用 Polygon Mesh，也就是由頂點、邊與三角形構成的幾何模型。

這種表示方式非常適合角色動畫、碰撞計算、材質設定與精確的幾何編輯。

但如果要快速重建真實世界的複雜場景，例如街道、森林、室內空間或大量不規則物體，傳統建模可能需要投入大量人力。

3D Gaussian Splatting，簡稱 3DGS，採用另一種場景表示方法。

它使用大量具有位置、大小、方向、顏色與透明度等資訊的三維高斯分布，來近似真實場景的視覺外觀。

渲染時，系統會將這些高斯元素投影到螢幕上，再透過排序與混合產生畫面。

3DGS 的優勢，是能以相對直接的方式呈現由照片重建的複雜外觀，例如樹葉、毛髮、細小裝飾與不規則表面。

但它也有明顯限制。

高斯元素不等於具有完整拓撲結構的網格，因此不一定適合直接進行傳統的骨架動畫、物理碰撞、UV 編輯或精確幾何修改。

換句話說，3DGS 並不是全面取代 Polygon Mesh，而是另一種適合特定用途的三維場景表示方式。

三、Three.js r186 的 GaussianSplat 有什麼特別？

Three.js r186 加入原生 GaussianSplat 功能，讓開發者可以將 3DGS 資料整合進 Three.js 場景。

根據 CGWORLD 的整理，這項實作以 WebGPU 與 TSL 為基礎，支援 PLY 與 SPZ 格式，並具備視錐剔除、Raycasting 及球面調和函數等相關能力。

其中最重要的改變，是 3DGS 不再只能依靠獨立的展示器呈現。

開發者可以在同一個 Three.js 場景中，結合傳統 Mesh、攝影機、燈光、互動控制與 Gaussian Splatting 資料。

例如一個建築展示網站，可以使用 3DGS 呈現真實拍攝的室內空間，再使用傳統 Mesh 製作可點擊的家具、導覽標記與互動 UI。

這種混合式場景，比單純展示一份掃描資料具有更高的應用彈性。

不過，原生整合不代表所有 Three.js 功能都能毫無限制地作用於 Gaussian Splatting。材質、光照、遮擋、動畫與後處理的相容性，仍需要依實際實作驗證。

四、為什麼 3DGS 渲染需要排序？

Gaussian Splatting 通常涉及大量半透明元素。

當多個高斯元素投影到相同的螢幕區域時，前後混合順序可能影響最終畫面。

因此，許多 3DGS 渲染流程需要依照攝影機視角處理排序問題。

當使用者移動攝影機時，高斯元素相對於觀察者的前後關係也可能改變。

如果場景包含數百萬個高斯元素，排序與資料傳輸就可能成為重要的效能瓶頸。

這也是 WebGPU 特別值得關注的原因。

WebGPU 提供更現代化的 GPU 資源管理與 Compute Shader 能力，讓開發者可以把部分原本由 CPU 處理的工作移到 GPU。

但必須注意，WebGPU 並不保證所有 3DGS 場景都能流暢執行。

實際效能仍取決於高斯元素數量、資料格式、排序方法、顯示解析度、GPU 效能與記憶體使用量。

五、PLY 與 SPZ：為什麼資料格式很重要？

Three.js r186 的 3DGS 支援包含 PLY 與 SPZ 格式。

PLY 是廣泛應用於三維資料交換的格式，可以儲存點雲及相關屬性。

在 Gaussian Splatting 工作流程中，PLY 也常被用來保存高斯元素的相關參數。

SPZ 則是一種針對 Gaussian Splatting 資料設計的壓縮格式，目的是降低儲存與傳輸負擔。

對網頁應用而言，檔案大小尤其重要。

使用者可能透過行動網路開啟 3D 網站，因此場景下載量、載入時間與記憶體需求，都會直接影響體驗。

即使瀏覽器能夠渲染高品質 3DGS 場景，如果首次下載需要等待很長時間，仍可能不適合一般消費者網站。

因此，資料壓縮、分段載入與可見度管理，可能與渲染演算法同樣重要。

六、球面調和函數：為什麼轉動視角會看到不同顏色？

CGWORLD 提到，Three.js r186 的 GaussianSplat 支援視角相關的顏色表示，涉及 Spherical Harmonics，也就是球面調和函數。

在真實世界中，許多表面的外觀會隨觀察角度改變。

例如金屬、玻璃與具有複雜反射特性的物件，在不同視角下可能呈現不同亮度與色彩。

3DGS 可以使用球面調和係數，近似描述高斯元素隨觀察方向改變的顏色。

這有助於重建照片中具有視角依賴性的外觀。

但這種方式並不等同於完整的物理式材質與光線追蹤。

例如將掃描場景中的燈光位置完全改變，不代表原本的球面調和資料就能自動產生物理正確的新照明結果。

因此，3DGS 的高擬真外觀與可重新打光的能力，必須分開理解。

七、體積霧進入 WebGPU：瀏覽器開始處理更複雜的大氣效果

除了 3DGS，Three.js r186 也展示新的 Volumetric Fog，也就是體積霧效果。

傳統簡單霧效常依照物件與攝影機的距離，將畫面逐漸混合成霧的顏色。

這種方式計算成本較低，但很難表現真實霧氣在空間中的密度變化與深度感。

體積霧則嘗試描述霧氣存在於三維空間中的效果。

在遊戲與即時渲染中，體積霧可以增加場景深度、營造大氣透視，並讓建築、街道與自然環境具有更強烈的空間感。

根據 CGWORLD 的介紹，r186 的相關示範使用 TSL 與後處理技術，結合深度重建、Joint Bilateral Upsampling，以及 Gaussian Filtering 等方法。

這些技術的目的，是在有限的即時運算預算內，取得可接受的霧效品質。

例如先以較低解析度計算霧效，再利用深度與影像資訊進行放大，可以減少部分 GPU 工作量。

但低解析度運算也可能造成邊緣不精確、雜訊或時間性不穩定，因此需要額外的濾波與重建策略。

八、Joint Bilateral Upsampling 是什麼？

Joint Bilateral Upsampling，簡稱 JBU，是一種利用額外引導資訊改善低解析度影像放大的方法。

一般影像放大可能只考慮鄰近像素的顏色。

但在 3D 場景中，兩個螢幕上相鄰的像素，可能實際位於完全不同的深度。

例如人物站在遠方建築前方，如果直接模糊霧效，人物輪廓可能出現不自然的光暈。

JBU 可以利用深度等引導資訊，在放大低解析度霧效時，盡量保留不同物體之間的邊界。

這類技術在即時渲染中很重要，因為開發者通常需要以有限的 GPU 成本，取得接近高解析度計算的視覺品質。

Three.js 將這類技術展示於瀏覽器環境，也反映 WebGPU 渲染管線的進一步成熟。

九、逆反射材質：交通標誌與反光設備終於有更直接的表現方式

Three.js r186 也新增 Retroreflective Material，也就是逆反射材質的相關示範。

一般鏡面反射遵循入射角與反射角的幾何關係。

逆反射則具有不同特性：它能讓部分入射光沿著接近光源方向返回。

這種效果常見於道路反光標誌、交通安全背心、反光貼片及特定光學材料。

對建築視覺化與城市模擬而言，逆反射材質具有實際用途。

例如夜間道路場景中的交通標誌，可能需要根據車輛頭燈方向呈現特殊反光效果。

如果只是使用一般高亮度材質，未必能準確表現逆反射的方向性。

Three.js r186 的相關示範，讓開發者能更方便地研究這種特殊光學效果。

不過，示範材質不代表已經完整模擬所有商用反光材料的微觀結構與實測光學參數。

十、瀏覽器也能 Sculpt？WebGPU 開始承擔幾何編輯工作

另一項有趣更新，是 Mesh Sculptor 示範。

過去提到 Sculpting，3D 美術通常會想到 ZBrush、Blender 或其他桌面建模軟體。

但 Three.js r186 的 WebGPU 示範，已經可以在瀏覽器中使用滑鼠筆刷，對網格頂點進行即時變形與平滑操作。

這類功能背後需要處理筆刷範圍、頂點位移、法線更新與 GPU 資料同步。

如果場景包含大量頂點，單純依靠 JavaScript 在 CPU 端逐一修改，可能造成明顯效能壓力。

WebGPU 的 Compute Shader 能力，讓部分平行化幾何處理工作可以移至 GPU。

這不代表 Three.js 已經成為完整的 ZBrush 替代品。

專業雕刻軟體還包含多層細分、動態拓撲、遮罩、筆刷系統、材質繪製、資產管理與複雜的創作流程。

但瀏覽器能直接操作三維幾何，代表 Web 3D 工具不再只能展示模型，也開始具備更進階的內容編輯可能性。

十一、城市生成示範：Web 3D 不只是產品展示

CGWORLD 也介紹了 r186 的 Improved City Example。

這項示範利用 WebGPU 呈現程序化生成的城市場景，包含大量建築與可自由移動的探索空間。

使用者可以透過鍵盤在城市中移動，觀察建築排列與場景渲染效果。

程序化城市生成的價值，在於開發者可以透過規則建立大量具有重複結構的建築，而不必逐一手工放置每個物件。

例如道路、街廓、建築高度與外觀變化，都可以透過參數或規則產生。

這對建築展示、城市規劃、教育模擬及互動式地圖具有潛在應用價值。

不過，程序化生成示範不等於具備完整的 GIS、交通模擬或城市數位孿生系統。

要用於真實城市管理，仍需要可靠的地理資料、座標系統、更新流程與專業分析能力。

十二、WebGPU 與 WebGL 到底差在哪裡？

WebGL 讓瀏覽器能夠使用 GPU 執行 3D 圖形渲染，是現代 Web 3D 發展的重要基礎。

但 WebGL 的設計受到較早期圖形 API 架構限制，在 GPU 計算與資源管理方面存在一些不便。

WebGPU 則提供更現代化的 GPU API，支援 Compute Shader，並改善部分資源管理與命令提交方式。

這使開發者能在瀏覽器中實作更多原本偏向桌面圖形程式的技術。

例如 Gaussian Splatting 排序、複雜後處理、程序化幾何與即時網格編輯，都可能受益於 WebGPU 的運算能力。

但 WebGPU 不是讓所有程式自動變快的開關。

開發者仍需要理解 GPU 記憶體、資料傳輸、Shader、同步與效能分析。

而且不同瀏覽器、作業系統與顯示卡的 WebGPU 支援程度，也可能影響實際部署。

十三、TSL：Three.js 為什麼需要自己的 Shader 語言？

TSL 是 Three.js Shader Language。

它讓開發者透過 JavaScript 形式的節點與函式描述 Shader 邏輯，再由 Three.js 將相關內容整合至對應的渲染管線。

這種設計有助於管理不同 GPU 後端的 Shader 程式，也讓複雜材質與後處理效果更容易以模組化方式組合。

例如體積霧、特殊反射與程序化材質，都可能透過 TSL 建立可重用的運算節點。

對開發者而言，這可以減少直接維護多套不同 Shader 語言的負擔。

但 TSL 仍然需要理解 Shader 運算、資料型別與 GPU 執行模型，並不是完全不需要圖形程式知識。

十四、對 3D 美術與建築視覺化工作流程有什麼影響？

Three.js r186 最值得關注的產業方向，是讓網頁成為更完整的三維內容交付平台。

例如建築視覺化公司可以考慮將傳統 Mesh 與 3DGS 結合。

3DGS 負責呈現實際拍攝的建築環境，Mesh 則負責可互動的設計提案、家具替換與資訊標記。

這種混合式展示可以讓使用者直接透過瀏覽器查看場景，而不必先安裝大型桌面程式。

對電商而言，WebGPU 與特殊材質也可能提升產品展示的互動性。

對教育與文化保存而言，3DGS 則提供另一種呈現真實場景的方式。

但這些應用仍需要處理資料授權、場景壓縮、行動裝置效能、瀏覽器相容性與長期維護。

因此，Three.js r186 更適合被視為技術能力的擴張，而不是所有產業立即轉向 Web 3D 的證據。

十五、Three.js 能取代 Unreal Engine、Unity 或 Blender 嗎？

目前不能直接這樣判斷。

Three.js 的核心優勢，是能夠將互動式 3D 內容整合進網站，並利用既有 Web 技術建立 UI、資料交換與服務功能。

Unreal Engine 與 Unity 則提供更完整的遊戲製作環境，包括動畫系統、物理、音效、場景工具、資產管理與多平台部署。

Blender 等桌面 DCC 軟體則專注於模型製作、雕刻、動畫、UV、材質與內容創作。

Three.js r186 的更新，代表這些工具之間的部分功能邊界正在改變，但並不代表所有工作流程已經合而為一。

未來更可能出現的情況，是開發者使用不同工具製作內容，再透過 Web 3D 平台提供互動式展示。

十六、升級 r186 前，開發者需要注意什麼？

Three.js 官方 Migration Guide 列出了從 r185 升級至 r186 的相容性變化。

例如 GTAONode 的部分距離控制參數已被淘汰。

BufferGeometryUtils.toTrianglesDrawMode() 不再自動複製幾何資料，而是直接修改既有幾何的索引。

SimplifyModifier 改採基於 meshoptimizer 的新實作，而且 modify() 變成非同步操作。

此外，部分 LightProbeGrid 類別也進行重新命名，WebGPURenderer 的陰影設定則有相關變更。

因此，既有 Three.js 專案不應只修改版本號就直接上線。

尤其對使用自訂 Shader、後處理與幾何工具的網站，升級前應建立測試環境，確認渲染結果與 API 行為沒有非預期改變。

結論：Web 3D 正在從展示技術，走向創作與運算平台

Three.js r186 最值得注意的地方，是原生 3DGS、體積霧、特殊材質與網格雕刻同時出現在瀏覽器圖形生態中。

這些功能涉及不同技術領域，但都指向相同方向：瀏覽器正在取得更強大的 GPU 運算與即時渲染能力。

對 3D 美術而言，這可能讓作品展示不再侷限於預先渲染的圖片或影片。

對建築視覺化而言，真實場景掃描與互動式模型可能更容易被整合。

對 Web 開發者而言，3D 場景也可能逐漸成為一般應用程式的一部分。

Three.js r186 並沒有讓瀏覽器一夕之間變成 Unreal Engine，但它正在讓 Web 3D 從單純的模型展示，逐步走向更完整的三維互動與創作環境。

Tech English 技術名詞

• 3D Gaussian Splatting（3D 高斯潑濺）：利用大量三維高斯元素表示場景外觀的渲染與重建技術。
• WebGPU（網頁 GPU 介面）：提供現代 GPU 渲染與運算能力的瀏覽器 API。
• Volumetric Fog（體積霧）：模擬霧氣在三維空間中分布與影響畫面的渲染技術。
• Spherical Harmonics（球面調和函數）：可用於表示方向相關函數的數學工具，在 3DGS 中常用於描述視角相關顏色。
• Retroreflection（逆反射）：讓光線沿接近入射方向返回光源的特殊反射現象。
• Joint Bilateral Upsampling（聯合雙邊上採樣）：利用深度等引導資訊，改善低解析度渲染結果放大品質的方法。