Fix a bug preventing the benchmark from running, and improve its UI
This commit is contained in:
Patrick Walton
parent
ac95b04061
commit
15d8c98ff9
|
|
@ -9,29 +9,43 @@
|
|||
<body class="pf-unscrollable">
|
||||
{{>partials/navbar.html isTool=true}}
|
||||
<canvas id="pf-canvas" class="pf-draggable" width="400" height="300"></canvas>
|
||||
<div id="pf-nonoverlapping-bottom-bar"
|
||||
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">
|
||||
<div class="container ml-3 pf-pointer-events-auto">
|
||||
<div class="row">
|
||||
<form class="form-inline">
|
||||
<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×SSAA</option>
|
||||
<option value="ssaa-4">4×SSAA</option>
|
||||
<option value="xcaa">XCAA</option>
|
||||
</select>
|
||||
{{>partials/switch.html id="pf-subpixel-aa" title="Subpixel AA"}}
|
||||
</form>
|
||||
<div class="modal fade" id="pf-benchmark-modal" tabindex="-1" role="dialog"
|
||||
aria-labelledby="pf-benchmark-label" aria-hidden="false">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<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"
|
||||
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×SSAA</option>
|
||||
<option value="ssaa-4">4×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 id="pf-toolbar">
|
||||
<button id="pf-run-benchmark-button" type="button"
|
||||
class="btn btn-primary pf-toolbar-button">
|
||||
Run Benchmark
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal fade" id="pf-benchmark-results-modal" tabindex="-1" role="dialog"
|
||||
aria-labelledby="pf-benchmark-results-label" aria-hidden="true">
|
||||
|
|
|
|||
|
|
@ -60,6 +60,8 @@ class BenchmarkAppController extends DemoAppController<BenchmarkTestView> {
|
|||
protected readonly defaultFile: string = FONT;
|
||||
protected readonly builtinFileURI: string = BUILTIN_FONT_URI;
|
||||
|
||||
private optionsModal: HTMLDivElement;
|
||||
|
||||
private resultsModal: HTMLDivElement;
|
||||
private resultsTableBody: HTMLTableSectionElement;
|
||||
private resultsPartitioningTimeLabel: HTMLSpanElement;
|
||||
|
|
@ -77,6 +79,9 @@ class BenchmarkAppController extends DemoAppController<BenchmarkTestView> {
|
|||
start(): void {
|
||||
super.start();
|
||||
|
||||
this.optionsModal = unwrapNull(document.getElementById('pf-benchmark-modal')) as
|
||||
HTMLDivElement;
|
||||
|
||||
this.resultsModal = unwrapNull(document.getElementById('pf-benchmark-results-modal')) as
|
||||
HTMLDivElement;
|
||||
this.resultsTableBody =
|
||||
|
|
@ -99,6 +104,8 @@ class BenchmarkAppController extends DemoAppController<BenchmarkTestView> {
|
|||
const runBenchmarkButton = unwrapNull(document.getElementById('pf-run-benchmark-button'));
|
||||
runBenchmarkButton.addEventListener('click', () => this.runBenchmark(), false);
|
||||
|
||||
window.jQuery(this.optionsModal).modal();
|
||||
|
||||
this.loadInitialFile(this.builtinFileURI);
|
||||
}
|
||||
|
||||
|
|
@ -146,6 +153,8 @@ class BenchmarkAppController extends DemoAppController<BenchmarkTestView> {
|
|||
}
|
||||
|
||||
private runBenchmark(): void {
|
||||
window.jQuery(this.optionsModal).modal('hide');
|
||||
|
||||
this.reset();
|
||||
this.elapsedTimes = [];
|
||||
this.pixelsPerEm = MIN_FONT_SIZE;
|
||||
|
|
@ -240,6 +249,8 @@ class BenchmarkTestView extends DemoView {
|
|||
readonly renderer: BenchmarkRenderer;
|
||||
readonly appController: BenchmarkAppController;
|
||||
|
||||
renderingPromiseCallback: ((time: number) => void) | null;
|
||||
|
||||
get camera(): OrthographicCamera {
|
||||
return this.renderer.camera;
|
||||
}
|
||||
|
|
@ -248,10 +259,6 @@ class BenchmarkTestView extends DemoView {
|
|||
this.renderer.pixelsPerEm = newPPEM;
|
||||
}
|
||||
|
||||
set renderingPromiseCallback(newCallback: (time: number) => void) {
|
||||
this.renderer.renderingPromiseCallback = newCallback;
|
||||
}
|
||||
|
||||
constructor(appController: BenchmarkAppController,
|
||||
gammaLUT: HTMLImageElement,
|
||||
commonShaderSource: string,
|
||||
|
|
@ -263,6 +270,15 @@ class BenchmarkTestView extends DemoView {
|
|||
|
||||
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 {
|
||||
|
|
@ -270,8 +286,6 @@ class BenchmarkRenderer extends Renderer {
|
|||
|
||||
camera: OrthographicCamera;
|
||||
|
||||
renderingPromiseCallback: ((time: number) => void) | null;
|
||||
|
||||
get usesSTTransform(): boolean {
|
||||
return this.camera.usesSTTransform;
|
||||
}
|
||||
|
|
@ -404,14 +418,6 @@ class BenchmarkRenderer extends Renderer {
|
|||
// 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 {
|
||||
const pathColors = new Uint8Array(4 * (STRING.length + 1));
|
||||
for (let pathIndex = 0; pathIndex < STRING.length; pathIndex++)
|
||||
|
|
|
|||
|
|
@ -44,6 +44,8 @@ export abstract class Renderer {
|
|||
meshes: PathfinderMeshBuffers[] | null;
|
||||
meshData: PathfinderMeshData[] | null;
|
||||
|
||||
lastTimings: Timings;
|
||||
|
||||
abstract get usesSTTransform(): boolean;
|
||||
|
||||
get emboldenAmount(): glmatrix.vec2 {
|
||||
|
|
@ -75,7 +77,6 @@ export abstract class Renderer {
|
|||
abstract get destUsedSize(): glmatrix.vec2;
|
||||
|
||||
protected antialiasingStrategy: AntialiasingStrategy | null;
|
||||
protected lastTimings: Timings;
|
||||
protected pathColorsBufferTextures: PathfinderBufferTexture[];
|
||||
|
||||
protected gammaCorrectionMode: GammaCorrectionMode;
|
||||
|
|
|
|||
|
|
@ -116,14 +116,7 @@ export abstract class PathfinderView {
|
|||
if (!this.canvas.classList.contains('pf-no-autoresize')) {
|
||||
const windowWidth = window.innerWidth;
|
||||
const canvasTop = this.canvas.getBoundingClientRect().top;
|
||||
let 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 height = window.scrollY + window.innerHeight - canvasTop;
|
||||
|
||||
const devicePixelRatio = window.devicePixelRatio;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue