2017-09-11 14:22:19 -04:00
|
|
|
// pathfinder/client/src/benchmark.ts
|
|
|
|
//
|
|
|
|
// Copyright © 2017 The Pathfinder Project Developers.
|
|
|
|
//
|
|
|
|
// Licensed under the Apache License, Version 2.0 <LICENSE-APACHE or
|
|
|
|
// http://www.apache.org/licenses/LICENSE-2.0> or the MIT license
|
|
|
|
// <LICENSE-MIT or http://opensource.org/licenses/MIT>, at your
|
|
|
|
// option. This file may not be copied, modified, or distributed
|
|
|
|
// except according to those terms.
|
|
|
|
|
2017-09-12 15:40:14 -04:00
|
|
|
import * as glmatrix from 'gl-matrix';
|
2017-10-05 13:55:52 -04:00
|
|
|
import * as _ from 'lodash';
|
2017-09-11 14:22:19 -04:00
|
|
|
import * as opentype from "opentype.js";
|
|
|
|
|
2017-09-28 17:34:48 -04:00
|
|
|
import {AntialiasingStrategy, AntialiasingStrategyName, NoAAStrategy} from "./aa-strategy";
|
2017-09-30 01:12:09 -04:00
|
|
|
import {SubpixelAAType} from "./aa-strategy";
|
2017-09-28 17:34:48 -04:00
|
|
|
import {AppController, DemoAppController} from "./app-controller";
|
|
|
|
import PathfinderBufferTexture from './buffer-texture';
|
|
|
|
import {OrthographicCamera} from './camera';
|
2017-10-06 19:11:53 -04:00
|
|
|
import {UniformMap} from './gl-utils';
|
2017-09-11 14:22:19 -04:00
|
|
|
import {PathfinderMeshData} from "./meshes";
|
2017-10-16 22:29:13 -04:00
|
|
|
import {Renderer} from './renderer';
|
2017-09-28 17:34:48 -04:00
|
|
|
import {ShaderMap, ShaderProgramSource} from "./shader-loader";
|
2017-09-12 15:40:14 -04:00
|
|
|
import SSAAStrategy from './ssaa-strategy';
|
2017-09-28 17:34:48 -04:00
|
|
|
import {BUILTIN_FONT_URI, ExpandedMeshData, GlyphStore, PathfinderFont, TextFrame} from "./text";
|
2017-10-09 17:14:24 -04:00
|
|
|
import {computeStemDarkeningAmount, TextRun} from "./text";
|
2017-10-15 17:37:44 -04:00
|
|
|
import {assert, lerp, PathfinderError, unwrapNull, unwrapUndef} from "./utils";
|
2017-10-16 19:11:00 -04:00
|
|
|
import {DemoView, Timings} from "./view";
|
2017-10-09 17:14:24 -04:00
|
|
|
import {AdaptiveMonochromeXCAAStrategy} from './xcaa-strategy';
|
2017-09-11 14:22:19 -04:00
|
|
|
|
|
|
|
const STRING: string = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
|
|
|
|
|
|
|
|
const FONT: string = 'nimbus-sans';
|
|
|
|
|
2017-09-12 15:40:14 -04:00
|
|
|
const TEXT_COLOR: number[] = [0, 0, 0, 255];
|
|
|
|
|
|
|
|
const MIN_FONT_SIZE: number = 6;
|
|
|
|
const MAX_FONT_SIZE: number = 200;
|
|
|
|
|
2017-10-15 17:37:44 -04:00
|
|
|
// In milliseconds.
|
|
|
|
const MIN_RUNTIME: number = 100;
|
|
|
|
const MAX_RUNTIME: number = 3000;
|
2017-10-05 13:55:52 -04:00
|
|
|
|
2017-09-12 15:40:14 -04:00
|
|
|
const ANTIALIASING_STRATEGIES: AntialiasingStrategyTable = {
|
|
|
|
none: NoAAStrategy,
|
|
|
|
ssaa: SSAAStrategy,
|
2017-10-09 17:14:24 -04:00
|
|
|
xcaa: AdaptiveMonochromeXCAAStrategy,
|
2017-09-12 15:40:14 -04:00
|
|
|
};
|
|
|
|
|
|
|
|
interface AntialiasingStrategyTable {
|
|
|
|
none: typeof NoAAStrategy;
|
|
|
|
ssaa: typeof SSAAStrategy;
|
2017-10-09 17:14:24 -04:00
|
|
|
xcaa: typeof AdaptiveMonochromeXCAAStrategy;
|
2017-09-12 15:40:14 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
class BenchmarkAppController extends DemoAppController<BenchmarkTestView> {
|
2017-09-28 17:34:48 -04:00
|
|
|
font: PathfinderFont | null;
|
|
|
|
textRun: TextRun | null;
|
|
|
|
|
|
|
|
protected readonly defaultFile: string = FONT;
|
|
|
|
protected readonly builtinFileURI: string = BUILTIN_FONT_URI;
|
|
|
|
|
|
|
|
private resultsModal: HTMLDivElement;
|
|
|
|
private resultsTableBody: HTMLTableSectionElement;
|
|
|
|
private resultsPartitioningTimeLabel: HTMLSpanElement;
|
|
|
|
|
|
|
|
private glyphStore: GlyphStore;
|
|
|
|
private baseMeshes: PathfinderMeshData;
|
|
|
|
private expandedMeshes: ExpandedMeshData;
|
|
|
|
|
|
|
|
private pixelsPerEm: number;
|
2017-10-05 13:55:52 -04:00
|
|
|
private currentRun: number;
|
2017-10-15 17:37:44 -04:00
|
|
|
private startTime: number;
|
2017-09-28 17:34:48 -04:00
|
|
|
private elapsedTimes: ElapsedTime[];
|
|
|
|
private partitionTime: number;
|
|
|
|
|
2017-09-11 14:22:19 -04:00
|
|
|
start() {
|
|
|
|
super.start();
|
|
|
|
|
2017-09-25 22:56:12 -04:00
|
|
|
this.resultsModal = unwrapNull(document.getElementById('pf-benchmark-results-modal')) as
|
|
|
|
HTMLDivElement;
|
|
|
|
this.resultsTableBody =
|
|
|
|
unwrapNull(document.getElementById('pf-benchmark-results-table-body')) as
|
|
|
|
HTMLTableSectionElement;
|
2017-09-26 18:38:50 -04:00
|
|
|
this.resultsPartitioningTimeLabel =
|
|
|
|
unwrapNull(document.getElementById('pf-benchmark-results-partitioning-time')) as
|
|
|
|
HTMLSpanElement;
|
2017-09-25 22:56:12 -04:00
|
|
|
|
2017-10-05 13:55:52 -04:00
|
|
|
const resultsSaveCSVButton =
|
|
|
|
unwrapNull(document.getElementById('pf-benchmark-results-save-csv-button'));
|
|
|
|
resultsSaveCSVButton.addEventListener('click', () => this.saveCSV(), false);
|
|
|
|
|
2017-09-25 22:56:12 -04:00
|
|
|
const resultsCloseButton =
|
|
|
|
unwrapNull(document.getElementById('pf-benchmark-results-close-button'));
|
|
|
|
resultsCloseButton.addEventListener('click', () => {
|
|
|
|
window.jQuery(this.resultsModal).modal('hide');
|
|
|
|
}, false);
|
|
|
|
|
2017-09-11 14:22:19 -04:00
|
|
|
const runBenchmarkButton = unwrapNull(document.getElementById('pf-run-benchmark-button'));
|
|
|
|
runBenchmarkButton.addEventListener('click', () => this.runBenchmark(), false);
|
|
|
|
|
2017-09-19 23:19:53 -04:00
|
|
|
this.loadInitialFile(this.builtinFileURI);
|
2017-09-11 14:22:19 -04:00
|
|
|
}
|
|
|
|
|
2017-10-02 22:58:38 -04:00
|
|
|
protected fileLoaded(fileData: ArrayBuffer, builtinName: string | null): void {
|
|
|
|
const font = new PathfinderFont(fileData, builtinName);
|
2017-09-12 15:40:14 -04:00
|
|
|
this.font = font;
|
2017-09-11 14:22:19 -04:00
|
|
|
|
2017-09-27 16:02:32 -04:00
|
|
|
const textRun = new TextRun(STRING, [0, 0], font);
|
|
|
|
textRun.layout();
|
2017-09-12 15:40:14 -04:00
|
|
|
this.textRun = textRun;
|
2017-09-11 19:07:11 -04:00
|
|
|
const textFrame = new TextFrame([textRun], font);
|
2017-09-11 14:22:19 -04:00
|
|
|
|
2017-09-27 16:02:32 -04:00
|
|
|
const glyphIDs = textFrame.allGlyphIDs;
|
|
|
|
glyphIDs.sort((a, b) => a - b);
|
|
|
|
this.glyphStore = new GlyphStore(font, glyphIDs);
|
|
|
|
|
|
|
|
this.glyphStore.partition().then(result => {
|
2017-09-26 18:38:50 -04:00
|
|
|
this.baseMeshes = result.meshes;
|
|
|
|
|
2017-09-27 16:02:32 -04:00
|
|
|
const partitionTime = result.time / this.glyphStore.glyphIDs.length * 1e6;
|
2017-09-26 18:38:50 -04:00
|
|
|
const timeLabel = this.resultsPartitioningTimeLabel;
|
|
|
|
while (timeLabel.firstChild != null)
|
|
|
|
timeLabel.removeChild(timeLabel.firstChild);
|
|
|
|
timeLabel.appendChild(document.createTextNode("" + partitionTime));
|
|
|
|
|
2017-09-27 16:02:32 -04:00
|
|
|
const expandedMeshes = textFrame.expandMeshes(this.baseMeshes, glyphIDs);
|
2017-09-12 15:40:14 -04:00
|
|
|
this.expandedMeshes = expandedMeshes;
|
2017-09-26 18:38:50 -04:00
|
|
|
|
2017-09-12 15:40:14 -04:00
|
|
|
this.view.then(view => {
|
|
|
|
view.attachMeshes([expandedMeshes.meshes]);
|
2017-09-28 17:34:48 -04:00
|
|
|
});
|
|
|
|
});
|
2017-09-11 14:22:19 -04:00
|
|
|
}
|
|
|
|
|
2017-09-12 15:40:14 -04:00
|
|
|
protected createView(): BenchmarkTestView {
|
|
|
|
return new BenchmarkTestView(this,
|
|
|
|
unwrapNull(this.commonShaderSource),
|
|
|
|
unwrapNull(this.shaderSources));
|
|
|
|
}
|
|
|
|
|
2017-10-15 17:37:44 -04:00
|
|
|
private reset(): void {
|
2017-10-05 13:55:52 -04:00
|
|
|
this.currentRun = 0;
|
2017-10-15 17:37:44 -04:00
|
|
|
this.startTime = Date.now();
|
|
|
|
}
|
|
|
|
|
|
|
|
private runBenchmark(): void {
|
|
|
|
this.reset();
|
2017-09-12 15:40:14 -04:00
|
|
|
this.elapsedTimes = [];
|
2017-10-15 17:37:44 -04:00
|
|
|
this.pixelsPerEm = MIN_FONT_SIZE;
|
2017-09-12 15:40:14 -04:00
|
|
|
this.view.then(view => this.runOneBenchmarkTest(view));
|
|
|
|
}
|
|
|
|
|
2017-10-15 17:37:44 -04:00
|
|
|
private runDone(): boolean {
|
|
|
|
const totalElapsedTime = Date.now() - this.startTime;
|
|
|
|
if (totalElapsedTime < MIN_RUNTIME)
|
|
|
|
return false;
|
|
|
|
if (totalElapsedTime >= MAX_RUNTIME)
|
|
|
|
return true;
|
|
|
|
|
|
|
|
// Compute median absolute devation.
|
|
|
|
const elapsedTime = unwrapUndef(_.last(this.elapsedTimes));
|
|
|
|
elapsedTime.times.sort((a, b) => a - b);
|
|
|
|
const median = unwrapNull(computeMedian(elapsedTime.times));
|
|
|
|
const absoluteDeviations = elapsedTime.times.map(time => Math.abs(time - median));
|
|
|
|
absoluteDeviations.sort((a, b) => a - b);
|
|
|
|
const medianAbsoluteDeviation = unwrapNull(computeMedian(absoluteDeviations));
|
|
|
|
const medianAbsoluteDeviationFraction = medianAbsoluteDeviation / median;
|
|
|
|
return medianAbsoluteDeviationFraction <= 0.01;
|
|
|
|
}
|
|
|
|
|
2017-09-12 15:40:14 -04:00
|
|
|
private runOneBenchmarkTest(view: BenchmarkTestView): void {
|
|
|
|
const renderedPromise = new Promise<number>((resolve, reject) => {
|
|
|
|
view.renderingPromiseCallback = resolve;
|
|
|
|
view.pixelsPerEm = this.pixelsPerEm;
|
|
|
|
});
|
|
|
|
renderedPromise.then(elapsedTime => {
|
2017-10-05 13:55:52 -04:00
|
|
|
if (this.currentRun === 0)
|
|
|
|
this.elapsedTimes.push(new ElapsedTime(this.pixelsPerEm));
|
|
|
|
unwrapUndef(_.last(this.elapsedTimes)).times.push(elapsedTime);
|
|
|
|
|
|
|
|
this.currentRun++;
|
2017-10-15 17:37:44 -04:00
|
|
|
if (this.runDone()) {
|
|
|
|
this.reset();
|
2017-10-05 13:55:52 -04:00
|
|
|
|
|
|
|
if (this.pixelsPerEm === MAX_FONT_SIZE) {
|
|
|
|
this.showResults();
|
|
|
|
return;
|
|
|
|
}
|
2017-09-12 15:40:14 -04:00
|
|
|
|
2017-10-05 13:55:52 -04:00
|
|
|
this.pixelsPerEm++;
|
2017-09-12 15:40:14 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
this.runOneBenchmarkTest(view);
|
|
|
|
});
|
2017-09-11 14:22:19 -04:00
|
|
|
}
|
|
|
|
|
2017-09-25 22:56:12 -04:00
|
|
|
private showResults(): void {
|
|
|
|
while (this.resultsTableBody.lastChild != null)
|
|
|
|
this.resultsTableBody.removeChild(this.resultsTableBody.lastChild);
|
|
|
|
|
|
|
|
for (const elapsedTime of this.elapsedTimes) {
|
|
|
|
const tr = document.createElement('tr');
|
|
|
|
const sizeTH = document.createElement('th');
|
|
|
|
const timeTD = document.createElement('td');
|
|
|
|
sizeTH.appendChild(document.createTextNode("" + elapsedTime.size));
|
|
|
|
timeTD.appendChild(document.createTextNode("" + elapsedTime.time));
|
|
|
|
sizeTH.scope = 'row';
|
|
|
|
tr.appendChild(sizeTH);
|
|
|
|
tr.appendChild(timeTD);
|
|
|
|
this.resultsTableBody.appendChild(tr);
|
|
|
|
}
|
|
|
|
|
|
|
|
window.jQuery(this.resultsModal).modal();
|
|
|
|
}
|
2017-10-05 13:55:52 -04:00
|
|
|
|
|
|
|
private saveCSV(): void {
|
|
|
|
let output = "Font size,Time per glyph\n";
|
|
|
|
for (const elapsedTime of this.elapsedTimes)
|
|
|
|
output += `${elapsedTime.size},${elapsedTime.time}\n`;
|
|
|
|
|
|
|
|
// https://stackoverflow.com/a/30832210
|
|
|
|
const file = new Blob([output], {type: 'text/csv'});
|
|
|
|
const a = document.createElement('a');
|
|
|
|
const url = URL.createObjectURL(file);
|
|
|
|
a.href = url;
|
|
|
|
a.download = "pathfinder-benchmark-results.csv";
|
|
|
|
document.body.appendChild(a);
|
|
|
|
a.click();
|
|
|
|
|
|
|
|
window.setTimeout(() => {
|
|
|
|
document.body.removeChild(a);
|
|
|
|
URL.revokeObjectURL(url);
|
|
|
|
}, 0);
|
|
|
|
}
|
2017-09-28 17:34:48 -04:00
|
|
|
}
|
2017-09-25 22:56:12 -04:00
|
|
|
|
2017-10-16 19:11:00 -04:00
|
|
|
class BenchmarkTestView extends DemoView {
|
2017-10-16 22:29:13 -04:00
|
|
|
readonly renderer: BenchmarkRenderer;
|
|
|
|
readonly appController: BenchmarkAppController;
|
|
|
|
|
|
|
|
get camera(): OrthographicCamera {
|
|
|
|
return this.renderer.camera;
|
|
|
|
}
|
|
|
|
|
|
|
|
set pixelsPerEm(newPPEM: number) {
|
|
|
|
this.renderer.pixelsPerEm = newPPEM;
|
|
|
|
}
|
|
|
|
|
|
|
|
set renderingPromiseCallback(newCallback: (time: number) => void) {
|
|
|
|
this.renderer.renderingPromiseCallback = newCallback;
|
|
|
|
}
|
|
|
|
|
|
|
|
constructor(appController: BenchmarkAppController,
|
|
|
|
commonShaderSource: string,
|
|
|
|
shaderSources: ShaderMap<ShaderProgramSource>) {
|
|
|
|
super(commonShaderSource, shaderSources);
|
|
|
|
|
|
|
|
this.appController = appController;
|
|
|
|
this.renderer = new BenchmarkRenderer(this);
|
|
|
|
|
|
|
|
this.resizeToFit(true);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
class BenchmarkRenderer extends Renderer {
|
|
|
|
renderContext: BenchmarkTestView;
|
|
|
|
|
|
|
|
camera: OrthographicCamera;
|
2017-09-11 14:22:19 -04:00
|
|
|
|
2017-09-28 17:34:48 -04:00
|
|
|
renderingPromiseCallback: ((time: number) => void) | null;
|
2017-09-25 22:56:12 -04:00
|
|
|
|
2017-10-16 22:29:13 -04:00
|
|
|
get destFramebuffer(): WebGLFramebuffer | null {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
2017-10-16 19:07:43 -04:00
|
|
|
get bgColor(): glmatrix.vec4 {
|
|
|
|
return glmatrix.vec4.clone([1.0, 1.0, 1.0, 0.0]);
|
|
|
|
}
|
|
|
|
|
|
|
|
get fgColor(): glmatrix.vec4 {
|
|
|
|
return glmatrix.vec4.clone([0.0, 0.0, 0.0, 1.0]);
|
|
|
|
}
|
2017-09-12 15:40:14 -04:00
|
|
|
|
2017-10-16 22:29:13 -04:00
|
|
|
get destAllocatedSize(): glmatrix.vec2 {
|
|
|
|
const canvas = this.renderContext.canvas;
|
|
|
|
return glmatrix.vec2.clone([canvas.width, canvas.height]);
|
|
|
|
}
|
2017-09-28 17:34:48 -04:00
|
|
|
|
2017-10-16 22:29:13 -04:00
|
|
|
get destUsedSize(): glmatrix.vec2 {
|
|
|
|
return this.destAllocatedSize;
|
|
|
|
}
|
2017-09-28 17:34:48 -04:00
|
|
|
|
2017-10-16 22:29:13 -04:00
|
|
|
get emboldenAmount(): glmatrix.vec2 {
|
|
|
|
return this.stemDarkeningAmount;
|
|
|
|
}
|
2017-09-28 17:34:48 -04:00
|
|
|
|
2017-10-16 22:29:13 -04:00
|
|
|
get pixelsPerEm(): number {
|
|
|
|
return this._pixelsPerEm;
|
|
|
|
}
|
2017-09-28 17:34:48 -04:00
|
|
|
|
2017-10-16 22:29:13 -04:00
|
|
|
set pixelsPerEm(newPixelsPerEm: number) {
|
|
|
|
this._pixelsPerEm = newPixelsPerEm;
|
|
|
|
this.uploadPathTransforms(1);
|
|
|
|
this.renderContext.setDirty();
|
|
|
|
}
|
2017-09-28 17:34:48 -04:00
|
|
|
|
2017-10-16 22:29:13 -04:00
|
|
|
protected get usedSizeFactor(): glmatrix.vec2 {
|
|
|
|
return glmatrix.vec2.clone([1.0, 1.0]);
|
|
|
|
}
|
2017-09-12 15:40:14 -04:00
|
|
|
|
2017-10-16 22:29:13 -04:00
|
|
|
protected get worldTransform() {
|
|
|
|
const canvas = this.renderContext.canvas;
|
|
|
|
|
|
|
|
const transform = glmatrix.mat4.create();
|
|
|
|
const translation = this.camera.translation;
|
|
|
|
glmatrix.mat4.translate(transform, transform, [-1.0, -1.0, 0.0]);
|
|
|
|
glmatrix.mat4.scale(transform, transform, [2.0 / canvas.width, 2.0 / canvas.height, 1.0]);
|
|
|
|
glmatrix.mat4.translate(transform, transform, [translation[0], translation[1], 0]);
|
|
|
|
glmatrix.mat4.scale(transform, transform, [this.camera.scale, this.camera.scale, 1.0]);
|
|
|
|
|
|
|
|
const pixelsPerUnit = this.pixelsPerUnit;
|
|
|
|
glmatrix.mat4.scale(transform, transform, [pixelsPerUnit, pixelsPerUnit, 1.0]);
|
|
|
|
|
|
|
|
return transform;
|
|
|
|
}
|
|
|
|
|
2017-11-01 19:09:58 -04:00
|
|
|
protected get objectCount(): number {
|
|
|
|
return this.meshes.length;
|
|
|
|
}
|
|
|
|
|
2017-10-16 22:29:13 -04:00
|
|
|
private _pixelsPerEm: number = 32.0;
|
|
|
|
|
|
|
|
private get pixelsPerUnit(): number {
|
|
|
|
const font = unwrapNull(this.renderContext.appController.font);
|
|
|
|
return this._pixelsPerEm / font.opentypeFont.unitsPerEm;
|
2017-10-09 17:14:24 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
private get stemDarkeningAmount(): glmatrix.vec2 {
|
|
|
|
return computeStemDarkeningAmount(this._pixelsPerEm, this.pixelsPerUnit);
|
|
|
|
}
|
|
|
|
|
2017-10-16 22:29:13 -04:00
|
|
|
constructor(renderContext: BenchmarkTestView) {
|
|
|
|
super(renderContext);
|
2017-09-12 15:40:14 -04:00
|
|
|
|
2017-10-16 22:29:13 -04:00
|
|
|
this.camera = new OrthographicCamera(renderContext.canvas);
|
|
|
|
this.camera.onPan = () => renderContext.setDirty();
|
|
|
|
this.camera.onZoom = () => renderContext.setDirty();
|
|
|
|
}
|
2017-09-12 15:40:14 -04:00
|
|
|
|
2017-10-16 22:29:13 -04:00
|
|
|
attachMeshes(meshes: PathfinderMeshData[]): void {
|
|
|
|
super.attachMeshes(meshes);
|
|
|
|
|
|
|
|
this.uploadPathColors(1);
|
|
|
|
this.uploadPathTransforms(1);
|
2017-09-12 15:40:14 -04:00
|
|
|
}
|
|
|
|
|
2017-10-16 22:29:13 -04:00
|
|
|
pathCountForObject(objectIndex: number): number {
|
|
|
|
return STRING.length;
|
2017-09-28 17:34:48 -04:00
|
|
|
}
|
|
|
|
|
2017-10-09 17:14:24 -04:00
|
|
|
pathBoundingRects(objectIndex: number): Float32Array {
|
2017-10-16 22:29:13 -04:00
|
|
|
const appController = this.renderContext.appController;
|
|
|
|
const font = unwrapNull(appController.font);
|
2017-10-09 17:14:24 -04:00
|
|
|
|
|
|
|
const boundingRects = new Float32Array((STRING.length + 1) * 4);
|
|
|
|
|
|
|
|
for (let glyphIndex = 0; glyphIndex < STRING.length; glyphIndex++) {
|
2017-10-16 22:29:13 -04:00
|
|
|
const glyphID = unwrapNull(appController.textRun).glyphIDs[glyphIndex];
|
2017-10-09 17:14:24 -04:00
|
|
|
|
|
|
|
const metrics = font.metricsForGlyph(glyphID);
|
|
|
|
if (metrics == null)
|
|
|
|
continue;
|
|
|
|
|
|
|
|
boundingRects[(glyphIndex + 1) * 4 + 0] = metrics.xMin;
|
|
|
|
boundingRects[(glyphIndex + 1) * 4 + 1] = metrics.yMin;
|
|
|
|
boundingRects[(glyphIndex + 1) * 4 + 2] = metrics.xMax;
|
|
|
|
boundingRects[(glyphIndex + 1) * 4 + 3] = metrics.yMax;
|
|
|
|
}
|
|
|
|
|
|
|
|
return boundingRects;
|
|
|
|
}
|
|
|
|
|
2017-10-16 22:29:13 -04:00
|
|
|
setHintsUniform(uniforms: UniformMap): void {
|
|
|
|
this.renderContext.gl.uniform4f(uniforms.uHints, 0, 0, 0, 0);
|
2017-10-09 17:14:24 -04:00
|
|
|
}
|
|
|
|
|
2017-09-12 15:40:14 -04:00
|
|
|
protected createAAStrategy(aaType: AntialiasingStrategyName,
|
|
|
|
aaLevel: number,
|
2017-09-30 01:12:09 -04:00
|
|
|
subpixelAA: SubpixelAAType):
|
2017-09-12 15:40:14 -04:00
|
|
|
AntialiasingStrategy {
|
2017-09-14 00:41:33 -04:00
|
|
|
return new (ANTIALIASING_STRATEGIES[aaType])(aaLevel, subpixelAA);
|
2017-09-12 15:40:14 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
protected compositeIfNecessary(): void {}
|
|
|
|
|
|
|
|
protected updateTimings(timings: Timings): void {
|
|
|
|
// TODO(pcwalton)
|
|
|
|
}
|
|
|
|
|
2017-10-16 22:29:13 -04:00
|
|
|
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);
|
|
|
|
}
|
|
|
|
|
2017-09-12 15:40:14 -04:00
|
|
|
protected pathColorsForObject(objectIndex: number): Uint8Array {
|
|
|
|
const pathColors = new Uint8Array(4 * (STRING.length + 1));
|
|
|
|
for (let pathIndex = 0; pathIndex < STRING.length; pathIndex++)
|
|
|
|
pathColors.set(TEXT_COLOR, (pathIndex + 1) * 4);
|
|
|
|
return pathColors;
|
|
|
|
}
|
|
|
|
|
|
|
|
protected pathTransformsForObject(objectIndex: number): Float32Array {
|
2017-10-16 22:29:13 -04:00
|
|
|
const appController = this.renderContext.appController;
|
|
|
|
const canvas = this.renderContext.canvas;
|
|
|
|
const font = unwrapNull(appController.font);
|
|
|
|
|
2017-09-12 15:40:14 -04:00
|
|
|
const pathTransforms = new Float32Array(4 * (STRING.length + 1));
|
2017-09-12 19:07:04 -04:00
|
|
|
|
|
|
|
let currentX = 0, currentY = 0;
|
2017-10-16 22:29:13 -04:00
|
|
|
const availableWidth = canvas.width / this.pixelsPerUnit;
|
|
|
|
const lineHeight = font.opentypeFont.lineHeight();
|
2017-09-12 15:40:14 -04:00
|
|
|
|
|
|
|
for (let glyphIndex = 0; glyphIndex < STRING.length; glyphIndex++) {
|
2017-10-16 22:29:13 -04:00
|
|
|
const glyphID = unwrapNull(appController.textRun).glyphIDs[glyphIndex];
|
2017-09-12 19:07:04 -04:00
|
|
|
pathTransforms.set([1, 1, currentX, currentY], (glyphIndex + 1) * 4);
|
|
|
|
|
2017-10-16 22:29:13 -04:00
|
|
|
currentX += font.opentypeFont.glyphs.get(glyphID).advanceWidth;
|
2017-09-12 19:07:04 -04:00
|
|
|
if (currentX > availableWidth) {
|
|
|
|
currentX = 0;
|
|
|
|
currentY += lineHeight;
|
|
|
|
}
|
2017-09-12 15:40:14 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
return pathTransforms;
|
|
|
|
}
|
2017-10-30 16:34:55 -04:00
|
|
|
|
2017-10-31 15:41:38 -04:00
|
|
|
protected directCurveProgramName(): keyof ShaderMap<void> {
|
2017-10-30 16:34:55 -04:00
|
|
|
return 'directCurve';
|
|
|
|
}
|
|
|
|
|
2017-10-31 15:41:38 -04:00
|
|
|
protected directInteriorProgramName(): keyof ShaderMap<void> {
|
2017-10-30 16:34:55 -04:00
|
|
|
return 'directInterior';
|
|
|
|
}
|
2017-09-11 14:22:19 -04:00
|
|
|
}
|
|
|
|
|
2017-10-15 17:37:44 -04:00
|
|
|
function computeMedian(values: number[]): number | null {
|
|
|
|
if (values.length === 0)
|
|
|
|
return null;
|
|
|
|
const mid = values.length / 2;
|
|
|
|
if (values.length % 2 === 1)
|
|
|
|
return values[Math.floor(mid)];
|
|
|
|
return lerp(values[mid - 1], values[mid], 0.5);
|
|
|
|
}
|
|
|
|
|
2017-10-05 13:55:52 -04:00
|
|
|
class ElapsedTime {
|
|
|
|
readonly size: number;
|
|
|
|
readonly times: number[];
|
|
|
|
|
|
|
|
constructor(size: number) {
|
|
|
|
this.size = size;
|
|
|
|
this.times = [];
|
|
|
|
}
|
|
|
|
|
|
|
|
get time(): number {
|
2017-10-15 17:37:44 -04:00
|
|
|
const median = computeMedian(this.times);
|
|
|
|
return median == null ? 0.0 : median;
|
2017-10-05 13:55:52 -04:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-09-12 15:40:14 -04:00
|
|
|
function main() {
|
|
|
|
const controller = new BenchmarkAppController;
|
|
|
|
window.addEventListener('load', () => controller.start(), false);
|
|
|
|
}
|
|
|
|
|
|
|
|
main();
|