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

Fix a bug preventing the benchmark from running, and improve its UI

This commit is contained in:
Patrick Walton 2017-12-04 22:02:16 -08:00
parent ac95b04061
commit 15d8c98ff9
4 changed files with 58 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
demo/client/html/benchmark.html.hbs
View File

@ -9,29 +9,43 @@
<body class="pf-unscrollable"> <body class="pf-unscrollable">
{{>partials/navbar.html isTool=true}} {{>partials/navbar.html isTool=true}}
<canvas id="pf-canvas" class="pf-draggable" width="400" height="300"></canvas> <canvas id="pf-canvas" class="pf-draggable" width="400" height="300"></canvas>
<div id="pf-nonoverlapping-bottom-bar" <div class="modal fade" id="pf-benchmark-modal" tabindex="-1" role="dialog"
class="fixed-bottom mb-3 pt-3 d-flex justify-content-between align-items-end pf-pointer-events-none border border-right-0 border-bottom-0 border-left-0"> aria-labelledby="pf-benchmark-label" aria-hidden="false">
<div class="container ml-3 pf-pointer-events-auto"> <div class="modal-dialog" role="document">
<div class="row"> <div class="modal-content">
<form class="form-inline"> <div class="modal-header">
<label for="pf-aa-level-select" <h5 class="modal-title" id="pf-benchmark-label">Benchmark</h5>
class="col-form-label mr-sm-2">Antialiasing</label> <button type="button" class="close" data-dismiss="modal"
<select id="pf-aa-level-select" class="form-control custom-select mr-sm-3"> aria-label="Close">
<option value="none" selected>None</option> <span aria-hidden="true">&times;</span>
<option value="ssaa-2">2&times;SSAA</option> </button>
<option value="ssaa-4">4&times;SSAA</option> </div>
<option value="xcaa">XCAA</option> <div class="modal-body">
</select> <form class="form">
{{>partials/switch.html id="pf-subpixel-aa" title="Subpixel AA"}} <div class="form-group">
</form> <label for="pf-aa-level-select"
class="col-form-label mr-sm-2">Antialiasing</label>
<select id="pf-aa-level-select"
class="form-control custom-select mr-sm-3">
<option value="none" selected>None</option>
<option value="ssaa-2">2&times;SSAA</option>
<option value="ssaa-4">4&times;SSAA</option>
<option value="xcaa">XCAA</option>
</select>
</div>
<div class="form-group row justify-content-between">
{{>partials/switch.html id="pf-subpixel-aa" title="Subpixel AA"}}
</div>
</form>
<div class="d-flex justify-content-end">
<button id="pf-run-benchmark-button" type="button"
class="btn btn-primary">
Run
</button>
</div>
</div>
</div> </div>
</div> </div>
<div id="pf-toolbar">
<button id="pf-run-benchmark-button" type="button"
class="btn btn-primary pf-toolbar-button">
Run Benchmark
</button>
</div>
</div> </div>
<div class="modal fade" id="pf-benchmark-results-modal" tabindex="-1" role="dialog" <div class="modal fade" id="pf-benchmark-results-modal" tabindex="-1" role="dialog"
aria-labelledby="pf-benchmark-results-label" aria-hidden="true"> aria-labelledby="pf-benchmark-results-label" aria-hidden="true">

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

