Draco 是開源的3D 圖形壓縮，
前些陣子在處理的專案，需要用到放置3D模型，
問題來了，上百個幾千幾萬K大大小小的gltf模型，一次載入超級慢的，
公司配備電腦等級還不錯，
本機load的快，也需要大概1分鐘內時間，
但一上到客戶server之後，loding大概卡了5分多鐘吧，
不知道的還以為斷線了😂
當然跟現場的網路也有關係，但是減少loading還是有必要的，
拜訪google大神之後得到的答案，
便是 Draco 3D Data Compression
PS: 在專案內放置3D模型時，我用的是Three.js，所以範例js都會是用此，
另外如果你跟一我樣使用Windows環境，
那麼你在cmd壓縮時可能會遇到權限阻擋問題，
請記得以系統管理員身分開啟命令提示字元😎
那麼就先來說說怎麼壓縮3D模型，再提供放置範例。
3D模型壓縮及放置
1.安裝NodeJS
為了能夠使用npm指令安裝套件，在此之前你需先安裝NodeJS
2.檢查是否有npm
按理來說裝好新版NodeJs應該就有npm管理工具了，
但還是打開你的終端機輸入一下npm -v 來測試是否成功安裝
3.安裝 gltf-pipeline
輸入 npm install -g gltf-pipeline
這個就是我們拿來壓縮用的套件
4.壓縮模型檔案
為了方便，先cd到你的模型路徑下，之後只要打檔名就好😂
壓縮指令: gltf-pipeline -i 模型檔名 -o 壓縮後模型檔名 -d
壓縮範例:
單一壓縮 gltf-pipeline -i A-1.gltf -o A-1_drc.gltf -d
批次壓縮 for %i in ('dir *.gltf ') do gltf-pipeline -i %i -o %~ni_drc.gltf -d
PS: 有很多種模型格式支援，但由於我的專案需要，範例會是gltf to gltf
5.檢查壓縮過的模型
看到沒有這個壓縮後的檔案大小，
這當然視模型的貼圖材質而定壓縮比例不同，
但壓縮率實在是很高
6.Three.js讀取壓縮過的模型
//加載GLTF 模型需要的js
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
//加載解碼需要的js
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
//建立解碼加載器
let dacLoader = new DRACOLoader();
/*
* https://www.gstatic.com/draco/v1/decoders/
* 為解碼器源碼目錄,
* 如果有下載就可以使用第二種自己指定路徑主要是這三隻需要存在
* draco_decoder.js— Emscripten 編譯的解碼器，兼容任何現代瀏覽器。
* draco_decoder.wasm— WebAssembly 解碼器，兼容較新的瀏覽器和設備。
* draco_wasm_wrapper.js— WASM 解碼器的 JavaScript 包裝器。
*/
dacLoader.setDecoderPath('https://www.gstatic.com/draco/v1/decoders/');
//dacLoader.setDecoderPath('/draco/');
//建立模型加載器
const loader = new GLTFLoader();
loader.setDRACOLoader(dacLoader);
loader.load('/model/A-1_drc.gltf',
(gltf) => {
this.scene.add(gltf.scene);
});
優缺點
- 很明白的檔案大小差異非常大
- 壓縮過的檔案增加了解碼時間，如果你本身檔案很小就沒必要用此方式
- 跟壓縮圖片一樣，模型有機會有失真問題
- 實測專案本頁讀取速度在本機直接剩下10-20秒，客戶端server約1分鐘內，比原本少了5倍時間
雖然縮短了很多的時間，但客戶還是說好慢，
畢竟還是花了1分鐘左右在載入網頁，
對使用者體驗來說，還是有差，
後來採用的方式除了壓縮之外，也減少初次載入模型量，
需要查看再自行開啟載入其他項目。
此專案的模型原始總檔案大小約1G多，
3D繪圖本身就很消耗資源，
所以無可避免需要找各種方式減少loading，
總之3D模型很多奇妙的坑，但也造就很多網站新的呈現方式，
非常有趣 😂😂😂
繼續往新世界前進吧~~
