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

Beautify the timings display and make it work with the SVG and 3D demos

This commit is contained in:
Patrick Walton 2017-09-13 11:56:40 -07:00
parent 65eecbf071
commit d64a28c166
10 changed files with 56 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
demo/client/css/pathfinder.css
View File

@ -70,6 +70,7 @@ button > svg path {
#pf-fps-label {
color: white;
background: rgba(0, 0, 0, 0.75);
width: 17em;
}
#pf-svg {
visibility: hidden;

2
demo/client/html/3d-demo.html.hbs
View File

@ -10,7 +10,7 @@
{{>partials/navbar.html isDemo=true}}
<canvas id="pf-canvas" width="400" height="300"></canvas>
<div class="fixed-bottom mb-3 d-flex justify-content-between align-items-end pf-pointer-events-none">
<div class="rounded py-1 px-3 ml-3" id="pf-fps-label">0 ms</div>
<div class="rounded invisible container py-1 px-3 ml-3" id="pf-fps-label"></div>
<div id="pf-toolbar">
<button id="pf-screenshot-button" type="button"
class="btn btn-outline-secondary pf-toolbar-button">

2
demo/client/html/svg-demo.html.hbs
View File

@ -11,7 +11,7 @@
<canvas id="pf-canvas" class="pf-draggable" width="400" height="300"></canvas>
<svg id="pf-svg" xmlns="http://www.w3.org/2000/svg" width="400" height="300"></svg>
<div class="fixed-bottom mb-3 d-flex justify-content-between align-items-end pf-pointer-events-none">
<div class="rounded py-1 px-3 ml-3" id="pf-fps-label">0 ms</div>
<div class="rounded invisible container py-1 px-3 ml-3" id="pf-fps-label"></div>
<div id="pf-toolbar">
<div class="btn-group" role="group" aria-label="Zoom">
<button id="pf-zoom-out-button" type="button"

2
demo/client/html/text-demo.html.hbs
View File

@ -10,7 +10,7 @@
{{>partials/navbar.html isDemo=true}}
<canvas id="pf-canvas" class="pf-draggable" width="400" height="300"></canvas>
<div class="fixed-bottom mb-3 d-flex justify-content-between align-items-end pf-pointer-events-none">
<div class="rounded py-1 px-3 ml-3" id="pf-fps-label">0 ms</div>
<div class="rounded invisible container py-1 px-3 ml-3" id="pf-fps-label"></div>
<div id="pf-toolbar">
<div class="btn-group" role="group" aria-label="Zoom">
<button id="pf-zoom-out-button" type="button"

4
demo/client/src/3d-demo.ts
View File

