[MAPS3D-763] stars & atmosphere performance improvements (#490)

[MAPS3D-763] stars & atmosphere performance improvements

- render stars via separate quad-geometry
  - gives more control over star shape, count, size/intensity dispersion
  - significantly reduce complexity of atmosphere shader
- do not apply dithering for native (noticeable performance impact on mobile)

flow-typed/gl-matrix.js

@@ -72,6 +72,7 @@ declare module "gl-matrix" {
         mul<T: Mat3>(T, Mat3, Mat3): T,
         multiply<T: Mat3>(T, Mat3, Mat3): T,
         adjoint<T: Mat3>(T, Mat3): T,
+        invert<T: Mat3>(T, Mat3): T,
         transpose<T: Mat3>(T, Mat3): T
     };
 

src/data/array_types.js

@@ -849,6 +849,43 @@ class StructArrayLayout5f20 extends StructArray {
 StructArrayLayout5f20.prototype.bytesPerElement = 20;
 register(StructArrayLayout5f20, 'StructArrayLayout5f20');
 
+/**
+ * Implementation of the StructArray layout:
+ * [0]: Float32[7]
+ *
+ * @private
+ */
+class StructArrayLayout7f28 extends StructArray {
+    uint8: Uint8Array;
+    float32: Float32Array;
+
+    _refreshViews() {
+        this.uint8 = new Uint8Array(this.arrayBuffer);
+        this.float32 = new Float32Array(this.arrayBuffer);
+    }
+
+    emplaceBack(v0: number, v1: number, v2: number, v3: number, v4: number, v5: number, v6: number): number {
+        const i = this.length;
+        this.resize(i + 1);
+        return this.emplace(i, v0, v1, v2, v3, v4, v5, v6);
+    }
+
+    emplace(i: number, v0: number, v1: number, v2: number, v3: number, v4: number, v5: number, v6: number): number {
+        const o7 = i * 7;
+        this.float32[o7 + 0] = v0;
+        this.float32[o7 + 1] = v1;
+        this.float32[o7 + 2] = v2;
+        this.float32[o7 + 3] = v3;
+        this.float32[o7 + 4] = v4;
+        this.float32[o7 + 5] = v5;
+        this.float32[o7 + 6] = v6;
+        return i;
+    }
+}
+
+StructArrayLayout7f28.prototype.bytesPerElement = 28;
+register(StructArrayLayout7f28, 'StructArrayLayout7f28');
+
 /**
  * Implementation of the StructArray layout:
  * [0]: Uint32[1]
@@ -1241,6 +1278,7 @@ export {
     StructArrayLayout3ui6 as QuadTriangleArray,
     StructArrayLayout5f20 as GlobeVertexArray,
     StructArrayLayout5f20 as AtmosphereVertexArray,
+    StructArrayLayout7f28 as StarsVertexArray,
     StructArrayLayout3ui6 as TriangleIndexArray,
     StructArrayLayout2ui4 as LineIndexArray,
     StructArrayLayout1ui2 as LineStripIndexArray,

src/geo/transform.js

@@ -95,6 +95,8 @@ class Transform {
     worldToFogMatrix: Float64Array;
     skyboxMatrix: Float32Array;
 
+    starsProjMatrix: Float32Array;
+
     // Transform from screen coordinates to GL NDC, [0, w] x [h, 0] --> [-1, 1] x [-1, 1]
     // Roughly speaking, applies pixelsToGLUnits scaling with a translation
     glCoordMatrix: Float32Array;
@@ -1907,6 +1909,9 @@ class Transform {
         mat4.rotateZ(view, view, this.angle);
 
         const projection = mat4.perspective(new Float32Array(16), this._fov, this.width / this.height, this._nearZ, this._farZ);
+
+        this.starsProjMatrix = mat4.clone(projection);
+
         // The distance in pixels the skybox needs to be shifted down by to meet the shifted horizon.
         const skyboxHorizonShift = (Math.PI / 2 - this._pitch) * (this.height / this._fov) * this._horizonShift;
         // Apply center of perspective offset to skybox projection

src/gl/color_mode.js

@@ -3,12 +3,12 @@ import Color from '../style-spec/util/color.js';
 
 import type {BlendFuncType, ColorMaskType} from './types.js';
 
-const ZERO = 0x0000;
-const ONE = 0x0001;
-const ONE_MINUS_SRC_ALPHA = 0x0303;
-const DST_COLOR = 0x0306;
+export const ZERO = 0x0000;
+export const ONE = 0x0001;
+export const ONE_MINUS_SRC_ALPHA = 0x0303;
+export const DST_COLOR = 0x0306;
 
-class ColorMode {
+export class ColorMode {
     blendFunction: BlendFuncType;
     blendColor: Color;
     mask: ColorMaskType;