如何隐藏WebGL地球仪背面的标记点？

一、计算并隐藏不可见标记点 #

核心思路是通过向量点积判断标记点是否处于地球朝向相机的一侧：

1. 标记点的世界坐标可由经纬度转换得到，地球中心设为原点时，标记点的位置向量归一化后就是地球表面的法线方向。
2. 计算标记点到相机的向量并归一化，将其与标记点的法线向量做点积：
   • 点积>0：标记点朝向相机，处于可视区域，保留显示
   • 点积<0：标记点在地球背面，设置为隐藏

在OGL中的实现代码示例：

// 假设camera为OGL Camera实例，markers是存储所有标记点的数组，每个标记点包含mesh对象
markers.forEach(marker => {
    const worldPos = marker.mesh.worldPosition;
    // 地球中心到标记点的法线向量
    const normal = worldPos.clone().normalize();
    // 标记点到相机的向量
    const markerToCamera = camera.position.clone().sub(worldPos).normalize();
    // 计算点积判断朝向
    const dotProduct = normal.dot(markerToCamera);
    
    marker.mesh.visible = dotProduct > 0;
});

如果需要更精确的视锥体剔除（避免标记点在相机视野外但仍显示），可以结合OGL的Frustum类进行视锥体内外判断，将两种判断逻辑结合即可。

二、替代方案：边缘提示标记点 #

如果不想完全隐藏背面标记点，可将其投影到地球可视边缘显示提示：

1. 当标记点处于背面时，计算其在相机可视方向上的地球边缘投影位置
2. 创建小型提示标记，将其放置在投影位置并显示，同时隐藏原标记点

实现代码示例：

// 假设earthRadius为地球半径，edgeMarker是预创建的提示标记mesh
markers.forEach(marker => {
    const worldPos = marker.mesh.worldPosition;
    const normal = worldPos.clone().normalize();
    const markerToCamera = camera.position.clone().sub(worldPos).normalize();
    const dotProduct = normal.dot(markerToCamera);

    if (dotProduct > 0) {
        // 显示原标记，隐藏提示
        marker.mesh.visible = true;
        marker.edgeMarker?.visible = false;
    } else {
        // 隐藏原标记，显示边缘提示
        marker.mesh.visible = false;
        // 计算边缘投影位置
        const cameraForward = camera.getWorldDirection(new OGL.Vec3()).negate();
        // 提取标记点向量与相机前向的垂直分量
        const perpendicular = normal.clone().sub(
            cameraForward.clone().multiplyScalar(normal.dot(cameraForward))
        ).normalize();
        // 设置提示标记位置到地球边缘
        const edgePos = perpendicular.multiplyScalar(earthRadius);
        marker.edgeMarker.position.copy(edgePos);
        marker.edgeMarker.visible = true;
    }
});

内容的提问来源于stack exchange，提问作者flks