Beautify the timings display and make it work with the SVG and 3D demos
This commit is contained in:
parent
65eecbf071
commit
d64a28c166
|
@ -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;
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
Loading…
Reference in New Issue