3D性能優化 | 說一說glTF文件壓縮

時間 2021-08-12

標籤 javascript java android ios git github web 算法性能優化網絡欄目系統性能简体版

原文原文鏈接

引言

最近作T級互動，須要使用到3D模型。相信你們和我同樣，在開始着手的時候，必定會有這麼些問題：javascript

1.如何選擇3D模型的導出格式
2.如何對模型文件進行優化
3.在大流量的項目中兼容性怎麼樣

讓咱們經過這篇文章，進行細緻的探索、調研與沉澱。java

1、什麼是 glTF 文件

glTF 全稱 Graphics Language Transmission Format，是三維場景和模型的標準文件格式。android

glTF 核心是 JSON 文件，描述了 3D 場景的整個內容。它由場景結構自己的描述組成，其由定義場景圖的節點的層次提供。ios

場景中出現的 3D 對象是使用鏈接到節點的 meshes(網格)定義的。Materials(材料)定義對象的外觀。Animations(動畫)描述 3D 對象如何隨着時間的推移轉換 3D 對象，而且 Skins(蒙皮)定義了對物體的幾何形狀的方式基於骨架姿式變形。Cameras(相機)描述了渲染器的視圖配置。git

除此之外，它還包括了帶有二進制數據和圖像文件的連接，以下圖所示。github

2、.gltf 與.glb

從 blender 文件導出中能夠看出：
web

glTF 文件有兩種拓展形式，.gltf（JSON / ASCII）或.glb（二進制）。.gltf 文件多是自包含的，也可能引用外部二進制和紋理資源，而 .glb 文件則是徹底自包含的（但使用外部工具能夠將其緩衝區/紋理保存爲嵌入或單獨的文件，後面會提到）。算法

2.1 .glb文件產生緣由

glTF 提供了兩個也能夠一塊兒使用的交付選項：性能優化

glTF JSON 指向外部二進制數據（幾何、關鍵幀、皮膚）和圖像。
glTF JSON 嵌入 base64 編碼的二進制數據，並使用數據 URI 內聯圖像。

對於這些資源，因爲 base64 編碼，glTF 須要單獨的請求或額外的空間。Base64 編碼須要額外的處理來解碼並增長文件大小（編碼資源增長約 33%）。雖然 gzip 減輕了文件大小的增長，但解壓縮和解碼仍然會增長大量的加載時間。網絡

爲了解決這個問題，引入了一種容器格式 Binary glTF。在二進制 glTF 中，glTF 資產（JSON、.bin 和圖像）能夠存儲在二進制 blob 中，就是.glb 文件。

2.2 文件對比

2.2.1 同一個glTF文件，.glb格式要比.gltf小

自包含的：

引用外部二進制和紋理資源的：

2.2.2 .gltf文件預覽：

自包含的：

引用外部二進制和紋理資源：

2.2.3 glb文件預覽：

自包含的：

引用外部二進制和紋理資源：

從圖中能夠看到，當非自包含型的時候，請求glTF文件時，會一同請求圖片文件。

那麼，咱們就能夠利用這個特性，就能夠實現一些性能優化，讓咱們往下繼續。

3、glTF 文件拆分

上文提到，glTF文件能夠拆分爲.gltf/.glb文件+二進制文件+紋理圖片，那麼，咱們就能夠將其拆分出來，並對紋理圖片進行單獨的壓縮，來進行性能的優化。

可使用gltf pipeLine ，其具備如下功能：

glTF 與 glb 的相互轉換
將緩衝區/紋理保存爲嵌入或單獨的文件
將 glTF 1.0 模型轉換爲 glTF 2.0(使用KHR_techniques_webgl和KHR_blend)
使用 Draco 進行網格壓縮

在這裏，咱們是要使用「將緩衝區/紋理保存爲嵌入或單獨的文件」這個功能。

讓咱們來看看拆分出來的文件

再回顧一下，.glb文件是這麼引入外部單獨的紋理與二進制文件的

因此，只要將拆分出來的這幾個文件，放入同一個路徑中，而後像以前那樣引入就行了。

壓縮方式

gltf-pipeline -i male.glb -o male-processed.glb -s

使用方式（在 Three.js 中）
普普統統地用就行了，和不拆分的沒什麼區別

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'

const loader = new GLTFLoader()
loader.load(MODEL_FILE_PATH, (gltf) => {
 // ....
})

性能對比

4、glTF 文件壓縮

如上面介紹，glTF 文件包括.gltf/.glb 文件、.bin 文件以及紋理資源。glTF2.0 相關的插件主要有如下：

那麼咱們從中取一些來分析一下。

4.1 網格壓縮

