diff --git a/examples/README.md b/examples/README.md index 46761d2d..669edb5c 100644 --- a/examples/README.md +++ b/examples/README.md @@ -44,8 +44,14 @@ pnpm watch - `overlay` (boolean, default: "true") - Whether or not to show the text overlay in the bottom-right corner that displays the current test and driver being used. +- `resolution` (number, default: 720) + - Resolution (height) of to render the test at (in logical pixels) - `fps` (boolean, default: "false") - Whether or not to log the latest FPS to the console every 1 second. +- `ppr` (number, default: 1) + - Device physical pixel ratio. +- `multiplier` (number, default: 1) + - In tests that support it, multiply the number of objects created by this number. Useful for performance tests. - `automation` (boolean, default: "false") - Automation mode. - Executes the exported `automation()` function for every Example Test diff --git a/examples/common/ExampleSettings.ts b/examples/common/ExampleSettings.ts index 999719d3..515071e6 100644 --- a/examples/common/ExampleSettings.ts +++ b/examples/common/ExampleSettings.ts @@ -48,6 +48,14 @@ export interface ExampleSettings { * Whether the test is being run in automation mode. */ automation: boolean; + /** + * For performance tests that want to support it, use this number as a multiplier + * for the number of objects created by a test. + * + * @remarks + * This value is `1` by default. + */ + perfMultiplier: number; /** * If the test is run in automation mode, this method will take a visual * snapshot of the current state of the renderer's canvas for the Visual diff --git a/examples/index.ts b/examples/index.ts index 05ece9b9..73113715 100644 --- a/examples/index.ts +++ b/examples/index.ts @@ -54,22 +54,40 @@ const testModules = import.meta.glob('./tests/*.ts') as Record< () => Promise >; +const appWidth = 1920; +const appHeight = 1080; +const defaultResolution = 720; +const defaultPhysicalPixelRatio = 1; + (async () => { // URL params // - driver: main | threadx (default: threadx) // - test: (default: test) + // - resolution: (default: 720) + // - Resolution (height) of to render the test at (in logical pixels) + // - ppr: (default: 1) + // - Device physical pixel ratio // - showOverlay: true | false (default: true) // - fps: true | false (default: false) // - Log FPS to console every second + // - multiplier: (default: 1) + // - In tests that support it, multiply the number of objects created by + // this number. Useful for performance tests. // - finalizationRegistry: true | false (default: false) // - Use FinalizationRegistryTextureUsageTracker instead of // ManualCountTextureUsageTracker // - automation: true | false (default: false) + // - Run all tests in automation mode const urlParams = new URLSearchParams(window.location.search); const automation = urlParams.get('automation') === 'true'; const test = urlParams.get('test') || (automation ? null : 'test'); const showOverlay = urlParams.get('overlay') !== 'false'; const logFps = urlParams.get('fps') === 'true'; + const perfMultiplier = Number(urlParams.get('multiplier')) || 1; + const resolution = Number(urlParams.get('resolution')) || 720; + const physicalPixelRatio = + Number(urlParams.get('ppr')) || defaultPhysicalPixelRatio; + const logicalPixelRatio = resolution / appHeight; let driverName = urlParams.get('driver'); if (driverName !== 'main' && driverName !== 'threadx') { @@ -77,7 +95,16 @@ const testModules = import.meta.glob('./tests/*.ts') as Record< } if (test) { - await runTest(test, driverName, urlParams, showOverlay, logFps); + await runTest( + test, + driverName, + urlParams, + showOverlay, + logicalPixelRatio, + physicalPixelRatio, + logFps, + perfMultiplier, + ); return; } assertTruthy(automation); @@ -91,7 +118,10 @@ async function runTest( driverName: string, urlParams: URLSearchParams, showOverlay: boolean, + logicalPixelRatio: number, + physicalPixelRatio: number, logFps: boolean, + perfMultiplier: number, ) { const testModule = testModules[getTestPath(test)]; if (!testModule) { @@ -109,6 +139,8 @@ async function runTest( const { renderer, appElement } = await initRenderer( driverName, logFps, + logicalPixelRatio, + physicalPixelRatio, customSettings, ); @@ -137,6 +169,7 @@ async function runTest( // eslint-disable-next-line @typescript-eslint/no-non-null-assertion testRoot: renderer.root!, automation: false, + perfMultiplier: perfMultiplier, snapshot: async () => { // No-op }, @@ -149,6 +182,8 @@ async function runTest( async function initRenderer( driverName: string, logFps: boolean, + logicalPixelRatio: number, + physicalPixelRatio: number, customSettings?: Partial, ) { let driver: ICoreDriver | null = null; @@ -163,10 +198,10 @@ async function initRenderer( const renderer = new RendererMain( { - appWidth: 1920, - appHeight: 1080, - deviceLogicalPixelRatio: 0.6666667, - devicePhysicalPixelRatio: 1, + appWidth, + appHeight, + deviceLogicalPixelRatio: logicalPixelRatio, + devicePhysicalPixelRatio: physicalPixelRatio, clearColor: 0x00000000, coreExtensionModule: coreExtensionModuleUrl, fpsUpdateInterval: logFps ? 1000 : 0, @@ -190,7 +225,13 @@ async function initRenderer( } async function runAutomation(driverName: string, logFps: boolean) { - const { renderer, appElement } = await initRenderer(driverName, logFps); + const logicalPixelRatio = defaultResolution / appHeight; + const { renderer, appElement } = await initRenderer( + driverName, + logFps, + logicalPixelRatio, + defaultPhysicalPixelRatio, + ); // Iterate through all test modules for (const testPath in testModules) { @@ -216,6 +257,7 @@ async function runAutomation(driverName: string, logFps: boolean) { driverName: driverName as 'main' | 'threadx', appElement, automation: true, + perfMultiplier: 1, snapshot: async () => { const snapshot = (window as any).snapshot as | ((testName: string) => Promise) diff --git a/examples/tests/stress.ts b/examples/tests/stress.ts index 6cf509ba..54b137f4 100644 --- a/examples/tests/stress.ts +++ b/examples/tests/stress.ts @@ -24,7 +24,11 @@ import type { ExampleSettings } from '../common/ExampleSettings.js'; const randomIntBetween = (from: number, to: number) => Math.floor(Math.random() * (to - from + 1) + from); -export default async function ({ renderer, testRoot }: ExampleSettings) { +export default async function ({ + renderer, + testRoot, + perfMultiplier, +}: ExampleSettings) { // create 100 nodes const nodes: INode[] = []; @@ -35,7 +39,7 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { parent: testRoot, }); - for (let i = 0; i < 103; i++) { + for (let i = 0; i < 100 * perfMultiplier; i++) { const node = renderer.createNode({ width: 505, height: 101, @@ -61,6 +65,8 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { { duration: 3000, easing: 'ease-out', + loop: true, + stopMethod: 'reverse', }, ) .start(); @@ -69,5 +75,5 @@ export default async function ({ renderer, testRoot }: ExampleSettings) { animate(); - setInterval(animate, 3000); + // setInterval(animate, 3000); }