fix(textureatlas): Apply internal padding between images

Author: donmccurdy

CHANGES.md

@@ -7,7 +7,8 @@
 #### Fixes :wrench:
 
 - Billboards using `imageSubRegion` now render as expected. [#12585](https://github.com/CesiumGS/cesium/issues/12585)
-- Improved scaling of SVGs in billboards [#TODO](https://github.com/CesiumGS/cesium/issues/TODO)
+- Improved scaling of SVGs in billboards [#13020](https://github.com/CesiumGS/cesium/issues/13020)
+- Fixed unexpected outline artifacts around billboards [#13038](https://github.com/CesiumGS/cesium/issues/13038)
 
 #### Additions :tada:
 

packages/engine/Source/Core/TexturePacker.js

@@ -122,6 +122,8 @@ TexturePacker.prototype._findNode = function (node, { width, height }) {
       return node;
     }
 
+    const borderPadding = this._borderPadding;
+
     // Vertical split (childNode1 = left half, childNode2 = right half).
     if (widthDifference > heightDifference) {
       node.childNode1 = new TextureNode({
@@ -130,12 +132,18 @@ TexturePacker.prototype._findNode = function (node, { width, height }) {
         width,
         height: nodeHeight,
       });
-      node.childNode2 = new TextureNode({
-        x: rectangle.x + width,
-        y: rectangle.y,
-        width: widthDifference,
-        height: nodeHeight,
-      });
+
+      // Apply padding only along the vertical "cut".
+      const widthDifferencePadded = widthDifference - borderPadding;
+
+      if (widthDifferencePadded > 0) {
+        node.childNode2 = new TextureNode({
+          x: rectangle.x + width + borderPadding,
+          y: rectangle.y,
+          width: widthDifferencePadded,
+          height: nodeHeight,
+        });
+      }
 
       return this._findNode(node.childNode1, { width, height });
     }
@@ -147,12 +155,19 @@ TexturePacker.prototype._findNode = function (node, { width, height }) {
       width: nodeWidth,
       height,
     });
-    node.childNode2 = new TextureNode({
-      x: rectangle.x,
-      y: rectangle.y + height,
-      width: nodeWidth,
-      height: heightDifference,
-    });
+
+    // Apply padding only along the horizontal "cut".
+    const heightDifferencePadded = heightDifference - borderPadding;
+
+    if (heightDifferencePadded > 0) {
+      node.childNode2 = new TextureNode({
+        x: rectangle.x,
+        y: rectangle.y + height + borderPadding,
+        width: nodeWidth,
+        height: heightDifferencePadded,
+      });
+    }
+
     return this._findNode(node.childNode1, { width, height });
   }
 

packages/engine/Specs/Renderer/TextureAtlasSpec.js

@@ -832,16 +832,16 @@ describe("Scene/TextureAtlas", function () {
         expect(drawAtlas(atlas, [index0, index1, index2, index3])).toBe(
           `
 ••••••••••••••••••••••••••••••••
-•2222222222222222333333333301•••
-•22222222222222223333333333•••••
-•22222222222222223333333333•••••
-•22222222222222223333333333•••••
-•22222222222222223333333333•••••
-•22222222222222223333333333•••••
-•22222222222222223333333333•••••
-•22222222222222223333333333•••••
-•22222222222222223333333333•••••
-•22222222222222223333333333•••••
+•2222222222222222•3333333333•0••
+•2222222222222222•3333333333••••
+•2222222222222222•3333333333•1••
+•2222222222222222•3333333333••••
+•2222222222222222•3333333333••••
+•2222222222222222•3333333333••••
+•2222222222222222•3333333333••••
+•2222222222222222•3333333333••••
+•2222222222222222•3333333333••••
+•2222222222222222•3333333333••••
 •2222222222222222•••••••••••••••
 •2222222222222222•••••••••••••••
 •2222222222222222•••••••••••••••
@@ -917,9 +917,9 @@ describe("Scene/TextureAtlas", function () {
         expect(drawAtlas(atlas, [index0, index1, index2])).toBe(
           `
 ••••••••••••••
-•222222222201•
-•2222222222•••
+•2222222222•0•
 •2222222222•••
+•2222222222•1•
 •2222222222•••
 •2222222222•••
 •2222222222•••
@@ -956,16 +956,16 @@ describe("Scene/TextureAtlas", function () {
         expect(drawAtlas(atlas, [index0, index1, index2, index3])).toBe(
           `
 ••••••••••••••••••••••••••••••••
-•3333333333333333222222222201•••
-•33333333333333332222222222•••••
-•33333333333333332222222222•••••
-•33333333333333332222222222•••••
-•33333333333333332222222222•••••
-•33333333333333332222222222•••••
-•33333333333333332222222222•••••
-•33333333333333332222222222•••••
-•33333333333333332222222222•••••
-•33333333333333332222222222•••••
+•3333333333333333•2222222222•0••
+•3333333333333333•2222222222••••
+•3333333333333333•2222222222•1••
+•3333333333333333•2222222222••••
+•3333333333333333•2222222222••••
+•3333333333333333•2222222222••••
+•3333333333333333•2222222222••••
+•3333333333333333•2222222222••••
+•3333333333333333•2222222222••••
+•3333333333333333•2222222222••••
 •3333333333333333•••••••••••••••
 •3333333333333333•••••••••••••••
 •3333333333333333•••••••••••••••