fix(textureatlas): Allocate texture space less aggressively on resize

Author: donmccurdy

packages/engine/Source/Renderer/TextureAtlas.js

@@ -364,26 +364,17 @@ TextureAtlas.prototype._resize = function (context, queueOffset = 0) {
     toPack.push(queue[i]);
   }
 
-  // At minimum, the texture will need to scale to accommodate the largest width and height
-  width = Math.max(maxWidth, width);
-  height = Math.max(maxHeight, height);
+  // At minimum, atlas must fit its largest input images. Texture coordinates are
+  // compressed to 0–1 with 12-bit precision, so use power-of-two size to align pixels.
+  width = CesiumMath.nextPowerOfTwo(Math.max(maxWidth, width));
+  height = CesiumMath.nextPowerOfTwo(Math.max(maxHeight, height));
 
-  if (!context.webgl2) {
-    width = CesiumMath.nextPowerOfTwo(width);
-    height = CesiumMath.nextPowerOfTwo(height);
-  }
-
-  // Determine by what factor the texture need to be scaled by at minimum
-  const areaDifference = areaQueued;
-  let scalingFactor = 1.0;
-  while (areaDifference / width / height >= 1.0) {
-    scalingFactor *= 2.0;
-
-    // Resize by one dimension
+  // Iteratively double the smallest dimension until atlas area is (approximately) sufficient.
+  while (areaQueued >= width * height) {
     if (width > height) {
-      height *= scalingFactor;
+      height *= 2;
     } else {
-      width *= scalingFactor;
+      width *= 2;
     }
   }
 

packages/engine/Specs/Renderer/TextureAtlasSpec.js

@@ -704,56 +704,16 @@ describe("Scene/TextureAtlas", function () {
         expect(index2).toEqual(2);
         expect(index3).toEqual(3);
 
-        // Webgl1 textures should only be powers of 2
-        const isWebGL2 = scene.frameState.context.webgl2;
-        const textureWidth = isWebGL2 ? 20 : 32;
-        const textureHeight = isWebGL2 ? 32 : 16;
+        const textureWidth = 32;
+        const textureHeight = 16;
 
         const texture = atlas.texture;
         expect(texture.pixelFormat).toEqual(PixelFormat.RGBA);
         expect(texture.width).toEqual(textureWidth);
         expect(texture.height).toEqual(textureHeight);
 
-        if (isWebGL2) {
-          expect(drawAtlas(atlas, [index0, index1, index2, index3])).toBe(
-            `
-....................
-....................
-....................
-....................
-....................
-....................
-2222222222..........
-2222222222..........
-2222222222..........
-2222222222..........
-2222222222..........
-2222222222..........
-2222222222..........
-2222222222..........
-2222222222..........
-2222222222..........
-3333333333333333....
-3333333333333333....
-3333333333333333....
-3333333333333333....
-3333333333333333....
-3333333333333333....
-3333333333333333....
-3333333333333333....
-3333333333333333....
-3333333333333333....
-3333333333333333....
-3333333333333333....
-33333333333333330...
-33333333333333330...
-33333333333333330...
-333333333333333301..
-          `.trim(),
-          );
-        } else {
-          expect(drawAtlas(atlas, [index0, index1, index2, index3])).toBe(
-            `
+        expect(drawAtlas(atlas, [index0, index1, index2, index3])).toBe(
+          `
 3333333333333333................
 3333333333333333................
 3333333333333333................
@@ -771,8 +731,7 @@ describe("Scene/TextureAtlas", function () {
 333333333333333322222222220.....
 3333333333333333222222222201....
           `.trim(),
-          );
-        }
+        );
 
         let textureCoordinates = atlas.computeTextureCoordinates(index0);
         expect(
@@ -1456,6 +1415,56 @@ describe("Scene/TextureAtlas", function () {
         expect(guid1).not.toEqual(guid2);
       });
 
+      it("allocates appropriate space on resize", async function () {
+        atlas = new TextureAtlas();
+
+        // Adapted from https://github.com/CesiumGS/cesium/issues/5154, this represents a total
+        // of 2M pixels to be allocated.
+        const imageCount = 256;
+        const imageWidth = 128;
+        const imageHeight = 64;
+
+        const totalPixels = imageCount * imageWidth * imageHeight;
+
+        const imageUrl = createImageDataURL(imageWidth, imageHeight);
+
+        const promises = [];
+        for (let i = 0; i < imageCount; i++) {
+          promises.push(atlas.addImage(i.toString(), imageUrl));
+        }
+
+        const allPromises = Promise.all(promises);
+
+        await pollWhilePromise(allPromises, () => {
+          atlas.update(scene.frameState.context);
+        });
+
+        await allPromises;
+
+        const atlasWidth = atlas.texture.width;
+        const atlasHeight = atlas.texture.height;
+
+        // Allocate enough space, but not >2x more.
+        expect(atlasWidth * atlasHeight).toBeGreaterThan(totalPixels);
+        expect(atlasWidth * atlasHeight).toBeLessThanOrEqual(totalPixels * 2);
+
+        // Aspect ratio should be no more extreme than 1:2.
+        expect(atlasWidth / atlasHeight).toBeGreaterThanOrEqual(0.5);
+        expect(atlasWidth / atlasHeight).toBeLessThanOrEqual(2.0);
+
+        function createImageDataURL(width, height) {
+          const canvas = document.createElement("canvas");
+          canvas.width = width;
+          canvas.height = height;
+
+          const ctx = canvas.getContext("2d");
+          ctx.fillStyle = "green";
+          ctx.fillRect(0, 0, width, height);
+
+          return canvas.toDataURL();
+        }
+      });
+
       it("destroys successfully while image is queued", async function () {
         atlas = new TextureAtlas();