diff --git a/CHANGELOG.md b/CHANGELOG.md index fdf5404559..8d8401abdf 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/render/program/sky_program.ts b/src/render/program/sky_program.ts index ce5a4d8014..ccf77d2c00 100644 --- a/src/render/program/sky_program.ts +++ b/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,12 +20,15 @@ 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 => { 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'), @@ -32,6 +36,7 @@ const skyUniformValues = (sky: Sky, transform: IReadonlyTransform, pixelRatio: n (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, }; }; diff --git a/src/shaders/sky.fragment.glsl b/src/shaders/sky.fragment.glsl index 3317a86028..aa46f660b8 100644 --- a/src/shaders/sky.fragment.glsl +++ b/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); } \ No newline at end of file diff --git a/test/integration/render/tests/projection/globe/sky/expected.png b/test/integration/render/tests/projection/globe/sky/expected.png new file mode 100644 index 0000000000..d357cc0750 Binary files /dev/null and b/test/integration/render/tests/projection/globe/sky/expected.png differ diff --git a/test/integration/render/tests/projection/globe/sky/style.json b/test/integration/render/tests/projection/globe/sky/style.json new file mode 100644 index 0000000000..9a5416ba1b --- /dev/null +++ b/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" + } +}