Fix mercator to globe transformation matrix used in model layer.

GitOrigin-RevId: cd4a198aa4a2daebc72c9750d88c0dc88ee6f005

Author: stephanheigl

3d-style/util/model_util.ts

@@ -176,7 +176,8 @@ export function mercatorToGlobeMatrix(matrix: mat4, transform: Transform): mat4
     mat4.translate(m, m, [0, 0, GLOBE_RADIUS]);
     mat4.scale(m, m, [pixelsToEcef, pixelsToEcef, pixelsToEcef * pixelsPerMeter]);
 
-    mat4.translate(m, m, [transform.point.x - 0.5 * worldSize, transform.point.y - 0.5 * worldSize, 0.0]);
+    const transformPoint = transform.point;
+    mat4.translate(m, m, [-transformPoint.x, -transformPoint.y, 0.0]);
     mat4.multiply(m, m, matrix);
     return mat4.multiply(m, transform.globeMatrix, m);
 }

test/integration/render-tests/model-layer/models-on-globe-transition/expected.png

@@ -0,0 +1,63 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "width": 1024,
+      "height": 1024,
+      "operations": [
+        ["setProjection", "globe"],
+        ["wait"]
+      ]
+    }
+  },
+  "center": [ 0, 0 ],
+  "zoom": 5.40,
+  "pitch": 60,
+  "fog": {
+    "star-intensity": 0.0
+  },
+  "sources": {
+    "model": {
+      "type": "model",
+      "models": {
+        "model-1" : {
+          "uri": "local://models/low-poly-car.gltf",
+          "position": [0, 0],
+          "orientation": [0, 0, 45]
+        },
+        "model-2" : {
+          "uri": "local://models/low-poly-car.gltf",
+          "position": [0.00000, 20],
+          "orientation": [0, 45, 45]
+        },
+        "model-3" : {
+          "uri": "local://models/low-poly-car.gltf",
+          "position": [-5, 5],
+          "orientation": [0, 0, 145]
+        },
+        "model-4" : {
+          "uri": "local://models/low-poly-car.gltf",
+          "position": [5, 5],
+          "orientation": [0, 45, -45]
+        }
+      }
+    }
+  },
+  "layers": [
+    {
+      "id": "background",
+      "type": "background",
+      "paint": {
+          "background-color": "white"
+      }
+    },
+    {
+      "id": "model",
+      "type": "model",
+      "source": "model",
+      "paint": {
+        "model-scale" : [100000, 100000, 100000]
+      }
+    }
+  ]
+}