選單

Threejs+Blender中對GLTF模型的最佳化處理

已經將近一個月沒有更新公眾號,7月份過的比較混亂,早上起來也沒有堅持建模,粉絲掉了不少,就當給自己放一個月假吧。從8月份開始,要繼續日更文章了,而且會越來越有深度,就從這篇文章開始。

先分享一個下載模型的網站https://sketchfab。com,裡面提供了大量的可以購買和免費下載的模型,可以選各種格式,通常用GLTF模型就足夠了,然後匯入到Blender軟體中,這也是本篇要講的內容。

通常從模型網站上直接下載的模型都非常大,有很多網格和材質,載入到網頁尤其是移動端非常卡頓,所以要想辦法減少網格和材質。

首先,我下載了一個gltf格式的城堡模型(https://sketchfab。com/3d-models/issum-the-town-on-capital-isle-e433923a64d549fabb2d30635d643ab6),並將其倒入到Blender

Threejs+Blender中對GLTF模型的最佳化處理

1。 我們要做的第一件事情是找到不在視野中的網格,並清理掉。所以先將島下面的石頭刪掉。還有一些不需要的網格,這樣網格的總數由638下降到614。

2。 按材質合併。在Blender中我們看到很多物件都有相同的材質(紋理/顏色/光澤等)。

Threejs+Blender中對GLTF模型的最佳化處理

當我們選中燈塔的時候,看到右邊材質部分顯示相同材質的數字 119 ,說明有119個元件都在使用相同的材質。

所以這裡的一個技巧:將使用該材質的大多數網格合併到一個大的網格中。我們在物件模式下如下選擇:

Threejs+Blender中對GLTF模型的最佳化處理

這樣,所有具有同樣材質的網格都被選中了。然後點選物體-合併。

將其他同樣材質的網格都同樣處理,最終網格剩下53個了。這是一個巨大的變化。如果想要某個網格單獨做動畫,我們可以將其分開(在編輯模式下,選單-> -> )。

3。 減少材質的數量

Threejs+Blender中對GLTF模型的最佳化處理

將多個紋理材質透過texturepacker軟體合併到一個大的紋理圖片中。然後放在Blender的UV 編輯器中,選中某個物件進入編輯模式,對材質進行縮放和移動。

這樣。元件的數減少到34了。

4。 背面剔除

在材質設定的時候,選擇背面剔除

Threejs+Blender中對GLTF模型的最佳化處理

5。 改善載入時間

我們看一下匯出的檔案目錄:

這就用到了強大的Draco壓縮工具。有兩種方法,一種是用Blender匯出的時候好選擇壓縮,另一個是使用命令列工具。

載入的時候需要用到解壓庫。

6。 影象最佳化

最後的處理結果:

Threejs+Blender中對GLTF模型的最佳化處理

這已經很棒了。