@cesium/engine 2.0.0 → 2.2.0

package/Source/Scene/GltfLoader.js

@@ -59,7 +59,7 @@ const Material = ModelComponents.Material;
  * States of the glTF loading process. These states also apply to
  * asynchronous texture loading unless otherwise noted
  *
- * @enum {Number}
+ * @enum {number}
  *
  * @private
  */
@@ -67,7 +67,7 @@ const GltfLoaderState = {
   /**
    * The initial state of the glTF loader before load() is called.
    *
-   * @type {Number}
+   * @type {number}
    * @constant
    *
    * @private
@@ -77,7 +77,7 @@ const GltfLoaderState = {
    * The state of the loader while waiting for the glTF JSON loader promise
    * to resolve.
    *
-   * @type {Number}
+   * @type {number}
    * @constant
    *
    * @private
@@ -87,16 +87,20 @@ const GltfLoaderState = {
    * The state of the loader once the glTF JSON is loaded but before
    * process() is called.
    *
-   * @type {Number}
+   * @type {number}
    * @constant
+   *
+   * @private
    */
   LOADED: 2,
   /**
    * The state of the loader while parsing the glTF and creating GPU resources
    * as needed.
    *
-   * @type {Number}
+   * @type {number}
    * @constant
+   *
+   * @private
    */
   PROCESSING: 3,
   /**
@@ -107,8 +111,10 @@ const GltfLoaderState = {
    * This state is not used for asynchronous texture loading.
    * </p>
    *
-   * @type {Number}
+   * @type {number}
    * @constant
+   *
+   * @private
    */
   POST_PROCESSING: 4,
   /**
@@ -116,30 +122,38 @@ const GltfLoaderState = {
    * enters the processed state (sometimes from a promise chain). The next
    * call to process() will advance to the ready state.
    *
-   * @type {Number}
+   * @type {number}
    * @constant
+   *
+   * @private
    */
   PROCESSED: 5,
   /**
    * When the loader reaches the ready state, the loaders' promise will be
    * resolved.
    *
-   * @type {Number}
+   * @type {number}
    * @constant
+   *
+   * @private
    */
   READY: 6,
   /**
    * If an error occurs at any point, the loader switches to the failed state.
    *
-   * @type {Number}
+   * @type {number}
    * @constant
+   *
+   * @private
    */
   FAILED: 7,
   /**
    * If unload() is called, the loader switches to the unloaded state.
    *
-   * @type {Number}
+   * @type {number}
    * @constant
+   *
+   * @private
    */
   UNLOADED: 8,
 };
