Merge 767c1a8c7d into ee2b3813b2

fix(textureatlas): Apply internal padding between images

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,
+      // Apply padding only along the vertical "cut".
-        y: rectangle.y,
+      const widthDifferencePadded = widthDifference - borderPadding;
-        width: widthDifference,
+
-        height: nodeHeight,
+      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,
+    // Apply padding only along the horizontal "cut".
-      y: rectangle.y + height,
+    const heightDifferencePadded = heightDifference - borderPadding;
-      width: nodeWidth,
+
-      height: heightDifference,
+    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/Source/DataSources/Entity.js

@@ -98,6 +98,7 @@ function createPropertyTypeDescriptor(name, Type) {
  * @property {PolylineVolumeGraphics | PolylineVolumeGraphics.ConstructorOptions} [polylineVolume] A polylineVolume to associate with this entity.
  * @property {RectangleGraphics | RectangleGraphics.ConstructorOptions} [rectangle] A rectangle to associate with this entity.
  * @property {WallGraphics | WallGraphics.ConstructorOptions} [wall] A wall to associate with this entity.
+ * @property {boolean} [asynchronous=true] Determines if the underlying primitives will be created asynchronously or block until ready.
  */
 
 /**
@@ -121,6 +122,7 @@ function Entity(options) {
 
   this._availability = undefined;
   this._id = id;
+  this._asynchronous = options.asynchronous ?? true;
   this._definitionChanged = new Event();
   this._name = options.name;
   this._show = options.show ?? true;
@@ -249,6 +251,16 @@ Object.defineProperties(Entity.prototype, {
       return this._id;
     },
   },
+  /**
+   * Gets whether the underlying primitives should be created asynchronously or block until ready.
+   * @memberof Entity.prototype
+   * @type {boolean}
+   */
+  asynchronous: {
+    get: function () {
+      return this._asynchronous;
+    },
+  },
   /**
    * Gets the event that is raised whenever a property or sub-property is changed or modified.
    * @memberof Entity.prototype

packages/engine/Source/DataSources/GeometryUpdater.js

@@ -50,6 +50,7 @@ function GeometryUpdater(options) {
   const geometryPropertyName = options.geometryPropertyName;
 
   this._entity = entity;
+  this._asynchronous = entity.asynchronous;
   this._scene = options.scene;
   this._fillEnabled = false;
   this._isClosed = false;
@@ -242,6 +243,19 @@ Object.defineProperties(GeometryUpdater.prototype, {
       return this._dynamic;
     },
   },
+  /**
+   * Gets a value indicating if the geometry should be created asynchronously
+   *
+   * @memberof GeometryUpdater.prototype
+   *
+   * @type {boolean}
+   * @readonly
+   */
+  asynchronous: {
+    get: function () {
+      return this._asynchronous;
+    },
+  },
   /**
    * Gets a value indicating if the geometry is closed.
    * This property is only valid for static geometry.

packages/engine/Source/DataSources/StaticGeometryColorBatch.js

@@ -27,6 +27,7 @@ function Batch(
   depthFailMaterialProperty,
   closed,
   shadows,
+  asynchronous,
 ) {
   this.translucent = translucent;
   this.appearanceType = appearanceType;
@@ -48,6 +49,7 @@ function Batch(
   this.showsUpdated = new AssociativeArray();
   this.itemsToRemove = [];
   this.invalidated = false;
+  this.asynchronous = asynchronous ?? true;
 
   let removeMaterialSubscription;
   if (defined(depthFailMaterialProperty)) {
@@ -156,7 +158,7 @@ Batch.prototype.update = function (time) {
 
       primitive = new Primitive({
         show: false,
-        asynchronous: true,
+        asynchronous: this.asynchronous,
         geometryInstances: geometries.slice(),
         appearance: new this.appearanceType({
           translucent: this.translucent,
@@ -430,7 +432,10 @@ StaticGeometryColorBatch.prototype.add = function (time, updater) {
   const length = items.length;
   for (let i = 0; i < length; i++) {
     const item = items[i];
-    if (item.isMaterial(updater)) {
+    if (
+      item.isMaterial(updater) &&
+      item.asynchronous === updater.asynchronous
+    ) {
       item.add(updater, instance);
       return;
     }
@@ -443,6 +448,7 @@ StaticGeometryColorBatch.prototype.add = function (time, updater) {
     updater.depthFailMaterialProperty,
     this._closed,
     this._shadows,
+    updater.asynchronous,
   );
   batch.add(updater, instance);
   items.push(batch);

packages/engine/Specs/Renderer/TextureAtlasSpec.js

@@ -852,16 +852,16 @@ describe("Scene/TextureAtlas", function () {
 .2222222222222222...............
 .2222222222222222...............
 .2222222222222222...............
-.22222222222222223333333333.....
+.2222222222222222.3333333333....
-.22222222222222223333333333.....
+.2222222222222222.3333333333....
-.22222222222222223333333333.....
+.2222222222222222.3333333333....
-.22222222222222223333333333.....
+.2222222222222222.3333333333....
-.22222222222222223333333333.....
+.2222222222222222.3333333333....
-.22222222222222223333333333.....
+.2222222222222222.3333333333....
-.22222222222222223333333333.....
+.2222222222222222.3333333333....
-.22222222222222223333333333.....
+.2222222222222222.3333333333.1..
-.22222222222222223333333333.....
+.2222222222222222.3333333333....
-.2222222222222222333333333301...
+.2222222222222222.3333333333.0..
 ................................
           `.trim(),
         );
@@ -926,9 +926,9 @@ describe("Scene/TextureAtlas", function () {
 .2222222222...
 .2222222222...
 .2222222222...
+.2222222222.1.
 .2222222222...
-.2222222222...
+.2222222222.0.
-.222222222201.
 ..............
           `.trim(),
         );
@@ -976,16 +976,16 @@ describe("Scene/TextureAtlas", function () {
 .3333333333333333...............
 .3333333333333333...............
 .3333333333333333...............
-.33333333333333332222222222.....
+.3333333333333333.2222222222....
-.33333333333333332222222222.....
+.3333333333333333.2222222222....
-.33333333333333332222222222.....
+.3333333333333333.2222222222....
-.33333333333333332222222222.....
+.3333333333333333.2222222222....
-.33333333333333332222222222.....
+.3333333333333333.2222222222....
-.33333333333333332222222222.....
+.3333333333333333.2222222222....
-.33333333333333332222222222.....
+.3333333333333333.2222222222....
-.33333333333333332222222222.....
+.3333333333333333.2222222222.1..
-.33333333333333332222222222.....
+.3333333333333333.2222222222....
-.3333333333333333222222222201...
+.3333333333333333.2222222222.0..
 ................................
           `.trim(),
         );
@@ -1337,6 +1337,108 @@ describe("Scene/TextureAtlas", function () {
         ).contextToRender([0, 255, 0, 255]);
       });
 
+      it("adds custom padding with borderWidthInPixels", async function () {
+        atlas = new TextureAtlas({ borderWidthInPixels: 0 });
+        let indices = await addImages();
+
+        expect(drawAtlas(atlas, indices)).toBe(
+          `
+................
+................
+................
+................
+................
+................
+2222222222......
+2222222222......
+2222222222......
+2222222222......
+2222222222......
+2222222222......
+22222222220.....
+22222222220.....
+22222222220.....
+222222222201....
+          `.trim(),
+        );
+
+        atlas = new TextureAtlas({ borderWidthInPixels: 2 });
+        indices = await addImages();
+
+        expect(drawAtlas(atlas, indices)).toBe(
+          `
+................................
+................................
+................................
+................................
+..2222222222....................
+..2222222222....................
+..2222222222....................
+..2222222222..1.................
+..2222222222....................
+..2222222222....................
+..2222222222..0.................
+..2222222222..0.................
+..2222222222..0.................
+..2222222222..0.................
+................................
+................................
+          `.trim(),
+        );
+
+        atlas = new TextureAtlas({ borderWidthInPixels: 5 });
+        indices = await addImages();
+
+        expect(drawAtlas(atlas, indices)).toBe(
+          `
+................................
+................................
+................................
+................................
+................................
+................................
+................................
+................................
+................................
+................................
+................................
+................................
+................................
+................................
+................................
+................................
+................................
+.....2222222222.................
+.....2222222222.................
+.....2222222222.................
+.....2222222222.................
+.....2222222222.................
+.....2222222222.................
+.....2222222222.....0...........
+.....2222222222.....0...........
+.....2222222222.....0...........
+.....2222222222.....0.....1.....
+................................
+................................
+................................
+................................
+................................
+          `.trim(),
+        );
+
+        async function addImages() {
+          const promise = Promise.all([
+            atlas.addImage(tallGreenGuid, tallGreenImage),
+            atlas.addImage(blueGuid, blueImage),
+            atlas.addImage(bigBlueGuid, bigBlueImage),
+          ]);
+
+          return pollWhilePromise(promise, () => {
+            atlas.update(scene.frameState.context);
+          });
+        }
+      });
+
       it("GUID changes when atlas texure is modified", async function () {
         atlas = new TextureAtlas();