@ -60,6 +60,8 @@ class BenchmarkAppController extends DemoAppController<BenchmarkTestView> {
protected readonly defaultFile: string = FONT; protected readonly defaultFile: string = FONT;
protected readonly builtinFileURI: string = BUILTIN_FONT_URI; protected readonly builtinFileURI: string = BUILTIN_FONT_URI;
private optionsModal: HTMLDivElement;
private resultsModal: HTMLDivElement; private resultsModal: HTMLDivElement;
private resultsTableBody: HTMLTableSectionElement; private resultsTableBody: HTMLTableSectionElement;
private resultsPartitioningTimeLabel: HTMLSpanElement; private resultsPartitioningTimeLabel: HTMLSpanElement;
@ -77,6 +79,9 @@ class BenchmarkAppController extends DemoAppController<BenchmarkTestView> {
start(): void { start(): void {
super.start(); super.start();
this.optionsModal = unwrapNull(document.getElementById('pf-benchmark-modal')) as
HTMLDivElement;
this.resultsModal = unwrapNull(document.getElementById('pf-benchmark-results-modal')) as this.resultsModal = unwrapNull(document.getElementById('pf-benchmark-results-modal')) as
HTMLDivElement; HTMLDivElement;
this.resultsTableBody = this.resultsTableBody =
@ -99,6 +104,8 @@ class BenchmarkAppController extends DemoAppController<BenchmarkTestView> {
const runBenchmarkButton = unwrapNull(document.getElementById('pf-run-benchmark-button')); const runBenchmarkButton = unwrapNull(document.getElementById('pf-run-benchmark-button'));
runBenchmarkButton.addEventListener('click', () => this.runBenchmark(), false); runBenchmarkButton.addEventListener('click', () => this.runBenchmark(), false);
window.jQuery(this.optionsModal).modal();
this.loadInitialFile(this.builtinFileURI); this.loadInitialFile(this.builtinFileURI);
} }
@ -146,6 +153,8 @@ class BenchmarkAppController extends DemoAppController<BenchmarkTestView> {
} }
private runBenchmark(): void { private runBenchmark(): void {
window.jQuery(this.optionsModal).modal('hide');
this.reset(); this.reset();
this.elapsedTimes = []; this.elapsedTimes = [];
this.pixelsPerEm = MIN_FONT_SIZE; this.pixelsPerEm = MIN_FONT_SIZE;
@ -240,6 +249,8 @@ class BenchmarkTestView extends DemoView {
readonly renderer: BenchmarkRenderer; readonly renderer: BenchmarkRenderer;
readonly appController: BenchmarkAppController; readonly appController: BenchmarkAppController;
renderingPromiseCallback: ((time: number) => void) | null;
get camera(): OrthographicCamera { get camera(): OrthographicCamera {
return this.renderer.camera; return this.renderer.camera;
} }
@ -248,10 +259,6 @@ class BenchmarkTestView extends DemoView {
this.renderer.pixelsPerEm = newPPEM; this.renderer.pixelsPerEm = newPPEM;
} }
set renderingPromiseCallback(newCallback: (time: number) => void) {
this.renderer.renderingPromiseCallback = newCallback;
}
constructor(appController: BenchmarkAppController, constructor(appController: BenchmarkAppController,
gammaLUT: HTMLImageElement, gammaLUT: HTMLImageElement,
commonShaderSource: string, commonShaderSource: string,
@ -263,6 +270,15 @@ class BenchmarkTestView extends DemoView {
this.resizeToFit(true); this.resizeToFit(true);
} }
protected renderingFinished(): void {
if (this.renderingPromiseCallback == null)
return;
const glyphCount = unwrapNull(this.appController.textRun).glyphIDs.length;
const usPerGlyph = this.renderer.lastTimings.rendering * 1000.0 / glyphCount;
this.renderingPromiseCallback(usPerGlyph);
}
} }
class BenchmarkRenderer extends Renderer { class BenchmarkRenderer extends Renderer {
@ -270,8 +286,6 @@ class BenchmarkRenderer extends Renderer {
camera: OrthographicCamera; camera: OrthographicCamera;
renderingPromiseCallback: ((time: number) => void) | null;
get usesSTTransform(): boolean { get usesSTTransform(): boolean {
return this.camera.usesSTTransform; return this.camera.usesSTTransform;
} }
@ -404,14 +418,6 @@ class BenchmarkRenderer extends Renderer {
// TODO(pcwalton) // TODO(pcwalton)
} }
protected renderingFinished(): void {
if (this.renderingPromiseCallback == null)
return;
const glyphCount = unwrapNull(this.renderContext.appController.textRun).glyphIDs.length;
const usPerGlyph = this.lastTimings.rendering * 1000.0 / glyphCount;
this.renderingPromiseCallback(usPerGlyph);
}
protected pathColorsForObject(objectIndex: number): Uint8Array { protected pathColorsForObject(objectIndex: number): Uint8Array {
const pathColors = new Uint8Array(4 * (STRING.length + 1)); const pathColors = new Uint8Array(4 * (STRING.length + 1));
for (let pathIndex = 0; pathIndex < STRING.length; pathIndex++) for (let pathIndex = 0; pathIndex < STRING.length; pathIndex++)

3
demo/client/src/renderer.ts
View File

@ -44,6 +44,8 @@ export abstract class Renderer {
meshes: PathfinderMeshBuffers[] | null; meshes: PathfinderMeshBuffers[] | null;
meshData: PathfinderMeshData[] | null; meshData: PathfinderMeshData[] | null;
lastTimings: Timings;
abstract get usesSTTransform(): boolean; abstract get usesSTTransform(): boolean;
get emboldenAmount(): glmatrix.vec2 { get emboldenAmount(): glmatrix.vec2 {
@ -75,7 +77,6 @@ export abstract class Renderer {
abstract get destUsedSize(): glmatrix.vec2; abstract get destUsedSize(): glmatrix.vec2;
protected antialiasingStrategy: AntialiasingStrategy | null; protected antialiasingStrategy: AntialiasingStrategy | null;
protected lastTimings: Timings;
protected pathColorsBufferTextures: PathfinderBufferTexture[]; protected pathColorsBufferTextures: PathfinderBufferTexture[];
protected gammaCorrectionMode: GammaCorrectionMode; protected gammaCorrectionMode: GammaCorrectionMode;

9
demo/client/src/view.ts
View File

@ -116,14 +116,7 @@ export abstract class PathfinderView {
if (!this.canvas.classList.contains('pf-no-autoresize')) { if (!this.canvas.classList.contains('pf-no-autoresize')) {
const windowWidth = window.innerWidth; const windowWidth = window.innerWidth;
const canvasTop = this.canvas.getBoundingClientRect().top; const canvasTop = this.canvas.getBoundingClientRect().top;
let height = window.scrollY + window.innerHeight - canvasTop; const height = window.scrollY + window.innerHeight - canvasTop;
const nonoverlappingBottomBar =
document.getElementById('pf-nonoverlapping-bottom-bar');
if (nonoverlappingBottomBar != null) {
const rect = nonoverlappingBottomBar.getBoundingClientRect();
height -= window.innerHeight - rect.top;
}
const devicePixelRatio = window.devicePixelRatio; const devicePixelRatio = window.devicePixelRatio;