3D Tiles入门指南：b3dm模型压缩原理与实战优化

1次阅读

没有评论

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

在 WebGL 三维应用中，特别是使用 Cesium 等引擎加载 3D Tiles 时，未压缩的 b3dm 模型会带来明显的性能问题：

原始模型文件体积庞大，导致网络传输时间过长
移动端设备内存有限，大模型容易引发崩溃
高精度模型的细节在远距离观察时纯属浪费

通过实测，一个 10MB 的未压缩 b3dm 模型，在网页端加载可能需要 5 - 8 秒，严重影响用户体验。

目前主流的 3D 模型压缩方案有以下几种：

压缩率：通常能达到 70%-85%
解码性能：需要 WASM 支持，现代浏览器表现良好
兼容性：需要运行时解码器，但 Cesium 原生支持

压缩率：约 50%-60%
解码性能：纯 JavaScript 实现，解码更快
兼容性：无需额外运行时，但功能相对简单

压缩率：30%-50%
解码性能：几乎没有解码开销
兼容性：直接修改顶点数据，任何环境都适用

对于 b3dm 模型，我们推荐使用 Draco 压缩，因为它在压缩率和 Cesium 兼容性之间取得了最佳平衡。

安装 gltf-pipeline 工具
```
npm install -g gltf-pipeline
```

执行基础压缩命令

gltf-pipeline -i input.b3dm -o output.b3dm -d

对于需要保持 LOD 层级的模型，推荐使用以下参数组合：

// batch_compress.js
const gltfPipeline = require('gltf-pipeline');
const fs = require('fs');

async function compressFile(inputPath, outputPath) {const gltf = fs.readFileSync(inputPath);
  const options = {
    dracoOptions: {
      compressionLevel: 7,  // 1-10，越高压缩率越大但速度越慢
      quantizePositionBits: 14, // 位置精度
      quantizeNormalBits: 10,   // 法线精度
      quantizeTexcoordBits: 12, // 纹理坐标精度
      unifiedQuantization: true // 保持 LOD 一致性
    }
  };

  const result = await gltfPipeline.processGlb(gltf, options);
  fs.writeFileSync(outputPath, result.glb);
}

在 Cesium 中启用 Worker 解码可以避免 UI 卡顿：

const viewer = new Cesium.Viewer('cesiumContainer', {
  terrainProvider: new Cesium.CesiumTerrainProvider({url: Cesium.IonResource.fromAssetId(1)
  }),
  scene3DOnly: true,
  requestWebgl1: false,
  // 启用 Draco Worker
  enableDracoLoader: true,
  dracoOptions: {workerUrl: './draco_decoder_nodejs.js'}
});

测试数据显示不同压缩级别对解码时间的影响（iPhone 12）：

压缩级别	解码时间(ms)	内存占用(MB)
3	120	45
5	180	38
7	250	35
9	420	33

建议移动端使用 5 - 7 级压缩。

压缩后模型出现光照异常时，检查法线精度：

使用 glTF 验证工具检查模型
```
gltf-validator compressed_model.b3dm
```
如果报告法线错误，提高 quantizeNormalBits 到 12

在页面加载时提前初始化解码器：

// 预加载 Draco 解码器
import {DracoDecoderModule} from 'cesium';

async function preloadDraco() {
  try {await DracoDecoderModule.initialize();
    console.log('Draco decoder ready');
  } catch (error) {console.error('Draco init failed:', error);
  }
}

// 在应用初始化时调用
preloadDraco();

不同复杂度的模型有其最佳压缩平衡点：