Fix a bug preventing the benchmark from running, and improve its UI
This commit is contained in:
parent
ac95b04061
commit
15d8c98ff9
|
@ -9,30 +9,44 @@
|
||||||
<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">
|
||||||
|
<h5 class="modal-title" id="pf-benchmark-label">Benchmark</h5>
|
||||||
|
<button type="button" class="close" data-dismiss="modal"
|
||||||
|
aria-label="Close">
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<form class="form">
|
||||||
|
<div class="form-group">
|
||||||
<label for="pf-aa-level-select"
|
<label for="pf-aa-level-select"
|
||||||
class="col-form-label mr-sm-2">Antialiasing</label>
|
class="col-form-label mr-sm-2">Antialiasing</label>
|
||||||
<select id="pf-aa-level-select" class="form-control custom-select mr-sm-3">
|
<select id="pf-aa-level-select"
|
||||||
|
class="form-control custom-select mr-sm-3">
|
||||||
<option value="none" selected>None</option>
|
<option value="none" selected>None</option>
|
||||||
<option value="ssaa-2">2×SSAA</option>
|
<option value="ssaa-2">2×SSAA</option>
|
||||||
<option value="ssaa-4">4×SSAA</option>
|
<option value="ssaa-4">4×SSAA</option>
|
||||||
<option value="xcaa">XCAA</option>
|
<option value="xcaa">XCAA</option>
|
||||||
</select>
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="form-group row justify-content-between">
|
||||||
{{>partials/switch.html id="pf-subpixel-aa" title="Subpixel AA"}}
|
{{>partials/switch.html id="pf-subpixel-aa" title="Subpixel AA"}}
|
||||||
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
<div class="d-flex justify-content-end">
|
||||||
</div>
|
|
||||||
<div id="pf-toolbar">
|
|
||||||
<button id="pf-run-benchmark-button" type="button"
|
<button id="pf-run-benchmark-button" type="button"
|
||||||
class="btn btn-primary pf-toolbar-button">
|
class="btn btn-primary">
|
||||||
Run Benchmark
|
Run
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</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">
|
||||||
<div class="modal-dialog" role="document">
|
<div class="modal-dialog" role="document">
|
||||||
|
|
|
@ -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++)
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue