Sync v3.0.0 with the release branch

.circleci/config.yml

@@ -92,15 +92,6 @@ workflows:
           filters:
             tags:
               only: /.*/
-      - collect-stats:
-          requires:
-            - build
-            - install-mbx-ci
-          filters:
-            tags:
-              ignore: /.*/
-            branches:
-              only: main
       - deploy-release:
           requires:
             - install-mbx-ci
@@ -336,20 +327,6 @@ jobs:
             yarn run codegen
             git add -A && git diff --staged --exit-code | tee check.patch
 
-  collect-stats:
-    <<: *linux-defaults
-    steps:
-      - attach_workspace:
-          at: ~/
-      - browser-tools/install-chrome
-      - run:
-          name: Collect performance stats
-          command: node bench/gl-stats.js
-      - aws-cli/install
-      - run:
-          name: Upload performance stats
-          command: aws s3 cp data.json.gz s3://mapbox-loading-dock/raw/gl_js.perf_metrics_staging/ci/`git show -s --date=short --format=%cd-%h HEAD`.json.gz
-
   test-browser:
     <<: *linux-defaults
     steps:

.eslintrc

@@ -27,9 +27,6 @@
     "no-duplicate-imports": "off",
     "import/no-duplicates": "error",
 
-    // prevent issues with esbuild/vite https://github.com/mapbox/mapbox-gl-js/issues/12656
-    "no-restricted-syntax": ["error", "ClassProperty[value]"],
-
     // ensure compatibility with Node's native ESM
     "import/extensions": ["error", {
       "js": "always",
@@ -176,6 +173,38 @@
         "jsdoc/require-property-type": "error",
         "jsdoc/require-returns-type": "error",
       }
+    },
+    {
+      "files": [
+        "src/**/*",
+        "3d-style/**/*"
+      ],
+      "rules": {
+        "no-restricted-syntax": [
+          "error",
+          {
+            "selector": "AwaitExpression",
+            "message": "Async/await syntax is not allowed."
+          },
+          {
+            "selector": "FunctionDeclaration[async=true]",
+            "message": "Async function declarations are not allowed."
+          },
+          {
+            "selector": "FunctionExpression[async=true]",
+            "message": "Async function expressions are not allowed."
+          },
+          {
+            "selector": "ArrowFunctionExpression[async=true]",
+            "message": "Async arrow functions are not allowed."
+          },
+          // prevent issues with esbuild/vite https://github.com/mapbox/mapbox-gl-js/issues/12656
+          {
+            "selector": "ClassProperty[value]",
+            "message": "ClassProperty values are not allowed."
+          }
+        ]
+      }
     }
   ],
   "globals": {

3d-style/render/model_manager.js

@@ -26,20 +26,22 @@
         this.numModelsLoading = {};
     }
 
