Cesium动态线材质贴地穿透问题如何解决？

Question

在使用Cesium实现动态线（如飞行轨迹、移动路径）时，常采用自定义材质贴图实现流动效果。然而，当启用`clampToGround: true`将线条贴地渲染时，动态线材质易出现“穿透地形”问题——即线条未真实贴合地形起伏，反而嵌入地面或悬空。该问题源于Cesium的贴地功能主要依赖于3D Tiles或地形数据进行顶点高度调整，而动态线的几何体生成与材质动画在GPU端处理，导致材质采样与地形高程不同步。此外，`PolylineGeometry`本身不支持复杂的地形适配动画，进一步加剧穿透现象。如何在保持动态视觉效果的同时，实现流畅贴地且不穿透地形的动态线渲染？

Answer 1

一、问题背景与核心挑战

Cesium 作为领先的 WebGIS 可视化引擎，广泛应用于飞行轨迹、车辆路径等动态线渲染场景。开发者常通过自定义 ShaderMaterialProperty 实现流动纹理效果，例如使用 UV 偏移模拟光线沿路径“流动”。

然而，当启用 clampToGround: true 时，线条虽能贴合地形高程，但其材质动画却无法同步感知地形起伏变化，导致视觉上出现“穿透”或“悬空”现象。

根本原因在于：

• PolylineGeometry 在 CPU 端生成初始几何顶点，随后由 Cesium 内部机制调用 terrain sampling 进行高度调整；
• 而材质动画（如时间驱动的 UV 偏移）在 GPU 的 fragment shader 中执行，此时已丢失原始路径的空间上下文信息；
• 最终结果是：几何体贴地了，但纹理仍在“平面上”流动，造成错位。

二、常见技术误区分析

误区	表现	后果
直接使用 clampToGround + 动态材质	纹理流动方向失真	视觉穿透地形
依赖 Entity.polyline.material	无法控制顶点级动画	GPU 与地形不同步
静态预烘焙路径高度	不支持实时地形变化	在3D Tiles更新后失效
使用 GroundPolylinePrimitive	缺乏自定义材质支持	无法实现流动光效

三、解决方案层级演进

1. Level 1 - 静态采样贴地路径：在 JS 层对路径点进行 sampleTerrainMostDetailed 高程查询，构建带 Z 的 Cartesian3 路径，再创建 PolylineGeometry；
2. Level 2 - 自定义 Primitive 渲染：绕过 Entity 框架，直接使用 Primitive + GeometryInstance 控制绘制流程；
3. Level 3 - GPU 端动态采样地形：在 fragment shader 中调用 czm_readHeightFromTexture 获取当前坐标的地形高度，用于修正纹理坐标逻辑；
4. Level 4 - 基于 Compute Pass 的预变形：利用 WebGL2 的 transform feedback 或 OES_texture_float 扩展，在每一帧前预计算贴地后的顶点位置；
5. Level 5 - 分段曲线重采样 + 实时插值：将路径按距离重采样为密集点列，并结合 camera distance 动态调整密度，提升贴合精度。

四、推荐实现方案：分段重采样 + Shader 动态控制

以下为关键代码片段，展示如何结合地形采样与自定义材质实现无穿透动态线：

// Step 1: 重采样路径并获取真实高程
async function createGroundPath(positions) {
    const sampledPositions = await Cesium.sampleTerrainMostDetailed(terrainProvider, positions);
    return Cesium.PolylineGeometry.fromPositions({
        positions: sampledPositions,
        width: 5,
        vertexFormat: Cesium.PolylineColorAppearance.VERTEX_FORMAT
    });
}

// Step 2: 自定义材质，避免全局 UV 错乱
const flowMaterial = new Cesium.Material({
    fabric: {
        type: 'FlowLine',
        uniforms: {
            color: Cesium.Color.YELLOW,
            speed: 0.05,
            time: 0.0
        },
        source: `
            uniform vec4 color;
            uniform float speed;
            uniform float time;
            czm_material czm_getMaterial(czm_materialInput materialInput) {
                czm_material m = czm_materialDefault();
                float t = fract(materialInput.st.s - time * speed);
                m.diffuse = color.rgb;
                m.alpha = smoothstep(0.2, 0.8, t) - smoothstep(0.0, 0.2, t);
                return m;
            }
        `
    }
});
    

五、高级优化策略流程图

graph TD
            A[原始路径 Cartesian3[]] --> B{是否启用贴地?}
            B -- 是 --> C[调用 sampleTerrainMostDetailed]
            B -- 否 --> D[直接生成几何]
            C --> E[生成带高程的顶点序列]
            E --> F[创建 PolylineGeometry]
            F --> G[绑定自定义 Shader Material]
            G --> H[在 Fragment Shader 中加入距离衰减因子]
            H --> I[启用 Depth Test & Offset 防止 Z-Fighting]
            I --> J[每帧更新 time Uniform 实现流动]
            J --> K[渲染结果]

六、性能与兼容性考量

在大规模动态线渲染中需注意：

• 频繁调用 sampleTerrainMostDetailed 可能阻塞主线程，建议使用 Web Worker 异步处理；
• 对于移动设备，应降级为固定高度偏移模式，避免 shader 复杂度过高；
• 使用 Cesium.RequestScheduler 控制地形请求优先级；
• 对长时间运行的轨迹，可缓存已采样路径段以减少重复计算；
• 考虑使用 CorridorGeometry 替代 polyline，提供更宽的贴地表面控制能力；
• 若使用 3D Tiles，需监听 tile load event 触发路径重新贴地计算；
• 在极陡坡区域，增加路径点密度防止“跳跃式”贴合；
• 启用 scene.logarithmicDepthBuffer = true 提升深度精度；
• 使用 PerformanceDisplay 监控 GPU 负载；
• 对多条动态线，采用 Instanced Rendering 减少 draw call。