@cesium/engine 14.0.0 → 16.0.0

package/Source/Scene/LabelCollection.js

@@ -1,7 +1,7 @@
 import BoundingRectangle from "../Core/BoundingRectangle.js";
 import Cartesian2 from "../Core/Cartesian2.js";
 import Color from "../Core/Color.js";
-import defaultValue from "../Core/defaultValue.js";
+import Frozen from "../Core/Frozen.js";
 import defined from "../Core/defined.js";
 import destroyObject from "../Core/destroyObject.js";
 import DeveloperError from "../Core/DeveloperError.js";
@@ -9,34 +9,43 @@ import Matrix4 from "../Core/Matrix4.js";
 import writeTextToCanvas from "../Core/writeTextToCanvas.js";
 import bitmapSDF from "bitmap-sdf";
 import BillboardCollection from "./BillboardCollection.js";
+import BillboardTexture from "./BillboardTexture.js";
 import BlendOption from "./BlendOption.js";
 import { isHeightReferenceClamp } from "./HeightReference.js";
 import HorizontalOrigin from "./HorizontalOrigin.js";
 import Label from "./Label.js";
 import LabelStyle from "./LabelStyle.js";
 import SDFSettings from "./SDFSettings.js";
-import TextureAtlas from "./TextureAtlas.js";
+import TextureAtlas from "../Renderer/TextureAtlas.js";
 import VerticalOrigin from "./VerticalOrigin.js";
 import GraphemeSplitter from "grapheme-splitter";
 
-// A glyph represents a single character in a particular label.  It may or may
-// not have a billboard, depending on whether the texture info has an index into
-// the the label collection's texture atlas.  Invisible characters have no texture, and
-// no billboard.  However, it always has a valid dimensions object.
+/**
+ * A glyph represents a single character in label.
+ * @private
+ */
 function Glyph() {
-  this.textureInfo = undefined;
+  /**
+   * Object containing dimensions of the character as rendered to a canvas.
+   * @see {writeTextToCanvas}
+   * @type {object}
+   * @private
+   */
   this.dimensions = undefined;
-  this.billboard = undefined;
-}
 
-// GlyphTextureInfo represents a single character, drawn in a particular style,
-// shared and reference counted across all labels.  It may or may not have an
-// index into the label collection's texture atlas, depending on whether the character
-// has both width and height, but it always has a valid dimensions object.
-function GlyphTextureInfo(labelCollection, index, dimensions) {
-  this.labelCollection = labelCollection;
-  this.index = index;
-  this.dimensions = dimensions;
+  /**
+   * Reference to loaded image data for a single character, drawn in a particular style, shared and referenced across all labels.
+   * @type {BillboardTexture}
+   * @private
+   */
+  this.billboardTexture = undefined;
+
+  /**
+   * The individual billboard used to render the glyph. This may be <code>undefined</code> if the associated character is whitespace.
+   * @type {Billboard|undefined}
+   * @private
+   */
+  this.billboard = undefined;
 }
 
 // Traditionally, leading is %20 of the font size.
@@ -45,18 +54,38 @@ const whitePixelCanvasId = "ID_WHITE_PIXEL";
 const whitePixelSize = new Cartesian2(4, 4);
 const whitePixelBoundingRegion = new BoundingRectangle(1, 1, 1, 1);
 
