Skip to content

Add typography benchmark tests for textToContours() #9268

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
LalitNarayanYadav wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Add typography benchmark tests for textToContours() #9268

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0b77e86
Add textToContours() benchmark tests
LalitNarayanYadav Oct 10, 2026
2a6643b
Sequence textToContours benchmarks after textToPoints and assert cont…
LalitNarayanYadav Oct 15, 2026
b5f6172
Merge branch 'main' into bench/text-to-contours
LalitNarayanYadav Oct 15, 2026
9fbf0b4
Merge branch 'main' into bench/text-to-contours
LalitNarayanYadav Oct 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 97 additions & 1 deletion test/bench/typography.bench.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const strs = {
};

// Parameterizing test cases by function ensures consistency in test parameters across all renderers.
// Future tests should follow a similar format (e.g. TO_CONTOURS_CASES, etc)
// Future tests should follow a similar format
const TO_POINTS_CASES = [
{label: "textToPoints() single word", str: strs.single, textSize: 20, sampleFactor: 0.5, points: 317, variance: 5, render: false},
{label: "textToPoints() single word, 150pt", str: strs.single, textSize: 150, sampleFactor: 0.5, points: 2336, variance: 50, render: false},
Expand All @@ -23,6 +23,23 @@ const TO_POINTS_CASES = [
{label: "textToPoints() paragraph", str: strs.paragraph, textSize: 20, sampleFactor: 0.5, points: 21275, variance: 50, render: false},
];

// Expected number of contours for each TO_POINTS_CASES entry, in the same order.
// Contour count depends on the glyph outlines (not textSize or sampleFactor),
// so the same string gives the same count.
const EXPECTED_CONTOURS = [
16, // single word
16, // single word, 150pt
16, // single word, with render
76, // 10 words
1167, // paragraph
];

const TO_CONTOURS_CASES = TO_POINTS_CASES.map((c, i) => ({
...c,
label: c.label.replace("textToPoints()", "textToContours()"),
contours: EXPECTED_CONTOURS[i],
}));

const TO_MODEL_CASES = [
{label: "textToModel() single word", str: strs.single, textSize: 20, sampleFactor: 0.5, render: false},
{label: "textToModel() single word, 150pt", str: strs.single, textSize: 150, sampleFactor: 0.5, render: false},
Expand Down Expand Up @@ -58,6 +75,16 @@ function drawPoints(myp5, points) {
}
}

function drawContours(myp5, contours) {
for (let contour of contours) {
myp5.beginShape();
for (let pt of contour) {
myp5.vertex(pt.x, pt.y);
}
myp5.endShape(myp5.CLOSE);
}
}

const options = { iterations: 20, time: 500 };

describe("Typography: bench 2D", function() {
Expand All @@ -84,6 +111,29 @@ describe("Typography: bench 2D", function() {
);
}

for (let testCase of TO_CONTOURS_CASES) {
bench(
testCase.label,
async () => {
const contours = font.textToContours(testCase.str, 10, 20, { sampleFactor: testCase.sampleFactor });
assert.equal(contours.length, testCase.contours);
const total = contours.reduce((n, c) => n + c.length, 0);
assert.closeTo(total, testCase.points, testCase.variance);
if (testCase.render) {
drawContours(myp5, contours);
}
},
{
...options,
setup: async () => {
({myp5, font} = await bootstrap());
myp5.textSize(testCase.textSize);
},
teardown: () => myp5.remove()
}
);
}

});

describe("Typography: bench WebGL", function() {
Expand All @@ -110,6 +160,29 @@ describe("Typography: bench WebGL", function() {
);
}

for (let testCase of TO_CONTOURS_CASES) {
bench(
testCase.label,
async () => {
const contours = font.textToContours(testCase.str, 10, 20, { sampleFactor: testCase.sampleFactor });
assert.equal(contours.length, testCase.contours);
const total = contours.reduce((n, c) => n + c.length, 0);
assert.closeTo(total, testCase.points, testCase.variance);
if (testCase.render) {
drawContours(myp5, contours);
}
},
{
...options,
setup: async () => {
({myp5, font} = await bootstrap(400, 400, WEBGL));
myp5.textSize(testCase.textSize);
},
teardown: () => myp5.remove()
}
);
}

for (let testCase of TO_MODEL_CASES) {
bench(
testCase.label,
Expand Down Expand Up @@ -158,6 +231,29 @@ describe("Typography: bench WebGPU", function() {
);
}

for (let testCase of TO_CONTOURS_CASES) {
bench(
testCase.label,
async () => {
const contours = font.textToContours(testCase.str, 10, 20, { sampleFactor: testCase.sampleFactor });
assert.equal(contours.length, testCase.contours);
const total = contours.reduce((n, c) => n + c.length, 0);
assert.closeTo(total, testCase.points, testCase.variance);
if (testCase.render) {
drawContours(myp5, contours);
}
},
{
...options,
setup: async () => {
({myp5, font} = await bootstrap(400, 400, WEBGPU));
myp5.textSize(testCase.textSize);
},
teardown: () => myp5.remove()
}
);
}

for (let testCase of TO_MODEL_CASES) {
bench(
testCase.label,
Expand Down