-    async loadModel(id: string, url: string): Promise<?Model> {
-        const gltf = await loadGLTF(this.requestManager.transformRequest(url, ResourceType.Model).url).catch((err) => {
-            this.fire(new ErrorEvent(new Error(`Could not load model ${id} from ${url}: ${err.message}`)));
-        });
-
-        if (!gltf) return;
-
-        const nodes = convertModel(gltf);
-        const model = new Model(id, undefined, undefined, nodes);
-        model.computeBoundsAndApplyParent();
-        return model;
+    loadModel(id: string, url: string): Promise<?Model> {
+        return loadGLTF(this.requestManager.transformRequest(url, ResourceType.Model).url)
+            .then(gltf => {
+                if (!gltf) return;
+
+                const nodes = convertModel(gltf);
+                const model = new Model(id, undefined, undefined, nodes);
+                model.computeBoundsAndApplyParent();
+                return model;
+            })
+            .catch((err) => {
+                this.fire(new ErrorEvent(new Error(`Could not load model ${id} from ${url}: ${err.message}`)));
+            });
     }
 
-    async load(modelUris: {[string]: string}, scope: string) {
+    load(modelUris: {[string]: string}, scope: string) {
         if (!this.models[scope]) this.models[scope] = {};
 
         const modelIds = Object.keys(modelUris);
@@ -50,15 +52,18 @@
             modelLoads.push(this.loadModel(modelId, modelUris[modelId]));
         }
 
-        const results = await Promise.allSettled(modelLoads);
-
-        for (let i = 0; i < results.length; i++) {
-            const {status, value} = results[i];
-            if (status === 'fulfilled' && value) this.models[scope][modelIds[i]] = value;
-        }
-        this.numModelsLoading[scope] -= modelIds.length;
-
-        this.fire(new Event('data', {dataType: 'style'}));
+        Promise.allSettled(modelLoads)
+            .then(results => {
+                for (let i = 0; i < results.length; i++) {
+                    const {status, value} = results[i];
+                    if (status === 'fulfilled' && value) this.models[scope][modelIds[i]] = value;
+                }
+                this.numModelsLoading[scope] -= modelIds.length;
+                this.fire(new Event('data', {dataType: 'style'}));
+            })
+            .catch((err) => {
+                this.fire(new ErrorEvent(new Error(`Could not load models: ${err.message}`)));
+            });
     }
 
     isLoaded(): boolean {
@@ -77,7 +82,7 @@
         return this.models[scope][id];
     }
 
-    async addModel(id: string, url: string, scope: string) {
+    addModel(id: string, url: string, scope: string) {
         if (!this.models[scope]) this.models[scope] = {};
         // Destroy model if it exists
         if (this.hasModel(id, scope)) {

3d-style/source/model_source.js

@@ -44,23 +44,32 @@ class ModelSource extends Evented implements Source {
         this._options = options;
     }
 
-    async load() {
-        /* $FlowIgnore[prop-missing] we don't need the full spec of model_source as it's only used for testing*/
+    load(): Promise<void> {
+        const modelPromises = [];
+
+        /* $FlowIgnore[prop-missing] we don't need the full spec of model_source as it's only used for testing */
         for (const modelId in this._options.models) {
             const modelSpec = this._options.models[modelId];
-            const gltf = await loadGLTF(this.map._requestManager.transformRequest(modelSpec.uri, ResourceType.Model).url).catch((err) => {
+
+            const modelPromise = loadGLTF(this.map._requestManager.transformRequest(modelSpec.uri, ResourceType.Model).url).then(gltf => {
+                if (!gltf) return;
+                const nodes = convertModel(gltf);
+                const model = new Model(modelId, modelSpec.position, modelSpec.orientation, nodes);
+                model.computeBoundsAndApplyParent();
+                this.models.push(model);
+            }).catch((err) => {
                 this.fire(new ErrorEvent(new Error(`Could not load model ${modelId} from ${modelSpec.uri}: ${err.message}`)));
             });
 
-            if (!gltf) continue;
-
-            const nodes = convertModel(gltf);
-            const model = new Model(modelId, modelSpec.position, modelSpec.orientation, nodes);
-            model.computeBoundsAndApplyParent();
-            this.models.push(model);
+            modelPromises.push(modelPromise);
         }
-        this._loaded = true;
-        this.fire(new Event('data', {dataType: 'source', sourceDataType: 'metadata'}));
+
+        return Promise.allSettled(modelPromises).then(() => {
+            this._loaded = true;
+            this.fire(new Event('data', {dataType: 'source', sourceDataType: 'metadata'}));
+        }).catch((err) => {
+            this.fire(new ErrorEvent(new Error(`Could not load models: ${err.message}`)));
+        });
     }
 
     // $FlowFixMe[method-unbinding]

3d-style/source/tiled_3d_model_worker_source.js

@@ -30,7 +30,6 @@ class Tiled3dWorkerTile {
     tileSize: number;
     source: string;
     overscaling: number;
-    enableTerrain: boolean;
     projection: Projection;
     status: 'parsing' | 'done';
     reloadCallback: ?WorkerTileCallback;
@@ -46,40 +45,43 @@ class Tiled3dWorkerTile {
         this.tileSize = params.tileSize;
         this.source = params.source;
         this.overscaling = this.tileID.overscaleFactor();
-        this.enableTerrain = !!params.enableTerrain;
         this.projection = params.projection;
         this.brightness = brightness;
     }
 
-    async parse(data: ArrayBuffer, layerIndex: StyleLayerIndex, params: WorkerTileParameters, callback: WorkerTileCallback): Promise<void> {
+    parse(data: ArrayBuffer, layerIndex: StyleLayerIndex, params: WorkerTileParameters, callback: WorkerTileCallback): Promise<void> {
         this.status = 'parsing';
         const tileID = new OverscaledTileID(params.tileID.overscaledZ, params.tileID.wrap, params.tileID.canonical.z, params.tileID.canonical.x, params.tileID.canonical.y);
         const buckets: {[_: string]: Bucket} = {};
         const layerFamilies = layerIndex.familiesBySource[params.source];
         const featureIndex = new FeatureIndex(tileID, params.promoteId);
         featureIndex.bucketLayerIDs = [];
-        const gltf = await load3DTile(data).catch((err) => callback(new Error(err.message)));
-        if (!gltf) return callback(new Error('Could not parse tile'));
-        const nodes = process3DTile(gltf, 1.0 / tileToMeter(params.tileID.canonical));
-        const hasMapboxMeshFeatures = gltf.json.extensionsUsed && gltf.json.extensionsUsed.includes('MAPBOX_mesh_features');
-        const parameters = new EvaluationParameters(this.zoom, {brightness: this.brightness});
-        for (const sourceLayerId in layerFamilies) {
-            for (const family of layerFamilies[sourceLayerId]) {
-                const layer = family[0];
-                const extensions = gltf.json.extensionsUsed;
-                layer.recalculate(parameters, []);
-                const bucket = new Tiled3dModelBucket(nodes, tileID, extensions && extensions.includes("MAPBOX_mesh_features"), this.brightness);
-                // Upload to GPU without waiting for evaluation if we are in diffuse path
-                if (!hasMapboxMeshFeatures) bucket.needsUpload = true;
-                buckets[layer.fqid] = bucket;
-                // do the first evaluation in the worker to avoid stuttering
-                // $FlowIgnore[incompatible-call] layer here is always a ModelStyleLayer
-                bucket.evaluate(layer);
-            }
-        }
-        this.status = 'done';
-        // $FlowFixMe flow is complaining about missing properties and buckets not being of type Array
-        callback(null, {buckets, featureIndex});
+
+        return load3DTile(data)
+            .then(gltf => {
+                if (!gltf) return callback(new Error('Could not parse tile'));
+                const nodes = process3DTile(gltf, 1.0 / tileToMeter(params.tileID.canonical));
+                const hasMapboxMeshFeatures = gltf.json.extensionsUsed && gltf.json.extensionsUsed.includes('MAPBOX_mesh_features');
+                const parameters = new EvaluationParameters(this.zoom, {brightness: this.brightness});
+                for (const sourceLayerId in layerFamilies) {
+                    for (const family of layerFamilies[sourceLayerId]) {
+                        const layer = family[0];
+                        const extensions = gltf.json.extensionsUsed;
+                        layer.recalculate(parameters, []);
+                        const bucket = new Tiled3dModelBucket(nodes, tileID, extensions && extensions.includes("MAPBOX_mesh_features"), this.brightness);
+                        // Upload to GPU without waiting for evaluation if we are in diffuse path
+                        if (!hasMapboxMeshFeatures) bucket.needsUpload = true;
+                        buckets[layer.fqid] = bucket;
+                        // do the first evaluation in the worker to avoid stuttering
+                        // $FlowIgnore[incompatible-call] layer here is always a ModelStyleLayer
+                        bucket.evaluate(layer);
+                    }
+                }
+                this.status = 'done';
+                // $FlowFixMe flow is complaining about missing properties and buckets not being of type Array
+                callback(null, {buckets, featureIndex});
+            })
+            .catch((err) => callback(new Error(err.message)));
     }
 }
 
@@ -141,7 +143,6 @@ class Tiled3dModelWorkerSource implements WorkerSource {
         const uid = params.uid;
         if (loaded && loaded[uid]) {
             const workerTile = loaded[uid];
-            workerTile.enableTerrain = !!params.enableTerrain;
             workerTile.projection = params.projection;
             workerTile.brightness = params.brightness;
 

3d-style/style/style_layer/model_style_layer.js

@@ -53,6 +53,11 @@ class ModelStyleLayer extends StyleLayer {
         return 0;
     }
 
+    // $FlowFixMe[method-unbinding]
+    queryIntersectsFeature(): boolean {
+        return false;
+    }
+
     _handleOverridablePaintPropertyUpdate<T, R>(name: string, oldValue: PropertyValue<T, R>, newValue: PropertyValue<T, R>): boolean {
         if (!this.layout || oldValue.isDataDriven() || newValue.isDataDriven()) {
             return false;