Cesium OSM地图两端窟窿如何平滑处理？

Question

在使用Cesium加载OSM地图时，有时会遇到几何体两端出现“窟窿”或不闭合的问题，这通常是因为模型生成过程中顶点数据未正确闭合或纹理映射不完整导致。为解决此问题，可以尝试以下方法：首先确保输入数据是闭合的多边形或线串，使用Cesium提供的`PolygonGeometry`或`ExtrudeGeometry`类重新构建几何体；其次可通过设置`closeTop`和`closeBottom`属性为`true`，让Cesium自动闭合几何体上下表面；最后，若问题依然存在，可手动添加额外顶点以填补间隙，并调整材质贴图确保视觉平滑过渡。此外，优化Shader代码也能改善渲染效果，避免因深度缓冲或法线计算造成的视觉瑕疵。

Answer 1

1. 问题概述

在使用Cesium加载OSM地图时，几何体两端出现“窟窿”或不闭合的问题是常见的渲染现象。这一问题通常源于模型生成过程中顶点数据未正确闭合或纹理映射不完整。以下是问题的常见表现和可能的原因：

• 表现： 几何体上下表面未完全闭合，导致视觉上出现“窟窿”。
• 原因： 输入数据未形成闭合多边形、线串；纹理映射不完整；深度缓冲或法线计算错误。

为解决此问题，我们需要从数据准备、几何体构建以及渲染优化等多个层面进行分析和调整。

2. 数据准备与几何体构建

确保输入数据的质量是解决问题的第一步。以下是从数据准备到几何体构建的具体方法：

1. 验证输入数据： 确保输入数据是闭合的多边形或线串。可以使用第三方工具（如QGIS）检查数据拓扑结构。
2. 使用Cesium API： 使用`PolygonGeometry`或`ExtrudeGeometry`类重新构建几何体。

    const polygon = new Cesium.PolygonGeometry({
        polygonHierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray([
            -100.0, 40.0,
            -95.0, 40.0,
            -95.0, 35.0,
            -100.0, 35.0
        ])),
        extrudedHeight: 100000.0,
        closeTop: true,
        closeBottom: true
    });
    

通过设置`closeTop`和`closeBottom`属性为`true`，可以让Cesium自动闭合几何体的上下表面。

3. 手动修补与材质调整

如果自动闭合功能无法完全解决问题，可以尝试手动添加额外顶点以填补间隙，并调整材质贴图确保视觉平滑过渡。

步骤	操作说明
1	检查几何体的边界顶点是否缺失。
2	手动添加缺失的顶点坐标。
3	调整材质贴图UV坐标，确保纹理连续性。

此外，可以通过优化Shader代码来改善渲染效果，避免因深度缓冲或法线计算造成的视觉瑕疵。

4. 渲染优化与Shader调整

深度缓冲和法线计算可能导致几何体渲染异常。以下是优化渲染效果的建议：

graph TD;
            A[开始] --> B{检查深度缓冲};
            B -->|是| C[调整深度测试];
            B -->|否| D{检查法线计算};
            D -->|是| E[优化法线方向];
            D -->|否| F[结束];

例如，通过修改Shader代码中的深度测试逻辑，可以减少渲染瑕疵：

    void main() {
        vec4 positionEC = czm_modelViewRelativeToEye * vec4(position3D, 1.0);
        gl_Position = czm_projection * positionEC;

        // 调整深度偏移以避免渲染缝隙
        gl_Position.z += depthOffset;
    }
    

以上代码通过增加深度偏移值，可以有效减少几何体之间的缝隙问题。