@cesium/engine 22.2.0 → 23.0.0

package/Source/Renderer/ShaderSource.js

@@ -153,14 +153,11 @@ function getBuiltinsAndAutomaticUniforms(shaderSource) {
 }
 
 function combineShader(shaderSource, isFragmentShader, context) {
-  let i;
-  let length;
-
   // Combine shader sources, generally for pseudo-polymorphism, e.g., czm_getMaterial.
   let combinedSources = "";
   const sources = shaderSource.sources;
   if (defined(sources)) {
-    for (i = 0, length = sources.length; i < length; ++i) {
+    for (let i = 0; i < sources.length; ++i) {
       // #line needs to be on its own line.
       combinedSources += `\n#line 0\n${sources[i]}`;
     }
@@ -225,30 +222,34 @@ function combineShader(shaderSource, isFragmentShader, context) {
   let result = "";
 
   const extensionsLength = extensions.length;
-  for (i = 0; i < extensionsLength; i++) {
+  for (let i = 0; i < extensionsLength; i++) {
     result += extensions[i];
   }
 
   if (isFragmentShader) {
-    // If high precision isn't support replace occurrences of highp with mediump
-    // The highp keyword is not always available on older mobile devices
+    // If high precision isn't supported, replace occurrences of highp with mediump.
+    // The highp keyword is not always available on older mobile devices.
     // See https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_best_practices#In_WebGL_1_highp_float_support_is_optional_in_fragment_shaders
-    result +=
-      "\
-#ifdef GL_FRAGMENT_PRECISION_HIGH\n\
-    precision highp float;\n\
-    precision highp int;\n\
-#else\n\
-    precision mediump float;\n\
-    precision mediump int;\n\
-    #define highp mediump\n\
-#endif\n\n";
+    result += `
+#ifdef GL_FRAGMENT_PRECISION_HIGH
+    precision highp float;
+    precision highp int;
+#else
+    precision mediump float;
+    precision mediump int;
+    #define highp mediump
+#endif
+`;
+  }
+
+  if (context.webgl2) {
+    result += `precision highp sampler3D;\n\n`;
   }
 
   // Prepend #defines for uber-shaders
   const defines = shaderSource.defines;
   if (defined(defines)) {
-    for (i = 0, length = defines.length; i < length; ++i) {
+    for (let i = 0, length = defines.length; i < length; ++i) {
       const define = defines[i];
       if (define.length !== 0) {
         result += `#define ${define}\n`;

package/Source/Renderer/Texture.js

@@ -398,7 +398,7 @@ function loadBufferSource(texture, source) {
  * @param {number} xOffset The texel x coordinate of the lower left corner of the subregion of the texture to be updated.
  * @param {number} yOffset The texel y coordinate of the lower left corner of the subregion of the texture to be updated.
  * @param {number} width The width of the source data, in pixels.
- * @param {number} width The height of the source data, in pixels.
+ * @param {number} height The height of the source data, in pixels.
  *
  * @private
  */

package/Source/Renderer/Texture3D.js

@@ -68,7 +68,8 @@ function Texture3D(options) {
     sampler = new Sampler(),
   } = options;
 
-  if (!context.webgl2) {
+  // 3D textures are not supported in a WebGL1 context. But we allow a stub context for testing.
+  if (!context.webgl2 && !defined(context.options.getWebGLStub)) {
     throw new DeveloperError(
       "WebGL1 does not support texture3D. Please use a WebGL2 context.",
     );
@@ -113,25 +114,25 @@ function Texture3D(options) {
 
   Check.typeOf.number.greaterThan("width", width, 0);
 
-  if (width > ContextLimits.maximumTextureSize) {
+  if (width > ContextLimits.maximum3DTextureSize) {
     throw new DeveloperError(
-      `Width must be less than or equal to the maximum texture3D size (${ContextLimits.maximumTextureSize}).  Check maximumTextureSize.`,
+      `Width must be less than or equal to the maximum texture3D size (${ContextLimits.maximum3DTextureSize}).  Check maximum3DTextureSize.`,
     );
   }
 
   Check.typeOf.number.greaterThan("height", height, 0);
 
-  if (height > ContextLimits.maximumTextureSize) {
+  if (height > ContextLimits.maximum3DTextureSize) {
     throw new DeveloperError(
-      `Height must be less than or equal to the maximum texture3D size (${ContextLimits.maximumTextureSize}).  Check maximumTextureSize.`,
+      `Height must be less than or equal to the maximum texture3D size (${ContextLimits.maximum3DTextureSize}).  Check maximum3DTextureSize.`,
     );
   }
 
   Check.typeOf.number.greaterThan("depth", depth, 0);
 
-  if (depth > ContextLimits.maximumTextureSize) {
+  if (depth > ContextLimits.maximum3DTextureSize) {
     throw new DeveloperError(
-      `Depth must be less than or equal to the maximum texture3D size (${ContextLimits.maximumTextureSize}).  Check maximumTextureSize.`,
+      `Depth must be less than or equal to the maximum texture3D size (${ContextLimits.maximum3DTextureSize}).  Check maximum3DTextureSize.`,
     );
   }
 
@@ -333,6 +334,164 @@ function loadBufferSource(texture3D, source) {
   }
 }
 
+/**
+ * Copy new image data into this texture, from a source object with width, height, depth, and arrayBufferView properties.
+ * @param {object} options Object with the following properties:
+ * @param {object} options.source The source object with width, height, depth, and arrayBufferView properties.
+ * @param {number} [options.xOffset=0] The offset in the x direction within the texture to copy into.
+ * @param {number} [options.yOffset=0] The offset in the y direction within the texture to copy into.
+ * @param {number} [options.zOffset=0] The offset in the z direction within the texture to copy into.
+ * @param {boolean} [options.skipColorSpaceConversion=false] If true, any custom gamma or color profiles in the texture will be ignored.
+ *
+ * @exception {DeveloperError} Unsupported copyFrom with a compressed texture pixel format.
+ * @exception {DeveloperError} xOffset must be greater than or equal to zero.
+ * @exception {DeveloperError} yOffset must be greater than or equal to zero.
+ * @exception {DeveloperError} zOffset must be greater than or equal to zero.
+ * @exception {DeveloperError} xOffset + source.width must be less than or equal to width.
+ * @exception {DeveloperError} yOffset + source.height must be less than or equal to height.
+ * @exception {DeveloperError} zOffset + source.depth must be less than or equal to depth.
+ * @exception {DeveloperError} This texture was destroyed, i.e., destroy() was called.
+ * @private
+ * @example
+ * texture.copyFrom({
+ *  source: {
+ *   width : 1,
+ *   height : 1,
+ *   depth : 1,
+ *   arrayBufferView : new Uint8Array([255, 0, 0, 255])
+ *  }
+ * });
+ */
+Texture3D.prototype.copyFrom = function (options) {
+  options = options ?? Frozen.EMPTY_OBJECT;
+
+  const { source, xOffset = 0, yOffset = 0, zOffset = 0 } = options;
+
+  //>>includeStart('debug', pragmas.debug);
+  Check.defined("options.source", source);
+  Check.defined("options.source.arrayBufferView", source.arrayBufferView);
+  if (PixelFormat.isCompressedFormat(this._pixelFormat)) {
+    throw new DeveloperError(
+      "Unsupported copyFrom with a compressed texture pixel format.",
+    );
+  }
+  Check.typeOf.number.greaterThanOrEquals("xOffset", xOffset, 0);
+  Check.typeOf.number.greaterThanOrEquals("yOffset", yOffset, 0);
+  Check.typeOf.number.greaterThanOrEquals("zOffset", zOffset, 0);
+  Check.typeOf.number.lessThanOrEquals(
+    "xOffset + options.source.width",
+    xOffset + source.width,
+    this._width,
+  );
+  Check.typeOf.number.lessThanOrEquals(
+    "yOffset + options.source.height",
+    yOffset + source.height,
+    this._height,
+  );
+  Check.typeOf.number.lessThanOrEquals(
+    "zOffset + options.source.depth",
+    zOffset + source.depth,
+    this._depth,
+  );
+  //>>includeEnd('debug');
+
+  const context = this._context;
+  const gl = context._gl;
+  const target = this._textureTarget;
+
+  gl.activeTexture(gl.TEXTURE0);
+  gl.bindTexture(target, this._texture);
+
+  const { width, height, depth } = source;
+  let uploaded = false;
+  if (!this._initialized) {
+    if (
+      xOffset === 0 &&
+      yOffset === 0 &&
+      zOffset === 0 &&
+      width === this._width &&
+      height === this._height &&
+      depth === this._depth
+    ) {
+      loadBufferSource(this, source);
+      uploaded = true;
+    } else {
+      gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
+      gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+      loadNull(this);
+    }
+    this._initialized = true;
+  }
+
+  if (!uploaded) {
+    loadPartialBufferSource(
+      this,
+      source.arrayBufferView,
+      xOffset,
+      yOffset,
+      zOffset,
+      width,
+      height,
+      depth,
+    );
+  }
+
+  gl.bindTexture(target, null);
+};
+
+/**
+ * Load texel data from a buffer into part of a 3D texture
+ *
+ * @param {Texture3D} texture3D The texture3D to which texel values will be loaded.
+ * @param {TypedArray} arrayBufferView The texel values to be loaded into the texture3D.
+ * @param {number} xOffset The texel x coordinate of the lower left corner of the subregion of the texture to be updated.
+ * @param {number} yOffset The texel y coordinate of the lower left corner of the subregion of the texture to be updated.
+ * @param {number} zOffset The texel z coordinate of the lower left corner of the subregion of the texture to be updated.
+ * @param {number} width The width of the source data, in pixels.
+ * @param {number} height The height of the source data, in pixels.
+ * @param {number} depth The depth of the source data, in pixels.
+ *
+ * @private
+ */
+function loadPartialBufferSource(
+  texture3D,
+  arrayBufferView,
+  xOffset,
+  yOffset,
+  zOffset,
+  width,
+  height,
+  depth,
+) {
+  const context = texture3D._context;
+  const gl = context._gl;
+
+  const { pixelFormat, pixelDatatype } = texture3D;
+
+  const unpackAlignment = PixelFormat.alignmentInBytes(
+    pixelFormat,
+    pixelDatatype,
+    width,
+  );
+  gl.pixelStorei(gl.UNPACK_ALIGNMENT, unpackAlignment);
+  gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
+  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+
+  gl.texSubImage3D(
+    texture3D._textureTarget,
+    0,
+    xOffset,
+    yOffset,
+    zOffset,
+    width,
+    height,
+    depth,
+    pixelFormat,
+    PixelDatatype.toWebGLConstant(pixelDatatype, context),
+    arrayBufferView,
+  );
+}
+
 /**
  * Compute a dimension of the image for the next mip level.
  *

package/Source/Renderer/TextureAtlas.js

@@ -641,7 +641,7 @@ async function resolveImage(image, id) {
  *        or a URL to an Image, or a Promise for an image, or a function that creates an image.
  * @param {number} width A number specifying the width of the texture. If undefined, the image width will be used.
  * @param {number} height A number specifying the height of the texture. If undefined, the image height will be used.
- * @returns {Promise<number>} A Promise that resolves to the image region index, or -1 if resources are in the process of being destroyed.
+ * @returns {Promise<number> | number} The image region index or a promise that resolves to it. -1 is returned if resources are in the process of being destroyed.
  */
 TextureAtlas.prototype.addImage = function (id, image, width, height) {
   //>>includeStart('debug', pragmas.debug);
@@ -657,7 +657,7 @@ TextureAtlas.prototype.addImage = function (id, image, width, height) {
   }
   if (defined(index)) {
     // This image has already been added and resolved
-    return Promise.resolve(index);
+    return index;
   }
 
   index = this._nextIndex++;

package/Source/Scene/Appearance.js

@@ -28,7 +28,7 @@ import CullFace from "./CullFace.js";
  * @see PolylineColorAppearance
  * @see PolylineMaterialAppearance
  *
- * @demo {@link https://sandcastle.cesium.com/index.html?src=Geometry%20and%20Appearances.html|Geometry and Appearances Demo}
+ * @demo {@link https://sandcastle.cesium.com/index.html?id=geometry-and-appearances|Geometry and Appearances Demo}
  */
 function Appearance(options) {
   options = options ?? Frozen.EMPTY_OBJECT;

package/Source/Scene/ArcGisMapService.js

@@ -4,7 +4,7 @@ import Resource from "../Core/Resource.js";
 
 let defaultTokenCredit;
 const defaultAccessToken =
-  "AAPTxy8BH1VEsoebNVZXo8HurEOF051kAEKlhkOhBEc9BmT-YXumqp4JkvycMs8ZG2hKk2SGBrZlhKMqjDAD5-6Bfkm_qv2ikp3Q3QSZyA_gQmxc8WOi5Z38wPaDHFE06ozG_AMTUg2bOPx2B64azLZ2U4MPzYI01EWp4tZnTgEKEBA2S5ip51CE6gSm0glwVGSEMFb3jjJkxH2JvjWM8eU2sTTihBKpJWxbQYppczgBsdw.AT1_YjTi2kjL";
+  "AAPTahokHpH_PEeQIduLwb1A8ZA..rA8bGH-48FscqzwJpCALUEqt2P_mHiflgl0WkBvCxPJzsFMRqAukz-mcG8oZ3eKnfk4MHGvCFMNsNrxXb2fGxfKH-3TQxCZVkCycztIPWRM5OIQ7pzTZIBOO9D7N8VXXpyPtp2bSsxWp5dUpv8qsgrfMHU4IXWGiiKWELBnANXn1QgzyLKngOHAgYWUq2OQ2XuULOpwJwOEWpyX5KvoLavJP0LFJdjB08Mmz-wCvnFqwr8CZjFpKaVSbAT1_aZs2dlMP";
 /**
  * Default options for accessing the ArcGIS image tile service.
  *

package/Source/Scene/Billboard.js

@@ -52,7 +52,7 @@ import isDataUri from "../Core/isDataUri.js";
  * @property {NearFarScalar} [pixelOffsetScaleByDistance] A {@link NearFarScalar} Specifying near and far pixel offset scaling properties of a Billboard based on the billboard's distance from the camera.
  * @property {BoundingRectangle} [imageSubRegion] A {@link BoundingRectangle} Specifying the sub-region of the image to use for the billboard, rather than the entire image.
  * @property {DistanceDisplayCondition} [distanceDisplayCondition] A {@link DistanceDisplayCondition} Specifying the distance from the camera at which this billboard will be displayed.
- * @property {number} [disableDepthTestDistance] A number specifying the distance from the camera at which to disable the depth test to, for example, prevent clipping against terrain.
+ * @property {number} [disableDepthTestDistance] The distance from the camera, beyond which, depth testing is disabled—to, for example, prevent clipping against terrain.
  * @property {SplitDirection} [splitDirection] A {@link SplitDirection} Specifying the split property of the billboard.
  */
 
@@ -93,7 +93,7 @@ import isDataUri from "../Core/isDataUri.js";
  * @param {Billboard.ConstructorOptions} options Object describing initialization options
  * @param {BillboardCollection} billboardCollection Instance of BillboardCollection
  *
- * @demo {@link https://sandcastle.cesium.com/index.html?src=Billboards.html|Cesium Sandcastle Billboard Demo}
+ * @demo {@link https://sandcastle.cesium.com/index.html?id=billboards|Cesium Sandcastle Billboard Demo}
  */
 function Billboard(options, billboardCollection) {
   options = options ?? Frozen.EMPTY_OBJECT;
@@ -845,10 +845,13 @@ Object.defineProperties(Billboard.prototype, {
   },
 
   /**
-   * Gets or sets the distance from the camera at which to disable the depth test to, for example, prevent clipping against terrain.
-   * When set to zero, the depth test is always applied. When set to Number.POSITIVE_INFINITY, the depth test is never applied.
+   * Gets or sets the distance from the camera, beyond which, depth testing is disbaled—to,
+   * for example, prevent clipping against terrain. When set to <code>undefined</code> or
+   * <code>0</code>, the depth test is always applied. When set to
+   * <code>Number.POSITIVE_INFINITY</code>, the depth test is never applied.
    * @memberof Billboard.prototype
-   * @type {number}
+   * @type {number|undefined}
+   * @default undefined
    */
   disableDepthTestDistance: {
     get: function () {

package/Source/Scene/BillboardCollection.js

@@ -118,7 +118,8 @@ const attributeLocationsInstanced = {
  * is used for rendering both opaque and translucent billboards. However, if either all of the billboards are completely opaque or all are completely translucent,
  * setting the technique to BlendOption.OPAQUE or BlendOption.TRANSLUCENT can improve performance by up to 2x.
  * @param {boolean} [options.show=true] Determines if the billboards in the collection will be shown.
- *
+ * @param {number} [options.coarseDepthTestDistance] The distance from the camera, beyond which, billboards are depth-tested against an approximation of the globe ellipsoid rather than against the full globe depth buffer. If unspecified, the default value is determined relative to the value of {@link Ellipsoid.default}.
+ * @param {number} [options.threePointDepthTestDistance] The distance from the camera, within which, billboards with a {@link Billboard#heightReference} value of {@link HeightReference.CLAMP_TO_GROUND} or {@link HeightReference.CLAMP_TO_TERRAIN} are depth tested against three key points. This ensures that if any key point of the billboard is visible, the whole billboard will be visible. If unspecified, the default value is determined relative to the value of {@link Ellipsoid.default}.
  * @performance For best performance, prefer a few collections, each with many billboards, to
  * many collections with only a few billboards each.  Organize collections so that billboards
  * with the same update frequency are in the same collection, i.e., billboards that do not
@@ -130,7 +131,7 @@ const attributeLocationsInstanced = {
  * @see Billboard
  * @see LabelCollection
  *
- * @demo {@link https://sandcastle.cesium.com/index.html?src=Billboards.html|Cesium Sandcastle Billboard Demo}
+ * @demo {@link https://sandcastle.cesium.com/index.html?id=billboards|Cesium Sandcastle Billboard Demo}
  *
  * @example
  * // Create a billboard collection with two billboards
@@ -317,8 +318,11 @@ function BillboardCollection(options) {
   ];
 
   this._highlightColor = Color.clone(Color.WHITE); // Only used by Vector3DTilePoints
-  this._coarseDepthTestDistance = Ellipsoid.default.minimumRadius / 100;
-  this._threePointDepthTestDistance = Ellipsoid.default.minimumRadius / 1000;
+  this._coarseDepthTestDistance =
+    options.coarseDepthTestDistance ?? Ellipsoid.default.minimumRadius / 10.0;
+  this._threePointDepthTestDistance =
+    options.threePointDepthTestDistance ??
+    Ellipsoid.default.minimumRadius / 1000.0;
 
   this._uniforms = {
     u_atlas: () => {
@@ -327,13 +331,9 @@ function BillboardCollection(options) {
     u_highlightColor: () => {
       return this._highlightColor;
     },
-    // An eye-space distance, beyond which, the billboard is simply tested against a camera-facing plane at the ellipsoid's center,
-    // rather than against a depth texture. Note: only if the disableDepthTestingDistance property permits.
     u_coarseDepthTestDistance: () => {
       return this._coarseDepthTestDistance;
     },
-    // Within this distance, if the billboard is clamped to the ground, we'll depth-test 3 key points.
-    // If any key point is visible, the whole billboard will be visible.
     u_threePointDepthTestDistance: () => {
       return this._threePointDepthTestDistance;
     },
@@ -466,6 +466,56 @@ Object.defineProperties(BillboardCollection.prototype, {
       return this._billboardTextureCache;
     },
   },
+
+  /**
+   * The distance from the camera, beyond which, billboards are depth-tested against an approximation of
+   * the globe ellipsoid rather than against the full globe depth buffer. When set to <code>0</code>, the
+   * approximate depth test is always applied. When set to <code>Number.POSITIVE_INFINITY</code>, the
+   * approximate depth test is never applied.
+   * <br/><br/>
+   * This setting only applies when a billboard's {@link Billboard#disableDepthTestDistance} value would
+   * otherwise allow depth testing—i.e., distance from the camera to the billboard is less than a
+   * billboard's {@link Billboard#disableDepthTestDistance} value.
+   * @memberof BillboardCollection.prototype
+   * @type {number}
+   */
+  coarseDepthTestDistance: {
+    get: function () {
+      return this._coarseDepthTestDistance;
+    },
+    set: function (value) {
+      //>>includeStart('debug', pragmas.debug);
+      Check.typeOf.number("coarseDepthTestDistance", value);
+      //>>includeEnd('debug');
+      this._coarseDepthTestDistance = value;
+    },
+  },
+
+  /**
+   * The distance from the camera, within which, billboards with a {@link Billboard#heightReference} value
+   * of {@link HeightReference.CLAMP_TO_GROUND} or {@link HeightReference.CLAMP_TO_TERRAIN} are depth tested
+   * against three key points. This ensures that if any key point of the billboard is visible, the whole
+   * billboard will be visible. When set to <code>0</code>, this feature is disabled and portions of a
+   * billboards behind terrain be clipped.
+   * <br/><br/>
+   * This setting only applies when a billboard's {@link Billboard#disableDepthTestDistance} value would
+   * otherwise allow depth testing—i.e., distance from the camera to the billboard is less than a
+   * billboard's {@link Billboard#disableDepthTestDistance} value.
+   * @see {@link https://cesium.com/blog/2018/07/30/billboards-on-terrain-improvements/|Billboards and Labels on Terrain Improvements}
+   * @memberof BillboardCollection.prototype
+   * @type {number}
+   */
+  threePointDepthTestDistance: {
+    get: function () {
+      return this._threePointDepthTestDistance;
+    },
+    set: function (value) {
+      //>>includeStart('debug', pragmas.debug);
+      Check.typeOf.number("threePointDepthTestDistance", value);
+      //>>includeEnd('debug');
+      this._threePointDepthTestDistance = value;
+    },
+  },
 });
 
 function destroyBillboards(billboards) {
@@ -1204,22 +1254,14 @@ function writeCompressedAttrib2(
   );
   let labelHorizontalOrigin = billboard._labelHorizontalOrigin ?? -2;
   labelHorizontalOrigin += 2;
-  const compressed3 = imageHeight * LEFT_SHIFT2 + labelHorizontalOrigin;
 
-  let red = Color.floatToByte(color.red);
-  let green = Color.floatToByte(color.green);
-  let blue = Color.floatToByte(color.blue);
-  const compressed0 = red * LEFT_SHIFT16 + green * LEFT_SHIFT8 + blue;
-
-  red = Color.floatToByte(pickColor.red);
-  green = Color.floatToByte(pickColor.green);
-  blue = Color.floatToByte(pickColor.blue);
-  const compressed1 = red * LEFT_SHIFT16 + green * LEFT_SHIFT8 + blue;
-
-  let compressed2 =
+  const compressed0 = AttributeCompression.encodeRGB8(color);
+  const compressed1 = AttributeCompression.encodeRGB8(pickColor);
+  const compressed2 =
     Color.floatToByte(color.alpha) * LEFT_SHIFT16 +
-    Color.floatToByte(pickColor.alpha) * LEFT_SHIFT8;
-  compressed2 += sizeInMeters * 2.0 + validAlignedAxis;
+    Color.floatToByte(pickColor.alpha) * LEFT_SHIFT8 +
+    (sizeInMeters * 2.0 + validAlignedAxis);
+  const compressed3 = imageHeight * LEFT_SHIFT2 + labelHorizontalOrigin;
 
   if (billboardCollection._instanced) {
     i = billboard._index;
@@ -1526,10 +1568,7 @@ function writeSDF(billboardCollection, frameState, vafWriters, billboard) {
   const outlineColor = billboard.outlineColor;
   const outlineWidth = billboard.outlineWidth;
 
-  const red = Color.floatToByte(outlineColor.red);
-  const green = Color.floatToByte(outlineColor.green);
-  const blue = Color.floatToByte(outlineColor.blue);
-  const compressed0 = red * LEFT_SHIFT16 + green * LEFT_SHIFT8 + blue;
+  const compressed0 = AttributeCompression.encodeRGB8(outlineColor);
 
   // Compute the relative outline distance
   const outlineDistance = outlineWidth / SDFSettings.RADIUS;

package/Source/Scene/BillboardTexture.js

@@ -199,7 +199,10 @@ BillboardTexture.prototype.loadImage = async function (
   let index;
   const atlas = this._billboardCollection.textureAtlas;
   try {
-    index = await atlas.addImage(id, image, width, height);
+    index = atlas.addImage(id, image, width, height);
+    if (index instanceof Promise) {
+      index = await index;
+    }
   } catch (error) {
     // There was an error loading the image
     billboardTexture._loadState = BillboardLoadState.ERROR;