michael/pathfinder
michael
/
pathfinder
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Make benchmark sizes more sensible for SVG

This commit is contained in:
Patrick Walton 2017-12-06 10:58:16 -08:00
parent 80c0d07f1a
commit 1459267292
2 changed files with 49 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
demo/client/src/benchmark.ts
View File

@ -37,9 +37,6 @@ const DEFAULT_SVG_FILE: string = 'tiger';
const TEXT_COLOR: number[] = [0, 0, 0, 255];
const MIN_FONT_SIZE: number = 6;
const MAX_FONT_SIZE: number = 200;
// In milliseconds.
const MIN_RUNTIME: number = 100;
const MAX_RUNTIME: number = 3000;
@ -63,11 +60,22 @@ interface AntialiasingStrategyTable {
xcaa: typeof AdaptiveMonochromeXCAAStrategy;
}
interface TestParameter {
start: number;
stop: number;
step: number;
}
const DISPLAY_HEADER_LABELS: BenchmarkModeMap<string[]> = {
svg: ["Size (px)", "GPU time (ms)"],
text: ["Font size (px)", "GPU time per glyph (µs)"],
};
const TEST_SIZES: BenchmarkModeMap<TestParameter> = {
svg: { start: 64, stop: 2048, step: 16 },
text: { start: 6, stop: 200, step: 1 },
};
class BenchmarkAppController extends DemoAppController<BenchmarkTestView> {
font: PathfinderFont | null;
textRun: TextRun | null;
@ -99,7 +107,7 @@ class BenchmarkAppController extends DemoAppController<BenchmarkTestView> {
private baseMeshes: PathfinderMeshData;
private expandedMeshes: ExpandedMeshData;
private pixelsPerEm: number;
private size: number;
private currentRun: number;
private startTime: number;
private elapsedTimes: ElapsedTime[];
@ -241,7 +249,7 @@ class BenchmarkAppController extends DemoAppController<BenchmarkTestView> {
this.reset();
this.elapsedTimes = [];
this.pixelsPerEm = MIN_FONT_SIZE;
this.size = TEST_SIZES[this.mode].start;
this.view.then(view => this.runOneBenchmarkTest(view));
}
@ -266,23 +274,23 @@ class BenchmarkAppController extends DemoAppController<BenchmarkTestView> {
private runOneBenchmarkTest(view: BenchmarkTestView): void {
const renderedPromise = new Promise<number>((resolve, reject) => {
view.renderingPromiseCallback = resolve;
view.pixelsPerEm = this.pixelsPerEm;
view.size = this.size;
});
renderedPromise.then(elapsedTime => {
if (this.currentRun === 0)
this.elapsedTimes.push(new ElapsedTime(this.pixelsPerEm));
this.elapsedTimes.push(new ElapsedTime(this.size));
unwrapUndef(_.last(this.elapsedTimes)).times.push(elapsedTime);
this.currentRun++;
if (this.runDone()) {
this.reset();
if (this.pixelsPerEm === MAX_FONT_SIZE) {
if (this.size >= TEST_SIZES[this.mode].stop) {
this.showResults();
return;
}
this.pixelsPerEm++;
this.size += TEST_SIZES[this.mode].step;
}
this.runOneBenchmarkTest(view);
@ -320,9 +328,11 @@ class BenchmarkAppController extends DemoAppController<BenchmarkTestView> {
}
private saveCSV(): void {
let output = "Font size,Time per glyph\n";
for (const elapsedTime of this.elapsedTimes)
output += `${elapsedTime.size},${elapsedTime.time}\n`;
let output = "Size,Time\n";
for (const elapsedTime of this.elapsedTimes) {
const time = this.mode === 'svg' ? elapsedTime.timeInMS : elapsedTime.time;
output += `${elapsedTime.size},${time}\n`;
}
// https://stackoverflow.com/a/30832210
const file = new Blob([output], {type: 'text/csv'});
@ -351,13 +361,12 @@ class BenchmarkTestView extends DemoView {
return this.renderer.camera;
}
set pixelsPerEm(newPPEM: number) {
set size(newSize: number) {
if (this.renderer instanceof BenchmarkTextRenderer) {
this.renderer.pixelsPerEm = newPPEM;
this.renderer.pixelsPerEm = newSize;
} else if (this.renderer instanceof BenchmarkSVGRenderer) {
const camera = this.renderer.camera;
camera.reset();
camera.zoom(newPPEM / 100.0);
camera.zoomToSize(newSize);
camera.center();
}
}

39
demo/client/src/camera.ts
View File

@ -137,12 +137,6 @@ export class OrthographicCamera extends Camera {
this.onRotate = null;
}
reset(): void {
this.translation = glmatrix.vec2.create();
this.scale = 1.0;
this.rotationAngle = 0.0;
}
onWheel(event: MouseWheelEvent): void {
if (this.canvas == null)
throw new Error("onWheel() with no canvas?!");
@ -169,15 +163,8 @@ export class OrthographicCamera extends Camera {
}
zoomToFit(): void {
const upperLeft = glmatrix.vec2.clone([this._bounds[0], this._bounds[1]]);
const lowerRight = glmatrix.vec2.clone([this._bounds[2], this._bounds[3]]);
const width = this._bounds[2] - this._bounds[0];
const height = Math.abs(this._bounds[1] - this._bounds[3]);
// Scale appropriately.
this.scale = Math.min(this.canvas.width / width, this.canvas.height / height);
// Center.
const size = this.objectSize();
this.scale = Math.min(this.canvas.width / size[0], this.canvas.height / size[1]);
this.center();
}
@ -192,6 +179,14 @@ export class OrthographicCamera extends Camera {
this.translation[1] += this.canvas.height * 0.5;
}
zoomToSize(newSize: number): void {
this.reset();
const size = this.objectSize();
const length = Math.max(size[0], size[1]);
this.zoom(newSize / length);
}
zoom(scale: number): void {
this.doZoom(scale, this.centerPoint);
}
@ -211,6 +206,20 @@ export class OrthographicCamera extends Camera {
this.onRotate();
}
private objectSize(): glmatrix.vec2 {
const upperLeft = glmatrix.vec2.clone([this._bounds[0], this._bounds[1]]);
const lowerRight = glmatrix.vec2.clone([this._bounds[2], this._bounds[3]]);
const width = this._bounds[2] - this._bounds[0];
const height = Math.abs(this._bounds[1] - this._bounds[3]);
return glmatrix.vec2.clone([width, height]);
}
private reset(): void {
this.translation = glmatrix.vec2.create();
this.scale = 1.0;
this.rotationAngle = 0.0;
}
private onMouseDown(event: MouseEvent): void {
if (this.canvas.classList != null)
this.canvas.classList.add('pf-grabbing');