Fix background updating when label hidden #12138

CHANGES.md

@@ -7,6 +7,7 @@
 #### Fixes :wrench:
 
 - Fixes an event bug following recent changes, where adding a new listener during an event callback caused an infinite loop. [#12955](https://github.com/CesiumGS/cesium/pull/12955)
+- Fix issues with label background when updating properties while `label.show` is `false`. [#12138](https://github.com/CesiumGS/cesium/issues/12138)
 
 ## 1.134 - 2025-10-01
 

CONTRIBUTORS.md

@@ -433,3 +433,4 @@ See [CONTRIBUTING.md](CONTRIBUTING.md) for details on how to contribute to Cesiu
 - [宋时旺](https://github.com/BlockCnFuture)
 - [Marco Zhan](https://github.com/marcoYxz)
 - [Mikhail Porotkin](https://github.com/porotkin)
+- [Adam Beili](https://github.com/Beilinson)

packages/engine/Source/Scene/LabelCollection.js

@@ -150,47 +150,25 @@ function rebindAllGlyphs(labelCollection, label) {
   // presize glyphs to match the new text length
   glyphs.length = textLength;
 
-  const showBackground =
-    label.show && label._showBackground && text.split("\n").join("").length > 0;
   let backgroundBillboard = label._backgroundBillboard;
   const backgroundBillboardCollection =
     labelCollection._backgroundBillboardCollection;
-  if (!showBackground) {
-    if (defined(backgroundBillboard)) {
-      backgroundBillboardCollection.remove(backgroundBillboard);
-      label._backgroundBillboard = backgroundBillboard = undefined;
-    }
-  } else {
-    if (!defined(backgroundBillboard)) {
-      backgroundBillboard = getWhitePixelBillboard(
-        backgroundBillboardCollection,
-        labelCollection,
-      );
-      label._backgroundBillboard = backgroundBillboard;
-    }
 
-    backgroundBillboard.color = label._backgroundColor;
-    backgroundBillboard.show = label._show;
-    backgroundBillboard.position = label._position;
-    backgroundBillboard.eyeOffset = label._eyeOffset;
-    backgroundBillboard.pixelOffset = label._pixelOffset;
-    backgroundBillboard.horizontalOrigin = HorizontalOrigin.LEFT;
-    backgroundBillboard.verticalOrigin = label._verticalOrigin;
-    backgroundBillboard.heightReference = label._heightReference;
-    backgroundBillboard.scale = label.totalScale;
-    backgroundBillboard.pickPrimitive = label;
-    backgroundBillboard.id = label._id;
-    backgroundBillboard.translucencyByDistance = label._translucencyByDistance;
-    backgroundBillboard.pixelOffsetScaleByDistance =
-      label._pixelOffsetScaleByDistance;
-    backgroundBillboard.scaleByDistance = label._scaleByDistance;
-    backgroundBillboard.distanceDisplayCondition =
-      label._distanceDisplayCondition;
-    backgroundBillboard.disableDepthTestDistance =
-      label._disableDepthTestDistance;
-    backgroundBillboard.clusterShow = label.clusterShow;
+  // Create backgroundBillboard if needed
+  if (label._showBackground && !defined(backgroundBillboard)) {
+    backgroundBillboard = getWhitePixelBillboard(
+      backgroundBillboardCollection,
+      labelCollection,
+    );
+    label._backgroundBillboard = backgroundBillboard;
   }
 
+  updateBackgroundBillboard(
+    backgroundBillboardCollection,
+    label,
+    backgroundBillboard,
+  );
+
   const glyphBillboardCollection = labelCollection._glyphBillboardCollection;
   const glyphTextureCache = glyphBillboardCollection.billboardTextureCache;
   const textDimensionsCache = labelCollection._textDimensionsCache;
@@ -335,6 +313,47 @@ function rebindAllGlyphs(labelCollection, label) {
   label._repositionAllGlyphs = true;
 }
 
+function updateBackgroundBillboard(
+  backgroundBillboardCollection,
+  label,
+  backgroundBillboard,
+) {
+  if (!defined(backgroundBillboard)) {
+    return;
+  }
+  const showBackground =
+    label.show &&
+    label._showBackground &&
+    label._renderedText.split("\n").join("").length > 0;
+  // Label is shown and background is hidden - remove the background billboard
+  if (label.show && !showBackground) {
+    backgroundBillboardCollection.remove(backgroundBillboard);
+    label._backgroundBillboard = backgroundBillboard = undefined;
+    return;
+  }
+
+  backgroundBillboard.color = label._backgroundColor;
+  backgroundBillboard.show = label._show;
+  backgroundBillboard.position = label._position;
+  backgroundBillboard.eyeOffset = label._eyeOffset;
+  backgroundBillboard.pixelOffset = label._pixelOffset;
+  backgroundBillboard.horizontalOrigin = HorizontalOrigin.LEFT;
+  backgroundBillboard.verticalOrigin = label._verticalOrigin;
+  backgroundBillboard.heightReference = label._heightReference;
+  backgroundBillboard.scale = label.totalScale;
+  backgroundBillboard.pickPrimitive = label;
+  backgroundBillboard.id = label._id;
+  backgroundBillboard.translucencyByDistance = label._translucencyByDistance;
+  backgroundBillboard.pixelOffsetScaleByDistance =
+    label._pixelOffsetScaleByDistance;
+  backgroundBillboard.scaleByDistance = label._scaleByDistance;
+  backgroundBillboard.distanceDisplayCondition =
+    label._distanceDisplayCondition;
+  backgroundBillboard.disableDepthTestDistance =
+    label._disableDepthTestDistance;
+  backgroundBillboard.clusterShow = label.clusterShow;
+}
+
 function calculateWidthOffset(lineWidth, horizontalOrigin, backgroundPadding) {
   if (horizontalOrigin === HorizontalOrigin.CENTER) {
     return -lineWidth / 2;
@@ -507,7 +526,6 @@ function repositionAllGlyphs(label) {
       glyphPixelOffset.y = 0;
     }
     glyphPixelOffset.y = glyphPixelOffset.y * scale;
-
     backgroundBillboard.width = totalLineWidth;
     backgroundBillboard.height = totalLineHeight;
     backgroundBillboard._setTranslate(glyphPixelOffset);

packages/engine/Specs/Scene/LabelCollectionSpec.js

@@ -1148,6 +1148,26 @@ describe("Scene/LabelCollection", function () {
       });
 
       describe("Label", function () {
+        it("should update background billboard when updating label properties while label is hidden", async function () {
+          const label = labels.add({
+            text: "abc",
+            showBackground: true,
+          });
+
+          await allLabelsReady();
+          expect(labels._backgroundBillboardCollection.length).toEqual(1);
+
+          const backgroundBillboard = label._backgroundBillboard;
+          const { width } = backgroundBillboard;
+
+          label.show = false;
+          label.text = "abcde";
+          expect(labels._backgroundBillboardCollection.length).toEqual(1);
+
+          label.show = true;
+          scene.renderForSpecs();
+          expect(backgroundBillboard.width).toBeGreaterThan(width);
+        });
         it("can compute screen space position", function () {
           labels.clampToPixel = false;
           const label = labels.add({