U4模型解壓縮，專註解壓3D模型（上）

來自專欄 UC 內核發布

前言

業務上使用3D模型的場景越來越多，既然你點進來看，那就意味著你的業務中有用到3D模型。使用3D模型的收益你也一定比我更了解，而且，你也肯定碰到過這樣的問題，3D模型尺寸太大。呃，資源過大大概是最讓我們頭疼的事情了。做客戶端的，APP尺寸大用戶不願意下載，所以我們去做裁剪，裁剪掉不需要的功能。做頁面的，頁面尺寸大用戶耗流量顯示時間變久，同時你還要考慮伺服器帶寬成本，因此我們會優化資源。如果是圖片資源，你可以用webp格式代替，如果是動畫資源，例如GIF圖片，你可以用APNG格式代替（廣告鏈接），如果是3D模型，而你們恰好又想用壓縮模型來解決模型尺寸問題，那麼請你繼續閱讀本文。

文章會分為上下兩篇，上篇主要介紹DRACO項目，以及如何在你的項目中快速上線DRACO。下篇主要介紹集成並優化解壓縮方案的U4內核在載入3D模型時的巨大優勢。

DRACO介紹

閱讀本章節可以幫助你了解DRACO項目是什麼，它的原理以及特點。

draco是由 google推出的開源演算法，目的是大幅加速 3D 數據的編碼、傳輸和解碼。

代碼地址：https://github.com/google/draco

一個3D模型會包含一個或則多個mesh數據或是點雲數據（point cloud），這類數據通常在一個3D模型size中佔大頭，甚至在沒有貼圖和動畫的模型中幾乎是佔比100%。

而DRACO則就是專門針對3D模型中的mesh數據或點雲數據進行壓縮的，經過DRACO壓縮後的模型size可以大幅減少。另外，雖然本文主要介紹的是DRACO壓縮模型在web上的應用，實際上DRACO還提供了C++的解壓縮方案，如果這項技術對你的應用有益，你還可以將解壓縮庫集成到你的應用中，這樣可以大大減少應用包的尺寸。

以下對比圖表來自官網

模型壓縮方案對比圖

模型解壓縮方案時間對比圖

不同壓縮比對應的包尺寸與解碼時間曲線圖

DRACO的編譯與使用

閱讀本章節可以幫助你了解如何使用DRACO工具進行模型壓縮，以及如何使用three.js渲染壓縮後的模型。本文中使用的DRACO版本為1.3.1。

實驗結論

1.壓縮後的模型在網路傳輸上有絕對優勢

2.壓縮後的模型的載入時間略大於未壓縮的模型

實驗數據

1.基本環境

手機使用了Mate9，瀏覽器使用了最新U4內核的UC瀏覽器，實驗環境為wifi。

統計中尺寸單位為byte，時間單位為ms。

2.數據對比

模型數據（模型使用的是threejs官網代碼中ply模型渲染案例中的資源）

在three.js中，由於DRACO loader的用法跟PLY loader的用法一致，因此測試頁面中的統計時間打點位置也相同。

var loader = new THREE.PLYLoader();start = performance.now();loader.load( url, function ( geometry ) { end = performance.now();});

var loader = new THREE.DRACOLoader();start = performance.now();loader.load( url, function ( geometry ) { end = performance.now();});

下表是統計十次的結果：

通過上表可以看出，在wifi的環境下，DRACO壓縮模型的載入時間對比無壓縮的原始模型的載入時間毫無優勢。但是打開DRACO的調試信息，會發現實際模型載入，解碼的時間之和遠遠小於模型載入時間，實際測試數據如下表所示

原因在於，DracoLoader中使用的解碼庫是實時動態載入的，每解碼一個模型都需要重新載入JS解碼庫。代碼如下：

使用JavaScript解碼，需要載入draco_decoder.js，消耗時間約為1000ms。使用webasm解碼，需要載入draco_decoder.wasm和draco_wasm_wrapper.js，消耗時間約為1500ms。結論，如果使用webasm解碼方案，且優化載入webasm解碼庫的時間，那麼基於DRACO的方案不但在網路傳輸上有優勢，而且壓縮模型的整體載入時間（載入+解碼）也要小於原始模型載入時間。

搭建環境

1.克隆代碼倉庫

git clone https://github.com/google/draco.git

2.生成Makefile

camke path/to/draco

例如我的代碼在~/workspace/tmp/DRACO/DRACO-master/目錄下

則在~/workspace/tmp/DRACO/目錄執行

cmake DRACO-master

執行完畢後DRACO目錄如下

3.編譯

make -j32

接上例，在~/workspace/tmp/DRACO/目錄執行

make -j32

執行完畢後DRACO目錄如下

DRACO目錄下多了兩個可執行文件draco_decoder和draco_encoder，以及3個DRACO的靜態庫

4.壓縮模型

DRACO項目目前支持ply和obj格式模型的壓縮。渲染引擎方面，threejs的官方庫已經內嵌了DRACO（js庫）。

下面用threejs官方代碼中的ply模型做壓縮測試。選用的模型是Lucy100k.ply（路徑：three.js-master/examples/models/ply/binary/Lucy100k.ply）

可以看到，即使不用任何優化的壓縮方案，DRACO一樣可以將1900k的原始模型壓縮到144k，壓縮後的模型只有原模型體積的7.7%，壓縮效果十分可觀。

5.壓縮模型渲染

環境準備：

1. 從threejs獲取最新代碼庫（https://threejs.org/）
2. 解壓部署到自己的伺服器
3. 使用上文介紹的方法壓縮模型並放到指定的路徑下（路徑：three.js-master/examples/models/ply/binary/）
4. 將DRACO官方庫中的draco_decode.js，draco_wasm_wrapper.js，draco_decoder.wasm替換threejs代碼庫的原有版本（防止解碼庫與壓縮庫的版本一致引發的解碼失敗）
5. 修改測試頁面

代碼修改：

1. 找到文件webgl_loader_ply.html
2. 增加引用DRACOLOader.js（<script src="js/loaders/DRACOLoader.js"></script>）
3. 修改代碼

左側是修改後可以載入壓縮模型的代碼，右側是原始可以載入ply原始模型的代碼。原始代碼使用的是PLYLoader，在這裡我們替換成DRALoader，另外還需要對DRACOLoader進行一些初始化的設置。注意，這裡setDecoderConfig設置了使用JavaScript解壓縮，如果沒有這個配置，且內核支持webasm，則默認使用webasm解壓縮。

修改之後就可以載入頁面看到效果了。