Ib/remove sky on low zoom globe (#4878)

* Sky blending when transitioning

* Add test

* Add changelog entry

* Undo uneeded changes

* Change sky globe test style

* Go to transparent

* Update test results

* Move tests

* Fix error

* Test with a longer wait

* Try with another test...

CHANGELOG.md

@@ -3,6 +3,7 @@
 ### ✨ Features and improvements
 - Catches network fetching errors such as CORS, DNS or malformed URL as actual `AJAXError` to expose HTTP request details to the `"error"` event (https://github.com/maplibre/maplibre-gl-js/pull/4822)
 - Add setVerticalFieldOfView() to public API ([#4717](https://github.com/maplibre/maplibre-gl-js/issues/4717))
+- Disable sky when using globe and blend it in when changing to mercator ([#4853](https://github.com/maplibre/maplibre-gl-js/issues/4853))
 - _...Add new stuff here..._
 
 ### 🐞 Bug fixes

src/render/program/sky_program.ts

@@ -11,6 +11,7 @@ export type SkyUniformsType = {
     'u_horizon': Uniform2f;
     'u_horizon_normal': Uniform2f;
     'u_sky_horizon_blend': Uniform1f;
+    'u_sky_blend': Uniform1f;
 };
 
 const skyUniforms = (context: Context, locations: UniformLocations): SkyUniformsType => ({
@@ -19,19 +20,23 @@ const skyUniforms = (context: Context, locations: UniformLocations): SkyUniforms
     'u_horizon': new Uniform2f(context, locations.u_horizon),
     'u_horizon_normal': new Uniform2f(context, locations.u_horizon_normal),
     'u_sky_horizon_blend': new Uniform1f(context, locations.u_sky_horizon_blend),
+    'u_sky_blend': new Uniform1f(context, locations.u_sky_blend),
 });
 
 const skyUniformValues = (sky: Sky, transform: IReadonlyTransform, pixelRatio: number): UniformValues<SkyUniformsType> => {
     const cosRoll = Math.cos(transform.rollInRadians);
     const sinRoll = Math.sin(transform.rollInRadians);
     const mercatorHorizon  = getMercatorHorizon(transform);
+    const projectionData = transform.getProjectionData({overscaledTileID: null});
+    const skyBlend = projectionData.projectionTransition;
     return {
         'u_sky_color': sky.properties.get('sky-color'),
         'u_horizon_color': sky.properties.get('horizon-color'),
         'u_horizon': [(transform.width / 2 - mercatorHorizon * sinRoll)  * pixelRatio,
             (transform.height / 2 + mercatorHorizon * cosRoll) * pixelRatio],
         'u_horizon_normal': [-sinRoll, cosRoll],
         'u_sky_horizon_blend': (sky.properties.get('sky-horizon-blend') * transform.height / 2) * pixelRatio,
+        'u_sky_blend': skyBlend,
     };
 };
 

src/shaders/sky.fragment.glsl

@@ -4,6 +4,7 @@ uniform vec4 u_horizon_color;
 uniform vec2 u_horizon;
 uniform vec2 u_horizon_normal;
 uniform float u_sky_horizon_blend;
+uniform float u_sky_blend;
 
 void main() {
     float x = gl_FragCoord.x;
@@ -16,4 +17,5 @@ void main() {
             gl_FragColor = u_sky_color;
         }
     }
+    gl_FragColor = mix(gl_FragColor, vec4(vec3(0.0), 0.0), u_sky_blend);
 }

test/integration/render/tests/projection/globe/sky/style.json

@@ -0,0 +1,45 @@
+{
+  "version": 8,
+  "sprite": "local://sprites/sprite",
+  "glyphs": "local://glyphs/{fontstack}/{range}.pbf",
+  "timeout": 60000,
+  "metadata": {
+      "test": {
+          "height": 512,
+          "width": 512,
+          "operations": [
+              [
+                "wait",
+                1000
+              ]
+          ]
+      }
+  },
+  "center": [
+    0,
+    0
+  ],
+  "zoom": 1,
+  "pitch": 80,
+  "maxPitch": 85,
+  "sources": { },
+  "layers": [
+      {
+        "id": "background",
+        "type": "background",
+        "paint": {
+          "background-color": "#000000"
+        }
+      }
+  ],
+  "sky": {
+      "sky-color": "#199EF3",
+      "horizon-color": "#daeff0",
+      "sky-horizon-blend": 1,
+      "fog-ground-blend": 1,
+      "atmosphere-blend": 0
+  },
+  "projection": {
+    "type": "globe"
+  }
+}