Cesium加载3D模型压缩格式实战指南：从glTF到3D Tiles的性能优化

1次阅读

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

最近在做一个智慧城市项目时，需要加载一个包含 200 多栋建筑的 BIM 模型到 Cesium 中。原始模型是个 2.3GB 的 FBX 文件，转换成 glTF 后也有 800MB。首次加载时浏览器直接卡死，控制台不断报出内存不足的警告。经过一系列优化，最终将加载时间从最初的 3 分钟降到 35 秒。下面分享下我的实战经验。

glTF 是 Khronos Group 推出的标准 3D 传输格式，有两种存储方式：

.gltf：JSON 描述文件 + 外部二进制资源（.bin）+ 纹理图片
.glb：单一二进制文件，包含所有数据

对于 Cesium 项目，建议始终使用 glb 格式，因为：

减少网络请求次数（1 个文件 vs 多个文件）
二进制数据更紧凑，体积通常比.gltf 小 10%-15%
避免跨域资源加载问题

转换工具推荐使用官方 glTF-Pipeline（需 Node.js 环境）：

gltf-pipeline -i model.gltf -o model.glb --binary

Draco 是 Google 开源的 3D 几何压缩算法，可以将网格数据压缩到原始大小的 5%-10%。Cesium 从 1.63 版本开始内置支持。

启用方法：

const viewer = new Cesium.Viewer('cesiumContainer', {
  // 必须显式启用
  enableModelExperimental: true,
  // 加载 Draco 解码器
  enableModelDraco: true 
});

压缩模型生成（需要安装 glTF-Pipeline）：

gltf-pipeline -i model.glb -o model-draco.glb --draco.compressionLevel=7

关键参数说明：

compressionLevel：0-10，级别越高压缩率越大但解码越慢，推荐 5 -7
quantizePositionBits：顶点坐标量化位数，默认 14
quantizeNormalBits：法线量化位数，默认 10

对于超大规模模型（如城市级），需要使用 3D Tiles 进行空间分区。关键配置项：

const tileset = viewer.scene.primitives.add(
  new Cesium.Cesium3DTileset({
    url: './tileset/tileset.json',
    // 控制细节层次
    maximumScreenSpaceError: 2, 
    // 预加载相邻瓦片
    preloadWhenHidden: true,
    // 动态加载控制
    dynamicScreenSpaceError: true,
    dynamicScreenSpaceErrorDensity: 0.00278,
    dynamicScreenSpaceErrorFactor: 4.0
  })
);

// viewer 初始化时启用实验性模型加载
const viewer = new Cesium.Viewer('cesiumContainer', {
  enableModelExperimental: true,
  terrainProvider: Cesium.createWorldTerrain()});

// 加载压缩模型
const model = viewer.scene.primitives.add(
  await Cesium.ModelExperimental.fromGltf({
    gltf: './models/building-draco.glb',
    modelMatrix: Cesium.Matrix4.IDENTITY,
    // 开启批处理 ID 支持
    customShader: new Cesium.CustomShader({batchIdAttributeName: 'batchId'})
  })
);

const tileset = viewer.scene.primitives.add(
  new Cesium.Cesium3DTileset({
    url: './tileset/tileset.json',
    // 重要性能参数：值越小显示越精细
    maximumScreenSpaceError: 2,
    // 内存控制
    maximumMemoryUsage: 1024, // MB
    // 网络请求控制
    maximumRequests: 64,
    // 预加载范围（屏幕倍数）preloadFlightDestinations: 2.0
  })
);

// 自适应缩放
viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0, -0.5, 0));

测试环境：Chrome 115, 16GB RAM, 模型：50 栋建筑 BIM

格式	文件大小	加载时间	内存占用
原始 glTF	786MB	112s	3.2GB
glb	682MB	97s	2.8GB
glb+Draco	58MB	35s	1.1GB
3D Tiles(Draco)	64MB	28s	0.9GB

WebWorker 解码测试（加载同一 Draco 模型）：

主线程阻塞时间：从 1.8s 降到 0.3s
FPS 波动范围：±2 帧 vs ±15 帧

建筑模型：优先几何压缩（Draco level 7+）
带复杂材质模型：使用 KTX2 纹理压缩（需 EXT_texture_webp 扩展）

打开 DevTools → Memory
加载模型前做 Heap Snapshot
操作后再次 Snapshot
对比查看 Cesium3DTile 等对象是否未释放

<!-- 在 index.html 中预加载 -->
<script src="https://cdn.jsdelivr.net/npm/cesium@1.107/Build/Cesium/Cesium.js"></script>
<script>
  // 手动指定 WASM 路径
  window.CESIUM_BASE_URL = './cesium/';
  // 或使用 CDN
  // window.CESIUM_BASE_URL = 'https://cdn.jsdelivr.net/npm/cesium@1.107/Build/Cesium/';
</script>

对于非专业 3D 优化的团队，推荐直接使用 Cesium Ion 的模型优化服务：