curve the sky over the globe (#8299)

Author: birkskyum

CHANGELOG.md

@@ -3,6 +3,7 @@
 - _...Add new stuff here..._
 
 ### 🐞 Bug fixes
+- Fix a gap between the sky and the ground at high pitch while globe transitions to mercator ([#7382](https://github.com/maplibre/maplibre-gl-js/issues/7382)) (by [@birkskyum](https://github.com/birkskyum))
 - Treat an empty tile response (e.g. HTTP 204) as no data: raster-DEM tiles now load without elevation instead of failing with a `dem dimension mismatch` error, and empty raster tiles render as transparent ([#1551](https://github.com/maplibre/maplibre-gl-js/issues/1551)) (by [@clement-igonet](https://github.com/clement-igonet))
 - _...Add new stuff here..._
 

src/geo/projection/globe_utils.test.ts

@@ -1,6 +1,7 @@
 import {describe, expect, test} from 'vitest';
 import {LngLat} from '../lng_lat.ts';
-import {getGlobeCircumferencePixels, getZoomAdjustment, globeDistanceOfLocationsPixels} from './globe_utils.ts';
+import {getGlobeCenterInViewSpace, getGlobeCircumferencePixels, getGlobeRadiusPixels, getZoomAdjustment, globeDistanceOfLocationsPixels} from './globe_utils.ts';
+import {GlobeTransform} from './globe_transform.ts';
 
 describe('globe utils', () => {
     const digitsPrecision = 10;
@@ -47,4 +48,23 @@ describe('globe utils', () => {
         expect(getZoomAdjustment(0, 60)).toBeCloseTo(-1, digitsPrecision);
         expect(getZoomAdjustment(60, 0)).toBeCloseTo(1, digitsPrecision);
     });
+
+    test('getGlobeCenterInViewSpace', () => {
+        const transform = new GlobeTransform();
+        transform.resize(256, 512);
+        transform.setMaxPitch(85);
+        transform.setCenter(new LngLat(11.64, 47.55));
+        transform.setZoom(11);
+        const radius = getGlobeRadiusPixels(transform.worldSize, transform.center.lat);
+
+        transform.setPitch(0);
+        const straightDown = getGlobeCenterInViewSpace(transform);
+        expect(straightDown[0]).toBeCloseTo(0, 6);
+        expect(straightDown[1]).toBeCloseTo(0, 6);
+        expect(straightDown[2]).toBeCloseTo(-(transform.cameraToCenterDistance + radius), 2);
+
+        transform.setPitch(85);
+        const pitched = getGlobeCenterInViewSpace(transform);
+        expect(Math.hypot(...pitched) / radius).toBeCloseTo(Math.hypot(...transform.cameraPosition), 8);
+    });
 });

src/geo/projection/globe_utils.ts

@@ -1,4 +1,4 @@
-import {quat, type ReadonlyVec4, vec3} from 'gl-matrix';
+import {type mat4, quat, type ReadonlyVec4, vec3, vec4} from 'gl-matrix';
 import {clamp, createVec3f64, createVec4f64, lerp, MAX_VALID_LATITUDE, mod, remapSaturate, scaleZoom, wrap} from '../../util/util.ts';
 import {LngLat} from '../lng_lat.ts';
 import {EXTENT} from '../../data/extent.ts';
@@ -88,6 +88,15 @@ export function getGlobeRadiusPixels(worldSize: number, latitudeDegrees: number)
     return worldSize / (2.0 * Math.PI) / Math.cos(latitudeDegrees * Math.PI / 180);
 }
 
+/**
+ * Returns the globe center in view space, in pixels: the camera is at the origin and looks down the negative Z axis.
+ */
+export function getGlobeCenterInViewSpace(transform: {modelViewProjectionMatrix: mat4; inverseProjectionMatrix: mat4}): vec3 {
+    const position = vec4.transformMat4(createVec4f64(), [0, 0, 0, 1], transform.modelViewProjectionMatrix);
+    vec4.transformMat4(position, position, transform.inverseProjectionMatrix);
+    return [position[0] / position[3], position[1] / position[3], position[2] / position[3]];
+}
+
 /**
  * Given a 3D point on the surface of a unit sphere, returns its angular coordinates in degrees.
  * The input vector must be normalized.

src/shaders/glsl/sky.fragment.glsl

@@ -5,11 +5,23 @@ uniform vec2 u_horizon;
 uniform vec2 u_horizon_normal;
 uniform float u_sky_horizon_blend;
 uniform float u_sky_blend;
+uniform vec3 u_globe_position;
+uniform float u_globe_radius;
+uniform float u_camera_to_center_distance;
+
+in vec3 v_view_direction;
 
 void main() {
     float x = gl_FragCoord.x;
     float y = gl_FragCoord.y;
     float blend = (y - u_horizon.y) * u_horizon_normal.y + (x - u_horizon.x) * u_horizon_normal.x;
+    if (u_sky_blend > 0.0) {
+        vec3 ray = normalize(v_view_direction);
+        float globe_distance = length(u_globe_position);
+        float angle_to_globe_center = acos(clamp(dot(ray, u_globe_position) / globe_distance, -1.0, 1.0));
+        float horizon_angle = asin(min(u_globe_radius / globe_distance, 1.0));
+        blend = mix(blend, (angle_to_globe_center - horizon_angle) * u_camera_to_center_distance, u_sky_blend);
+    }
     if (blend > 0.0) {
         if (blend < u_sky_horizon_blend) {
             fragColor = mix(u_sky_color, u_horizon_color, pow(1.0 - blend / u_sky_horizon_blend, 2.0));

src/shaders/glsl/sky.vertex.glsl

@@ -1,5 +1,10 @@
 layout(location = 0) in vec2 a_pos;
 
+uniform mat4 u_inv_proj_matrix;
+
+out vec3 v_view_direction;
+
 void main() {
+    v_view_direction = (u_inv_proj_matrix * vec4(a_pos, 0.0, 1.0)).xyz;
     gl_Position = vec4(a_pos, 1.0, 1.0);
 }

src/webgl/draw/draw_sky.ts

@@ -6,9 +6,9 @@ import {PosArray, TriangleIndexArray} from '../../data/array_types.g.ts';
 import {SegmentVector} from '../../data/segment.ts';
 import {skyUniformValues} from '../program/sky_program.ts';
 import {atmosphereUniformValues} from '../program/atmosphere_program.ts';
-import {getGlobeRadiusPixels} from '../../geo/projection/globe_utils.ts';
+import {getGlobeCenterInViewSpace, getGlobeRadiusPixels} from '../../geo/projection/globe_utils.ts';
 import {Mesh} from '../../render/mesh.ts';
-import {mat4, vec3, vec4} from 'gl-matrix';
+import {mat4, vec3} from 'gl-matrix';
 import {ColorMode} from '../color_mode.ts';
 
 import type {Sky} from '../../style/sky.ts';
@@ -95,22 +95,9 @@ export function drawAtmosphere(painter: Painter, sky: Sky, light: Light): void {
     }
 
     const globeRadius = getGlobeRadiusPixels(transform.worldSize, transform.center.lat);
-    const invProjMatrix = transform.inverseProjectionMatrix;
-    const vec = new Float64Array(4) as any as vec4;
-    vec[3] = 1;
-    vec4.transformMat4(vec, vec, transform.modelViewProjectionMatrix);
-    vec[0] /= vec[3];
-    vec[1] /= vec[3];
-    vec[2] /= vec[3];
-    vec[3] = 1;
-    vec4.transformMat4(vec, vec, invProjMatrix);
-    vec[0] /= vec[3];
-    vec[1] /= vec[3];
-    vec[2] /= vec[3];
-    vec[3] = 1;
-    const globePosition = [vec[0], vec[1], vec[2]] as vec3;
-
-    const uniformValues = atmosphereUniformValues(sunPos, atmosphereBlend, globePosition, globeRadius, invProjMatrix);
+    const globePosition = getGlobeCenterInViewSpace(transform);
+
+    const uniformValues = atmosphereUniformValues(sunPos, atmosphereBlend, globePosition, globeRadius, transform.inverseProjectionMatrix);
 
     const mesh = getMesh(context, sky);
 

src/webgl/program/sky_program.ts

@@ -1,9 +1,10 @@
-import {UniformColor, Uniform1f, Uniform2f} from '../uniform_binding.ts';
+import {UniformColor, Uniform1f, Uniform2f, Uniform3f, UniformMatrix4f} from '../uniform_binding.ts';
 import type {Context} from '../../webgl/context.ts';
 import type {UniformValues, UniformLocations} from '../uniform_binding.ts';
 import {type IReadonlyTransform} from '../../geo/transform_interface.ts';
 import {type Sky} from '../../style/sky.ts';
 import {getMercatorHorizon} from '../../geo/projection/mercator_utils.ts';
+import {getGlobeCenterInViewSpace, getGlobeRadiusPixels} from '../../geo/projection/globe_utils.ts';
 
 export type SkyUniformsType = {
     'u_sky_color': UniformColor;
@@ -12,6 +13,10 @@ export type SkyUniformsType = {
     'u_horizon_normal': Uniform2f;
     'u_sky_horizon_blend': Uniform1f;
     'u_sky_blend': Uniform1f;
+    'u_inv_proj_matrix': UniformMatrix4f;
+    'u_globe_position': Uniform3f;
+    'u_globe_radius': Uniform1f;
+    'u_camera_to_center_distance': Uniform1f;
 };
 
 const skyUniforms = (context: Context, locations: UniformLocations): SkyUniformsType => ({
@@ -21,6 +26,10 @@ const skyUniforms = (context: Context, locations: UniformLocations): SkyUniforms
     '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),
+    'u_inv_proj_matrix': new UniformMatrix4f(context, locations.u_inv_proj_matrix),
+    'u_globe_position': new Uniform3f(context, locations.u_globe_position),
+    'u_globe_radius': new Uniform1f(context, locations.u_globe_radius),
+    'u_camera_to_center_distance': new Uniform1f(context, locations.u_camera_to_center_distance),
 });
 
 const skyUniformValues = (sky: Sky, transform: IReadonlyTransform, pixelRatio: number): UniformValues<SkyUniformsType> => {
@@ -37,6 +46,10 @@ const skyUniformValues = (sky: Sky, transform: IReadonlyTransform, pixelRatio: n
         'u_horizon_normal': [-sinRoll, cosRoll],
         'u_sky_horizon_blend': (sky.properties.get('sky-horizon-blend') * transform.height / 2) * pixelRatio,
         'u_sky_blend': skyBlend,
+        'u_inv_proj_matrix': transform.inverseProjectionMatrix,
+        'u_globe_position': getGlobeCenterInViewSpace(transform),
+        'u_globe_radius': getGlobeRadiusPixels(transform.worldSize, transform.center.lat),
+        'u_camera_to_center_distance': transform.cameraToCenterDistance * pixelRatio,
     };
 };
 

test/build/bundle_size.json

@@ -1,14 +1,14 @@
 {
     "dist/maplibre-gl.mjs": {
-        "raw": 578009,
-        "gzip": 146197
+        "raw": 579535,
+        "gzip": 146573
     },
     "dist/maplibre-gl-worker.mjs": {
-        "raw": 19131,
-        "gzip": 6068
+        "raw": 19181,
+        "gzip": 6090
     },
     "dist/maplibre-gl-shared.mjs": {
-        "raw": 491922,
-        "gzip": 138320
+        "raw": 492100,
+        "gzip": 138394
     }
 }

test/integration/render/tests/projection/globe/sky-transition/expected.png

@@ -0,0 +1,38 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "height": 256,
+      "width": 512,
+      "maxPitch": 85,
+      "operations": [
+        [
+          "wait"
+        ]
+      ]
+    }
+  },
+  "center": [
+    11.64,
+    47.55
+  ],
+  "zoom": 4.5,
+  "pitch": 85,
+  "sources": {},
+  "layers": [],
+  "sky": {
+    "sky-color": "#199EF3",
+    "horizon-color": "#daeff0",
+    "sky-horizon-blend": 0.5,
+    "atmosphere-blend": 0
+  },
+  "projection": {
+    "type": [
+      "interpolate",
+      ["linear"],
+      ["zoom"],
+      4, "vertical-perspective",
+      5, "mercator"
+    ]
+  }
+}