Add Vertical Perspective projection (#5023)

* Support Vertical Projection

* changelog

* unit test fix

* remove typo

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## main
 
 ### ✨ Features and improvements
+- Support Vertical Perspective projection ([#5023](https://github.com/maplibre/maplibre-gl-js/pull/5023))
 - _...Add new stuff here..._
 
 ### 🐞 Bug fixes

package.json

@@ -24,7 +24,7 @@
     "@mapbox/unitbezier": "^0.0.1",
     "@mapbox/vector-tile": "^1.3.1",
     "@mapbox/whoots-js": "^3.1.0",
-    "@maplibre/maplibre-gl-style-spec": "^21.1.0",
+    "@maplibre/maplibre-gl-style-spec": "^21.2.0",
     "@types/geojson": "^7946.0.14",
     "@types/geojson-vt": "3.2.5",
     "@types/mapbox__point-geometry": "^0.1.4",

src/geo/projection/globe_transform.ts

@@ -282,8 +282,11 @@ export class GlobeTransform implements ITransform {
     private _farZ: number;
 
     private _coveringTilesDetailsProvider: GlobeCoveringTilesDetailsProvider;
+    private _adaptive: boolean;
+
+    public constructor(globeProjection: GlobeProjection, globeProjectionEnabled: boolean = true, adaptive:boolean = true) {
+        this._adaptive = adaptive;
 
-    public constructor(globeProjection: GlobeProjection, globeProjectionEnabled: boolean = true) {
         this._helper = new TransformHelper({
             calcMatrices: () => { this._calcMatrices(); },
             getConstrained: (center, zoom) => { return this.getConstrained(center, zoom); }
@@ -372,7 +375,8 @@ export class GlobeTransform implements ITransform {
     newFrameUpdate(): TransformUpdateResult {
         this._lastUpdateTimeSeconds = browser.now() / 1000.0;
         const oldGlobeRendering = this.isGlobeRendering;
-        this._globeness = this._computeGlobenessAnimation();
+
+        this._globeness = (!this._adaptive && this._globeProjectionAllowed) ? 1 : this._computeGlobenessAnimation();
         // Everything below this comment must happen AFTER globeness update
         this._updateErrorCorrectionValue();
         this._calcMatrices();

src/geo/projection/projection_factory.ts

@@ -29,7 +29,16 @@ export function createProjectionFromName(name: ProjectionSpecification['type']):
             const proj = new GlobeProjection();
             return {
                 projection: proj,
-                transform: new GlobeTransform(proj),
+                transform: new GlobeTransform(proj, true),
+                cameraHelper: new GlobeCameraHelper(proj),
+            };
+        }
+        case 'vertical-perspective':
+        {
+            const proj = new GlobeProjection();
+            return {
+                projection: proj,
+                transform: new GlobeTransform(proj, true, false),
                 cameraHelper: new GlobeCameraHelper(proj),
             };
         }