Cesium实战：如何高效加载Draco压缩的3D模型

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

为什么需要 Draco 压缩？

在 WebGL 应用中，一个未经压缩的 100MB 建筑物 glTF 模型可能导致：

• 页面加载时间超过 30 秒（取决于网络环境）
• GPU 内存占用飙升到原始文件的 3 - 4 倍
• 移动端设备直接崩溃或严重卡顿

根据 Three.js 官方测试数据，Draco 压缩可减少模型体积 70%-95%，同时解析耗时仅增加 15%-30%。

glTF 与 Draco 技术对比

glTF 的特点

• 标准 Web 3D 模型格式，支持 PBR 材质
• 未压缩时采用 JSON+ 二进制混合存储
• 顶点数据以原始精度存储（float32）

Draco 的优势

1. 几何压缩：通过熵编码和拓扑预测算法，将顶点坐标压缩为 int16 精度
2. 属性量化：可自定义法线、UV 等属性的存储位数
3. 硬件加速：现代浏览器均支持 WebAssembly 版的解码器

完整实现流程

步骤 1：模型压缩

使用官方 gltf-pipeline 工具进行压缩（需先安装 Node.js）：

npx gltf-pipeline -i input.glb -o output.glb --draco.compressionLevel 7 \
--draco.quantizePositionBits 14 \
--draco.quantizeNormalBits 10

参数说明：

• compressionLevel：1-10，数值越高压缩率越大（但解码越慢）
• quantizePositionBits：顶点坐标位数，建议 12-16
• quantizeNormalBits：法线向量位数，通常 8 -12 足够

步骤 2：Cesium 加载配置

// 初始化 Viewer 时配置 Draco 解码器
const viewer = new Cesium.Viewer('cesiumContainer', {terrainProvider: Cesium.createWorldTerrain(),
  // 关键配置：指定解码器路径
  gltf: {
    decompressMeshes: true,
    enableModelExperimental: true,
    DracoPath: 'https://cdn.jsdelivr.net/npm/cesium@1.95/Build/Workers'
  }
});

// 加载模型示例
async function loadModel() {
  try {
    const entity = viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(116.4, 39.9),
      model: {
        uri: './models/compressed.glb',
        // 开启渐进式加载
        incrementalLoad: true,
        // 内存控制（单位 MB）maximumMemoryUsage: 512
      }
    });
    viewer.trackedEntity = entity;
  } catch (err) {console.error('模型加载失败:', err);
    // 回退到未压缩版本
    fallbackToUncompressed();}
}

性能对比数据

避坑指南

WebWorker 线程配置

• 推荐设置 2 - 4 个 Worker（过多会竞争 CPU 资源）
• 在 HTML 中预加载解码器：

<script src="https://cdn.jsdelivr.net/npm/cesium@1.95/Build/Workers/draco_wasm_wrapper.js"></script>

渐进式加载技巧

1. 先加载 LOD 最低层级的模型
2. 通过 model.readyPromise.then 检测加载完成
3. 动态提升细节层级：

entity.model.maximumScale = 2.0; // 逐步放大到原始尺寸

内存泄漏检测

使用 Chrome DevTools 的 Memory 面板：

1. 记录加载前后的 Heap Snapshot
2. 对比 Cesium3DTileContent 对象数量
3. 特别注意未释放的 Geometry 实例

开放性问题

在项目实践中，我们发现：

• 将 quantizePositionBits 从 16 降到 14 时，压缩率提升 40%，但拐角处会出现肉眼可见的棱角
• 建筑模型对法线精度更敏感，而地形模型可以接受更低精度

你认为该如何制定不同场景下的压缩策略？欢迎在评论区分享你的经验！