Add cancellation support to the ModelSource (internal-9574)

stepankuzmin · github-actions[bot] · commit 82a54edd22e1 · 2026-02-11T11:48:32.000Z
GitOrigin-RevId: 587aa36ff33d823806b6938fcce5ed05616a99bc
diff --git a/3d-style/render/model_manager.ts b/3d-style/render/model_manager.ts
@@ -46,8 +46,6 @@ class ModelManager extends Evented {
     loadModel(id: string, url: string): Promise<Model | null | undefined> {
         return loadGLTF(this.requestManager.transformRequest(url, ResourceType.Model).url)
             .then(gltf => {
-                if (!gltf) return;
-
                 const nodes = convertModel(gltf);
                 const model = new Model(id, url, undefined, undefined, nodes);
                 model.computeBoundsAndApplyParent();
diff --git a/3d-style/source/model_source.ts b/3d-style/source/model_source.ts
@@ -69,8 +69,8 @@ class ModelSource extends Evented<SourceEvents> implements ISource {
     uri: string;
     models: Array<Model>;
     _options: ModelSourceSpecification;
+    _abortController: AbortController | null;
 
-    onRemove: undefined;
     abortTile: undefined;
     unloadTile: undefined;
     hasTile: undefined;
@@ -89,67 +89,82 @@ class ModelSource extends Evented<SourceEvents> implements ISource {
         this.models = [];
         this._options = options;
         this._modelsInfo = new Map();
+        this._abortController = null;
     }
 
-    private loadGLTFFromURI(uri: string): Promise<void | GLTF> {
-        return loadGLTF(this.map._requestManager.transformRequest(uri, ResourceType.Model).url);
+    private cancelModelRequests() {
+        if (this._abortController) {
+            this._abortController.abort();
+            this._abortController = null;
+        }
     }
 
-    load(): void {
-        for (const modelId in this._options.models) {
-            const modelSpec = this._options.models[modelId];
-
-            const modelInfo = this._modelsInfo.get(modelId);
-            if (modelInfo) {
-                modelInfo.modelSpec = modelSpec;
-                // Update model if loaded
-                const model = modelInfo.model;
-                if (model) {
-                    model.position = modelSpec.position != null ? new LngLat(modelSpec.position[0], modelSpec.position[1]) : new LngLat(0, 0);
-                    model.orientation = modelSpec.orientation != null ? modelSpec.orientation : [0, 0, 0];
-                    ModelSource.applyModelSpecification(model, modelSpec);
-                    model.computeBoundsAndApplyParent();
-                    this.models.push(model);
-                }
-            } else {
-                // Model neither currently loading nor already loaded
-                this._modelsInfo.set(modelId, {modelSpec, model: null});
-                // eslint-disable-next-line @typescript-eslint/no-floating-promises
-                this.loadModel(modelId, modelSpec);
-            }
-        }
-        // Fire data event if all models are already loaded (i.e model source is empty or there are no more requests pending)
-        if (this.loaded()) {
-            this.fire(new Event('data', {dataType: 'source', sourceDataType: 'metadata'}));
-        }
+    private loadGLTFFromURI(uri: string, signal?: AbortSignal): Promise<GLTF> {
+        return loadGLTF(this.map._requestManager.transformRequest(uri, ResourceType.Model).url, signal);
     }
 
-    private async loadModel(modelId: string, modelSpec: ModelSourceModelSpecification): Promise<void> {
+    private async loadModel(modelId: string, modelSpec: ModelSourceModelSpecification, signal: AbortSignal): Promise<void> {
         try {
-            const gltf = await this.loadGLTFFromURI(modelSpec.uri);
-            if (!gltf) return;
+            const gltf = await this.loadGLTFFromURI(modelSpec.uri, signal);
+            if (signal.aborted) return;
 
-            // Check if model is still active
             const modelInfo = this._modelsInfo.get(modelId);
-            if (!modelInfo) return;
+            if (!modelInfo) return; // source modified during async gap
 
             const nodes = convertModel(gltf);
-            const currentModelSpec = modelInfo.modelSpec;
-            const model = new Model(modelId, currentModelSpec.uri, currentModelSpec.position, currentModelSpec.orientation, nodes);
-            ModelSource.applyModelSpecification(model, currentModelSpec);
+            const currentSpec = modelInfo.modelSpec;
+            const model = new Model(modelId, currentSpec.uri, currentSpec.position, currentSpec.orientation, nodes);
+            ModelSource.applyModelSpecification(model, currentSpec);
             model.computeBoundsAndApplyParent();
 
             this.models.push(model);
             modelInfo.model = model;
+        } catch (err: unknown) {
+            if (err instanceof Error && err.name === 'AbortError') return;
+            const message = err instanceof Error ? err.message : 'Unknown error';
+            this.fire(new ErrorEvent(new Error(`Could not load model ${modelId} from ${modelSpec.uri}: ${message}`)));
+        }
+    }
 
-            // If all models are loaded, fire data event
+    async load(): Promise<void> {
+        if (!this._abortController) {
+            this._abortController = new AbortController();
+        }
+        const signal = this._abortController.signal;
+
+        const loadPromises: Promise<void>[] = [];
+
+        for (const modelId in this._options.models) {
+            const modelSpec = this._options.models[modelId];
+
+            const existingInfo = this._modelsInfo.get(modelId);
+            if (existingInfo && existingInfo.model) {
+                existingInfo.modelSpec = modelSpec;
+                const model = existingInfo.model;
+                model.position = modelSpec.position != null ? new LngLat(modelSpec.position[0], modelSpec.position[1]) : new LngLat(0, 0);
+                model.orientation = modelSpec.orientation != null ? modelSpec.orientation : [0, 0, 0];
+                ModelSource.applyModelSpecification(model, modelSpec);
+                model.computeBoundsAndApplyParent();
+                this.models.push(model);
+            } else if (!existingInfo) {
+                this._modelsInfo.set(modelId, {modelSpec, model: null});
+                loadPromises.push(this.loadModel(modelId, modelSpec, signal));
+            } else {
+                existingInfo.modelSpec = modelSpec;
+            }
+        }
+
+        if (loadPromises.length === 0) {
             if (this.loaded()) {
                 this.fire(new Event('data', {dataType: 'source', sourceDataType: 'metadata'}));
             }
-        } catch (err) {
-
-            this.fire(new ErrorEvent(new Error(`Could not load model ${modelId} from ${modelSpec.uri}: ${(err as Error).message}`)));
+            return;
         }
+
+        await Promise.allSettled(loadPromises);
+
+        if (signal.aborted) return; // new load will fire data event
+        this.fire(new Event('data', {dataType: 'source', sourceDataType: 'metadata'}));
     }
 
     private static applyModelSpecification(model: Model, modelSpec: ModelSourceModelSpecification) {
@@ -246,6 +261,7 @@ class ModelSource extends Evented<SourceEvents> implements ISource {
 
     onAdd(map: MapboxMap) {
         this.map = map;
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
         this.load();
     }
 
@@ -278,13 +294,19 @@ class ModelSource extends Evented<SourceEvents> implements ISource {
     }
 
     reload() {
+        this.cancelModelRequests();
         const fqid = makeFQID(this.id, this.scope);
         this.map.style.clearSource(fqid);
         this.models = [];
         this._modelsInfo.clear();
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
         this.load();
     }
 
+    onRemove(_map: MapboxMap) {
+        this.cancelModelRequests();
+    }
+
     /**
      * Sets the list of models along with their properties.
      *
@@ -300,23 +322,32 @@ class ModelSource extends Evented<SourceEvents> implements ISource {
      * });
      */
     setModels(modelSpecs: ModelSourceModelsSpecification) {
-        // Mimic behavior of native `ModelSource::updateModelData` implementation
         this.models = [];
 
-        // Only preserve model info entries for ids present in new model specification
         const updatedModelsInfo = new Map<string, ModelSourceModelInfo>();
         for (const modelId in modelSpecs) {
             const modelSpec = modelSpecs[modelId];
-            if (this._modelsInfo.has(modelId)) {
-                const entry = this._modelsInfo.get(modelId);
-                // Only preserve if uri did not change
-                if (entry && entry.modelSpec.uri === modelSpec.uri) {
-                    updatedModelsInfo.set(modelId, entry);
-                }
+            const entry = this._modelsInfo.get(modelId);
+            if (entry && entry.modelSpec.uri === modelSpec.uri) {
+                updatedModelsInfo.set(modelId, entry);
             }
         }
+
+        // Only cancel requests when models are actually removed or URIs change.
+        // Property-only updates (position, orientation) are high-frequency (animation)
+        // and should not restart in-flight model loads.
+        const modelsChanged = this._modelsInfo.size !== updatedModelsInfo.size;
+        if (modelsChanged) {
+            this.cancelModelRequests();
+            // Remove pending entries - their cancelled requests won't complete
+            for (const [id, info] of updatedModelsInfo) {
+                if (!info.model) updatedModelsInfo.delete(id);
+            }
+        }
+
         this._modelsInfo = updatedModelsInfo;
         this._options.models = modelSpecs;
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
         this.load();
     }
 }
diff --git a/3d-style/source/tiled_3d_model_worker_source.ts b/3d-style/source/tiled_3d_model_worker_source.ts
@@ -71,7 +71,6 @@ class Tiled3dWorkerTile {
 
         load3DTile(data)
             .then(gltf => {
-                if (!gltf) return callback(new Error('Could not parse tile'));
                 const hasMapboxMeshFeatures: boolean = (gltf.json.extensionsUsed && gltf.json.extensionsUsed.includes('MAPBOX_mesh_features')) ||
                                             (gltf.json.asset.extras && gltf.json.asset.extras['MAPBOX_mesh_features']);
 
diff --git a/3d-style/util/loaders.ts b/3d-style/util/loaders.ts
@@ -11,6 +11,7 @@ import assert from 'assert';
 import {DracoDecoderModule} from './draco_decoder_gltf';
 import {MeshoptDecoder} from './meshopt_decoder';
 import {PerformanceUtils} from '../../src/util/performance';
+import {makeAsyncRequest} from '../../src/util/ajax';
 
 import type {vec3, mat4, quat} from 'gl-matrix';
 import type {BuildingGen} from './building_gen';
@@ -356,8 +357,8 @@ function resolveUrl(url: string, baseUrl?: string) {
     return (new URL(url, baseUrl)).href;
 }
 
-async function loadBuffer(buffer: {uri: string; byteLength: number}, gltf: GLTF, index: number, baseUrl?: string): Promise<void> {
-    const response = await fetch(resolveUrl(buffer.uri, baseUrl));
+async function loadBuffer(buffer: {uri: string; byteLength: number}, gltf: GLTF, index: number, baseUrl?: string, signal?: AbortSignal): Promise<void> {
+    const response = await fetch(resolveUrl(buffer.uri, baseUrl), {signal});
     const arrayBuffer = await response.arrayBuffer();
     assert(arrayBuffer.byteLength >= buffer.byteLength);
     gltf.buffers[index] = arrayBuffer;
@@ -369,10 +370,10 @@ function getGLTFBytes(gltf: GLTF, bufferViewIndex: number): Uint8Array<ArrayBuff
     return new Uint8Array<ArrayBuffer>(buffer, bufferView.byteOffset || 0, bufferView.byteLength);
 }
 
-async function loadImage(img: {uri?: string; bufferView?: number; mimeType: string}, gltf: GLTF, index: number, baseUrl?: string): Promise<void> {
+async function loadImage(img: {uri?: string; bufferView?: number; mimeType: string}, gltf: GLTF, index: number, baseUrl?: string, signal?: AbortSignal): Promise<void> {
     if (img.uri) {
         const uri = resolveUrl(img.uri, baseUrl);
-        const response = await fetch(uri);
+        const response = await fetch(uri, {signal});
         const blob = await response.blob();
         const imageBitmap = await createImageBitmap(blob);
         gltf.images[index] = imageBitmap;
@@ -384,7 +385,7 @@ async function loadImage(img: {uri?: string; bufferView?: number; mimeType: stri
     }
 }
 
-export async function decodeGLTF(arrayBuffer: ArrayBuffer, byteOffset: number = 0, baseUrl?: string): Promise<GLTF | void> {
+export async function decodeGLTF(arrayBuffer: ArrayBuffer, byteOffset: number = 0, baseUrl?: string, signal?: AbortSignal): Promise<GLTF> {
     const startTime = PerformanceUtils.now();
 
     const gltf: GLTF = {json: null, images: [], buffers: []};
@@ -420,14 +421,16 @@ export async function decodeGLTF(arrayBuffer: ArrayBuffer, byteOffset: number =
         for (let i = 0; i < buffers.length; i++) {
             const buffer = buffers[i];
             if (buffer.uri) {
-                bufferLoads.push(loadBuffer(buffer, gltf, i, baseUrl));
+                bufferLoads.push(loadBuffer(buffer, gltf, i, baseUrl, signal));
             } else if (!gltf.buffers[i]) {
                 gltf.buffers[i] = null;
             }
         }
         await Promise.all(bufferLoads);
     }
 
+    if (signal && signal.aborted) throw new DOMException('Aborted', 'AbortError');
+
     const assetLoads: Promise<unknown>[] = [];
     const dracoUsed = extensionsUsed && extensionsUsed.includes(DRACO_EXT);
     const meshoptUsed = extensionsUsed && extensionsUsed.includes(MESHOPT_EXT);
@@ -440,14 +443,16 @@ export async function decodeGLTF(arrayBuffer: ArrayBuffer, byteOffset: number =
     }
     if (images) {
         for (let i = 0; i < images.length; i++) {
-            assetLoads.push(loadImage(images[i], gltf, i, baseUrl));
+            assetLoads.push(loadImage(images[i], gltf, i, baseUrl, signal));
         }
     }
 
     if (assetLoads.length) {
         await Promise.all(assetLoads);
     }
 
+    if (signal && signal.aborted) throw new DOMException('Aborted', 'AbortError');
+
     if (dracoUsed && meshes) {
         for (const {primitives} of meshes) {
             for (const primitive of primitives) {
@@ -467,13 +472,12 @@ export async function decodeGLTF(arrayBuffer: ArrayBuffer, byteOffset: number =
     return gltf;
 }
 
-export async function loadGLTF(url: string): Promise<GLTF | void> {
-    const response = await fetch(url);
-    const buffer = await response.arrayBuffer();
-    return decodeGLTF(buffer, 0, url);
+export async function loadGLTF(url: string, signal?: AbortSignal): Promise<GLTF> {
+    const buffer = await makeAsyncRequest<ArrayBuffer>({url, type: 'arrayBuffer'}, signal);
+    return decodeGLTF(buffer, 0, url, signal);
 }
 
-export function load3DTile(data: ArrayBuffer): Promise<GLTF | void> {
+export function load3DTile(data: ArrayBuffer): Promise<GLTF> {
     const magic = new Uint32Array(data, 0, 1)[0];
     let gltfOffset = 0;
     if (magic !== MAGIC_GLTF) {
diff --git a/src/util/ajax.ts b/src/util/ajax.ts
@@ -263,6 +263,29 @@ export const getArrayBuffer = function (
     return makeRequest(Object.assign(requestParameters, {type: 'arrayBuffer'}), callback);
 };
 
+export async function makeAsyncRequest<T>(
+    requestParameters: RequestParameters,
+    signal?: AbortSignal
+): Promise<T> {
+    if (signal && signal.aborted) {
+        throw new DOMException('Aborted', 'AbortError');
+    }
+
+    return new Promise((resolve, reject) => {
+        const cancelable = makeRequest(requestParameters, (err, data) => {
+            if (err) reject(err);
+            else resolve(data as T);
+        });
+
+        if (signal) {
+            signal.addEventListener('abort', () => {
+                cancelable.cancel();
+                reject(new DOMException('Aborted', 'AbortError'));
+            }, {once: true});
+        }
+    });
+}
+
 export const postData = function (requestParameters: RequestParameters, callback: ResponseCallback<string>): Cancelable {
     return makeRequest(Object.assign(requestParameters, {method: 'POST'}), callback);
 };
diff --git a/test/unit/source/model_source.test.ts b/test/unit/source/model_source.test.ts