@ -294,8 +294,8 @@ class ThreeDView extends PathfinderDemoView {
protected compositeIfNecessary(): void {}
protected updateTimings(timings: Timings) {
// TODO(pcwalton)
protected newTimingsReceived() {
this.appController.newTimingsReceived(_.pick(this.lastTimings, ['rendering']));
}
get destAllocatedSize(): glmatrix.vec2 {

31
demo/client/src/app-controller.ts
View File

@ -11,7 +11,7 @@
import {AntialiasingStrategyName} from "./aa-strategy";
import {ShaderLoader, ShaderMap, ShaderProgramSource} from './shader-loader';
import {expectNotNull, unwrapUndef, unwrapNull} from './utils';
import {PathfinderDemoView} from "./view";
import { PathfinderDemoView, Timings, TIMINGS } from "./view";
export abstract class AppController {
start() {
@ -122,6 +122,8 @@ export abstract class DemoAppController<View extends PathfinderDemoView> extends
false);
}
this.fpsLabel = document.getElementById('pf-fps-label');
const shaderLoader = new ShaderLoader;
shaderLoader.load();
@ -144,6 +146,32 @@ export abstract class DemoAppController<View extends PathfinderDemoView> extends
this.updateAALevel();
}
newTimingsReceived(timings: Timings) {
if (this.fpsLabel == null)
return;
while (this.fpsLabel.lastChild != null)
this.fpsLabel.removeChild(this.fpsLabel.lastChild);
for (const timing of Object.keys(timings) as Array<keyof Timings>) {
const tr = document.createElement('div');
tr.classList.add('row');
const keyTD = document.createElement('div');
const valueTD = document.createElement('div');
keyTD.classList.add('col');
valueTD.classList.add('col');
keyTD.appendChild(document.createTextNode(TIMINGS[timing]));
valueTD.appendChild(document.createTextNode(timings[timing] + " ms"));
tr.appendChild(keyTD);
tr.appendChild(valueTD);
this.fpsLabel.appendChild(tr);
}
this.fpsLabel.classList.remove('invisible');
}
private updateAALevel() {
let aaType: AntialiasingStrategyName, aaLevel: number;
if (this.aaLevelSelect != null) {
@ -207,4 +235,5 @@ export abstract class DemoAppController<View extends PathfinderDemoView> extends
private aaLevelSelect: HTMLSelectElement | null;
private subpixelAASwitch: HTMLInputElement | null;
private fpsLabel: HTMLElement | null;
}

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

@ -181,7 +181,7 @@ class BenchmarkTestView extends PathfinderDemoView {
protected renderingFinished(): void {
if (this.renderingPromiseCallback != null) {
const glyphCount = unwrapNull(this.appController.textRun).glyphs.length;
const usPerGlyph = this.lastTimings.atlasRendering * 1000.0 / glyphCount;
const usPerGlyph = this.lastTimings.rendering * 1000.0 / glyphCount;
this.renderingPromiseCallback(usPerGlyph);
}
}

5
demo/client/src/svg-demo.ts
View File

@ -271,8 +271,8 @@ class SVGDemoView extends PathfinderDemoView {
protected compositeIfNecessary(): void {}
protected updateTimings(timings: Timings) {
// TODO(pcwalton)
protected newTimingsReceived() {
this.appController.newTimingsReceived(_.pick(this.lastTimings, ['rendering']));
}
protected usedSizeFactor: glmatrix.vec2 = glmatrix.vec2.fromValues(1.0, 1.0);
@ -288,7 +288,6 @@ class SVGDemoView extends PathfinderDemoView {
glmatrix.mat4.scale(transform, transform, [this.camera.scale, this.camera.scale, 1.0]);
if (this.antialiasingStrategy != null)
glmatrix.mat4.mul(transform, transform, this.antialiasingStrategy.transform);
console.log(transform);
return transform;
}

18
demo/client/src/text-demo.ts
View File

@ -24,8 +24,9 @@ import {UniformMap} from './gl-utils';
import {PathfinderMeshBuffers, PathfinderMeshData} from './meshes';
import {PathfinderShaderProgram, ShaderMap, ShaderProgramSource} from './shader-loader';
import {BUILTIN_FONT_URI, Hint, PathfinderGlyph, SimpleTextLayout} from "./text";
import { PathfinderError, assert, expectNotNull, UINT32_SIZE, unwrapNull, panic, scaleRect } from './utils';
import {MonochromePathfinderView, Timings} from './view';
import {PathfinderError, UINT32_SIZE, assert, expectNotNull, scaleRect, panic} from './utils';
import {unwrapNull} from './utils';
import { MonochromePathfinderView, Timings, TIMINGS } from './view';
import PathfinderBufferTexture from './buffer-texture';
import SSAAStrategy from './ssaa-strategy';
@ -131,8 +132,6 @@ class TextDemoController extends DemoAppController<TextDemoView> {
HTMLSelectElement;
this.hintingSelect.addEventListener('change', () => this.hintingChanged(), false);
this.fpsLabel = unwrapNull(document.getElementById('pf-fps-label'));
this.editTextModal = unwrapNull(document.getElementById('pf-edit-text-modal'));
this.editTextArea = unwrapNull(document.getElementById('pf-edit-text-area')) as
HTMLTextAreaElement;
@ -184,11 +183,6 @@ class TextDemoController extends DemoAppController<TextDemoView> {
});
}
updateTimings(newTimes: Timings) {
this.fpsLabel.innerHTML =
`${newTimes.atlasRendering} ms atlas, ${newTimes.compositing} ms compositing`;
}
get atlas(): Atlas {
return this._atlas;
}
@ -224,8 +218,6 @@ class TextDemoController extends DemoAppController<TextDemoView> {
return DEFAULT_FONT;
}
private fpsLabel: HTMLElement;
private hintingSelect: HTMLSelectElement;
private editTextModal: HTMLElement;
@ -564,8 +556,8 @@ class TextDemoView extends MonochromePathfinderView {
return new (ANTIALIASING_STRATEGIES[aaType])(aaLevel, subpixelAA);
}
protected updateTimings(timings: Timings) {
this.appController.updateTimings(timings);
protected newTimingsReceived() {
this.appController.newTimingsReceived(this.lastTimings);
}
protected get worldTransform(): glmatrix.mat4 {

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

@ -39,8 +39,13 @@ const QUAD_TEX_COORDS: Float32Array = new Float32Array([
1.0, 0.0,
]);
export const TIMINGS: {[name: string]: string} = {
rendering: "Rendering",
compositing: "Compositing",
}
export interface Timings {
atlasRendering: number;
rendering: number;
compositing: number;
}
@ -109,7 +114,7 @@ export abstract class PathfinderDemoView extends PathfinderView {
this.initContext();
this.lastTimings = { atlasRendering: 0, compositing: 0 };
this.lastTimings = { rendering: 0, compositing: 0 };
const shaderSource = this.compileShaders(commonShaderSource, shaderSources);
this.shaderPrograms = this.linkShaders(shaderSource);
@ -444,10 +449,12 @@ export abstract class PathfinderDemoView extends PathfinderView {
this.timerQueryExt.getQueryObjectEXT(this.compositingTimerQuery,
this.timerQueryExt.QUERY_RESULT_EXT);
this.lastTimings = {
atlasRendering: atlasRenderingTime / 1000000.0,
rendering: atlasRenderingTime / 1000000.0,
compositing: compositingTime / 1000000.0,
};
this.newTimingsReceived();
window.clearInterval(this.timerQueryPollInterval!);
this.timerQueryPollInterval = null;
}, TIME_INTERVAL_DELAY);
@ -530,6 +537,8 @@ export abstract class PathfinderDemoView extends PathfinderView {
}
protected newTimingsReceived() {}
protected abstract pathColorsForObject(objectIndex: number): Uint8Array;
protected abstract pathTransformsForObject(objectIndex: number): Float32Array;