Disabled unsupported Fog rendering, for Terrain3D on Globe

CHANGELOG.md

@@ -10,6 +10,7 @@
 
 ### 🐞 Bug fixes
 - Fix line-placed map-pitch-aligned texts being too large when viewed from some latitudes on a globe ([#4786](https://github.com/maplibre/maplibre-gl-js/issues/4786))
+- Disabled unsupported Fog rendering, for Terrain3D on Globe ([#4963](https://github.com/maplibre/maplibre-gl-js/pull/4963))
 - _...Add new stuff here..._
 
 ## 5.0.0-pre.4

src/render/draw_terrain.ts

@@ -88,7 +88,7 @@ function drawTerrain(painter: Painter, terrain: Terrain, tiles: Array<Tile>) {
         gl.bindTexture(gl.TEXTURE_2D, texture.texture);
         const eleDelta = terrain.getMeshFrameDelta(tr.zoom);
         const fogMatrix = tr.calculateFogMatrix(tile.tileID.toUnwrapped());
-        const uniformValues = terrainUniformValues(eleDelta, fogMatrix, painter.style.sky, tr.pitch);
+        const uniformValues = terrainUniformValues(eleDelta, fogMatrix, painter.style.sky, tr.pitch, painter.style.projection?.name === 'globe');
         const projectionData = tr.getProjectionData({overscaledTileID: tile.tileID, ignoreTerrainMatrix: true});
         program.draw(context, gl.TRIANGLES, depthMode, StencilMode.disabled, colorMode, CullFaceMode.backCCW, uniformValues, terrainData, projectionData, 'terrain', mesh.vertexBuffer, mesh.indexBuffer, mesh.segments);
     }

src/render/program/terrain_program.test.ts

@@ -0,0 +1,30 @@
+import {terrainUniformValues} from './terrain_program';
+import {Sky} from '../../style/sky';
+import {mat4} from 'gl-matrix';
+
+describe('terrainUniformValues', () => {
+    test('disables fog when in globe projection mode', () => {
+        const eleDelta = 1.0;
+        const fogMatrix = mat4.create();
+        const sky = new Sky({});
+        const pitch = 45;
+        const isGlobeMode = true;
+        const uniformValues = terrainUniformValues(eleDelta, fogMatrix, sky, pitch, isGlobeMode);
+
+        expect(uniformValues['u_fog_ground_blend_opacity']).toBe(0);
+        expect(uniformValues['u_ele_delta']).toBe(eleDelta);
+        expect(uniformValues['u_fog_matrix']).toBe(fogMatrix);
+        expect(uniformValues['u_fog_color']).toEqual(sky.properties.get('fog-color'));
+        expect(uniformValues['u_fog_ground_blend']).toBe(sky.properties.get('fog-ground-blend'));
+    });
+
+    test('enables fog when not in globe projection mode', () => {
+        const eleDelta = 1.0;
+        const fogMatrix = mat4.create();
+        const sky = new Sky({});
+        const pitch = 45;
+        const isGlobeMode = false;
+        const uniformValues = terrainUniformValues(eleDelta, fogMatrix, sky, pitch, isGlobeMode);
+        expect(uniformValues['u_fog_ground_blend_opacity']).toBe(sky.calculateFogBlendOpacity(pitch));
+    });
+});

src/render/program/terrain_program.ts

@@ -75,13 +75,15 @@ const terrainUniformValues = (
     eleDelta: number,
     fogMatrix: mat4,
     sky: Sky,
-    pitch: number): UniformValues<TerrainUniformsType> => ({
+    pitch: number,
+    isGlobeMode: boolean): UniformValues<TerrainUniformsType> => ({
     'u_texture': 0,
     'u_ele_delta': eleDelta,
     'u_fog_matrix': fogMatrix,
     'u_fog_color': sky ? sky.properties.get('fog-color') : Color.white,
     'u_fog_ground_blend': sky ? sky.properties.get('fog-ground-blend') : 1,
-    'u_fog_ground_blend_opacity': sky ? sky.calculateFogBlendOpacity(pitch) : 0,
+    // Set opacity to 0 when in globe mode to disable fog
+    'u_fog_ground_blend_opacity': isGlobeMode ? 0 : (sky ? sky.calculateFogBlendOpacity(pitch) : 0),
     'u_horizon_color': sky ? sky.properties.get('horizon-color') : Color.white,
     'u_horizon_fog_blend': sky ? sky.properties.get('horizon-fog-blend') : 1
 });

test/examples/sky-with-fog-and-terrain.html

@@ -108,6 +108,12 @@
         })
     );
 
+
+    map.addControl(
+        new maplibregl.GlobeControl()
+    );
+
+
     map.addControl(
         new maplibregl.TerrainControl({
             source: 'terrainSource',

test/integration/render/tests/terrain/fog-sky-blend-globe/style.json

@@ -0,0 +1,74 @@
+{
+    "version": 8,
+    "metadata": {
+        "test": {
+            "height": 256,
+            "width": 256,
+            "maxPitch": 120,
+            "operations": [
+                ["idle"]
+            ]
+        }
+    },
+    "timeout": 60000,
+    "center": [
+        -113.335,
+        35.96
+    ],
+    "zoom": 13,
+    "pitch": 80,
+    "maxPitch": 180,
+    "sources": {
+        "terrain": {
+            "type": "raster-dem",
+            "tiles": [
+                "local://tiles/{z}-{x}-{y}.terrain.png"
+            ],
+            "maxzoom": 15,
+            "tileSize": 256
+        },
+        "satellite": {
+            "type": "raster",
+            "tiles": [
+                "local://tiles/{z}-{x}-{y}.satellite.png"
+            ],
+            "maxzoom": 17,
+            "tileSize": 256
+        }
+    },
+    "layers": [
+        {
+            "id": "background",
+            "type": "background",
+            "paint": {
+                "background-color": "blue"
+            }
+        },
+        {
+            "id": "raster",
+            "type": "raster",
+            "source": "satellite",
+            "paint": {
+                "raster-opacity": 1.0
+            }
+
+        }
+    ],
+    "terrain": {
+        "source": "terrain",
+        "exaggeration": 2
+    },
+    "sky": {
+        "sky-color": "green",
+        "sky-horizon-blend": 0.5,
+        "horizon-color": "red",
+        "horizon-fog-blend": 0.5,
+        "fog-color": "blue",
+        "fog-ground-blend": 0.5,
+        "atmosphere-blend": 0
+    },
+    "projection": {
+        "type": "globe"
+    }
+}
+