update use of mat4

updating types as gl-matrix
more types to gl-matrix
cleanup cast vs constructor
cleanup more gl-matrix types
more using gl-matrix instead of Float32Array
fixes from WIP squashed into one commit

src/data/bucket/symbol_bucket.ts

@@ -362,8 +362,9 @@ class SymbolBucket implements Bucket {
         this.sortKeyRanges = [];
 
         this.collisionCircleArray = [];
-        this.placementInvProjMatrix = mat4.identity([]);
-        this.placementViewportMatrix = mat4.identity([]);
+        // NOTE mat4.create() creates a mat4.identity()
+        this.placementInvProjMatrix = mat4.create();
+        this.placementViewportMatrix = mat4.create();
 
         const layer = this.layers[0];
         const unevaluatedLayoutValues = layer._unevaluatedLayout._values;

src/data/feature_index.ts

@@ -23,10 +23,11 @@ import type Transform from '../geo/transform';
 import type {FilterSpecification, PromoteIdSpecification} from '../style-spec/types';
 
 import {FeatureIndexArray} from './array_types';
+import {mat4} from 'gl-matrix';
 
 type QueryParameters = {
   scale: number,
-  pixelPosMatrix: Float32Array,
+  pixelPosMatrix: mat4,
   transform: Transform,
   tileSize: number,
   queryGeometry: Array<Point>,

src/geo/transform.ts

@@ -27,18 +27,18 @@ class Transform {
     width: number;
     height: number;
     angle: number;
-    rotationMatrix: Float32Array;
+    rotationMatrix: mat2;
     zoomFraction: number;
     pixelsToGLUnits: [number, number];
     cameraToCenterDistance: number;
-    mercatorMatrix: Array<number>;
-    projMatrix: Float32Array;
-    invProjMatrix: Float32Array;
-    alignedProjMatrix: Float32Array;
-    pixelMatrix: Float32Array;
-    pixelMatrixInverse: Float32Array;
-    glCoordMatrix: Float32Array;
-    labelPlaneMatrix: Float32Array;
+    mercatorMatrix: mat4;
+    projMatrix: mat4;
+    invProjMatrix: mat4;
+    alignedProjMatrix: mat4;
+    pixelMatrix: mat4;
+    pixelMatrixInverse: mat4;
+    glCoordMatrix: mat4;
+    labelPlaneMatrix: mat4;
     _fov: number;
     _pitch: number;
     _zoom: number;
@@ -52,17 +52,17 @@ class Transform {
     _edgeInsets: EdgeInsets;
     _constraining: boolean;
     _posMatrixCache: {
-      [_: string]: Float32Array
+      [_: string]: mat4
     };
     _alignedPosMatrixCache: {
-      [_: string]: Float32Array
+      [_: string]: mat4
     };
 
     constructor(minZoom: number | undefined | null, maxZoom: number | undefined | null, minPitch: number | undefined | null, maxPitch: number | undefined | null, renderWorldCopies: boolean) {
         this.tileSize = 512; // constant
         this.maxValidLatitude = 85.051129; // constant
 
-        this._renderWorldCopies = renderWorldCopies === undefined ? true : renderWorldCopies;
+        this._renderWorldCopies = renderWorldCopies === undefined ? true : !!renderWorldCopies;
         this._minZoom = minZoom || 0;
         this._maxZoom = maxZoom || 22;
 
@@ -163,7 +163,7 @@ class Transform {
         this._calcMatrices();
 
         // 2x2 matrix for rotating points
-        this.rotationMatrix = mat2.create() as Float32Array;
+        this.rotationMatrix = mat2.create();
         mat2.rotate(this.rotationMatrix, this.rotationMatrix, this.angle);
     }
 
@@ -510,8 +510,8 @@ class Transform {
         // unproject two points to get a line and then find the point on that
         // line with z=0
 
-        const coord0 = [p.x, p.y, 0, 1];
-        const coord1 = [p.x, p.y, 1, 1];
+        const coord0 = vec4.fromValues(p.x, p.y, 0, 1);
+        const coord1 = vec4.fromValues(p.x, p.y, 1, 1);
 
         vec4.transformMat4(coord0, coord0, this.pixelMatrixInverse);
         vec4.transformMat4(coord1, coord1, this.pixelMatrixInverse);
@@ -539,8 +539,8 @@ class Transform {
      * @private
      */
     coordinatePoint(coord: MercatorCoordinate) {
-        const p = [coord.x * this.worldSize, coord.y * this.worldSize, 0, 1];
-        vec4.transformMat4(p as vec4, p as vec4, this.pixelMatrix);
+        const p = vec4.fromValues(coord.x * this.worldSize, coord.y * this.worldSize, 0, 1);
+        vec4.transformMat4(p, p, this.pixelMatrix);
         return new Point(p[0] / p[3], p[1] / p[3]);
     }
 
@@ -588,7 +588,7 @@ class Transform {
      * @param {UnwrappedTileID} unwrappedTileID;
      * @private
      */
-    calculatePosMatrix(unwrappedTileID: UnwrappedTileID, aligned: boolean = false): Float32Array {
+    calculatePosMatrix(unwrappedTileID: UnwrappedTileID, aligned: boolean = false): mat4 {
         const posMatrixKey = unwrappedTileID.key;
         const cache = aligned ? this._alignedPosMatrixCache : this._posMatrixCache;
         if (cache[posMatrixKey]) {
@@ -599,17 +599,18 @@ class Transform {
         const scale = this.worldSize / this.zoomScale(canonical.z);
         const unwrappedX = canonical.x + Math.pow(2, canonical.z) * unwrappedTileID.wrap;
 
-        const posMatrix = mat4.identity(new Float32Array(16));
+        const posMatrix = mat4.create();
         mat4.translate(posMatrix, posMatrix, [unwrappedX * scale, canonical.y * scale, 0]);
         mat4.scale(posMatrix, posMatrix, [scale / EXTENT, scale / EXTENT, 1]);
         mat4.multiply(posMatrix, aligned ? this.alignedProjMatrix : this.projMatrix, posMatrix);
 
-        cache[posMatrixKey] = new Float32Array(posMatrix);
+        cache[posMatrixKey] = mat4.clone(posMatrix);
         return cache[posMatrixKey];
     }
 
-    customLayerMatrix(): Array<number> {
-        return this.mercatorMatrix.slice();
+    customLayerMatrix(): mat4 {
+        // I assume the previous 'slice' was just to trigger a copy?
+        return mat4.clone(this.mercatorMatrix);
     }
 
     _constrain() {
@@ -713,7 +714,7 @@ class Transform {
         const nearZ = this.height / 50;
 
         // matrix for conversion from location to GL coordinates (-1 .. 1)
-        let m = new Float32Array(16);
+        let m = mat4.create();
         mat4.perspective(m, this._fov, this.width / this.height, nearZ, farZ);
 
         //Apply center of perspective offset
@@ -728,13 +729,14 @@ class Transform {
 
         // The mercatorMatrix can be used to transform points from mercator coordinates
         // ([0, 0] nw, [1, 1] se) to GL coordinates.
-        this.mercatorMatrix = mat4.scale(new Float32Array(), m, [this.worldSize, this.worldSize, this.worldSize]) as number[];
+        this.mercatorMatrix = mat4.scale(mat4.create(), m, vec3.fromValues(this.worldSize, this.worldSize, this.worldSize));
 
         // scale vertically to meters per pixel (inverse of ground resolution):
-        mat4.scale(m, m, [1, 1, mercatorZfromAltitude(1, this.center.lat) * this.worldSize, 1]);
+        // WARN mat4.scale(m, m, [1, 1, mercatorZfromAltitude(1, this.center.lat) * this.worldSize, 1]); // existing code has extra element in scaling array
+        mat4.scale(m, m, vec3.fromValues(1, 1, mercatorZfromAltitude(1, this.center.lat) * this.worldSize));
 
         this.projMatrix = m;
-        this.invProjMatrix = mat4.invert(new Float32Array(), this.projMatrix) as Float32Array;
+        this.invProjMatrix = mat4.invert(mat4.create(), this.projMatrix);
 
         // Make a second projection matrix that is aligned to a pixel grid for rendering raster tiles.
         // We're rounding the (floating point) x/y values to achieve to avoid rendering raster images to fractional
@@ -746,26 +748,26 @@ class Transform {
             angleCos = Math.cos(this.angle), angleSin = Math.sin(this.angle),
             dx = x - Math.round(x) + angleCos * xShift + angleSin * yShift,
             dy = y - Math.round(y) + angleCos * yShift + angleSin * xShift;
-        const alignedM = new Float32Array(m);
+        const alignedM = mat4.clone(m);
         mat4.translate(alignedM, alignedM, [ dx > 0.5 ? dx - 1 : dx, dy > 0.5 ? dy - 1 : dy, 0 ]);
         this.alignedProjMatrix = alignedM;
 
-        m = mat4.create() as Float32Array;
+        m = mat4.create();
         mat4.scale(m, m, [this.width / 2, -this.height / 2, 1]);
         mat4.translate(m, m, [1, -1, 0]);
         this.labelPlaneMatrix = m;
 
-        m = mat4.create() as Float32Array;
+        m = mat4.create();
         mat4.scale(m, m, [1, -1, 1]);
         mat4.translate(m, m, [-1, -1, 0]);
         mat4.scale(m, m, [2 / this.width, 2 / this.height, 1]);
         this.glCoordMatrix = m;
 
         // matrix for conversion from location to screen coordinates
-        this.pixelMatrix = mat4.multiply(new Float32Array(16), this.labelPlaneMatrix, this.projMatrix) as Float32Array;
+        this.pixelMatrix = mat4.multiply(mat4.create(), this.labelPlaneMatrix, this.projMatrix);
 
         // inverse matrix for conversion from screen coordinaes to location
-        m = mat4.invert(new Float32Array(16), this.pixelMatrix) as Float32Array;
+        m = mat4.invert(mat4.create(), this.pixelMatrix);
         if (!m) throw new Error("failed to invert matrix");
         this.pixelMatrixInverse = m;
 
@@ -778,8 +780,8 @@ class Transform {
         if (!this.pixelMatrixInverse) return 1;
 
         const coord = this.pointCoordinate(new Point(0, 0));
-        const p = [coord.x * this.worldSize, coord.y * this.worldSize, 0, 1];
-        const topPoint = vec4.transformMat4(p as vec4, p as vec4, this.pixelMatrix);
+        const p = vec4.fromValues(coord.x * this.worldSize, coord.y * this.worldSize, 0, 1);
+        const topPoint = vec4.transformMat4(p, p, this.pixelMatrix);
         return topPoint[3] / this.cameraToCenterDistance;
     }
 

src/render/draw_symbol.ts

@@ -6,7 +6,7 @@ import pixelsToTileUnits from '../source/pixels_to_tile_units';
 import * as symbolProjection from '../symbol/projection';
 import * as symbolSize from '../symbol/symbol_size';
 import {mat4} from 'gl-matrix';
-const identityMat4 = mat4.identity(new Float32Array(16));
+const identityMat4 = mat4.create();
 import StencilMode from '../gl/stencil_mode';
 import DepthMode from '../gl/depth_mode';
 import CullFaceMode from '../gl/cull_face_mode';

src/render/painter.ts

@@ -1,7 +1,7 @@
 import browser from '../util/browser';
 import window from '../util/window';
 
-import {mat4} from 'gl-matrix';
+import {mat4, vec3} from 'gl-matrix';
 import SourceCache from '../source/source_cache';
 import EXTENT from '../data/extent';
 import pixelsToTileUnits from '../source/pixels_to_tile_units';
@@ -553,10 +553,10 @@ class Painter {
     /**
      * Transform a matrix to incorporate the *-translate and *-translate-anchor properties into it.
      * @param inViewportPixelUnitsUnits True when the units accepted by the matrix are in viewport pixels instead of tile units.
-     * @returns {Float32Array} matrix
+     * @returns {mat4} matrix
      * @private
      */
-    translatePosMatrix(matrix: Float32Array, tile: Tile, translate: [number, number], translateAnchor: "map" | "viewport", inViewportPixelUnitsUnits?: boolean) {
+    translatePosMatrix(matrix: mat4, tile: Tile, translate: [number, number], translateAnchor: "map" | "viewport", inViewportPixelUnitsUnits?: boolean) {
         if (!translate[0] && !translate[1]) return matrix;
 
         const angle = inViewportPixelUnitsUnits ?
@@ -572,13 +572,13 @@ class Painter {
             ];
         }
 
-        const translation = [
+        const translation = vec3.fromValues(
             inViewportPixelUnitsUnits ? translate[0] : pixelsToTileUnits(tile, translate[0], this.transform.zoom),
             inViewportPixelUnitsUnits ? translate[1] : pixelsToTileUnits(tile, translate[1], this.transform.zoom),
             0
-        ];
+        );
 
-        const translatedMatrix = new Float32Array(16);
+        const translatedMatrix = mat4.create();
         mat4.translate(translatedMatrix, matrix, translation);
         return translatedMatrix;
     }

src/render/program/background_program.ts

@@ -16,6 +16,7 @@ import type {CrossFaded} from '../../style/properties';
 import type {CrossfadeParameters} from '../../style/evaluation_parameters';
 import type {OverscaledTileID} from '../../source/tile_id';
 import type ResolvedImage from '../../style-spec/expression/types/resolved_image';
+import {mat4} from 'gl-matrix';
 
 export type BackgroundUniformsType = {
   'u_matrix': UniformMatrix4f,
@@ -68,14 +69,14 @@ const backgroundPatternUniforms = (context: Context, locations: UniformLocations
     'u_tile_units_to_pixels': new Uniform1f(context, locations.u_tile_units_to_pixels)
 });
 
-const backgroundUniformValues = (matrix: Float32Array, opacity: number, color: Color): UniformValues<BackgroundUniformsType> => ({
+const backgroundUniformValues = (matrix: mat4, opacity: number, color: Color): UniformValues<BackgroundUniformsType> => ({
     'u_matrix': matrix,
     'u_opacity': opacity,
     'u_color': color
 });
 
 const backgroundPatternUniformValues = (
-  matrix: Float32Array,
+  matrix: mat4,
   opacity: number,
   painter: Painter,
   image: CrossFaded<ResolvedImage>,

src/render/program/clipping_mask_program.ts

@@ -2,6 +2,7 @@ import {UniformMatrix4f} from '../uniform_binding';
 
 import type Context from '../../gl/context';
 import type {UniformValues, UniformLocations} from '../uniform_binding';
+import {mat4} from 'gl-matrix';
 
 export type ClippingMaskUniformsType = {
   'u_matrix': UniformMatrix4f
@@ -11,7 +12,7 @@ const clippingMaskUniforms = (context: Context, locations: UniformLocations): Cl
     'u_matrix': new UniformMatrix4f(context, locations.u_matrix)
 });
 
-const clippingMaskUniformValues = (matrix: Float32Array): UniformValues<ClippingMaskUniformsType> => ({
+const clippingMaskUniformValues = (matrix: mat4): UniformValues<ClippingMaskUniformsType> => ({
     'u_matrix': matrix
 });
 

src/render/program/collision_program.ts

@@ -5,6 +5,7 @@ import type Context from '../../gl/context';
 import type {UniformValues, UniformLocations} from '../uniform_binding';
 import type Transform from '../../geo/transform';
 import type Tile from '../../source/tile';
+import {mat4} from 'gl-matrix';
 
 export type CollisionUniformsType = {
   'u_matrix': UniformMatrix4f,
@@ -36,7 +37,7 @@ const collisionCircleUniforms = (context: Context, locations: UniformLocations):
     'u_viewport_size': new Uniform2f(context, locations.u_viewport_size)
 });
 
-const collisionUniformValues = (matrix: Float32Array, transform: Transform, tile: Tile): UniformValues<CollisionUniformsType> => {
+const collisionUniformValues = (matrix: mat4, transform: Transform, tile: Tile): UniformValues<CollisionUniformsType> => {
     const pixelRatio = pixelsToTileUnits(tile, 1, transform.zoom);
     const scale = Math.pow(2, transform.zoom - tile.tileID.overscaledZ);
     const overscaleFactor = tile.tileID.overscaleFactor();
@@ -50,7 +51,7 @@ const collisionUniformValues = (matrix: Float32Array, transform: Transform, tile
     };
 };
 
-const collisionCircleUniformValues = (matrix: Float32Array, invMatrix: Float32Array, transform: Transform): UniformValues<CollisionCircleUniformsType> => {
+const collisionCircleUniformValues = (matrix: mat4, invMatrix: mat4, transform: Transform): UniformValues<CollisionCircleUniformsType> => {
     return {
         'u_matrix': matrix,
         'u_inv_matrix': invMatrix,

src/render/program/debug_program.ts

@@ -3,6 +3,7 @@ import {UniformColor, UniformMatrix4f, Uniform1i, Uniform1f} from '../uniform_bi
 import type Context from '../../gl/context';
 import type {UniformValues, UniformLocations} from '../uniform_binding';
 import type Color from '../../style-spec/util/color';
+import {mat4} from 'gl-matrix';
 
 export type DebugUniformsType = {
   'u_color': UniformColor,
@@ -18,7 +19,7 @@ const debugUniforms = (context: Context, locations: UniformLocations): DebugUnif
     'u_overlay_scale':  new Uniform1f(context, locations.u_overlay_scale)
 });
 
-const debugUniformValues = (matrix: Float32Array, color: Color, scaleRatio: number = 1): UniformValues<DebugUniformsType> => ({
+const debugUniformValues = (matrix: mat4, color: Color, scaleRatio: number = 1): UniformValues<DebugUniformsType> => ({
     'u_matrix': matrix,
     'u_color': color,
     'u_overlay': 0,

src/render/program/fill_extrusion_program.ts

@@ -7,7 +7,7 @@ import {
     UniformMatrix4f
 } from '../uniform_binding';
 
-import {mat3, vec3} from 'gl-matrix';
+import {mat3, mat4, vec3} from 'gl-matrix';
 import {extend} from '../../util/util';
 
 import type Context from '../../gl/context';
@@ -72,14 +72,14 @@ const fillExtrusionPatternUniforms = (context: Context, locations: UniformLocati
 });
 
 const fillExtrusionUniformValues = (
-  matrix: Float32Array,
+  matrix: mat4,
   painter: Painter,
   shouldUseVerticalGradient: boolean,
   opacity: number
 ): UniformValues<FillExtrusionUniformsType> => {
     const light = painter.style.light;
     const _lp = light.properties.get('position');
-    const lightPos = [_lp.x, _lp.y, _lp.z];
+    const lightPos = vec3.fromValues(_lp.x, _lp.y, _lp.z);
     const lightMat = mat3.create();
     if (light.properties.get('anchor') === 'viewport') {
         mat3.fromRotation(lightMat, -painter.transform.angle);
@@ -99,7 +99,7 @@ const fillExtrusionUniformValues = (
 };
 
 const fillExtrusionPatternUniformValues = (
-  matrix: Float32Array,
+  matrix: mat4,
   painter: Painter,
   shouldUseVerticalGradient: boolean,
   opacity: number,