4.1.1 KHR_draco_mesh_compression

最常見的一種網格壓縮方式，採用開源的Draco算法，用於壓縮和解壓縮3D 網格和點雲，而且可能會改變網格中頂點的順序和數量。壓縮的使文件小得多，可是在客戶端設備上須要額外的解碼時間。

壓縮方式

可使用gltf-pipelinegltf 文件優化工具進行壓縮

gltf-pipeline -i male.glb -o male-processed.glb -d

使用方式（在 Three.js 中）

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'

const loader = new GLTFLoader()

// 建立解碼器實例
const dracoLoader = new DRACOLoader()
// 設置解壓庫文件路徑
dracoLoader.setDecoderPath(DECODER_PATH)
// 加載解碼器實例
loader.setDRACOLoader(dracoLoader)

loader.load(MODEL_FILE_PATH, (gltf) => {
 // ....
})

性能分析對比

這個 glb 文件原大小爲 3.2M，draco 壓縮後爲 1.8M，約爲原文件的56%。

從上面的代碼中能夠看出，建立解碼器實例須要引入額外的庫來進行解碼，setDecoderPath會自動請求 wasm 文件來進行解密操做。而這兩個 wasm 文件同時也增長了請求時間和請求數量，那麼加上這兩個文件，真實的壓縮率約爲62.5%。

因此，若是一個項目須要加載多個 glTF 文件，那麼能夠建立一個 DRACOLoader 實例並重復使用它。但若是項目只須要加載一個 glTF 文件，那麼使用 draco 算法是否具備「性價比」就值得考量了。

用 demo 進行一下性能對比：

可見 draco 算法首次加載和解密時間，要大於原文件。而在實際項目中，這個差距更加明顯，而且偶爾會出現解密堵塞的狀況，須要從新進入頁面才能恢復功能。

除此之外，還有一個很直觀的問題，模型畫質的損失是肉眼可觀的。

如圖，分別是在 iPhone 12 和小米 MIX2 中的樣子：

總而言之，若是要將 draco 壓縮算法運用到大規模項目中，須要結合實際項目進行如下對比：

(1) 請求兩個文件+解密耗時，與自己 glb 文件壓縮後的體積大小相比，真實性能對比；
(2) 畫質是否會出現設計師沒法接受的損失。

4.1.2 KHR_mesh_quantization

頂點屬性一般使用FLOAT類型存儲，將原始始浮點值轉換爲16位或8位存儲以適應統一的3D或2D網格，也就是咱們所說的quantization向量化，該插件主要就是將其向量化。

例如，靜態 PBR-ready 網格一般須要每一個頂點POSITION（12 字節）、TEXCOORD（8 字節）、NORMAL（12 字節）和TANGENT（16 字節），總共 48 字節。經過此擴展，能夠用於SHORT存儲位置和紋理座標數據（分別爲 8 和 4 字節）以及BYTE存儲法線和切線數據（各 4 字節），每一個頂點總共 20 字節。

壓縮方式

可使用gltfpack工具進行壓縮

gltfpack -i male.glb -o male-processed.glb

使用方式（在 Three.js 中）

普普統統地用就行了，和不壓縮的沒什麼區別

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'

const loader = new GLTFLoader()
loader.load(MODEL_FILE_PATH, (gltf) => {
 // ....
})

性能對比

原文件3.2M，壓縮後1.9M，爲原文件的59.3%，比原模型加載速度也快上很多。
放到實際項目中，沒有畫質損失和加載時間過長的問題。

4.1.3 EXT_meshopt_compression

此插件假定緩衝區視圖數據針對 GPU 效率進行了優化——使用量化並使用最佳數據順序進行 GPU 渲染——並在 bufferView 數據之上提供一個壓縮層。每一個 bufferView 都是獨立壓縮的，這容許加載器最大程度地將數據直接解壓縮到 GPU 存儲中。

除了優化壓縮率以外，壓縮格式還具備兩個特性——很是快速的解碼（使用 WebAssembly SIMD，解碼器在現代桌面硬件上以約 1 GB/秒的速度運行），以及與通用壓縮兼容的字節存儲。也就是說，不是儘量地減小編碼大小，而是以通用壓縮器能夠進一步壓縮它的方式構建比特流。

壓縮方式

可使用gltfpack工具進行壓縮

gltfpack -i male.glb -o male-processed.glb -cc

使用方式（在 Three.js 中）

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { MeshoptDecoder } from 'three/examples/jsm/libs/meshopt_decoder.module.js'

const loader = new GLTFLoader()
loader.setMeshoptDecoder(MeshoptDecoder)
loader.load(MODEL_FILE_PATH, (gltf) => {
 // ....
})