Add typography performance tests

[shakeelmohamed]

Add initial performance benchmark tests and structure for typography tests.

PR Checklist

• npm run lint passes
• Document manual v1 to v2 test code via CLI
• Create issues for remaining test cases

[ksen0]

Thanks for the work here! Comments below based on going through this PR with @limzykenneth .

The priority, especially if full completion is out of rant scope, is to complete the harness. If not possible to complete all the functions, these can be left open to community implementation in a new issue.

If possible, in addition to the minimal performance testing doc, it would be great to add instructions + example code for running manually (via CLI not the editor) a comparison between v1 and v2. As discussed, there is no equivalent quite for v1, but enabling comparison between v1 and v2 (even if manual / documentation primarily) would be ideall

[ksen0]

Same here: con be added to a new contributor doc on performance testing. That can be very short, so not necessary to add more than what you have here.

[shakeelmohamed]

@ksen0 added, please review!

[p5-bot]

Continuous Release

CDN link

• https://raw.esm.sh/pr/p5@4a41790/lib/p5.min.js

Published Packages

• https://pkg.pr.new/p5@4a41790

Commit hash: 57e23f3

Previous deployments

---

This is an automated message.

[ksen0]

Thanks for the work here @shakeelmohamed ! I'm experiencing some flakiness, any ideas? If it's just a me problem / usage, totally ok, but I'm using the command from the docs so if there's other steps please do add those. Alternatively if this is a problem, do you have capacity to resolve it? (I did npm install then the test command.)

Run 1

 BENCH  Summary

   unit-tests (chrome)  textToPoints() single word - test/bench/typography.bench.js:49:1 > Typography: bench 2D
    1.54x faster than textToPoints() single word, with render
    2.63x faster than textToPoints() single word, 150pt
    3.91x faster than textToPoints() 10 words
    58.40x faster than textToPoints() paragraph

   unit-tests (chrome)  textToPoints() single word - test/bench/typography.bench.js:75:1 > Typography: bench WebGL
    2.99x faster than textToPoints() single word, 150pt
    4.58x faster than textToPoints() 10 words
    17.74x faster than textToPoints() single word, with render
    67.00x faster than textToPoints() paragraph

   unit-tests (chrome)  textToPoints() single word - test/bench/typography.bench.js:101:1 > Typography: bench WebGPU
    2.84x faster than textToPoints() single word, with render
    4.93x faster than textToPoints() single word, 150pt
    7.65x faster than textToPoints() 10 words
    82.36x faster than textToPoints() paragraph

   unit-tests-webgpu (chrome)  textToPoints() single word - test/bench/typography.bench.js:49:1 > Typography: bench 2D
    NaNx faster than textToPoints() single word, 150pt
    NaNx faster than textToPoints() single word, with render
    NaNx faster than textToPoints() 10 words
    NaNx faster than textToPoints() paragraph

Run 2

 BENCH  Summary

   unit-tests (chrome)  textToPoints() single word - test/bench/typography.bench.js:49:1 > Typography: bench 2D
    NaNx faster than textToPoints() single word, 150pt
    NaNx faster than textToPoints() single word, with render
    NaNx faster than textToPoints() 10 words
    NaNx faster than textToPoints() paragraph

   unit-tests-webgpu (chrome)  textToPoints() single word - test/bench/typography.bench.js:49:1 > Typography: bench 2D
    NaNx faster than textToPoints() single word, 150pt
    NaNx faster than textToPoints() single word, with render
    NaNx faster than textToPoints() 10 words
    NaNx faster than textToPoints() paragraph

   unit-tests-webgpu (chrome)  textToPoints() single word - test/bench/typography.bench.js:75:1 > Typography: bench WebGL
    NaNx faster than textToPoints() single word, 150pt
    NaNx faster than textToPoints() single word, with render
    NaNx faster than textToPoints() 10 words
    NaNx faster than textToPoints() paragraph

   unit-tests-webgpu (chrome)  textToPoints() single word - test/bench/typography.bench.js:101:1 > Typography: bench WebGPU
    NaNx faster than textToPoints() single word, 150pt
    NaNx faster than textToPoints() single word, with render
    NaNx faster than textToPoints() 10 words
    NaNx faster than textToPoints() paragraph

Run 3

 BENCH  Summary

   unit-tests (chrome)  textToPoints() single word - test/bench/typography.bench.js:49:1 > Typography: bench 2D
    NaNx faster than textToPoints() single word, 150pt
    NaNx faster than textToPoints() single word, with render
    NaNx faster than textToPoints() 10 words
    NaNx faster than textToPoints() paragraph

   unit-tests-webgpu (chrome)  textToPoints() single word - test/bench/typography.bench.js:49:1 > Typography: bench 2D
    NaNx faster than textToPoints() single word, 150pt
    NaNx faster than textToPoints() single word, with render
    NaNx faster than textToPoints() 10 words
    NaNx faster than textToPoints() paragraph

   unit-tests-webgpu (chrome)  textToPoints() single word - test/bench/typography.bench.js:75:1 > Typography: bench WebGL
    NaNx faster than textToPoints() single word, 150pt
    NaNx faster than textToPoints() single word, with render
    NaNx faster than textToPoints() 10 words
    NaNx faster than textToPoints() paragraph

   unit-tests-webgpu (chrome)  textToPoints() single word - test/bench/typography.bench.js:101:1 > Typography: bench WebGPU
    NaNx faster than textToPoints() single word, 150pt
    NaNx faster than textToPoints() single word, with render
    NaNx faster than textToPoints() 10 words
    NaNx faster than textToPoints() paragraph

Error output

 FAIL   unit-tests (chrome)  test/bench/typography.bench.js [ test/bench/typography.bench.js ]
TypeError: Cannot read properties of undefined (reading 'textToPoints')
 ❯ b.bench [as fn] test/bench/typography.bench.js:56:29
     54|       testCase.label,
     55|       async () => {
     56|         const points = font.textToPoints(testCase.str, 10, 20, { sampleFactor: testCase.sampleFactor });
       |                             ^
     57|         assert.closeTo(points.length, testCase.points, testCase.variance);
     58|         if (testCase.render) {
 ❯ a ../../../../../../../node_modules/tinybench/dist/index.js?v=49a1cd6a:282:23
 ❯ b.loop ../../../../../../../node_modules/tinybench/dist/index.js?v=49a1cd6a:292:34
 ❯ b.run ../../../../../../../node_modules/tinybench/dist/index.js?v=49a1cd6a:313:36

and one of the times it was that one but on webgpu