3D模型文件GLB在线压缩实战指南：从原理到最佳实践

1次阅读

没有评论

共计 2237 个字符，预计需要花费 6 分钟才能阅读完成。

当你在网页中加载 3D 模型时，GLB 文件体积过大会带来两个明显问题：

加载速度慢 ：用户需要等待更长时间才能看到完整模型，影响体验
带宽成本高 ：对于流量计费的移动用户特别不友好

以一个中等复杂度的模型为例，原始 GLB 文件可能达到 20-30MB，经过合理压缩后可以缩小到 5 -8MB，这意味着一键操作就能节省 75% 的流量消耗。

目前 Web 端主流的 GLB 压缩方案有三种：

Draco 压缩
压缩率：★★★★☆（通常 60-80%）
解码性能：★★★☆☆（需要 WASM 支持）
兼容性：Chrome/Firefox/Edge 全支持，Safari 需要 iOS 13+
Meshopt 压缩
压缩率：★★★☆☆（通常 40-60%）
解码性能：★★★★★（纯 JS 实现）
兼容性：全平台支持
BasisU 纹理压缩
专攻纹理压缩
需要配合其他几何体压缩方案使用

对于大多数项目，我推荐 Draco 方案，因为它在压缩率和兼容性之间取得了最佳平衡。下面是具体实现方法。

首先安装必要依赖：

npm install three @types/three three-mesh-bvh draco3dgltf

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

// 初始化加载器
const gltfLoader = new GLTFLoader();
const dracoLoader = new DRACOLoader();

dracoLoader.setDecoderPath('https://www.gstatic.com/draco/v1/decoders/');
dracoLoader.setDecoderConfig({type: 'js'}); // 使用 JS 解码器兼容性更好
gltfLoader.setDRACOLoader(dracoLoader);

// 加载模型
function loadCompressedModel(url: string) {return new Promise((resolve, reject) => {
    gltfLoader.load(
      url,
      (gltf) => resolve(gltf),
      (progress) => console.log(` 加载进度: ${progress.loaded / progress.total * 100}%`),
      (error) => reject(error)
    );
  });
}

// 使用示例
const model = await loadCompressedModel('compressed.glb');

为了避免解码阻塞主线程，我们可以将 Draco 解码移到 Worker 中：

// worker.js
importScripts('https://www.gstatic.com/draco/v1/decoders/draco_decoder.js');

self.onmessage = async (e) => {const { arrayBuffer} = e.data;
  const decoderModule = await createDecoderModule();
  // 执行解码操作...
  self.postMessage({decodedData});
};

// 主线程
const worker = new Worker('worker.js');
worker.postMessage({arrayBuffer: fileData});

测试环境：MacBook Pro M1, Chrome 114

模型复杂度	原始大小	压缩后	解码耗时	内存峰值
低 (5K 面)	2.4MB	0.8MB	120ms	45MB
中 (50K 面)	18MB	5.2MB	400ms	120MB
高 (200K 面)	75MB	22MB	1.2s	350MB

WASM 加载失败

dracoLoader.setDecoderConfig({type: 'js' // 回退到 JS 解码器});

iOS 兼容性问题
确保使用 Draco 1.5.0+ 版本

在 Safari 中需要显式启用 WASM：

<script src="draco_wasm_wrapper.js"></script>

法线信息保留
在导出 GLB 时，确保勾选 ” 保留法线 ” 选项，或在 Three.js 中手动计算：
```
model.traverse((child) => {if (child.isMesh) {child.geometry.computeVertexNormals();
  }
});
```