[GLJS-1621] Use native async/await when loading models (internal-9574)

stepankuzmin · github-actions[bot] · commit 08f55cfd514c · 2026-01-28T11:19:49.000Z
GitOrigin-RevId: f867c813761b80d26955cd23c3e07b890462d088
diff --git a/3d-style/source/model_source.ts b/3d-style/source/model_source.ts
@@ -114,37 +114,44 @@ class ModelSource extends Evented<SourceEvents> implements ISource {
             } else {
                 // Model neither currently loading nor already loaded
                 this._modelsInfo.set(modelId, {modelSpec, model: null});
-                this.loadGLTFFromURI(modelSpec.uri).then(gltf => {
-                    if (!gltf) return;
-                    // Check if model is still active
-                    const modelInfo = this._modelsInfo.get(modelId);
-                    if (!modelInfo) return;
-
-                    const nodes = convertModel(gltf);
-                    const modelSpec = modelInfo.modelSpec;
-                    const model = new Model(modelId, modelSpec.uri, modelSpec.position, modelSpec.orientation, nodes);
-                    ModelSource.applyModelSpecification(model, modelSpec);
-                    model.computeBoundsAndApplyParent();
-
-                    this.models.push(model);
-                    modelInfo.model = model;
-
-                    // If all models are loaded, fire data event
-                    if (this.loaded()) {
-                        this.fire(new Event('data', {dataType: 'source', sourceDataType: 'metadata'}));
-                    }
-                }).catch((err) => {
-                    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-                    this.fire(new ErrorEvent(new Error(`Could not load model ${modelId} from ${modelSpec.uri}: ${err.message}`)));
-                });
+                // 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 not more requests pending)
+        // 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 async loadModel(modelId: string, modelSpec: ModelSourceModelSpecification): Promise<void> {
+        try {
+            const gltf = await this.loadGLTFFromURI(modelSpec.uri);
+            if (!gltf) return;
+
+            // Check if model is still active
+            const modelInfo = this._modelsInfo.get(modelId);
+            if (!modelInfo) return;
+
+            const nodes = convertModel(gltf);
+            const currentModelSpec = modelInfo.modelSpec;
+            const model = new Model(modelId, currentModelSpec.uri, currentModelSpec.position, currentModelSpec.orientation, nodes);
+            ModelSource.applyModelSpecification(model, currentModelSpec);
+            model.computeBoundsAndApplyParent();
+
+            this.models.push(model);
+            modelInfo.model = model;
+
+            // If all models are loaded, fire data event
+            if (this.loaded()) {
+                this.fire(new Event('data', {dataType: 'source', sourceDataType: 'metadata'}));
+            }
+        } catch (err) {
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+            this.fire(new ErrorEvent(new Error(`Could not load model ${modelId} from ${modelSpec.uri}: ${(err as Error).message}`)));
+        }
+    }
+
     private static applyModelSpecification(model: Model, modelSpec: ModelSourceModelSpecification) {
         if (modelSpec.nodeOverrides) {
             ModelSource.convertNodeOverrides(model, modelSpec.nodeOverrides);
diff --git a/3d-style/util/loaders.ts b/3d-style/util/loaders.ts
@@ -356,13 +356,11 @@ function resolveUrl(url: string, baseUrl?: string) {
     return (new URL(url, baseUrl)).href;
 }
 
-function loadBuffer(buffer: {uri: string; byteLength: number}, gltf: GLTF, index: number, baseUrl?: string) {
-    return fetch(resolveUrl(buffer.uri, baseUrl))
-        .then(response => response.arrayBuffer())
-        .then(arrayBuffer => {
-            assert(arrayBuffer.byteLength >= buffer.byteLength);
-            gltf.buffers[index] = arrayBuffer;
-        });
+async function loadBuffer(buffer: {uri: string; byteLength: number}, gltf: GLTF, index: number, baseUrl?: string): Promise<void> {
+    const response = await fetch(resolveUrl(buffer.uri, baseUrl));
+    const arrayBuffer = await response.arrayBuffer();
+    assert(arrayBuffer.byteLength >= buffer.byteLength);
+    gltf.buffers[index] = arrayBuffer;
 }
 
 function getGLTFBytes(gltf: GLTF, bufferViewIndex: number): Uint8Array<ArrayBuffer> {
@@ -371,26 +369,22 @@ function getGLTFBytes(gltf: GLTF, bufferViewIndex: number): Uint8Array<ArrayBuff
     return new Uint8Array<ArrayBuffer>(buffer, bufferView.byteOffset || 0, bufferView.byteLength);
 }
 
-function loadImage(img: {uri?: string; bufferView?: number; mimeType: string}, gltf: GLTF, index: number, baseUrl?: string) {
+async function loadImage(img: {uri?: string; bufferView?: number; mimeType: string}, gltf: GLTF, index: number, baseUrl?: string): Promise<void> {
     if (img.uri) {
         const uri = resolveUrl(img.uri, baseUrl);
-        return fetch(uri)
-            .then(response => response.blob())
-            .then(blob => createImageBitmap(blob))
-            .then(imageBitmap => {
-                gltf.images[index] = imageBitmap;
-            });
+        const response = await fetch(uri);
+        const blob = await response.blob();
+        const imageBitmap = await createImageBitmap(blob);
+        gltf.images[index] = imageBitmap;
     } else if (img.bufferView !== undefined) {
         const bytes = getGLTFBytes(gltf, img.bufferView);
         const blob = new Blob([bytes], {type: img.mimeType});
-        return createImageBitmap(blob)
-            .then(imageBitmap => {
-                gltf.images[index] = imageBitmap;
-            });
+        const imageBitmap = await createImageBitmap(blob);
+        gltf.images[index] = imageBitmap;
     }
 }
 
-export function decodeGLTF(arrayBuffer: ArrayBuffer, byteOffset: number = 0, baseUrl?: string): Promise<GLTF | void> {
+export async function decodeGLTF(arrayBuffer: ArrayBuffer, byteOffset: number = 0, baseUrl?: string): Promise<GLTF | void> {
     const startTime = PerformanceUtils.now();
 
     const gltf: GLTF = {json: null, images: [], buffers: []};
@@ -420,9 +414,9 @@ export function decodeGLTF(arrayBuffer: ArrayBuffer, byteOffset: number = 0, bas
     }
 
     const {buffers, images, meshes, extensionsUsed, bufferViews} = gltf.json;
-    let bufferLoadsPromise: Promise<unknown> = Promise.resolve();
+
     if (buffers) {
-        const bufferLoads = [];
+        const bufferLoads: Promise<void>[] = [];
         for (let i = 0; i < buffers.length; i++) {
             const buffer = buffers[i];
             if (buffer.uri) {
@@ -431,58 +425,52 @@ export function decodeGLTF(arrayBuffer: ArrayBuffer, byteOffset: number = 0, bas
                 gltf.buffers[i] = null;
             }
         }
-        bufferLoadsPromise = Promise.all(bufferLoads);
+        await Promise.all(bufferLoads);
     }
 
-    return bufferLoadsPromise.then(() => {
-        const assetLoads = [];
+    const assetLoads: Promise<unknown>[] = [];
+    const dracoUsed = extensionsUsed && extensionsUsed.includes(DRACO_EXT);
+    const meshoptUsed = extensionsUsed && extensionsUsed.includes(MESHOPT_EXT);
 
-        const dracoUsed = extensionsUsed && extensionsUsed.includes(DRACO_EXT);
-        const meshoptUsed = extensionsUsed && extensionsUsed.includes(MESHOPT_EXT);
-        if (dracoUsed) {
-            assetLoads.push(waitForDraco());
+    if (dracoUsed) {
+        assetLoads.push(waitForDraco());
+    }
+    if (meshoptUsed) {
+        assetLoads.push(waitForMeshopt());
+    }
+    if (images) {
+        for (let i = 0; i < images.length; i++) {
+            assetLoads.push(loadImage(images[i], gltf, i, baseUrl));
         }
+    }
 
-        if (meshoptUsed) {
-            assetLoads.push(waitForMeshopt());
-        }
+    if (assetLoads.length) {
+        await Promise.all(assetLoads);
+    }
 
-        if (images) {
-            for (let i = 0; i < images.length; i++) {
-                assetLoads.push(loadImage(images[i], gltf, i, baseUrl));
+    if (dracoUsed && meshes) {
+        for (const {primitives} of meshes) {
+            for (const primitive of primitives) {
+                loadDracoMesh(primitive, gltf);
             }
         }
+    }
 
-        const assetLoadsPromise = assetLoads.length ?
-            Promise.all(assetLoads) :
-            Promise.resolve();
-
-        return assetLoadsPromise.then(() => {
-            if (dracoUsed && meshes) {
-                for (const {primitives} of meshes) {
-                    for (const primitive of primitives) {
-                        loadDracoMesh(primitive, gltf);
-                    }
-                }
-            }
-
-            if (meshoptUsed && meshes && bufferViews) {
-                for (const bufferView of bufferViews) {
-                    loadMeshoptBuffer(bufferView, gltf);
-                }
-            }
+    if (meshoptUsed && meshes && bufferViews) {
+        for (const bufferView of bufferViews) {
+            loadMeshoptBuffer(bufferView, gltf);
+        }
+    }
 
-            PerformanceUtils.measureWithDetails(PerformanceUtils.GROUP_COMMON, "decodeGLTF", "Models", startTime);
+    PerformanceUtils.measureWithDetails(PerformanceUtils.GROUP_COMMON, "decodeGLTF", "Models", startTime);
 
-            return gltf;
-        });
-    });
+    return gltf;
 }
 
-export function loadGLTF(url: string): Promise<GLTF | void> {
-    return fetch(url)
-        .then(response => response.arrayBuffer())
-        .then(buffer => decodeGLTF(buffer, 0, url));
+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 function load3DTile(data: ArrayBuffer): Promise<GLTF | void> {
diff --git a/CLAUDE.md b/CLAUDE.md
@@ -138,7 +138,6 @@ test/
 - JSDoc comments for all public APIs
 - Don't use `!.` for non-null assertions (hides potential null issues)
 - Don't use `?.` or `??` operators (hides null handling, harder to debug)
-- No async/await - use Promises instead (keeps control flow explicit)
 - Use `assert` for invariants
 - Break complex expressions into named variables, especially WebGL math
 
diff --git a/eslint.config.js b/eslint.config.js
@@ -111,18 +111,6 @@ export default tseslint.config(
                 {
                     selector: 'ObjectExpression > SpreadElement',
                     message: 'Spread syntax is not allowed for object assignments. Use Object.assign() or other methods instead.',
-                }, {
-                    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.',
                 }, {
                     selector: 'ClassProperty[value]',
                     message: 'ClassProperty values are not allowed.',
