WebGL matrix performance fix

src/geo/projection/globe_transform.ts

@@ -2,7 +2,7 @@ import {mat2, mat4, vec3, vec4} from 'gl-matrix';
 import {MAX_VALID_LATITUDE, TransformHelper} from '../transform_helper';
 import {MercatorTransform} from './mercator_transform';
 import {LngLat, LngLatLike, earthRadius} from '../lng_lat';
-import {angleToRotateBetweenVectors2D, clamp, createIdentityMat4f64, createMat4f64, createVec3f64, createVec4f64, differenceOfAnglesDegrees, distanceOfAnglesRadians, easeCubicInOut, lerp, pointPlaneSignedDistance, warnOnce} from '../../util/util';
+import {angleToRotateBetweenVectors2D, clamp, createIdentityMat4f32, createIdentityMat4f64, createMat4f64, createVec3f64, createVec4f64, differenceOfAnglesDegrees, distanceOfAnglesRadians, easeCubicInOut, lerp, pointPlaneSignedDistance, warnOnce} from '../../util/util';
 import {UnwrappedTileID, OverscaledTileID, CanonicalTileID} from '../../source/tile_id';
 import Point from '@mapbox/point-geometry';
 import {browser} from '../../util/browser';
@@ -240,7 +240,7 @@ export class GlobeTransform implements ITransform {
     private _skipNextAnimation: boolean = true;
 
     private _projectionMatrix: mat4 = createIdentityMat4f64();
-    private _globeViewProjMatrix: mat4 = createIdentityMat4f64();
+    private _globeViewProjMatrix32f: mat4 = createIdentityMat4f32(); // Must be 32 bit floats, otherwise WebGL calls in Chrome get very slow.
     private _globeViewProjMatrixNoCorrection: mat4 = createIdentityMat4f64();
     private _globeViewProjMatrixNoCorrectionInverted: mat4 = createIdentityMat4f64();
     private _globeProjMatrixInverted: mat4 = createIdentityMat4f64();
@@ -459,7 +459,7 @@ export class GlobeTransform implements ITransform {
 
         // Set 'projectionMatrix' to actual globe transform
         if (this.isGlobeRendering) {
-            data.mainMatrix = this._globeViewProjMatrix;
+            data.mainMatrix = this._globeViewProjMatrix32f;
         }
 
         data.clippingPlane = this._cachedClippingPlane as [number, number, number, number];
@@ -661,7 +661,7 @@ export class GlobeTransform implements ITransform {
         mat4.rotateX(globeMatrix, globeMatrix, this.center.lat * Math.PI / 180.0 - this._globeLatitudeErrorCorrectionRadians);
         mat4.rotateY(globeMatrix, globeMatrix, -this.center.lng * Math.PI / 180.0);
         mat4.scale(globeMatrix, globeMatrix, scaleVec); // Scale the unit sphere to a sphere with diameter of 1
-        this._globeViewProjMatrix = globeMatrix;
+        this._globeViewProjMatrix32f = new Float32Array(globeMatrix);
 
         this._globeViewProjMatrixNoCorrectionInverted = createMat4f64();
         mat4.invert(this._globeViewProjMatrixNoCorrectionInverted, globeMatrixUncorrected);
@@ -1197,7 +1197,7 @@ export class GlobeTransform implements ITransform {
         const fallbackMatrixScaled = createMat4f64();
         mat4.scale(fallbackMatrixScaled, projectionData.fallbackMatrix, [EXTENT, EXTENT, 1]);
 
-        projectionData.fallbackMatrix = fallbackMatrixScaled;
+        projectionData.fallbackMatrix = new Float32Array(fallbackMatrixScaled);
         return projectionData;
     }
 

src/geo/projection/mercator_transform.test.ts

@@ -669,16 +669,16 @@ describe('transform', () => {
         transform.resize(500, 500);
         transform.setCenter(new LngLat(10.0, 50.0));
         let projection = transform.projectTileCoordinates(1024, 1024, new UnwrappedTileID(0, new CanonicalTileID(1, 1, 0)), (_x, _y) => 0);
-        expect(projection.point.x).toBeCloseTo(0.07111111111111101, precisionDigits);
-        expect(projection.point.y).toBeCloseTo(0.8719999854792714, precisionDigits);
+        expect(projection.point.x).toBeCloseTo(0.0711111094156901, precisionDigits);
+        expect(projection.point.y).toBeCloseTo(0.872, precisionDigits);
         expect(projection.signedDistanceFromCamera).toBeCloseTo(750, precisionDigits);
         expect(projection.isOccluded).toBe(false);
         transform.setBearing(12);
         transform.setPitch(10);
         projection = transform.projectTileCoordinates(1024, 1024, new UnwrappedTileID(0, new CanonicalTileID(1, 1, 0)), (_x, _y) => 0);
-        expect(projection.point.x).toBeCloseTo(-0.10639783257205901, precisionDigits);
-        expect(projection.point.y).toBeCloseTo(0.8136784996777623, precisionDigits);
-        expect(projection.signedDistanceFromCamera).toBeCloseTo(787.6699126802941, precisionDigits);
+        expect(projection.point.x).toBeCloseTo(-0.10639783373236278, precisionDigits);
+        expect(projection.point.y).toBeCloseTo(0.8136785294062687, precisionDigits);
+        expect(projection.signedDistanceFromCamera).toBeCloseTo(787.6698880195618, precisionDigits);
         expect(projection.isOccluded).toBe(false);
     });
 

src/geo/projection/mercator_transform.ts

@@ -416,7 +416,7 @@ export class MercatorTransform implements ITransform {
         const tileMatrix = calculateTileMatrix(tileID, this.worldSize);
         mat4.multiply(tileMatrix, aligned ? this._alignedProjMatrix : this._viewProjMatrix, tileMatrix);
 
-        cache[posMatrixKey] = tileMatrix;
+        cache[posMatrixKey] = new Float32Array(tileMatrix); // Must be 32 bit floats, otherwise WebGL calls in Chrome get very slow.
         return cache[posMatrixKey];
     }
 
@@ -430,7 +430,7 @@ export class MercatorTransform implements ITransform {
         const fogMatrix = calculateTileMatrix(unwrappedTileID, this.worldSize);
         mat4.multiply(fogMatrix, this._fogMatrix, fogMatrix);
 
-        cache[posMatrixKey] = fogMatrix;
+        cache[posMatrixKey] = new Float32Array(fogMatrix); // Must be 32 bit floats, otherwise WebGL calls in Chrome get very slow.
         return cache[posMatrixKey];
     }
 

src/util/util.ts

@@ -27,6 +27,14 @@ export function createIdentityMat4f64(): mat4 {
     mat4.identity(m);
     return m;
 }
+/**
+ * Returns a new 32 bit float mat4 set to identity.
+ */
+export function createIdentityMat4f32(): mat4 {
+    const m = new Float32Array(16) as any;
+    mat4.identity(m);
+    return m;
+}
 
 /**
  * Returns a translation in tile units that correctly incorporates the view angle and the *-translate and *-translate-anchor properties.