-function addWhitePixelCanvas(textureAtlas) {
-  const canvas = document.createElement("canvas");
-  canvas.width = whitePixelSize.x;
-  canvas.height = whitePixelSize.y;
+/**
+ * Create the background image and start loading it into a texture
+ * @private
+ * @param {BillboardCollection} billboardCollection
+ * @param {LabelCollection} labelCollection
+ * @returns {Billboard}
+ */
+function getWhitePixelBillboard(billboardCollection, labelCollection) {
+  const billboardTexture = labelCollection._backgroundBillboardTexture;
+  if (!billboardTexture.hasImage) {
+    const canvas = document.createElement("canvas");
+    canvas.width = whitePixelSize.x;
+    canvas.height = whitePixelSize.y;
+
+    const context2D = canvas.getContext("2d");
+    context2D.fillStyle = "#fff";
+    context2D.fillRect(0, 0, canvas.width, canvas.height);
+
+    billboardTexture.loadImage(whitePixelCanvasId, canvas);
+    billboardTexture.addImageSubRegion(
+      whitePixelCanvasId,
+      whitePixelBoundingRegion,
+    );
+  }
+
+  const billboard = billboardCollection.add({
+    collection: labelCollection,
+  });
 
-  const context2D = canvas.getContext("2d");
-  context2D.fillStyle = "#fff";
-  context2D.fillRect(0, 0, canvas.width, canvas.height);
+  billboard.setImageTexture(billboardTexture);
 
-  // Canvas operations take a frame to draw. Use the asynchronous add function which resolves a promise and allows the draw to complete,
-  // but there's no need to wait on the promise before operation can continue
-  return textureAtlas.addImage(whitePixelCanvasId, canvas);
+  return billboard;
 }
 
 // reusable object for calling writeTextToCanvas
@@ -85,14 +114,10 @@ function createGlyphCanvas(
   return writeTextToCanvas(character, writeTextToCanvasParameters);
 }
 
-function unbindGlyph(labelCollection, glyph) {
-  glyph.textureInfo = undefined;
-  glyph.dimensions = undefined;
-
+function unbindGlyphBillboard(labelCollection, glyph) {
   const billboard = glyph.billboard;
   if (defined(billboard)) {
     billboard.show = false;
-    billboard.image = undefined;
     if (defined(billboard._removeCallbackFunc)) {
       billboard._removeCallbackFunc();
       billboard._removeCallbackFunc = undefined;
@@ -102,11 +127,8 @@ function unbindGlyph(labelCollection, glyph) {
   }
 }
 
-function addGlyphToTextureAtlas(textureAtlas, id, canvas, glyphTextureInfo) {
-  glyphTextureInfo.index = textureAtlas.addImageSync(id, canvas);
-}
-
 const splitter = new GraphemeSplitter();
+const whitespaceRegex = /\s/;
 
 function rebindAllGlyphs(labelCollection, label) {
   const text = label._renderedText;
@@ -115,17 +137,13 @@ function rebindAllGlyphs(labelCollection, label) {
   const glyphs = label._glyphs;
   const glyphsLength = glyphs.length;
 
-  let glyph;
-  let glyphIndex;
-  let textIndex;
-
   // Compute a font size scale relative to the sdf font generated size.
   label._relativeSize = label._fontSize / SDFSettings.FONT_SIZE;
 
   // if we have more glyphs than needed, unbind the extras.
   if (textLength < glyphsLength) {
-    for (glyphIndex = textLength; glyphIndex < glyphsLength; ++glyphIndex) {
-      unbindGlyph(labelCollection, glyphs[glyphIndex]);
+    for (let glyphIndex = textLength; glyphIndex < glyphsLength; ++glyphIndex) {
+      unbindGlyphBillboard(labelCollection, glyphs[glyphIndex]);
     }
   }
 
@@ -144,11 +162,10 @@ function rebindAllGlyphs(labelCollection, label) {
     }
   } else {
     if (!defined(backgroundBillboard)) {
-      backgroundBillboard = backgroundBillboardCollection.add({
-        collection: labelCollection,
-        image: whitePixelCanvasId,
-        imageSubRegion: whitePixelBoundingRegion,
-      });
+      backgroundBillboard = getWhitePixelBillboard(
+        backgroundBillboardCollection,
+        labelCollection,
+      );
       label._backgroundBillboard = backgroundBillboard;
     }
 
@@ -174,11 +191,13 @@ function rebindAllGlyphs(labelCollection, label) {
     backgroundBillboard.clusterShow = label.clusterShow;
   }
 
-  const glyphTextureCache = labelCollection._glyphTextureCache;
+  const glyphBillboardCollection = labelCollection._glyphBillboardCollection;
+  const glyphTextureCache = glyphBillboardCollection.billboardTextureCache;
+  const textDimensionsCache = labelCollection._textDimensionsCache;
 
   // walk the text looking for new characters (creating new glyphs for each)
   // or changed characters (rebinding existing glyphs)
-  for (textIndex = 0; textIndex < textLength; ++textIndex) {
+  for (let textIndex = 0; textIndex < textLength; ++textIndex) {
     const character = graphemes[textIndex];
     const verticalOrigin = label._verticalOrigin;
 
@@ -190,8 +209,12 @@ function rebindAllGlyphs(labelCollection, label) {
       +verticalOrigin,
     ]);
 
-    let glyphTextureInfo = glyphTextureCache[id];
-    if (!defined(glyphTextureInfo)) {
+    let dimensions = textDimensionsCache[id];
+    let glyphBillboardTexture = glyphTextureCache.get(id);
+    if (!defined(glyphBillboardTexture) || !defined(dimensions)) {
+      glyphBillboardTexture = new BillboardTexture(glyphBillboardCollection);
+      glyphTextureCache.set(id, glyphBillboardTexture);
+
       const glyphFont = `${label._fontStyle} ${label._fontWeight} ${SDFSettings.FONT_SIZE}px ${label._fontFamily}`;
 
       const canvas = createGlyphCanvas(
@@ -203,14 +226,14 @@ function rebindAllGlyphs(labelCollection, label) {
         LabelStyle.FILL,
       );
 
-      glyphTextureInfo = new GlyphTextureInfo(
-        labelCollection,
-        -1,
-        canvas.dimensions,
-      );
-      glyphTextureCache[id] = glyphTextureInfo;
+      dimensions = canvas.dimensions;
+      textDimensionsCache[id] = dimensions;
 
-      if (canvas.width > 0 && canvas.height > 0) {
+      if (
+        canvas.width > 0 &&
+        canvas.height > 0 &&
+        !whitespaceRegex.test(character)
+      ) {
         const sdfValues = bitmapSDF(canvas, {
           cutoff: SDFSettings.CUTOFF,
           radius: SDFSettings.RADIUS,
@@ -233,84 +256,76 @@ function rebindAllGlyphs(labelCollection, label) {
           }
         }
         ctx.putImageData(imgData, 0, 0);
-        if (character !== " ") {
-          addGlyphToTextureAtlas(
-            labelCollection._textureAtlas,
-            id,
-            canvas,
-            glyphTextureInfo,
-          );
-        }
+        glyphBillboardTexture.loadImage(id, canvas);
       }
     }
 
-    glyph = glyphs[textIndex];
-
-    if (defined(glyph)) {
-      // clean up leftover information from the previous glyph
-      if (glyphTextureInfo.index === -1) {
-        // no texture, and therefore no billboard, for this glyph.
-        // so, completely unbind glyph.
-        unbindGlyph(labelCollection, glyph);
-      } else if (defined(glyph.textureInfo)) {
-        // we have a texture and billboard.  If we had one before, release
-        // our reference to that texture info, but reuse the billboard.
-        glyph.textureInfo = undefined;
-      }
-    } else {
-      // create a glyph object
+    let glyph = glyphs[textIndex];
+    if (!defined(glyph)) {
       glyph = new Glyph();
+      glyph.dimensions = dimensions;
+      glyph.billboardTexture = glyphBillboardTexture;
       glyphs[textIndex] = glyph;
     }
 
-    glyph.textureInfo = glyphTextureInfo;
-    glyph.dimensions = glyphTextureInfo.dimensions;
-
-    // if we have a texture, configure the existing billboard, or obtain one
-    if (glyphTextureInfo.index !== -1) {
-      let billboard = glyph.billboard;
-      const spareBillboards = labelCollection._spareBillboards;
-      if (!defined(billboard)) {
-        if (spareBillboards.length > 0) {
-          billboard = spareBillboards.pop();
-        } else {
-          billboard = labelCollection._billboardCollection.add({
-            collection: labelCollection,
-          });
-          billboard._labelDimensions = new Cartesian2();
-          billboard._labelTranslate = new Cartesian2();
-        }
-        glyph.billboard = billboard;
-      }
+    if (glyph.billboardTexture.id !== id) {
+      // This glyph has been mapped to a new texture. If we had one before, release
+      // our reference to that texture and dimensions, but reuse the billboard.
+      glyph.billboardTexture = glyphBillboardTexture;
+      glyph.dimensions = dimensions;
+    }
+
+    if (!glyphBillboardTexture.hasImage) {
+      // No texture, and therefore no billboard, for this glyph.
+      // so, completely unbind glyph to free up the billboard for others
+      unbindGlyphBillboard(labelCollection, glyph);
+      continue;
+    }
 
-      billboard.show = label._show;
-      billboard.position = label._position;
-      billboard.eyeOffset = label._eyeOffset;
-      billboard.pixelOffset = label._pixelOffset;
-      billboard.horizontalOrigin = HorizontalOrigin.LEFT;
-      billboard.verticalOrigin = label._verticalOrigin;
-      billboard.heightReference = label._heightReference;
-      billboard.scale = label.totalScale;
-      billboard.pickPrimitive = label;
-      billboard.id = label._id;
-      billboard.image = id;
-      billboard.translucencyByDistance = label._translucencyByDistance;
-      billboard.pixelOffsetScaleByDistance = label._pixelOffsetScaleByDistance;
-      billboard.scaleByDistance = label._scaleByDistance;
-      billboard.distanceDisplayCondition = label._distanceDisplayCondition;
-      billboard.disableDepthTestDistance = label._disableDepthTestDistance;
-      billboard._batchIndex = label._batchIndex;
-      billboard.outlineColor = label.outlineColor;
-      if (label.style === LabelStyle.FILL_AND_OUTLINE) {
-        billboard.color = label._fillColor;
-        billboard.outlineWidth = label.outlineWidth;
-      } else if (label.style === LabelStyle.FILL) {
-        billboard.color = label._fillColor;
-        billboard.outlineWidth = 0.0;
-      } else if (label.style === LabelStyle.OUTLINE) {
-        billboard.color = Color.TRANSPARENT;
-        billboard.outlineWidth = label.outlineWidth;
+    // If we have a texture, configure the existing billboard, or obtain one
+    let billboard = glyph.billboard;
+    const spareBillboards = labelCollection._spareBillboards;
+    if (!defined(billboard)) {
+      if (spareBillboards.length > 0) {
+        billboard = spareBillboards.pop();
+      } else {
+        billboard = glyphBillboardCollection.add({
+          collection: labelCollection,
+        });
+        billboard._labelDimensions = new Cartesian2();
+        billboard._labelTranslate = new Cartesian2();
       }
+      glyph.billboard = billboard;
+    }
+
+    billboard.setImageTexture(glyphBillboardTexture);
+
+    billboard.show = label._show;
+    billboard.position = label._position;
+    billboard.eyeOffset = label._eyeOffset;
+    billboard.pixelOffset = label._pixelOffset;
+    billboard.horizontalOrigin = HorizontalOrigin.LEFT;
+    billboard.verticalOrigin = label._verticalOrigin;
+    billboard.heightReference = label._heightReference;
+    billboard.scale = label.totalScale;
+    billboard.pickPrimitive = label;
+    billboard.id = label._id;
+    billboard.translucencyByDistance = label._translucencyByDistance;
+    billboard.pixelOffsetScaleByDistance = label._pixelOffsetScaleByDistance;
+    billboard.scaleByDistance = label._scaleByDistance;
+    billboard.distanceDisplayCondition = label._distanceDisplayCondition;
+    billboard.disableDepthTestDistance = label._disableDepthTestDistance;
+    billboard._batchIndex = label._batchIndex;
+    billboard.outlineColor = label.outlineColor;
+    if (label.style === LabelStyle.FILL_AND_OUTLINE) {
+      billboard.color = label._fillColor;
+      billboard.outlineWidth = label.outlineWidth;
+    } else if (label.style === LabelStyle.FILL) {
+      billboard.color = label._fillColor;
+      billboard.outlineWidth = 0.0;
+    } else if (label.style === LabelStyle.OUTLINE) {
+      billboard.color = Color.TRANSPARENT;
+      billboard.outlineWidth = label.outlineWidth;
     }
   }
 
@@ -335,15 +350,12 @@ const scratchBackgroundPadding = new Cartesian2();
 function repositionAllGlyphs(label) {
   const glyphs = label._glyphs;
   const text = label._renderedText;
-  let glyph;
-  let dimensions;
   let lastLineWidth = 0;
   let maxLineWidth = 0;
   const lineWidths = [];
   let maxGlyphDescent = Number.NEGATIVE_INFINITY;
   let maxGlyphY = 0;
   let numberOfLines = 1;
-  let glyphIndex;
   const glyphLength = glyphs.length;
 
   const backgroundBillboard = label._backgroundBillboard;
@@ -356,18 +368,21 @@ function repositionAllGlyphs(label) {
   backgroundPadding.x /= label._relativeSize;
   backgroundPadding.y /= label._relativeSize;
 
-  for (glyphIndex = 0; glyphIndex < glyphLength; ++glyphIndex) {
+  for (let glyphIndex = 0; glyphIndex < glyphLength; ++glyphIndex) {
     if (text.charAt(glyphIndex) === "\n") {
       lineWidths.push(lastLineWidth);
       ++numberOfLines;
       lastLineWidth = 0;
-    } else {
-      glyph = glyphs[glyphIndex];
-      dimensions = glyph.dimensions;
+      continue;
+    }
+
+    const glyph = glyphs[glyphIndex];
+    const dimensions = glyph.dimensions;
+    if (defined(dimensions)) {
       maxGlyphY = Math.max(maxGlyphY, dimensions.height - dimensions.descent);
       maxGlyphDescent = Math.max(maxGlyphDescent, dimensions.descent);
 
-      //Computing the line width must also account for the kerning that occurs between letters.
+      // Computing the line width must also account for the kerning that occurs between letters.
       lastLineWidth += dimensions.width - dimensions.minx;
       if (glyphIndex < glyphLength - 1) {
         lastLineWidth += glyphs[glyphIndex + 1].dimensions.minx;
@@ -408,7 +423,7 @@ function repositionAllGlyphs(label) {
   let firstCharOfLine = true;
 
   let lineOffsetY = 0;
-  for (glyphIndex = 0; glyphIndex < glyphLength; ++glyphIndex) {
+  for (let glyphIndex = 0; glyphIndex < glyphLength; ++glyphIndex) {
     if (text.charAt(glyphIndex) === "\n") {
       ++lineIndex;
       lineOffsetY += lineSpacing;
@@ -420,10 +435,12 @@ function repositionAllGlyphs(label) {
       );
       glyphPixelOffset.x = widthOffset * scale;
       firstCharOfLine = true;
-    } else {
-      glyph = glyphs[glyphIndex];
-      dimensions = glyph.dimensions;
+      continue;
+    }
 
+    const glyph = glyphs[glyphIndex];
+    const dimensions = glyph.dimensions;
+    if (defined(dimensions)) {
       if (verticalOrigin === VerticalOrigin.TOP) {
         glyphPixelOffset.y =
           dimensions.height - maxGlyphY - backgroundPadding.y;
@@ -500,8 +517,8 @@ function repositionAllGlyphs(label) {
   }
 
   if (isHeightReferenceClamp(label.heightReference)) {
-    for (glyphIndex = 0; glyphIndex < glyphLength; ++glyphIndex) {
-      glyph = glyphs[glyphIndex];
+    for (let glyphIndex = 0; glyphIndex < glyphLength; ++glyphIndex) {
+      const glyph = glyphs[glyphIndex];
       const billboard = glyph.billboard;
       if (defined(billboard)) {
         billboard._labelTranslate = Cartesian2.clone(
@@ -516,7 +533,7 @@ function repositionAllGlyphs(label) {
 function destroyLabel(labelCollection, label) {
   const glyphs = label._glyphs;
   for (let i = 0, len = glyphs.length; i < len; ++i) {
-    unbindGlyph(labelCollection, glyphs[i]);
+    unbindGlyphBillboard(labelCollection, glyphs[i]);
   }
   if (defined(label._backgroundBillboard)) {
     labelCollection._backgroundBillboardCollection.remove(
@@ -582,28 +599,30 @@ function destroyLabel(labelCollection, label) {
  * });
  */
 function LabelCollection(options) {
-  options = defaultValue(options, defaultValue.EMPTY_OBJECT);
+  options = options ?? Frozen.EMPTY_OBJECT;
 
   this._scene = options.scene;
   this._batchTable = options.batchTable;
 
-  this._textureAtlas = undefined;
-  this._backgroundTextureAtlas = undefined;
-
-  this._backgroundBillboardCollection = new BillboardCollection({
+  const backgroundBillboardCollection = new BillboardCollection({
     scene: this._scene,
+    textureAtlas: new TextureAtlas({
+      initialSize: whitePixelSize,
+    }),
   });
-  this._backgroundBillboardCollection.destroyTextureAtlas = false;
+  this._backgroundBillboardCollection = backgroundBillboardCollection;
+  this._backgroundBillboardTexture = new BillboardTexture(
+    backgroundBillboardCollection,
+  );
 
-  this._billboardCollection = new BillboardCollection({
+  this._glyphBillboardCollection = new BillboardCollection({
     scene: this._scene,
     batchTable: this._batchTable,
   });
-  this._billboardCollection.destroyTextureAtlas = false;
-  this._billboardCollection._sdf = true;
+  this._glyphBillboardCollection._sdf = true;
 
   this._spareBillboards = [];
-  this._glyphTextureCache = {};
+  this._textDimensionsCache = {};
   this._labels = [];
   this._labelsToUpdate = [];
   this._totalGlyphCount = 0;
@@ -616,7 +635,7 @@ function LabelCollection(options) {
    * @type {boolean}
    * @default true
    */
-  this.show = defaultValue(options.show, true);
+  this.show = options.show ?? true;
 
   /**
    * The 4x4 transformation matrix that transforms each label in this collection from model to world coordinates.
@@ -647,9 +666,7 @@ function LabelCollection(options) {
    *   text     : 'Up'
    * });
    */
-  this.modelMatrix = Matrix4.clone(
-    defaultValue(options.modelMatrix, Matrix4.IDENTITY),
-  );
+  this.modelMatrix = Matrix4.clone(options.modelMatrix ?? Matrix4.IDENTITY);
 
   /**
    * This property is for debugging only; it is not for production use nor is it optimized.
@@ -661,10 +678,7 @@ function LabelCollection(options) {
    *
    * @default false
    */
-  this.debugShowBoundingVolume = defaultValue(
-    options.debugShowBoundingVolume,
-    false,
-  );
+  this.debugShowBoundingVolume = options.debugShowBoundingVolume ?? false;
 
   /**
    * The label blending option. The default is used for rendering both opaque and translucent labels.
@@ -674,10 +688,7 @@ function LabelCollection(options) {
    * @type {BlendOption}
    * @default BlendOption.OPAQUE_AND_TRANSLUCENT
    */
-  this.blendOption = defaultValue(
-    options.blendOption,
-    BlendOption.OPAQUE_AND_TRANSLUCENT,
-  );
+  this.blendOption = options.blendOption ?? BlendOption.OPAQUE_AND_TRANSLUCENT;
 }
 
 Object.defineProperties(LabelCollection.prototype, {
@@ -687,12 +698,47 @@ Object.defineProperties(LabelCollection.prototype, {
    * in the collection.
    * @memberof LabelCollection.prototype
    * @type {number}
+   * @readonly
    */
   length: {
     get: function () {
       return this._labels.length;
     },
   },
+
+  /**
+   * Returns the size in bytes of the WebGL texture resources.
+   * @private
+   * @memberof LabelCollection.prototype
+   * @type {number}
+   * @readonly
+   */
+  sizeInBytes: {
+    get: function () {
+      return (
+        this._glyphBillboardCollection.sizeInBytes +
+        this._backgroundBillboardCollection.sizeInBytes
+      );
+    },
+  },
+
+  /**
+   * True when all labels currently in the collection are ready for rendering.
+   * @private
+   * @memberof LabelCollection.prototype
+   * @type {boolean}
+   * @readonly
+   */
+  ready: {
+    get: function () {
+      const backgroundBillboard = this._backgroundBillboardCollection.get(0);
+      if (defined(backgroundBillboard) && !backgroundBillboard.ready) {
+        return false;
+      }
+
+      return this._glyphBillboardCollection.ready;
+    },
+  },
 });
 
 /**
@@ -709,7 +755,6 @@ Object.defineProperties(LabelCollection.prototype, {
  *
  * @exception {DeveloperError} This object was destroyed, i.e., destroy() was called.
  *
- *
  * @example
  * // Example 1:  Add a label, specifying all the default values.
  * const l = labels.add({
@@ -872,42 +917,22 @@ LabelCollection.prototype.get = function (index) {
 
 /**
  * @private
- *
  */
 LabelCollection.prototype.update = function (frameState) {
   if (!this.show) {
     return;
   }
 
-  const billboardCollection = this._billboardCollection;
+  const glyphBillboardCollection = this._glyphBillboardCollection;
   const backgroundBillboardCollection = this._backgroundBillboardCollection;
 
-  billboardCollection.modelMatrix = this.modelMatrix;
-  billboardCollection.debugShowBoundingVolume = this.debugShowBoundingVolume;
+  glyphBillboardCollection.modelMatrix = this.modelMatrix;
+  glyphBillboardCollection.debugShowBoundingVolume =
+    this.debugShowBoundingVolume;
   backgroundBillboardCollection.modelMatrix = this.modelMatrix;
   backgroundBillboardCollection.debugShowBoundingVolume =
     this.debugShowBoundingVolume;
 
-  const context = frameState.context;
-
-  if (!defined(this._textureAtlas)) {
-    this._textureAtlas = new TextureAtlas({
-      context: context,
-    });
-    billboardCollection.textureAtlas = this._textureAtlas;
-  }
-
-  if (!defined(this._backgroundTextureAtlas)) {
-    this._backgroundTextureAtlas = new TextureAtlas({
-      context: context,
-      initialSize: whitePixelSize,
-    });
-    backgroundBillboardCollection.textureAtlas = this._backgroundTextureAtlas;
-
-    // Request a new render in request render mode after the next frame renders
-    addWhitePixelCanvas(this._backgroundTextureAtlas);
-  }
-
   const len = this._labelsToUpdate.length;
   for (let i = 0; i < len; ++i) {
     const label = this._labelsToUpdate[i];
@@ -935,15 +960,15 @@ LabelCollection.prototype.update = function (frameState) {
     backgroundBillboardCollection.length > 0
       ? BlendOption.TRANSLUCENT
       : this.blendOption;
-  billboardCollection.blendOption = blendOption;
+  glyphBillboardCollection.blendOption = blendOption;
   backgroundBillboardCollection.blendOption = blendOption;
 
-  billboardCollection._highlightColor = this._highlightColor;
+  glyphBillboardCollection._highlightColor = this._highlightColor;
   backgroundBillboardCollection._highlightColor = this._highlightColor;
 
   this._labelsToUpdate.length = 0;
   backgroundBillboardCollection.update(frameState);
-  billboardCollection.update(frameState);
+  glyphBillboardCollection.update(frameState);
 };
 
 /**
@@ -978,12 +1003,9 @@ LabelCollection.prototype.isDestroyed = function () {
  */
 LabelCollection.prototype.destroy = function () {
   this.removeAll();
-  this._billboardCollection = this._billboardCollection.destroy();
-  this._textureAtlas = this._textureAtlas && this._textureAtlas.destroy();
+  this._glyphBillboardCollection = this._glyphBillboardCollection.destroy();
   this._backgroundBillboardCollection =
     this._backgroundBillboardCollection.destroy();
-  this._backgroundTextureAtlas =
-    this._backgroundTextureAtlas && this._backgroundTextureAtlas.destroy();
 
   return destroyObject(this);
 };