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

开篇：glTF 模型的性能痛点

在 Cesium 中加载未经压缩的 glTF 模型时，开发者经常会遇到几个典型问题：

1. 内存溢出：一个 100MB 的 glTF 模型解码后可能占用超过 1GB 的 GPU 内存
2. 加载卡顿：主线程同步解析会导致界面冻结，尤其是移动端设备
3. 带宽浪费：原始模型的顶点 / 纹理数据没有经过任何压缩优化

通过 Chrome Performance 面板可以观察到，模型加载过程中 90% 的时间消耗在 JSON 解析和 Buffer 解码阶段。这正是我们需要引入模型压缩技术的关键原因。

压缩方案技术对比

目前主流的 glTF 压缩方案有以下三种：

1. Draco 压缩（Google）

• 压缩率：
• 几何数据：70-90% 体积缩减
• 顶点属性：支持 POSITION/NORMAL 等单独量化
• 解码开销：
• WebAssembly 解码器约 300KB
• 解码时间与模型复杂度成正比
• 兼容性：
• iOS 15+ 需要特殊处理（后文详述）
• 所有现代浏览器支持

2. MeshOpt 压缩（Khronos）

• 压缩率：
• 几何数据：50-70% 体积缩减
• 适用于顶点动画模型
• 解码开销：
• JavaScript 解码器仅 30KB
• 解码速度比 Draco 快 3 倍
• 兼容性：
• 需要 Cesium 1.85+ 版本
• 不支持量化自定义

3. KTX2 纹理压缩

• 压缩率：
• BC7 格式：6:1 纹理压缩比
• ASTC 支持移动端优化
• 解码开销：
• 硬件加速解码
• 需要支持 WebGL 2.0

以下是三种方案的性能对比数据：

实战代码示例

Three.js Draco 导出配置

import {GLTFExporter} from 'three/examples/jsm/exporters/GLTFExporter';
import {DracoEncoderModule} from 'draco3d';

const exporter = new GLTFExporter();

exporter.parse(
  scene,
  (glb) => {
    const options = {
      binary: true,
      dracoOptions: {
        compressionLevel: 7, // 1-10, 越高压缩率越大
        quantizePosition: 14, // 位置属性量化位数
        quantizeNormal: 10,   // 法线量化位数
        quantizeTexcoord: 12, // UV 坐标量化位数
        quantizeColor: 8,     // 顶点色量化位数
        quantizeGeneric: 12,  // 其他属性量化
      }
    };

    // 使用 WebWorker 避免界面卡顿
    new Worker('draco-worker.js').postMessage({ 
      glb, 
      options 
    });
  },
  {progress: (p) => console.log(p) }
);

Cesium 加载优化配置

const viewer = new Cesium.Viewer('cesiumContainer', {terrainProvider: Cesium.createWorldTerrain(),
});

// 显示加载进度条
const modelResource = Cesium.Resource.fetchWithProgress({
  url: 'model.glb',
  headers: {'Accept-Encoding': 'gzip, deflate, br'}
});

modelResource.then(asset => {
  viewer.scene.primitives.add(
    Cesium.Model.fromGltf({
      gltf: asset,
      allowPicking: false,
      debugShowBoundingVolume: false,
      // Draco 解码配置
      dracoOptions: {
        decompressMeshes: true,
        enableSkinning: false
      }
    })
  );
});

性能验证方法

在 Chrome DevTools 中按照以下步骤验证：

1. Network 面板：
2. 比较原始 glTF 与压缩后文件的下载大小

3. 检查 Content-Encoding 响应头确认服务端压缩

4. Performance 面板：

5. 录制加载过程，重点关注：

   • decodeDraco耗时
   • GPU 内存占用变化
   • 主线程阻塞时间

6. Lighthouse 测试：

7. 3D 模型加载的 Total Blocking Time 指标
8. 首次内容渲染时间

实测数据示例（建筑模型场景）：

• 加载时间：从 12.3s → 3.7s
• GPU 内存：从 1.2GB → 350MB
• 主线程阻塞：从 8.2s → 1.1s

避坑指南

iOS 兼容性问题

iOS 的 WASM 内存限制会导致 Draco 解码失败，解决方案：

// 检测 iOS 设备
const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);

if (isIOS) {
  Cesium.Model.fromGltf({
    // ... 其他参数
    dracoOptions: {decompressMeshes: false // iOS 上关闭 Draco}
  });
}

LOD 与压缩参数匹配

• 高精度 LOD 层级：使用较低压缩级别（compressionLevel=5）
• 低精度 LOD 层级：可启用激进压缩（compressionLevel=9）
• 运动部件（如车门）：避免对关节部位过度量化

WebWorker 线程数

建议公式：

worker 数量 = Math.min(4, navigator.hardwareConcurrency - 1)

总结与思考

通过合理的压缩策略，我们实现了：

1. 模型体积减少 70%
2. 加载速度提升 300%
3. 内存占用降低 65%

但仍需思考的平衡点：

• 移动端设备上，高压缩率可能导致解码耗电增加
• 是否需要根据设备性能动态选择压缩方案？
• 如何评估压缩对模型视觉质量的影响？

相关扩展阅读：
– Cesium 官方模型优化指南
– glTF 压缩规格说明
– WebWorker 性能优化策略