基于cesium的大型星座展示效果优化

Question

在cesium中加载大量卫星时，卫星连续运动时界面会产生卡顿，请问这个问题如何优化？如何让卫星按帧运动，比如所有卫星一秒移动一次，类似于starlink.sx网站上的展示方式

Answer 1

引自免费微信小程序：皆我百晓生

为了优化基于Cesium的大规模星座显示并确保流畅的动画效果，我们可以采取以下几个步骤：

1. 分批加载：将卫星分成多个批次，每次只加载一部分卫星到场景中。当用户滚动或缩放地图时，动态加载或移除附近的卫星。

function loadSatellites(batchIndex) {
  const start = batchIndex * batchSize;
  const end = Math.min(start + batchSize, totalSatellites);

  for (let i = start; i < end; i++) {
    // 加载第i个卫星的实体
  }
}

1. 降低模型复杂度：如果卫星是3D模型，尝试简化模型结构，减少面数，或者使用纹理贴图代替复杂的几何形状。

2. 使用点云表示：考虑使用点而不是3D模型来表示卫星，这样可以显著减少渲染负担。

3. 启用WebGL instancing：Cesium支持WebGL instancing，这可以让GPU同时渲染多个相同的对象，提高性能。

const satelliteEntityCollection = new Cesium.EntityCollection();
satelliteEntities.forEach((entity) => {
  entity.model = {
    uri: 'path/to/satellite_model.gltf',
    scaleByDistance: new Cesium.NearFarScalar(1000.0, 1.0, 1000000.0, 0.5),
    maximumScale: 10,
    show: true,
    instanceCapacity: 1000, // 设置实例容量
  };
  satelliteEntityCollection.add(entity);
});

viewer.scene.primitives.add(new Cesium.ModelGraphics(satelliteEntityCollection));

1. 使用时间标签（Time tagging）：为每个卫星设置一个特定的时间标签，使其按照预定的时间间隔移动，例如每秒移动一次。

const satellitePositions = getInitialPositions(); // 获取卫星初始位置数组

function updateSatellites(time) {
  const currentTimeSeconds = time.secondsSinceEpoch;
  satelliteEntities.forEach((entity, index) => {
    const position = satellitePositions[index];
    entity.position = Cesium.Cartesian3.fromDegrees(position.longitude, position.latitude, position.altitude);
    if (currentTimeSeconds % 1 === 0) { // 每秒更新位置
      // 更新卫星位置
      entity.position = movePosition/entity.speed;
    }
  });
}

viewer.trackedEntity = viewer.entities.add({
  position: Cesium.Cartesian3.ZERO,
  onPositionChanged: updateSatellites,
});

1. 限制帧率：通过viewer.requestRenderMode方法，将Cesium的渲染模式设置为每秒60帧，防止过度渲染导致卡顿。

viewer.requestRenderMode(Cesium.RequestRenderMode.LIMITED_TO_FRAME_RATE);

1. 使用CSS层叠上下文（Layering Contexts）：将卫星添加到不同的图层上，利用浏览器的优化机制。

2. 根据视锥体裁剪：使用Cesium内置的LOD（Level of Detail）功能，仅对可视范围内的卫星进行渲染。

3. 硬件加速：确保浏览器启用了硬件加速，并且使用的显卡支持WebGL。

通过以上策略的组合应用，你应该能显著提升Cesium中大规模星座显示的效果并解决卡顿问题。记得在实现这些优化时，不断测试和监控性能，以便找出最适合你场景的最佳方案。