Cesium模型轻量化实战：从原理到性能优化的完整指南

1次阅读

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

在三维 GIS 开发中，Cesium 加载大型建筑或地形模型时常常遇到性能瓶颈。最直接的表现就是内存占用过高和加载时间过长。这些问题在大规模场景中尤为突出，比如一个包含数百栋建筑的城市场景，原始的 glTF 模型可能会导致浏览器内存占用超过 1GB，加载时间达到数十秒甚至分钟级。

内存问题：未经优化的模型会占用大量显存和内存，特别是在移动设备上容易导致崩溃
加载速度：庞大的模型文件在网络传输过程中耗时显著，影响用户体验
渲染性能 ：复杂模型的绘制调用(Draw Call) 过多，导致帧率下降

在 Cesium 生态中，主要有几种常见的模型格式和优化方案：

glTF-Draco
压缩率：通常能达到原始大小的 30-50%
特点：保留完整的模型层次结构，适合单个精细模型
缺点：需要客户端解压，增加少量 CPU 开销
3D Tiles
压缩率：依赖子树的 LOD 策略，总体可优化到 20-40%
特点：专为大规模场景设计，支持流式加载
缺点：需要服务端预处理，配置复杂
B3DM
压缩率：与 glTF 类似
特点：Cesium 传统格式，兼容性好
缺点：功能有限，逐渐被 3D Tiles 取代

Draco 是 Google 开源的 3D 模型压缩库，通过 gltf-pipeline 可以方便地集成到工作流中：

npm install -g gltf-pipeline

核心参数配置：

const options = {
  dracoOptions: {
    compressionLevel: 7, // 1-10，越高压缩率越大但速度越慢
    quantizePositionBits: 14, // 位置精度
    quantizeNormalBits: 10, // 法线精度
    quantizeTexcoordBits: 12, // UV 精度
    quantizeColorBits: 8, // 颜色精度
    quantizeGenericBits: 12 // 其他属性精度
  }
};

gltfPipeline.processGltf(gltf, options).then(function(results) {fs.writeFileSync('output.glb', results.glb);
});

对于重复出现的模型（如树木、路灯），使用实例化渲染可以大幅提升性能。在 Cesium 中需要通过自定义 Shader 实现：

// 顶点着色器新增代码
attribute vec3 instancePosition;
attribute vec3 instanceScale;
attribute vec4 instanceRotation;

vec3 applyQuaternion(vec3 v, vec4 q) {return v + 2.0 * cross(q.xyz, cross(q.xyz, v) + q.w * v);
}

void main() {vec3 pos = applyQuaternion(position * instanceScale, instanceRotation);
  gl_Position = czm_modelViewProjection * vec4(pos + instancePosition, 1.0);
}

对应的 JavaScript 部分：

const instanceAttributes = {instancePosition: new Float32Array([/* 位置数据 */]),
  instanceScale: new Float32Array([/* 缩放数据 */]),
  instanceRotation: new Float32Array([/* 四元数旋转数据 */])
};

primitive = new Cesium.ModelInstanceCollection({
  // ... 其他参数
  attributes: instanceAttributes
});

根据相机距离动态切换模型精度：

function updateLod() {const distance = camera.position.distanceTo(model.position);
  let lodLevel = 0;

  if (distance > 1000) lodLevel = 2; // 低模
  else if (distance > 500) lodLevel = 1; // 中模
  // else 保持高模

  model.activeLod = lodLevel;
}

viewer.scene.preRender.addEventListener(updateLod);

以下脚本实现自动化批量处理：

const fs = require('fs');
const path = require('path');
const {promisify} = require('util');
const gltfPipeline = require('gltf-pipeline');
const readdir = promisify(fs.readdir);

const PROCESS_DIR = './models';
const OUTPUT_DIR = './compressed';

async function processAll() {
  try {const files = await readdir(PROCESS_DIR);

    for (const file of files) {if (path.extname(file) === '.glb') {console.log(`Processing ${file}...`);
        await compressModel(file);
      }
    }

    console.log('All models processed');
  } catch (err) {console.error('Process failed:', err);
  }
}

async function compressModel(filename) {const glb = fs.readFileSync(path.join(PROCESS_DIR, filename));

  const options = {
    dracoOptions: {
      compressionLevel: 7,
      quantizePositionBits: 14
    },
    stats: true
  };

  const result = await gltfPipeline.processGlb(glb, options);

  fs.writeFileSync(path.join(OUTPUT_DIR, `compressed_${filename}`),
    result.glb
  );

  console.log(`  Original: ${(glb.length / 1024 / 1024).toFixed(2)}MB`);
  console.log(`  Compressed: ${(result.glb.length / 1024 / 1024).toFixed(2)}MB`);
}

processAll();

使用 Chrome DevTools 的 Memory 面板记录加载前后的内存快照：