朋友們，還記得 QQ 20 周年 H5 中可可愛愛的太空鵝嗎？

為了實現旋轉和換膚功能，在 H5 中我們隨機展示了5種類型的 3D 太空鵝模型，如下圖所示：

但是在 H5 中引入 3D 模型往往存在資源太大、性能損耗嚴重、還原不真實的問題，這也讓許多 3D 創(chuàng)意止步于開發(fā)階段。

如何更好地在 H5 中還原模型呢？本文將從模型網格和貼圖文件兩方面分析，介紹幾種通過技術角度優(yōu)化加載速度和提高渲染性能的途徑，在保證 3D 模型不減面，貼圖不縮小的情況下，將模型精致地還原在 H5 或其他應用程序中。

模型網格壓縮

首先是分析模型網格，對于大型 3D 資源，我們一般會通過在模型設計時進行「減面」來減少模型幾何體的大小，但也會帶來模型精致度的缺失。如下圖所示：

而通過 glTF 配合 Draco 壓縮的方式，可以在視覺效果近乎一致的情況下，讓3D模型文件成倍縮小。下面具體介紹 glTF 格式及 Draco 壓縮工具。

1. 將模型導出為 glTF 格式

glTF 介紹

glTF 稱為「 3D 界的 JPEG」，使用了更優(yōu)的數據結構，為應用程序實時渲染而生。glTF 有以下幾大特點：

• 由現有 OpenGL 的維護組織 Khronos 推出，目的就是為了統(tǒng)一用于應用程序渲染的 3D 格式，更適用于基于 OpenGL 的引擎；
• 減少了 3D 格式中除了與渲染無關的冗余信息，最小化 3D 文件資源；
• 優(yōu)化了應用程序讀取效率和和減少渲染模型的運行時間；
• 支持 3D 模型幾何體、材質、動畫及場景、攝影機等信息。

glTF 導出格式有兩種后綴格式可供選擇：.gltf 和 .glb：

• ?.gltf 文件導出時一般會輸出兩種文件類型，一是 .bin 文件，以二進制流的方式存儲頂點坐標、頂點法線坐標和貼圖紋理坐標、貼圖信息等模型基本數據信息；二是 .gltf 文件，本質是 json 文件，記錄對bin文件中模型頂點基本數據的索引、材質索引等信息，方便編輯，可讀性較好；
• ?.glb 文件格式只導出一個 .glb 文件，將所有數據都輸出為二進制流，通常來說會更小一點，若不關心模型內的具體數據可直接選擇此類型。

glTF 轉換

目前有些建模工具還不具備導出 glTF 格式功能，可以輸出 FBX / Collada 格式后通過以下工具進行轉換：

FBX 轉 glTF

• ?Facebook 推出的 FBX2glTF 命令行工具，可直接從 github 官網下載 release 版本；
• ?通過 Paint 3D、Substance Painter 等可視化編輯工具進行轉換。

Collada 轉 glTF

COLLADA2GLTF 命令行工具，可轉換 .dae 格式的文件，從 GitHub 官網直接下載 release 版本，解壓后在命令行進入目錄即可調用。

glTF 查看

轉換后可通過以下查看工具查看 glTF 資源：

• Windows 10 及以上自帶的 3D Paints；
• glTF 在線查看器：https://gltf-viewer.donmccurdy.com；
• 對于開發(fā)者，可直接使用 VSCode 插件—— glTF Tools。

2. 通過 Draco 進行壓縮

Draco 及 gltf-pipeline 介紹

Draco 是 Google 推出的一個用于 3D 模型壓縮和解壓縮的工具庫，上述介紹的 FBX2glTF 及 COLLADA2GLTF 工具也嵌入了 Draco 壓縮功能，除此之外，glTF 資源可通過基于 Draco 開發(fā)的命令行工具 gltf-pipeline 進行編碼壓縮，gltf-pipeline 可通過 npm 的方式安裝使用。使用方法如下：

