CesiumJS中3D瓦片遮挡广告牌问题的分析与解决方案

问题现象描述

在使用CesiumJS进行三维可视化开发时，开发者可能会遇到一个常见问题：当同时使用3D瓦片(3D Tiles)和广告牌(Billboard)时，3D瓦片有时会遮挡部分广告牌内容。具体表现为广告牌图像被3D建筑物或其他3D要素"切断"，影响视觉呈现效果。

问题本质分析

这个问题的根源在于CesiumJS的渲染机制和深度测试(Depth Test)的处理方式：

1. 3D瓦片的渐进式加载：3D Tiles采用迭代优化的加载策略，这是其高性能的关键，但也会导致渲染顺序问题
2. 深度缓冲机制：默认情况下，广告牌会参与深度测试，当3D瓦片被判定为"更近"时，会遮挡广告牌
3. 高度参考设置：当广告牌的heightReference设置为RELATIVE_TO_3D_TILES时，与3D瓦片的交互更加复杂

解决方案比较

方案一：完全禁用深度测试

通过设置disableDepthTestDistance: Number.POSITIVE_INFINITY可以强制广告牌始终显示在最前面：

viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
    billboard: {
        image: "../images/Cesium_Logo_overlay.png",
        disableDepthTestDistance: Number.POSITIVE_INFINITY,
        heightReference: Cesium.HeightReference.RELATIVE_TO_3D_TILES
    }
});

优点：

• 实现简单，一行代码即可解决问题
• 广告牌永远不会被3D瓦片遮挡

缺点：

• 广告牌会穿透地球显示在另一侧
• 不符合真实世界的视觉逻辑

方案二：动态调整深度测试距离

更精细的解决方案是使用CallbackProperty动态调整disableDepthTestDistance：

disableDepthTestDistance: new Cesium.CallbackProperty(() => {
    return Cesium.Cartesian3.magnitude(viewer.scene.camera.positionWC);
}, false)

优点：

• 根据相机距离动态调整，避免穿透地球
• 在大多数视角下都能保持合理的遮挡关系

缺点：

• 实现稍复杂
• 在极端视角下可能仍有瑕疵

特殊场景处理

集群广告牌(Clustered Billboards)

对于集群广告牌，由于它们使用BillboardCollection而非Entity API，解决方案略有不同：

// 对于集群广告牌直接使用无限深度测试即可
billboards.disableDepthTestDistance = Number.POSITIVE_INFINITY;

集群广告牌不会出现穿透地球的问题，因为集群系统本身会根据可见性决定是否渲染。

最佳实践建议

1. 普通广告牌：推荐使用动态调整方案，平衡视觉效果和真实感
2. 集群广告牌：可以直接禁用深度测试
3. 性能考虑：大量广告牌禁用深度测试可能影响渲染性能，需合理评估
4. 视觉一致性：考虑添加轻微阴影或边框，增强广告牌与3D场景的融合度

未来改进方向

Cesium团队已经意识到这个问题涉及更广泛的"将3D瓦片视为地形"的架构问题。开发者可以关注相关进展，未来版本可能会提供更优雅的解决方案。

通过理解这些解决方案的优缺点，开发者可以根据具体项目需求选择最适合的方法，在保持3D场景真实性的同时确保关键信息的可见性。