Draco

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倍時間