#全局安裝

npm install -g gltf-pipeline

#壓縮glb文件 -b表示輸出glb格式，-d表示壓縮

gltf-pipeline -i model.glb -b -d

#壓縮glb文件并將紋理圖片分離出來

gltf-pipeline -i model.glb -b -d -t

#更多參數查閱

gltf-pipeline -h

Draco 壓縮分析

通過 Draco 進行壓縮基本上是有損的，有兩點表現：

• Draco 通過 Edge breaker 3D 壓縮算法改變了模型的網格數據的索引方法，缺少了原來的網格順序；
• Draco 通過減少頂點坐標、頂點紋理坐標等信息的位數，以減少數據的存儲量。

但在 gltf-pipeline 或其他壓縮工具中，壓縮程度可通過設置參數進行調整，如下所示：

當 --draco.compressionLevel 為0時，將保留原來的網格順序，網格數據索引的壓縮力度最小，--draco.quantizeXXXBits 可控制坐標等基本數據值的位數，位數越少壓縮力度越大。由于一個三角形網格對應多個頂點坐標、頂點法線坐標、顏色坐標等數據，一般來說 --draco.quantizeXXXBits 對文件的大小影響會更大。

若不設置參數，gltf-pipeline 會直接以默認值壓縮。

雖說 Draco 是有損的，但相對于直接為模型減面來說，采用 Draco 壓縮方法視覺偏差會小很多。

壓縮后的 glTF 模型需要通過在應用中嵌入 Draco 解碼工具包，主要是對 edge breaker 算法部分進行解碼，解碼時間一般比編碼時間少，但必須考量模型與工具包的大小對比。例如 ThreeJS 提供了 draco_decoder 模塊進行解碼，draco_decoder 約600KB，若模型資源文件比工具包還小，就沒有必要再引入 Draco 壓縮了。

3. 效果測試

我們以太空鵝模型為例，只加載模型幾何體，不帶入材質屬性，通過ThreeJS 分別加載 FBX / glTF / 壓縮后的glTF 的格式，第三種格式以默認參數壓縮。測試效果對比如下：

從圖中可以看出，文件從 FBX 轉換為 glTF 后大小差異不大，但是渲染速度有了明顯提升。

另外經過壓縮的 glTF 文件僅為正常 FBX 和 glTF 文件的1/10左右，而在視覺上三者幾何體結構沒有明顯的差異，壓縮后的 glTF 開啟了 worker 線程做 Draco 解碼，多了一小部分模型解碼時間。

模型貼圖優(yōu)化

上述描述的模型壓縮只針對模型網格數據，不會對 glTF 文件里的貼圖進行處理。然而很多時候貼圖文件往往大于模型。此時則需要將模型和貼圖分開進行處理（建模時分開輸出一個打好 UVtag 紋理坐標的「白?！购托枰玫降募y理貼圖）。下面介紹如何優(yōu)化用于應用程序渲染的貼圖文件。

1. 貼圖加載過程分析

以一個基于物理引擎渲染的電視機 Demo 模型為例，一般會輸出幾種尺寸較大的貼圖文件：顏色貼圖，法線貼圖，金屬粗糙貼圖，如下圖例子所示：

輸出貼圖一般為 png 格式，許多同學會通過壓縮 png 或者將 png 轉成 jpg 格式減少紋理大小，其實這種處理方式只優(yōu)化了圖片加載速度，加載完畢后，png/jpg 仍需要全部轉碼為紋理(texture)才能開始渲染，而具有相同尺寸的貼圖紋理 GPU 占用內存大小相同，故壓縮后的 png/jpg 對于渲染過程并沒有優(yōu)化。

慶幸的是許多設備都有可直接用于渲染的 GPU 壓縮紋理(compress texture)格式，壓縮紋理可比由 png 直接轉換的紋理減少5倍或以上的大小。如果直接提供壓縮紋理格式，則不需要進行 png 的轉碼過程且可大大減少紋理內存。如下圖方案2所示：

