Introduce Texture Throttling

examples/index.ts

@@ -170,9 +170,13 @@ async function runTest(
       parent: renderer.root,
       fontSize: 50,
     });
-    overlayText.once(
+    overlayText.on(
       'loaded',
-      (target: any, { dimensions }: NodeLoadedPayload) => {
+      (target: any, { type, dimensions }: NodeLoadedPayload) => {
+        if (type !== 'text') {
+          return;
+        }
+
         overlayText.x = renderer.settings.appWidth - dimensions.width - 20;
         overlayText.y = renderer.settings.appHeight - dimensions.height - 20;
       },
@@ -425,7 +429,7 @@ async function runAutomation(
 
             // Allow some time for all images to load and the RaF to unpause
             // and render if needed.
-            await delay(200);
+            await new Promise((resolve) => setTimeout(resolve, 200));
             if (snapshot) {
               console.log(`Calling snapshot(${testName})`);
               await snapshot(testName, adjustedOptions);
@@ -454,6 +458,20 @@ async function runAutomation(
   }
 }
 
-function delay(ms: number) {
-  return new Promise((resolve) => setTimeout(resolve, ms));
+function waitForRendererIdle(renderer: RendererMain) {
+  return new Promise<void>((resolve) => {
+    let timeout: NodeJS.Timeout | undefined;
+    const startTimeout = () => {
+      timeout = setTimeout(() => {
+        resolve();
+      }, 200);
+    };
+
+    renderer.once('idle', () => {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+      startTimeout();
+    });
+  });
 }

examples/tests/alpha.ts

@@ -26,12 +26,6 @@ export async function automation(settings: ExampleSettings) {
 }
 
 export default async function test({ renderer, testRoot }: ExampleSettings) {
-  /*
-   * redRect will persist and change color every frame
-   * greenRect will persist and be detached and reattached to the root every second
-   * blueRect will be created and destroyed every 500 ms
-   */
-
   const parent = renderer.createNode({
     x: 200,
     y: 240,
@@ -55,8 +49,5 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
     alpha: 1,
   });
 
-  /*
-   * End: Sprite Map Demo
-   */
   console.log('ready!');
 }

examples/tests/stress-images.ts

@@ -0,0 +1,37 @@
+import type { ExampleSettings } from '../common/ExampleSettings.js';
+
+export default async function ({ renderer, testRoot }: ExampleSettings) {
+  const screenWidth = 1920;
+  const screenHeight = 1080;
+  const totalImages = 1000;
+
+  // Calculate the grid dimensions for square images
+  const gridSize = Math.ceil(Math.sqrt(totalImages)); // Approximate grid size
+  const imageSize = Math.floor(
+    Math.min(screenWidth / gridSize, screenHeight / gridSize),
+  ); // Square size
+
+  // Create a root node for the grid
+  const gridNode = renderer.createNode({
+    x: 0,
+    y: 0,
+    width: screenWidth,
+    height: screenHeight,
+    parent: testRoot,
+  });
+
+  // Create and position images in the grid
+  new Array(totalImages).fill(0).forEach((_, i) => {
+    const x = (i % gridSize) * imageSize;
+    const y = Math.floor(i / gridSize) * imageSize;
+
+    renderer.createNode({
+      parent: gridNode,
+      x,
+      y,
+      width: imageSize,
+      height: imageSize,
+      src: `https://picsum.photos/id/${i}/${imageSize}/${imageSize}`, // Random images
+    });
+  });
+}

examples/tests/stress-mix.ts

@@ -0,0 +1,100 @@
+import type { INode, ITextNode } from '../../dist/exports/index.js';
+import type { ExampleSettings } from '../common/ExampleSettings.js';
+
+export const Colors = {
+  Black: 0x000000ff,
+  Red: 0xff0000ff,
+  Green: 0x00ff00ff,
+  Blue: 0x0000ffff,
+  Magenta: 0xff00ffff,
+  Gray: 0x7f7f7fff,
+  White: 0xffffffff,
+};
+
+const textureType = ['Image', 'Color', 'Text', 'Gradient'];
+
+const gradients = [
+  'colorTl',
+  'colorTr',
+  'colorBl',
+  'colorBr',
+  'colorTop',
+  'colorBottom',
+  'colorLeft',
+  'colorRight',
+  'color',
+];
+
+export default async function ({ renderer, testRoot }: ExampleSettings) {
+  const screenWidth = 1920;
+  const screenHeight = 1080;
+  const totalImages = 1000;
+
+  // Calculate the grid dimensions for square images
+  const gridSize = Math.ceil(Math.sqrt(totalImages)); // Approximate grid size
+  const imageSize = Math.floor(
+    Math.min(screenWidth / gridSize, screenHeight / gridSize),
+  ); // Square size
+
+  // Create a root node for the grid
+  const gridNode = renderer.createNode({
+    x: 0,
+    y: 0,
+    width: screenWidth,
+    height: screenHeight,
+    parent: testRoot,
+  });
+
+  // Create and position images in the grid
+  new Array(totalImages).fill(0).forEach((_, i) => {
+    const x = (i % gridSize) * imageSize;
+    const y = Math.floor(i / gridSize) * imageSize;
+
+    // pick a random texture type
+    const texture = textureType[Math.floor(Math.random() * textureType.length)];
+
+    // pick a random color from Colors
+    const clr =
+      Object.values(Colors)[
+        Math.floor(Math.random() * Object.keys(Colors).length)
+      ];
+
+    const node = {
+      parent: gridNode,
+      x,
+      y,
+      width: imageSize,
+      height: imageSize,
+    } as Partial<INode> | Partial<ITextNode>;
+
+    if (texture === 'Image') {
+      node.src = `https://picsum.photos/id/${i}/${imageSize}/${imageSize}`;
+    } else if (texture === 'Text') {
+      (node as Partial<ITextNode>).text = `Text ${i}`;
+      (node as Partial<ITextNode>).fontSize = 18;
+      node.color = clr;
+    } else if (texture === 'Gradient') {
+      const gradient = gradients[Math.floor(Math.random() * gradients.length)];
+      // @ts-ignore
+      node[gradient] = clr;
+
+      const secondGradient =
+        gradients[Math.floor(Math.random() * gradients.length)];
+      const secondColor =
+        Object.values(Colors)[
+          Math.floor(Math.random() * Object.keys(Colors).length)
+        ];
+
+      // @ts-ignore
+      node[secondGradient] = secondColor;
+    } else {
+      node.color = clr;
+    }
+
+    if (texture === 'Text') {
+      renderer.createTextNode(node as ITextNode);
+    } else {
+      renderer.createNode(node);
+    }
+  });
+}

examples/tests/stress-textures.ts

@@ -0,0 +1,53 @@
+import type { ExampleSettings } from '../common/ExampleSettings.js';
+
+export const Colors = {
+  Black: 0x000000ff,
+  Red: 0xff0000ff,
+  Green: 0x00ff00ff,
+  Blue: 0x0000ffff,
+  Magenta: 0xff00ffff,
+  Gray: 0x7f7f7fff,
+  White: 0xffffffff,
+};
+
+export default async function ({ renderer, testRoot }: ExampleSettings) {
+  const screenWidth = 1920;
+  const screenHeight = 1080;
+  const totalImages = 1000;
+
+  // Calculate the grid dimensions for square images
+  const gridSize = Math.ceil(Math.sqrt(totalImages)); // Approximate grid size
+  const imageSize = Math.floor(
+    Math.min(screenWidth / gridSize, screenHeight / gridSize),
+  ); // Square size
+
+  // Create a root node for the grid
+  const gridNode = renderer.createNode({
+    x: 0,
+    y: 0,
+    width: screenWidth,
+    height: screenHeight,
+    parent: testRoot,
+  });
+
+  // Create and position images in the grid
+  new Array(totalImages).fill(0).forEach((_, i) => {
+    const x = (i % gridSize) * imageSize;
+    const y = Math.floor(i / gridSize) * imageSize;
+
+    // pick a random color from Colors
+    const clr =
+      Object.values(Colors)[
+        Math.floor(Math.random() * Object.keys(Colors).length)
+      ];
+
+    renderer.createNode({
+      parent: gridNode,
+      x,
+      y,
+      width: imageSize,
+      height: imageSize,
+      color: clr,
+    });
+  });
+}

examples/tests/text-mixed.ts

@@ -0,0 +1,108 @@
+import type { INode, ITextNode } from '../../dist/exports/index.js';
+import type { ExampleSettings } from '../common/ExampleSettings.js';
+
+export async function automation(settings: ExampleSettings) {
+  await test(settings);
+  await settings.snapshot();
+}
+
+/**
+ * Tests that Single-Channel Signed Distance Field (SSDF) fonts are rendered
+ * correctly.
+ *
+ * Text that is thinner than the certified snapshot may indicate that the
+ * SSDF font atlas texture was premultiplied before being uploaded to the GPU.
+ *
+ * @param settings
+ * @returns
+ */
+export default async function test(settings: ExampleSettings) {
+  const { renderer, testRoot } = settings;
+
+  let ssdf: ITextNode | undefined,
+    canvas: ITextNode | undefined,
+    factory: INode | undefined;
+
+  const textFactory = () => {
+    const canvas = document.createElement('canvas');
+    canvas.width = 300;
+    canvas.height = 200;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) throw new Error('Unable to create canvas 2d context');
+    ctx.fillStyle = 'red';
+    ctx.font = '50px sans-serif';
+    ctx.fillText('Factory', 0, 50);
+    return ctx.getImageData(0, 0, 300, 200);
+  };
+
+  const drawText = (x = 0) => {
+    // Set a smaller snapshot area
+    ssdf = renderer.createTextNode({
+      x,
+      text: 'SSDF',
+      color: 0x00ff00ff,
+      fontFamily: 'Ubuntu-ssdf',
+      parent: testRoot,
+      fontSize: 80,
+      lineHeight: 80 * 1.2,
+    });
+
+    canvas = renderer.createTextNode({
+      x,
+      color: 0xff0000ff,
+      y: 100,
+      text: `Canvas`,
+      parent: renderer.root,
+      fontSize: 50,
+    });
+
+    factory = renderer.createNode({
+      x,
+      y: 150,
+      width: 300,
+      height: 200,
+      parent: testRoot,
+      texture: renderer.createTexture('ImageTexture', {
+        src: textFactory,
+      }),
+    });
+  };
+
+  let offset = 0;
+  window.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') {
+      if (ssdf || canvas || factory) {
+        ssdf?.destroy();
+        ssdf = undefined;
+
+        canvas?.destroy();
+        canvas = undefined;
+
+        factory?.destroy();
+        factory = undefined;
+      }
+
+      setTimeout(() => {
+        drawText();
+      }, 200);
+    }
+
+    if (e.key === 'ArrowRight') {
+      offset += 10;
+
+      if (ssdf) ssdf.x = offset;
+      if (canvas) canvas.x = offset;
+      if (factory) factory.x = offset;
+    }
+
+    if (e.key === 'ArrowLeft') {
+      offset -= 10;
+
+      if (ssdf) ssdf.x = offset;
+      if (canvas) canvas.x = offset;
+      if (factory) factory.x = offset;
+    }
+  });
+
+  drawText();
+}

examples/tests/texture-factory.ts

@@ -100,7 +100,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
     });
 
     return new Promise((resolve, reject) => {
-      setTimeout(() => {
+      renderer.once('idle', () => {
         let result = '';
         if ((setKey && factoryRuns === 1) || (!setKey && factoryRuns === 2)) {
           textNode.color = 0x00ff00ff;
@@ -112,7 +112,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
         textNode.text += `: ${result}`;
         if (result === 'Pass') resolve(true);
         else reject({ setKey, factoryRuns });
-      }, 50);
+      });
     });
   }