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 {
|
#pf-fps-label {
|
||||||
color: white;
|
color: white;
|
||||||
background: rgba(0, 0, 0, 0.75);
|
background: rgba(0, 0, 0, 0.75);
|
||||||
|
width: 17em;
|
||||||
}
|
}
|
||||||
#pf-svg {
|
#pf-svg {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
|
|
|
@ -10,7 +10,7 @@
|
||||||
{{>partials/navbar.html isDemo=true}}
|
{{>partials/navbar.html isDemo=true}}
|
||||||
<canvas id="pf-canvas" width="400" height="300"></canvas>
|
<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="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 id="pf-toolbar">
|
||||||
<button id="pf-screenshot-button" type="button"
|
<button id="pf-screenshot-button" type="button"
|
||||||
class="btn btn-outline-secondary pf-toolbar-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>
|
<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>
|
<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="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 id="pf-toolbar">
|
||||||
<div class="btn-group" role="group" aria-label="Zoom">
|
<div class="btn-group" role="group" aria-label="Zoom">
|
||||||
<button id="pf-zoom-out-button" type="button"
|
<button id="pf-zoom-out-button" type="button"
|
||||||
|
|
|
@ -10,7 +10,7 @@
|
||||||
{{>partials/navbar.html isDemo=true}}
|
{{>partials/navbar.html isDemo=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 class="fixed-bottom mb-3 d-flex justify-content-between align-items-end pf-pointer-events-none">
|
<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 id="pf-toolbar">
|
||||||
<div class="btn-group" role="group" aria-label="Zoom">
|
<div class="btn-group" role="group" aria-label="Zoom">
|
||||||
<button id="pf-zoom-out-button" type="button"
|
<button id="pf-zoom-out-button" type="button"
|
||||||
|
|
|
@ -294,8 +294,8 @@ class ThreeDView extends PathfinderDemoView {
|
||||||
|
|
||||||
protected compositeIfNecessary(): void {}
|
protected compositeIfNecessary(): void {}
|
||||||
|
|
||||||
protected updateTimings(timings: Timings) {
|
protected newTimingsReceived() {
|
||||||
// TODO(pcwalton)
|
this.appController.newTimingsReceived(_.pick(this.lastTimings, ['rendering']));
|
||||||
}
|
}
|
||||||
|
|
||||||
get destAllocatedSize(): glmatrix.vec2 {
|
get destAllocatedSize(): glmatrix.vec2 {
|
||||||
|
|
|
@ -11,7 +11,7 @@
|
||||||
import {AntialiasingStrategyName} from "./aa-strategy";
|
import {AntialiasingStrategyName} from "./aa-strategy";
|
||||||
import {ShaderLoader, ShaderMap, ShaderProgramSource} from './shader-loader';
|
import {ShaderLoader, ShaderMap, ShaderProgramSource} from './shader-loader';
|
||||||
import {expectNotNull, unwrapUndef, unwrapNull} from './utils';
|
import {expectNotNull, unwrapUndef, unwrapNull} from './utils';
|
||||||
import {PathfinderDemoView} from "./view";
|
import { PathfinderDemoView, Timings, TIMINGS } from "./view";
|
||||||
|
|
||||||
export abstract class AppController {
|
export abstract class AppController {
|
||||||
start() {
|
start() {
|
||||||
|
@ -122,6 +122,8 @@ export abstract class DemoAppController<View extends PathfinderDemoView> extends
|
||||||
false);
|
false);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.fpsLabel = document.getElementById('pf-fps-label');
|
||||||
|
|
||||||
const shaderLoader = new ShaderLoader;
|
const shaderLoader = new ShaderLoader;
|
||||||
shaderLoader.load();
|
shaderLoader.load();
|
||||||
|
|
||||||
|
@ -144,6 +146,32 @@ export abstract class DemoAppController<View extends PathfinderDemoView> extends
|
||||||
this.updateAALevel();
|
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() {
|
private updateAALevel() {
|
||||||
let aaType: AntialiasingStrategyName, aaLevel: number;
|
let aaType: AntialiasingStrategyName, aaLevel: number;
|
||||||
if (this.aaLevelSelect != null) {
|
if (this.aaLevelSelect != null) {
|
||||||
|
@ -207,4 +235,5 @@ export abstract class DemoAppController<View extends PathfinderDemoView> extends
|
||||||
|
|
||||||
private aaLevelSelect: HTMLSelectElement | null;
|
private aaLevelSelect: HTMLSelectElement | null;
|
||||||
private subpixelAASwitch: HTMLInputElement | null;
|
private subpixelAASwitch: HTMLInputElement | null;
|
||||||
|
private fpsLabel: HTMLElement | null;
|
||||||
}
|
}
|
||||||
|
|
|
@ -181,7 +181,7 @@ class BenchmarkTestView extends PathfinderDemoView {
|
||||||
protected renderingFinished(): void {
|
protected renderingFinished(): void {
|
||||||
if (this.renderingPromiseCallback != null) {
|
if (this.renderingPromiseCallback != null) {
|
||||||
const glyphCount = unwrapNull(this.appController.textRun).glyphs.length;
|
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);
|
this.renderingPromiseCallback(usPerGlyph);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -271,8 +271,8 @@ class SVGDemoView extends PathfinderDemoView {
|
||||||
|
|
||||||
protected compositeIfNecessary(): void {}
|
protected compositeIfNecessary(): void {}
|
||||||
|
|
||||||
protected updateTimings(timings: Timings) {
|
protected newTimingsReceived() {
|
||||||
// TODO(pcwalton)
|
this.appController.newTimingsReceived(_.pick(this.lastTimings, ['rendering']));
|
||||||
}
|
}
|
||||||
|
|
||||||
protected usedSizeFactor: glmatrix.vec2 = glmatrix.vec2.fromValues(1.0, 1.0);
|
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]);
|
glmatrix.mat4.scale(transform, transform, [this.camera.scale, this.camera.scale, 1.0]);
|
||||||
if (this.antialiasingStrategy != null)
|
if (this.antialiasingStrategy != null)
|
||||||
glmatrix.mat4.mul(transform, transform, this.antialiasingStrategy.transform);
|
glmatrix.mat4.mul(transform, transform, this.antialiasingStrategy.transform);
|
||||||
console.log(transform);
|
|
||||||
return transform;
|
return transform;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -24,8 +24,9 @@ import {UniformMap} from './gl-utils';
|
||||||
import {PathfinderMeshBuffers, PathfinderMeshData} from './meshes';
|
import {PathfinderMeshBuffers, PathfinderMeshData} from './meshes';
|
||||||
import {PathfinderShaderProgram, ShaderMap, ShaderProgramSource} from './shader-loader';
|
import {PathfinderShaderProgram, ShaderMap, ShaderProgramSource} from './shader-loader';
|
||||||
import {BUILTIN_FONT_URI, Hint, PathfinderGlyph, SimpleTextLayout} from "./text";
|
import {BUILTIN_FONT_URI, Hint, PathfinderGlyph, SimpleTextLayout} from "./text";
|
||||||
import { PathfinderError, assert, expectNotNull, UINT32_SIZE, unwrapNull, panic, scaleRect } from './utils';
|
import {PathfinderError, UINT32_SIZE, assert, expectNotNull, scaleRect, panic} from './utils';
|
||||||
import {MonochromePathfinderView, Timings} from './view';
|
import {unwrapNull} from './utils';
|
||||||
|
import { MonochromePathfinderView, Timings, TIMINGS } from './view';
|
||||||
import PathfinderBufferTexture from './buffer-texture';
|
import PathfinderBufferTexture from './buffer-texture';
|
||||||
import SSAAStrategy from './ssaa-strategy';
|
import SSAAStrategy from './ssaa-strategy';
|
||||||
|
|
||||||
|
@ -131,8 +132,6 @@ class TextDemoController extends DemoAppController<TextDemoView> {
|
||||||
HTMLSelectElement;
|
HTMLSelectElement;
|
||||||
this.hintingSelect.addEventListener('change', () => this.hintingChanged(), false);
|
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.editTextModal = unwrapNull(document.getElementById('pf-edit-text-modal'));
|
||||||
this.editTextArea = unwrapNull(document.getElementById('pf-edit-text-area')) as
|
this.editTextArea = unwrapNull(document.getElementById('pf-edit-text-area')) as
|
||||||
HTMLTextAreaElement;
|
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 {
|
get atlas(): Atlas {
|
||||||
return this._atlas;
|
return this._atlas;
|
||||||
}
|
}
|
||||||
|
@ -224,8 +218,6 @@ class TextDemoController extends DemoAppController<TextDemoView> {
|
||||||
return DEFAULT_FONT;
|
return DEFAULT_FONT;
|
||||||
}
|
}
|
||||||
|
|
||||||
private fpsLabel: HTMLElement;
|
|
||||||
|
|
||||||
private hintingSelect: HTMLSelectElement;
|
private hintingSelect: HTMLSelectElement;
|
||||||
|
|
||||||
private editTextModal: HTMLElement;
|
private editTextModal: HTMLElement;
|
||||||
|
@ -564,8 +556,8 @@ class TextDemoView extends MonochromePathfinderView {
|
||||||
return new (ANTIALIASING_STRATEGIES[aaType])(aaLevel, subpixelAA);
|
return new (ANTIALIASING_STRATEGIES[aaType])(aaLevel, subpixelAA);
|
||||||
}
|
}
|
||||||
|
|
||||||
protected updateTimings(timings: Timings) {
|
protected newTimingsReceived() {
|
||||||
this.appController.updateTimings(timings);
|
this.appController.newTimingsReceived(this.lastTimings);
|
||||||
}
|
}
|
||||||
|
|
||||||
protected get worldTransform(): glmatrix.mat4 {
|
protected get worldTransform(): glmatrix.mat4 {
|
||||||
|
|
|
@ -39,8 +39,13 @@ const QUAD_TEX_COORDS: Float32Array = new Float32Array([
|
||||||
1.0, 0.0,
|
1.0, 0.0,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
export const TIMINGS: {[name: string]: string} = {
|
||||||
|
rendering: "Rendering",
|
||||||
|
compositing: "Compositing",
|
||||||
|
}
|
||||||
|
|
||||||
export interface Timings {
|
export interface Timings {
|
||||||
atlasRendering: number;
|
rendering: number;
|
||||||
compositing: number;
|
compositing: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -109,7 +114,7 @@ export abstract class PathfinderDemoView extends PathfinderView {
|
||||||
|
|
||||||
this.initContext();
|
this.initContext();
|
||||||
|
|
||||||
this.lastTimings = { atlasRendering: 0, compositing: 0 };
|
this.lastTimings = { rendering: 0, compositing: 0 };
|
||||||
|
|
||||||
const shaderSource = this.compileShaders(commonShaderSource, shaderSources);
|
const shaderSource = this.compileShaders(commonShaderSource, shaderSources);
|
||||||
this.shaderPrograms = this.linkShaders(shaderSource);
|
this.shaderPrograms = this.linkShaders(shaderSource);
|
||||||
|
@ -444,10 +449,12 @@ export abstract class PathfinderDemoView extends PathfinderView {
|
||||||
this.timerQueryExt.getQueryObjectEXT(this.compositingTimerQuery,
|
this.timerQueryExt.getQueryObjectEXT(this.compositingTimerQuery,
|
||||||
this.timerQueryExt.QUERY_RESULT_EXT);
|
this.timerQueryExt.QUERY_RESULT_EXT);
|
||||||
this.lastTimings = {
|
this.lastTimings = {
|
||||||
atlasRendering: atlasRenderingTime / 1000000.0,
|
rendering: atlasRenderingTime / 1000000.0,
|
||||||
compositing: compositingTime / 1000000.0,
|
compositing: compositingTime / 1000000.0,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
this.newTimingsReceived();
|
||||||
|
|
||||||
window.clearInterval(this.timerQueryPollInterval!);
|
window.clearInterval(this.timerQueryPollInterval!);
|
||||||
this.timerQueryPollInterval = null;
|
this.timerQueryPollInterval = null;
|
||||||
}, TIME_INTERVAL_DELAY);
|
}, TIME_INTERVAL_DELAY);
|
||||||
|
@ -530,6 +537,8 @@ export abstract class PathfinderDemoView extends PathfinderView {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
protected newTimingsReceived() {}
|
||||||
|
|
||||||
protected abstract pathColorsForObject(objectIndex: number): Uint8Array;
|
protected abstract pathColorsForObject(objectIndex: number): Uint8Array;
|
||||||
protected abstract pathTransformsForObject(objectIndex: number): Float32Array;
|
protected abstract pathTransformsForObject(objectIndex: number): Float32Array;
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue