Cesium GPU加速实战：WebGL优化大规模3D地理数据渲染

1次阅读

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

传统 CPU 渲染地理数据时，通常会遇到几个核心问题：

帧率下降 ：当场景中包含数万个建筑物或复杂地形时，CPU 需要逐顶点处理数据，导致主线程阻塞。实测显示，10 万面片的场景在 i7 处理器上帧率可能降至 5FPS 以下
内存占用高 ：JSON 格式的地理数据在内存中解压后，体积往往膨胀 3 - 5 倍。某城市建筑数据在 CPU 模式下占用超过 2GB 内存
DrawCall 爆炸 ：每个独立对象都需要单独调用绘制指令，10 万个建筑物意味着 10 万次 DrawCall，远超 WebGL 合理范围

flowchart LR
    A[GeoJSON 数据] --> B[CPU 解析]
    B --> C[生成三角面片]
    C --> D[逐对象提交 DrawCall]
    D --> E[同步等待渲染完成]

flowchart LR
    A[压缩的二进制数据] --> B[GPU Buffer]
    B --> C[实例化绘制]
    C --> D[异步渲染管线]
    D --> E[复用中间结果]

关键差异点：

数据格式：二进制 vs 文本
绘制方式：批处理 vs 单对象
执行线程：WebGL 线程 vs 主线程

启用 WebGL2 上下文（需检测 fallback）：

const contextOptions = {
  requestWebgl2: true,
  powerPreference: 'high-performance'
};

重构 DrawCommand 调度：

// 旧版（每帧新建 Command）function createCommand() { /*...*/} 

// 新版（复用 Command 池）const commandPool = new CommandPool();
function getReusableCommand() {return commandPool.get(/*...*/);
}

顶点压缩示例（节省 50% 带宽）：

// 将经纬高压缩到 2 个 float
attribute vec2 compressedPosition;
uniform vec4 decodeMatrix;

vec3 decodePosition() {
  float height = decodeMatrix.w * compressedPosition.y;
  vec2 latLon = decodeMatrix.xy + decodeMatrix.zw * compressedPosition.xy;
  return vec3(latLon, height); 
}

const instanceBatch = new Cesium.Primitive({
  geometryInstances: buildings,
  appearance: new PerInstanceColorAppearance({
    translucent: false,
    closed: true
  }),
  asynchronous: false
});

viewer.scene.primitives.add(instanceBatch);

测试场景：125,678 个建筑物模型

指标	CPU 模式	GPU 加速模式
平均帧率 (FPS)	4.2	62.8
GPU 内存 (MB)	210	58
首帧时间 (ms)	4200	680

注册恢复回调：

context.loss.addEventListener(() => {
  // 重建所有 WebGL 资源
  rebuildBuffers();
  recompileShaders();});

检测 ANGLE_instanced_arrays 扩展
为 Intel 集成显卡关闭 MSAA
在移动端禁用高精度着色器

使用 Chrome DevTools 的 Memory 面板：
1. 拍摄堆快照
2. 筛选 Cesium 相关对象
3. 比对操作前后的对象数量

/**
 * 创建实例化渲染批次
 * @param {Cesium.GeometryInstance[]} instances - 实例数组
 * @param {Cesium.Material} material - 共享材质
 * @returns {Cesium.Primitive}
 */
function createInstancedBatch(instances, material) {
  return new Cesium.Primitive({
    geometryInstances: instances,
    appearance: new MaterialAppearance({material})
  });
}