@@ -154,22 +168,22 @@ const GltfLoaderState = {
  * @constructor
  * @augments ResourceLoader
  *
- * @param {Object} options Object with the following properties:
+ * @param {object} options Object with the following properties:
  * @param {Resource} options.gltfResource The {@link Resource} containing the glTF. This is often the path of the .gltf or .glb file, but may also be the path of the .b3dm, .i3dm, or .cmpt file containing the embedded glb. .cmpt resources should have a URI fragment indicating the index of the inner content to which the glb belongs in order to individually identify the glb in the cache, e.g. http://example.com/tile.cmpt#index=2.
  * @param {Resource} [options.baseResource] The {@link Resource} that paths in the glTF JSON are relative to.
  * @param {Uint8Array} [options.typedArray] The typed array containing the glTF contents, e.g. from a .b3dm, .i3dm, or .cmpt file.
- * @param {Object} [options.gltfJson] A parsed glTF JSON file instead of passing it in as a typed array.
- * @param {Boolean} [options.releaseGltfJson=false] When true, the glTF JSON is released once the glTF is loaded. This is especially useful for cases like 3D Tiles, where each .gltf model is unique and caching the glTF JSON is not effective.
- * @param {Boolean} [options.asynchronous=true] Determines if WebGL resource creation will be spread out over several frames or block until all WebGL resources are created.
- * @param {Boolean} [options.incrementallyLoadTextures=true] Determine if textures may continue to stream in after the glTF is loaded.
+ * @param {object} [options.gltfJson] A parsed glTF JSON file instead of passing it in as a typed array.
+ * @param {boolean} [options.releaseGltfJson=false] When true, the glTF JSON is released once the glTF is loaded. This is especially useful for cases like 3D Tiles, where each .gltf model is unique and caching the glTF JSON is not effective.
+ * @param {boolean} [options.asynchronous=true] Determines if WebGL resource creation will be spread out over several frames or block until all WebGL resources are created.
+ * @param {boolean} [options.incrementallyLoadTextures=true] Determine if textures may continue to stream in after the glTF is loaded.
  * @param {Axis} [options.upAxis=Axis.Y] The up-axis of the glTF model.
  * @param {Axis} [options.forwardAxis=Axis.Z] The forward-axis of the glTF model.
- * @param {Boolean} [options.loadAttributesAsTypedArray=false] Load all attributes and indices as typed arrays instead of GPU buffers. If the attributes are interleaved in the glTF they will be de-interleaved in the typed array.
- * @param {Boolean} [options.loadAttributesFor2D=false] If <code>true</code>, load the positions buffer and any instanced attribute buffers as typed arrays for accurately projecting models to 2D.
- * @param {Boolean} [options.loadIndicesForWireframe=false] If <code>true</code>, load the index buffer as both a buffer and typed array. The latter is useful for creating wireframe indices in WebGL1.
- * @param {Boolean} [options.loadPrimitiveOutline=true] If <code>true</code>, load outlines from the {@link https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Vendor/CESIUM_primitive_outline|CESIUM_primitive_outline} extension. This can be set false to avoid post-processing geometry at load time.
- * @param {Boolean} [options.loadForClassification=false] If <code>true</code> and if the model has feature IDs, load the feature IDs and indices as typed arrays. This is useful for batching features for classification.
- * @param {Boolean} [options.renameBatchIdSemantic=false] If <code>true</code>, rename _BATCHID or BATCHID to _FEATURE_ID_0. This is used for .b3dm models
+ * @param {boolean} [options.loadAttributesAsTypedArray=false] Load all attributes and indices as typed arrays instead of GPU buffers. If the attributes are interleaved in the glTF they will be de-interleaved in the typed array.
+ * @param {boolean} [options.loadAttributesFor2D=false] If <code>true</code>, load the positions buffer and any instanced attribute buffers as typed arrays for accurately projecting models to 2D.
+ * @param {boolean} [options.loadIndicesForWireframe=false] If <code>true</code>, load the index buffer as both a buffer and typed array. The latter is useful for creating wireframe indices in WebGL1.
+ * @param {boolean} [options.loadPrimitiveOutline=true] If <code>true</code>, load outlines from the {@link https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Vendor/CESIUM_primitive_outline|CESIUM_primitive_outline} extension. This can be set false to avoid post-processing geometry at load time.
+ * @param {boolean} [options.loadForClassification=false] If <code>true</code> and if the model has feature IDs, load the feature IDs and indices as typed arrays. This is useful for batching features for classification.
+ * @param {boolean} [options.renameBatchIdSemantic=false] If <code>true</code>, rename _BATCHID or BATCHID to _FEATURE_ID_0. This is used for .b3dm models
  * @private
  */
 function GltfLoader(options) {
@@ -242,9 +256,8 @@ function GltfLoader(options) {
   this._state = GltfLoaderState.NOT_LOADED;
   this._textureState = GltfLoaderState.NOT_LOADED;
   this._promise = undefined;
-  this._texturesLoadedPromise = undefined;
-  this._process = function (loader, frameState) {};
-  this._processTextures = function (loader, frameState) {};
+  this._processError = undefined;
+  this._textureErrors = [];
 
   // Information about whether to load primitives as typed arrays or buffers,
   // and whether post-processing is needed after loading (e.g. for
@@ -255,9 +268,14 @@ function GltfLoader(options) {
   this._loaderPromises = [];
   this._textureLoaders = [];
   this._texturesPromises = [];
+  this._textureCallbacks = [];
   this._bufferViewLoaders = [];
   this._geometryLoaders = [];
+  this._geometryCallbacks = [];
   this._structuralMetadataLoader = undefined;
+  this._loadResourcesPromise = undefined;
+  this._resourcesLoaded = false;
+  this._texturesLoaded = false;
 
   // In some cases where geometry post-processing is needed (like generating
   // outlines) new attributes are added that may have GPU resources attached.
@@ -275,231 +293,223 @@ if (defined(Object.create)) {
 
 Object.defineProperties(GltfLoader.prototype, {
   /**
-   * A promise that resolves to the resource when the resource is ready, or undefined if the resource hasn't started loading.
+   * The cache key of the resource.
    *
    * @memberof GltfLoader.prototype
    *
-   * @type {Promise.<GltfLoader>|undefined}
+   * @type {string}
    * @readonly
    * @private
    */
-  promise: {
+  cacheKey: {
     get: function () {
-      return this._promise;
+      return undefined;
     },
   },
   /**
-   * The cache key of the resource.
+   * The loaded components.
    *
    * @memberof GltfLoader.prototype
    *
-   * @type {String}
+   * @type {ModelComponents.Components}
    * @readonly
    * @private
    */
-  cacheKey: {
+  components: {
     get: function () {
-      return undefined;
+      return this._components;
     },
   },
   /**
-   * The loaded components.
+   * The loaded glTF json.
    *
    * @memberof GltfLoader.prototype
    *
-   * @type {ModelComponents.Components}
+   * @type {object}
    * @readonly
    * @private
    */
-  components: {
+  gltfJson: {
     get: function () {
-      return this._components;
+      if (defined(this._gltfJsonLoader)) {
+        return this._gltfJsonLoader.gltf;
+      }
+      return this._gltfJson;
     },
   },
-
   /**
-   * A promise that resolves when all textures are loaded.
-   * When <code>incrementallyLoadTextures</code> is true this may resolve after
-   * <code>promise</code> resolves.
+   * Returns true if textures are loaded separately from the other glTF resources.
    *
    * @memberof GltfLoader.prototype
    *
-   * @type {Promise<void>}
+   * @type {boolean}
    * @readonly
    * @private
    */
-  texturesLoadedPromise: {
+  incrementallyLoadTextures: {
     get: function () {
-      return this._texturesLoadedPromise;
+      return this._incrementallyLoadTextures;
+    },
+  },
+  /**
+   * true if textures are loaded, useful when incrementallyLoadTextures is true
+   *
+   * @memberof GltfLoader.prototype
+   *
+   * @type {boolean}
+   * @readonly
+   * @private
+   */
+  texturesLoaded: {
+    get: function () {
+      return this._texturesLoaded;
     },
   },
 });
 
 /**
- * Loads the resource.
- * @returns {Promise.<GltfLoader>} A promise which resolves to the loader when the resource loading is completed.
- * @private
+ * Loads the gltf object
  */
-GltfLoader.prototype.load = function () {
-  const gltfJsonLoader = ResourceCache.loadGltfJson({
-    gltfResource: this._gltfResource,
-    baseResource: this._baseResource,
-    typedArray: this._typedArray,
-    gltfJson: this._gltfJson,
-  });
-
-  this._gltfJsonLoader = gltfJsonLoader;
-  this._state = GltfLoaderState.LOADING;
-  this._textureState = GltfLoaderState.LOADING;
+async function loadGltfJson(loader) {
+  loader._state = GltfLoaderState.LOADING;
+  loader._textureState = GltfLoaderState.LOADING;
+
+  try {
+    const gltfJsonLoader = ResourceCache.getGltfJsonLoader({
+      gltfResource: loader._gltfResource,
+      baseResource: loader._baseResource,
+      typedArray: loader._typedArray,
+      gltfJson: loader._gltfJson,
+    });
+    loader._gltfJsonLoader = gltfJsonLoader;
+    await gltfJsonLoader.load();
 
-  const that = this;
-  let textureProcessPromise;
-  const processPromise = new Promise(function (resolve, reject) {
-    textureProcessPromise = new Promise(function (
-      resolveTextures,
-      rejectTextures
+    if (
+      loader.isDestroyed() ||
+      loader.isUnloaded() ||
+      gltfJsonLoader.isDestroyed()
     ) {
-      that._process = function (loader, frameState) {
-        if (!FeatureDetection.supportsWebP.initialized) {
-          FeatureDetection.supportsWebP.initialize();
-          return;
-        }
-
-        if (loader._state === GltfLoaderState.LOADED) {
-          loader._state = GltfLoaderState.PROCESSING;
-
-          const supportedImageFormats = new SupportedImageFormats({
-            webp: FeatureDetection.supportsWebP(),
-            basis: frameState.context.supportsBasis,
-          });
-
-          let gltf;
-          if (defined(loader._gltfJsonLoader)) {
-            gltf = loader._gltfJsonLoader.gltf;
-          } else {
-            gltf = loader._gltfJson;
-          }
-
-          // Parse the glTF which populates the loaders arrays. The promise will
-          // resolve once all the loaders are ready (i.e. all external resources
-          // have been fetched and all GPU resources have been created). Loaders that
-          // create GPU resources need to be processed every frame until they become
-          // ready since the JobScheduler is not able to execute all jobs in a single
-          // frame. Also note that it's fine to call process before a loader is ready
-          // to process; nothing will happen.
-          parse(
-            loader,
-            gltf,
-            supportedImageFormats,
-            frameState,
-            reject,
-            rejectTextures
-          );
-
-          if (defined(loader._gltfJsonLoader) && loader._releaseGltfJson) {
-            // Check that the glTF JSON loader is still defined before trying to unload it.
-            // It may be undefined if the ready promise rejects immediately (which can happen in unit tests)
-            ResourceCache.unload(loader._gltfJsonLoader);
-            loader._gltfJsonLoader = undefined;
-          }
-        }
+      return;
+    }
 
-        if (loader._state === GltfLoaderState.PROCESSING) {
-          processLoaders(loader, frameState);
-        }
+    const gltf = gltfJsonLoader.gltf;
+    const version = gltf.asset.version;
+    if (version !== "1.0" && version !== "2.0") {
+      const url = loader._gltfResource.url;
+      throw new RuntimeError(
+        `Failed to load ${url}: \nUnsupported glTF version: ${version}`
+      );
+    }
 
-        if (loader._state === GltfLoaderState.POST_PROCESSING) {
-          postProcessGeometry(loader, frameState.context);
-          loader._state = GltfLoaderState.PROCESSED;
-        }
+    const extensionsRequired = gltf.extensionsRequired;
+    if (defined(extensionsRequired)) {
+      ModelUtility.checkSupportedExtensions(extensionsRequired);
 
-        if (loader._state === GltfLoaderState.PROCESSED) {
-          // The buffer views can be unloaded once the data is copied.
-          unloadBufferViews(loader);
+      // Check for the KHR_mesh_quantization extension here, it will be used later
+      // in loadAttribute().
+      loader._hasKhrMeshQuantization = extensionsRequired.includes(
+        "KHR_mesh_quantization"
+      );
+    }
 
-          // Similarly, if the glTF was loaded from a typed array, release the memory
-          loader._typedArray = undefined;
+    loader._state = GltfLoaderState.LOADED;
+    loader._textureState = GltfLoaderState.LOADED;
 
-          loader._state = GltfLoaderState.READY;
-          resolve(loader);
-        }
-      };
+    return loader;
+  } catch (error) {
+    if (loader.isDestroyed()) {
+      return;
+    }
 
-      that._processTextures = function (loader, frameState) {
-        if (loader._textureState === GltfLoaderState.LOADED) {
-          loader._textureState = GltfLoaderState.PROCESSING;
-        }
+    loader._state = GltfLoaderState.FAILED;
+    loader._textureState = GltfLoaderState.FAILED;
+    handleError(loader, error);
+  }
+}
 
-        if (loader._textureState === GltfLoaderState.PROCESSING) {
-          let i;
-          const textureLoaders = loader._textureLoaders;
-          const textureLoadersLength = textureLoaders.length;
-          for (i = 0; i < textureLoadersLength; ++i) {
-            textureLoaders[i].process(frameState);
-          }
-        }
+async function loadResources(loader, frameState) {
+  if (!FeatureDetection.supportsWebP.initialized) {
+    await FeatureDetection.supportsWebP.initialize();
+  }
 
-        if (loader._textureState === GltfLoaderState.PROCESSED) {
-          loader._textureState = GltfLoaderState.READY;
-          resolveTextures(loader);
-        }
-      };
-    });
+  const supportedImageFormats = new SupportedImageFormats({
+    webp: FeatureDetection.supportsWebP(),
+    basis: frameState.context.supportsBasis,
   });
 
-  this._promise = gltfJsonLoader.promise
-    .then(function () {
-      if (that.isDestroyed()) {
-        return;
-      }
-      that._state = GltfLoaderState.LOADED;
-      that._textureState = GltfLoaderState.LOADED;
+  // Parse the glTF which populates the loaders arrays. Loading promises will be created, and will
+  // resolve once the loaders are ready (i.e. all external resources
+  // have been fetched and all GPU resources have been created). Loaders that
+  // create GPU resources need to be processed every frame until they become
+  // ready since the JobScheduler is not able to execute all jobs in a single
+  // frame. Any promise failures are collected, and will be handled synchronously in process(). Also note that it's fine to call process before a loader is ready
+  // to process or after it has failed; nothing will happen.
+  const gltf = loader.gltfJson;
+  const promise = parse(loader, gltf, supportedImageFormats, frameState);
 
-      return processPromise;
-    })
-    .catch(function (error) {
-      if (that.isDestroyed()) {
-        return;
-      }
-      that._state = GltfLoaderState.FAILED;
-      that._textureState = GltfLoaderState.FAILED;
-      return handleError(that, error);
-    });
+  // All resource loaders have been created, so we can begin processing
+  loader._state = GltfLoaderState.PROCESSING;
+  loader._textureState = GltfLoaderState.PROCESSING;
 
-  this._texturesLoadedPromise = textureProcessPromise.catch(function (error) {
-    if (that.isDestroyed()) {
-      return;
-    }
+  if (defined(loader._gltfJsonLoader) && loader._releaseGltfJson) {
+    // Check that the glTF JSON loader is still defined before trying to unload it.
+    // It can be unloaded if the glTF loader is destroyed.
+    ResourceCache.unload(loader._gltfJsonLoader);
+    loader._gltfJsonLoader = undefined;
+  }
 
-    that._textureState = GltfLoaderState.FAILED;
-    return handleError(that, error);
-  });
+  return promise;
+}
+
+/**
+ * Loads the resource.
+ * @returns {Promise.<GltfLoader>} A promise which resolves to the loader when the resource loading is completed.
+ * @exception {RuntimeError} Unsupported glTF version
+ * @exception {RuntimeError} Unsupported glTF Extension
+ * @private
+ */
+GltfLoader.prototype.load = async function () {
+  if (defined(this._promise)) {
+    return this._promise;
+  }
 
+  this._promise = loadGltfJson(this);
   return this._promise;
 };
 
 function handleError(gltfLoader, error) {
   gltfLoader.unload();
   const errorMessage = "Failed to load glTF";
-  error = gltfLoader.getError(errorMessage, error);
-  return Promise.reject(error);
+  throw gltfLoader.getError(errorMessage, error);
 }
 
 function processLoaders(loader, frameState) {
-  const bufferViewLoaders = loader._bufferViewLoaders;
-  const bufferViewLoadersLength = bufferViewLoaders.length;
-  for (let i = 0; i < bufferViewLoadersLength; ++i) {
-    bufferViewLoaders[i].process(frameState);
-  }
-
+  let i;
+  let ready = true;
   const geometryLoaders = loader._geometryLoaders;
   const geometryLoadersLength = geometryLoaders.length;
-  for (let i = 0; i < geometryLoadersLength; ++i) {
-    geometryLoaders[i].process(frameState);
+  for (i = 0; i < geometryLoadersLength; ++i) {
+    const geometryReady = geometryLoaders[i].process(frameState);
+    if (geometryReady && defined(loader._geometryCallbacks[i])) {
+      loader._geometryCallbacks[i]();
+      loader._geometryCallbacks[i] = undefined;
+    }
+    ready = ready && geometryReady;
   }
 
-  if (defined(loader._structuralMetadataLoader)) {
-    loader._structuralMetadataLoader.process(frameState);
+  const structuralMetadataLoader = loader._structuralMetadataLoader;
+  if (defined(structuralMetadataLoader)) {
+    const metadataReady = structuralMetadataLoader.process(frameState);
+    if (metadataReady) {
+      loader._components.structuralMetadata =
+        structuralMetadataLoader.structuralMetadata;
+    }
+    ready = ready && metadataReady;
+  }
+
+  if (ready) {
+    // Geometry requires further processing
+    loader._state = GltfLoaderState.POST_PROCESSING;
   }
 }
 
@@ -549,6 +559,77 @@ function gatherPostProcessBuffers(loader, primitiveLoadPlan) {
   }
 }
 
+/**
+ * Process loaders other than textures
+ * @private
+ */
+GltfLoader.prototype._process = function (frameState) {
+  if (this._state === GltfLoaderState.READY) {
+    return true;
+  }
+
+  if (this._state === GltfLoaderState.PROCESSING) {
+    processLoaders(this, frameState);
+  }
+
+  if (
+    this._resourcesLoaded &&
+    this._state === GltfLoaderState.POST_PROCESSING
+  ) {
+    postProcessGeometry(this, frameState.context);
+    this._state = GltfLoaderState.PROCESSED;
+  }
+
+  if (this._resourcesLoaded && this._state === GltfLoaderState.PROCESSED) {
+    // The buffer views can be unloaded once the data is copied.
+    unloadBufferViewLoaders(this);
+
+    // Similarly, if the glTF was loaded from a typed array, release the memory
+    this._typedArray = undefined;
+
+    this._state = GltfLoaderState.READY;
+    return true;
+  }
+
+  return false;
+};
+
+/**
+ * Process textures other than textures
+ * @private
+ */
+GltfLoader.prototype._processTextures = function (frameState) {
+  if (this._textureState === GltfLoaderState.READY) {
+    return true;
+  }
+
+  if (this._textureState !== GltfLoaderState.PROCESSING) {
+    return false;
+  }
+
+  let i;
+  let ready = true;
+  const textureLoaders = this._textureLoaders;
+  const textureLoadersLength = textureLoaders.length;
+  for (i = 0; i < textureLoadersLength; ++i) {
+    const textureReady = textureLoaders[i].process(frameState);
+    if (textureReady && defined(this._textureCallbacks[i])) {
+      this._textureCallbacks[i]();
+      this._textureCallbacks[i] = undefined;
+    }
+
+    ready = ready && textureReady;
+  }
+
+  if (!ready) {
+    return false;
+  }
+
+  this._textureState = GltfLoaderState.READY;
+  this._texturesLoaded = true;
+  return true;
+};
+
 /**
  * Processes the resource until it becomes ready.
  *
@@ -560,12 +641,64 @@ GltfLoader.prototype.process = function (frameState) {
   Check.typeOf.object("frameState", frameState);
   //>>includeEnd('debug');
 
-  this._process(this, frameState);
+  if (
+    this._state === GltfLoaderState.LOADED &&
+    !defined(this._loadResourcesPromise)
+  ) {
+    this._loadResourcesPromise = loadResources(this, frameState)
+      .then(() => {
+        this._resourcesLoaded = true;
+      })
+      .catch((error) => {
+        this._processError = error;
+      });
+  }
+
+  if (defined(this._processError)) {
+    this._state = GltfLoaderState.FAILED;
+    const error = this._processError;
+    this._processError = undefined;
+    handleError(this, error);
+  }
+
+  // Pop the next error of the list in case there are multiple
+  const textureError = this._textureErrors.pop();
+  if (defined(textureError)) {
+    // There shouldn't be the need to completely unload in this case. Just throw the error.
+    const error = this.getError("Failed to load glTF texture", textureError);
+    error.name = "TextureError";
+    throw error;
+  }
+
+  if (this._state === GltfLoaderState.FAILED) {
+    return false;
+  }
+
+  let ready = false;
+  try {
+    ready = this._process(frameState);
+  } catch (error) {
+    this._state = GltfLoaderState.FAILED;
+    handleError(this, error);
+  }
+
   // Since textures can be loaded independently and are handled through a separate promise, they are processed in their own function
-  this._processTextures(this, frameState);
+  let texturesReady = false;
+  try {
+    texturesReady = this._processTextures(frameState);
+  } catch (error) {
+    this._textureState = GltfLoaderState.FAILED;
+    handleError(this, error);
+  }
+
+  if (this._incrementallyLoadTextures) {
+    return ready;
+  }
+
+  return ready && texturesReady;
 };
 
-function loadVertexBuffer(
+function getVertexBufferLoader(
   loader,
   gltf,
   accessorId,
@@ -578,7 +711,7 @@ function loadVertexBuffer(
   const accessor = gltf.accessors[accessorId];
   const bufferViewId = accessor.bufferView;
 
-  const vertexBufferLoader = ResourceCache.loadVertexBuffer({
+  const vertexBufferLoader = ResourceCache.getVertexBufferLoader({
     gltf: gltf,
     gltfResource: loader._gltfResource,
     baseResource: loader._baseResource,
@@ -592,12 +725,10 @@ function loadVertexBuffer(
     loadTypedArray: loadTypedArray,
   });
 
-  loader._geometryLoaders.push(vertexBufferLoader);
-
   return vertexBufferLoader;
 }
 
-function loadIndexBuffer(
+function getIndexBufferLoader(
   loader,
   gltf,
   accessorId,
@@ -606,7 +737,7 @@ function loadIndexBuffer(
   loadTypedArray,
   frameState
 ) {
-  const indexBufferLoader = ResourceCache.loadIndexBuffer({
+  const indexBufferLoader = ResourceCache.getIndexBufferLoader({
     gltf: gltf,
     accessorId: accessorId,
     gltfResource: loader._gltfResource,
@@ -618,13 +749,11 @@ function loadIndexBuffer(
     loadTypedArray: loadTypedArray,
   });
 
-  loader._geometryLoaders.push(indexBufferLoader);
-
   return indexBufferLoader;
 }
 
-function loadBufferView(loader, gltf, bufferViewId) {
-  const bufferViewLoader = ResourceCache.loadBufferView({
+function getBufferViewLoader(loader, gltf, bufferViewId) {
+  const bufferViewLoader = ResourceCache.getBufferViewLoader({
     gltf: gltf,
     bufferViewId: bufferViewId,
     gltfResource: loader._gltfResource,
@@ -720,6 +849,26 @@ function loadAccessorValues(accessor, typedArray, values, useQuaternion) {
   return values;
 }
 
+async function loadAccessorBufferView(
+  loader,
+  bufferViewLoader,
+  gltf,
+  accessor,
+  useQuaternion,
+  values
+) {
+  await bufferViewLoader.load();
+  if (loader.isDestroyed()) {
+    return;
+  }
+
+  const bufferViewTypedArray = bufferViewLoader.typedArray;
+  const typedArray = getPackedTypedArray(gltf, accessor, bufferViewTypedArray);
+
+  useQuaternion = defaultValue(useQuaternion, false);
+  loadAccessorValues(accessor, typedArray, values, useQuaternion);
+}
+
 function loadAccessor(loader, gltf, accessorId, useQuaternion) {
   const accessor = gltf.accessors[accessorId];
   const accessorCount = accessor.count;
@@ -727,21 +876,15 @@ function loadAccessor(loader, gltf, accessorId, useQuaternion) {
 
   const bufferViewId = accessor.bufferView;
   if (defined(bufferViewId)) {
-    const bufferViewLoader = loadBufferView(loader, gltf, bufferViewId);
-    const promise = bufferViewLoader.promise.then(function (bufferViewLoader) {
-      if (loader.isDestroyed()) {
-        return;
-      }
-      const bufferViewTypedArray = bufferViewLoader.typedArray;
-      const typedArray = getPackedTypedArray(
-        gltf,
-        accessor,
-        bufferViewTypedArray
-      );
-
-      useQuaternion = defaultValue(useQuaternion, false);
-      loadAccessorValues(accessor, typedArray, values, useQuaternion);
-    });
+    const bufferViewLoader = getBufferViewLoader(loader, gltf, bufferViewId);
+    const promise = loadAccessorBufferView(
+      loader,
+      bufferViewLoader,
+      gltf,
+      accessor,
+      useQuaternion,
+      values
+    );
     loader._loaderPromises.push(promise);
 
     return values;
@@ -1062,7 +1205,7 @@ function loadAttribute(
     return attribute;
   }
 
-  const vertexBufferLoader = loadVertexBuffer(
+  const vertexBufferLoader = getVertexBufferLoader(
     loader,
     gltf,
     accessorId,
@@ -1072,13 +1215,15 @@ function loadAttribute(
     loadTypedArray,
     frameState
   );
-  const promise = vertexBufferLoader.promise.then(function (
-    vertexBufferLoader
-  ) {
-    if (loader.isDestroyed()) {
-      return;
-    }
 
+  const index = loader._geometryLoaders.length;
+  loader._geometryLoaders.push(vertexBufferLoader);
+  const promise = vertexBufferLoader.load();
+  loader._loaderPromises.push(promise);
+  // This can only execute once vertexBufferLoader.process() has run and returns true
+  // Save this finish callback by the loader index so it can be called
+  // in process().
+  loader._geometryCallbacks[index] = () => {
     if (
       defined(draco) &&
       defined(draco.attributes) &&
@@ -1100,9 +1245,7 @@ function loadAttribute(
         loadTypedArray
       );
     }
-  });
-
-  loader._loaderPromises.push(promise);
+  };
 
   return attribute;
 }
@@ -1276,7 +1419,7 @@ function loadIndices(
   const loadBuffer = needsPostProcessing ? false : outputBuffer;
   const loadTypedArray = needsPostProcessing ? true : outputTypedArray;
 
-  const indexBufferLoader = loadIndexBuffer(
+  const indexBufferLoader = getIndexBufferLoader(
     loader,
     gltf,
     accessorId,
@@ -1286,18 +1429,18 @@ function loadIndices(
     frameState
   );
 
-  const promise = indexBufferLoader.promise.then(function (indexBufferLoader) {
-    if (loader.isDestroyed()) {
-      return;
-    }
-
+  const index = loader._geometryLoaders.length;
+  loader._geometryLoaders.push(indexBufferLoader);
+  const promise = indexBufferLoader.load();
+  loader._loaderPromises.push(promise);
+  // This can only execute once indexBufferLoader.process() has run and returns true
+  // Save this finish callback by the loader index so it can be called
+  // in process().
+  loader._geometryCallbacks[index] = () => {
     indices.indexDatatype = indexBufferLoader.indexDatatype;
-
     indices.buffer = indexBufferLoader.buffer;
     indices.typedArray = indexBufferLoader.typedArray;
-  });
-
-  loader._loaderPromises.push(promise);
+  };
 
   const indicesPlan = new PrimitiveLoadPlan.IndicesLoadPlan(indices);
   indicesPlan.loadBuffer = outputBuffer;
@@ -1324,7 +1467,7 @@ function loadTexture(
     return undefined;
   }
 
-  const textureLoader = ResourceCache.loadTexture({
+  const textureLoader = ResourceCache.getTextureLoader({
     gltf: gltf,
     textureInfo: textureInfo,
     gltfResource: loader._gltfResource,
@@ -1334,23 +1477,37 @@ function loadTexture(
     asynchronous: loader._asynchronous,
   });
 
-  loader._textureLoaders.push(textureLoader);
-
   const textureReader = GltfLoaderUtil.createModelTextureReader({
     textureInfo: textureInfo,
   });
 
-  const promise = textureLoader.promise.then(function (textureLoader) {
-    if (loader.isUnloaded() || loader.isDestroyed()) {
+  const index = loader._textureLoaders.length;
+  loader._textureLoaders.push(textureLoader);
+  const promise = textureLoader.load().catch((error) => {
+    if (loader.isDestroyed()) {
       return;
     }
+
+    if (!loader._incrementallyLoadTextures) {
+      // If incrementallyLoadTextures is false, throw the error to ensure the loader state
+      // immediately is set to have failed
+      throw error;
+    }
+
+    // Otherwise, save the error so it can be thrown next
+    loader._textureState = GltfLoaderState.FAILED;
+    loader._textureErrors.push(error);
+  });
+  loader._texturesPromises.push(promise);
+  // This can only execute once textureLoader.process() has run and returns true
+  // Save this finish callback by the loader index so it can be called
+  // in process().
+  loader._textureCallbacks[index] = () => {
     textureReader.texture = textureLoader.texture;
     if (defined(samplerOverride)) {
       textureReader.texture.sampler = samplerOverride;
     }
-  });
-
-  loader._texturesPromises.push(promise);
+  };
 
   return textureReader;
 }
@@ -2246,7 +2403,7 @@ function loadSkins(loader, gltf, nodes) {
   return skins;
 }
 
-function loadStructuralMetadata(
+async function loadStructuralMetadata(
   loader,
   gltf,
   extension,
@@ -2264,11 +2421,8 @@ function loadStructuralMetadata(
     frameState: frameState,
     asynchronous: loader._asynchronous,
   });
-  structuralMetadataLoader.load();
-
   loader._structuralMetadataLoader = structuralMetadataLoader;
-
-  return structuralMetadataLoader;
+  return structuralMetadataLoader.load();
 }
 
 function loadAnimationSampler(loader, gltf, gltfSampler) {
@@ -2442,32 +2596,7 @@ function loadScene(gltf, nodes) {
 
 const scratchCenter = new Cartesian3();
 
-function parse(
-  loader,
-  gltf,
-  supportedImageFormats,
-  frameState,
-  rejectPromise,
-  rejectTexturesPromise
-) {
-  const version = gltf.asset.version;
-  if (version !== "1.0" && version !== "2.0") {
-    const url = loader._gltfResource.url;
-    throw new RuntimeError(
-      `Failed to load ${url}: \nUnsupported glTF version: ${version}`
-    );
-  }
-  const extensionsRequired = gltf.extensionsRequired;
-  if (defined(extensionsRequired)) {
-    ModelUtility.checkSupportedExtensions(extensionsRequired);
-
-    // Check for the KHR_mesh_quantization extension here, it will be used later
-    // in loadAttribute().
-    loader._hasKhrMeshQuantization = extensionsRequired.includes(
-      "KHR_mesh_quantization"
-    );
-  }
-
+function parse(loader, gltf, supportedImageFormats, frameState) {
   const extensions = defaultValue(gltf.extensions, defaultValue.EMPTY_OBJECT);
   const structuralMetadataExtension = extensions.EXT_structural_metadata;
   const featureMetadataExtensionLegacy = extensions.EXT_feature_metadata;
@@ -2535,7 +2664,7 @@ function parse(
     defined(structuralMetadataExtension) ||
     defined(featureMetadataExtensionLegacy)
   ) {
-    const structuralMetadataLoader = loadStructuralMetadata(
+    const promise = loadStructuralMetadata(
       loader,
       gltf,
       structuralMetadataExtension,
@@ -2543,62 +2672,40 @@ function parse(
       supportedImageFormats,
       frameState
     );
-    const promise = structuralMetadataLoader.promise.then(function (
-      structuralMetadataLoader
-    ) {
-      if (loader.isDestroyed()) {
-        return;
-      }
-      components.structuralMetadata =
-        structuralMetadataLoader.structuralMetadata;
-    });
     loader._loaderPromises.push(promise);
   }
 
-  // Gather promises and reject if any promises fail.
+  // Gather promises and handle any errors
   const readyPromises = [];
   readyPromises.push.apply(readyPromises, loader._loaderPromises);
 
+  // When incrementallyLoadTextures is true, the errors are caught and thrown individually
+  // since it doesn't affect the overall loader state
   if (!loader._incrementallyLoadTextures) {
     readyPromises.push.apply(readyPromises, loader._texturesPromises);
   }
 
-  Promise.all(readyPromises)
-    .then(function () {
-      if (loader.isDestroyed()) {
-        return;
-      }
-      loader._state = GltfLoaderState.POST_PROCESSING;
-    })
-    .catch(rejectPromise);
-
-  // Separate promise will resolve once textures are loaded.
-  Promise.all(loader._texturesPromises)
-    .then(function () {
-      if (loader.isDestroyed()) {
-        return;
-      }
-
-      // post processing only applies for geometry
-      loader._textureState = GltfLoaderState.PROCESSED;
-    })
-    .catch(rejectTexturesPromise);
+  return Promise.all(readyPromises);
 }
 
 function unloadTextures(loader) {
   const textureLoaders = loader._textureLoaders;
   const textureLoadersLength = textureLoaders.length;
   for (let i = 0; i < textureLoadersLength; ++i) {
-    ResourceCache.unload(textureLoaders[i]);
+    textureLoaders[i] =
+      !textureLoaders[i].isDestroyed() &&
+      ResourceCache.unload(textureLoaders[i]);
   }
   loader._textureLoaders.length = 0;
 }
 
-function unloadBufferViews(loader) {
+function unloadBufferViewLoaders(loader) {
   const bufferViewLoaders = loader._bufferViewLoaders;
   const bufferViewLoadersLength = bufferViewLoaders.length;
   for (let i = 0; i < bufferViewLoadersLength; ++i) {
-    ResourceCache.unload(bufferViewLoaders[i]);
+    bufferViewLoaders[i] =
+      !bufferViewLoaders[i].isDestroyed() &&
+      ResourceCache.unload(bufferViewLoaders[i]);
   }
   loader._bufferViewLoaders.length = 0;
 }
@@ -2607,7 +2714,9 @@ function unloadGeometry(loader) {
   const geometryLoaders = loader._geometryLoaders;
   const geometryLoadersLength = geometryLoaders.length;
   for (let i = 0; i < geometryLoadersLength; ++i) {
-    ResourceCache.unload(geometryLoaders[i]);
+    geometryLoaders[i] =
+      !geometryLoaders[i].isDestroyed() &&
+      ResourceCache.unload(geometryLoaders[i]);
   }
   loader._geometryLoaders.length = 0;
 }
@@ -2625,7 +2734,10 @@ function unloadGeneratedAttributes(loader) {
 }
 
 function unloadStructuralMetadata(loader) {
-  if (defined(loader._structuralMetadataLoader)) {
+  if (
+    defined(loader._structuralMetadataLoader) &&
+    !loader._structuralMetadataLoader.isDestroyed()
+  ) {
     loader._structuralMetadataLoader.destroy();
     loader._structuralMetadataLoader = undefined;
   }
@@ -2644,13 +2756,13 @@ GltfLoader.prototype.isUnloaded = function () {
  * @private
  */
 GltfLoader.prototype.unload = function () {
-  if (defined(this._gltfJsonLoader)) {
+  if (defined(this._gltfJsonLoader) && !this._gltfJsonLoader.isDestroyed()) {
     ResourceCache.unload(this._gltfJsonLoader);
   }
   this._gltfJsonLoader = undefined;
 
   unloadTextures(this);
-  unloadBufferViews(this);
+  unloadBufferViewLoaders(this);
   unloadGeometry(this);
   unloadGeneratedAttributes(this);
   unloadStructuralMetadata(this);