但由于 GPU 芯片提供商太多，設備的壓縮紋理格式多種多樣（例如安卓設備常用格式是 ETC1/ETC2，蘋果設備是 PVRTC…），手動輸出多種格式代價大，導致方案2較難落地。

2. Basis Universal 壓縮

轉折點在于今年五月份，Binomial 公司推出了 Basis Universal 壓縮 GPU 紋理技術，Basis Universal 支持多種常用的壓縮紋理格式，將 png 轉換為 basis 文件后，大小與 jpg 格式差不多，但在 GPU 上比 png/jpg 小6-8倍。

應用程序加載 basis 文件后，可通過 basis 轉碼器快速轉換成適用于設備的壓縮紋理格式。如下圖(圖片來自Google Blog)所示：

Basis 用法也比較簡單，可通過 basisu 命令行工具壓縮 png，直接從 github 官網下載Release版本或者通過 CMake 編譯源碼，以 Mac 系統(tǒng)為例（Windows 系統(tǒng)將命令改為 basis.exe），列舉幾種常用用法：

# 進入執(zhí)行目錄

cd bin-osx

# 將.png格式轉為 .basis

./basisu xxx.png

# 針對法線/金屬/粗糙貼圖等linear顏色空間的貼圖 需加上-linear

./basisu xxx.png -linear

# 最大限度保證圖片質量的轉換

./basisu xxx.png -comp_level 5 -max_endpoints 16128 -max_selectors 16128 -no_selector_rdo

# 最大限度壓縮linear顏色空間的貼圖

./basisu xxx.png -linear -global_sel_pal -no_hybrid_sel_cb

生成的 .basis 文件需要在程序中通過轉碼器轉成設備的壓縮紋理格式，例如在ThreeJS 中可通過 basisTextureLoader 轉換，具體用法可查閱 ThreeJS 官網 。

3. 效果測試

為了數據更加明顯，我們在Mac Chrome 瀏覽器performance模式下，針對同一個電視機模型利用 ThreeJS 各自加載了 4096 x 4096 大小的顏色貼圖、法線貼圖、金屬與粗糙貼圖，對比如下：

由上圖使用 basis 貼圖資源文件大小比 png 減少了11倍以上，同時主線程的腳本時間和繪制時間花銷也小于 png/jpg 貼圖。

需要注意的是，同樣由于不同的壓縮紋理格式不同，在 basis 文件一致的情況下，不同設備的渲染表現可能會出現不一致，需要進行多端測試，且目前部分格式不支持 alpha 通道，帶半透明的顏色貼圖若不生效可考慮單獨拆出 alpha 貼圖。

展望

除了基于 webGL 的 H5，glTF 與 Basis 亦可用于其它基于 OpenGL 渲染的應用程序。值得期待的是，目前 Google 與 Binomial 公司正在推進 Basis Universal 與 glTF 3D 傳輸標準的合作，或許在不久的將來就可以迎來結合了 basis 貼圖的 glTF 格式，不需要做另外的處理可以直接導入模型到應用程序中。

除了壓縮3D 模型，平時設計師還可以利用這個網站壓縮圖片：

參考資料

• https://spin.atomicobject.com/2018/09/30/compress-3d-files-draco/
• https://neil3d.github.io/3dengine/gltf-mesh.html
• https://github.com/google/draco
• https://www.ece.uvic.ca/~frodo/publications/yuetang_meng_project_slides.pdf
• https://developers.facebook.com/docs/sharing/3d-posts/glb-tutorials
• https://github.com/AnalyticalGraphicsInc/gltf-pipeline
• https://www.khronos.org/gltf/
• https://news.ycombinator.com/item?id=19986749
• https://github.com/BinomialLLC/basis_universal
• https://www.khronos.org/blog/google-and-binomial-contribute-basis-universal-texture-format-to-khronos-gltf-3d-transmission-open-standard

歡迎關注「騰訊ISUX」的公眾號：