Add benchmark that specifically targets performSymbolLayout (e.g. t…

…ext shaping and line breaking)

Use style_locations as input to ensure CJK-dense tiles are tested.

bench/benchmarks/symbol_layout.js

@@ -0,0 +1,47 @@
+// @flow
+
+import Layout from './layout';
+import SymbolBucket from '../../src/data/bucket/symbol_bucket';
+import { performSymbolLayout } from '../../src/symbol/symbol_layout';
+import { OverscaledTileID } from '../../src/source/tile_id';
+
+export default class SymbolLayout extends Layout {
+    parsedTiles: Array<any>;
+
+    constructor(style: string, locations: ?Array<OverscaledTileID>) {
+        super(style, locations);
+        this.parsedTiles = [];
+    }
+
+    setup(): Promise<void> {
+        return super.setup().then(() => {
+            // Do initial load/parse of tiles and hold onto all the glyph/icon
+            // dependencies so that we can re-do symbol layout in isolation
+            // during the bench step.
+            return Promise.all(this.tiles.map(tile =>
+                this.parser.parseTile(tile, true).then((tileResult) => {
+                    this.parsedTiles.push(tileResult);
+                })
+            )).then(() => {});
+        });
+    }
+
+    bench() {
+        let promise = Promise.resolve();
+        for (const tileResult of this.parsedTiles) {
+            promise = promise.then(() => {
+                for (const bucket of tileResult.buckets) {
+                    if (bucket instanceof SymbolBucket) {
+                        performSymbolLayout(bucket,
+                                            tileResult.glyphMap,
+                                            tileResult.glyphPositions,
+                                            tileResult.iconMap,
+                                            tileResult.imageAtlas.iconPositions,
+                                            false);
+                    }
+                }
+            });
+        }
+        return promise;
+    }
+}

bench/lib/tile_parser.js

@@ -108,7 +108,7 @@ export default class TileParser {
             .then(buffer => ({tileID, buffer}));
     }
 
-    parseTile(tile: {tileID: OverscaledTileID, buffer: ArrayBuffer}): Promise<?WorkerTileResult> {
+    parseTile(tile: {tileID: OverscaledTileID, buffer: ArrayBuffer}, returnDependencies?: boolean): Promise<?WorkerTileResult> {
         const workerTile = new WorkerTile({
             tileID: tile.tileID,
             zoom: tile.tileID.overscaledZ,
@@ -123,7 +123,8 @@ export default class TileParser {
             angle: 0,
             pitch: 0,
             cameraToCenterDistance: 0,
-            cameraToTileDistance: 0
+            cameraToTileDistance: 0,
+            returnDependencies: returnDependencies
         });
 
         const vectorTile = new VT.VectorTile(new Protobuf(tile.buffer));

bench/versions/benchmarks.js

@@ -2,6 +2,7 @@ import mapboxgl from '../../src';
 import accessToken from '../lib/access_token';
 import { summaryStatistics, regression } from '../lib/statistics';
 import updateUI from '../benchmarks_view';
+import styleLocations from '../lib/style_locations';
 
 mapboxgl.accessToken = accessToken;
 
@@ -17,6 +18,7 @@ function register(benchmark) {
 
 import Layout from '../benchmarks/layout';
 import LayoutDDS from '../benchmarks/layout_dds';
+import SymbolLayout from '../benchmarks/symbol_layout';
 import WorkerTransfer from '../benchmarks/worker_transfer';
 import Paint from '../benchmarks/paint';
 import PaintStates from '../benchmarks/paint_states';
@@ -47,6 +49,7 @@ register(new PaintStates(center));
 LayerBenchmarks.forEach((Bench) => register(new Bench()));
 register(new Load());
 register(new LayoutDDS());
+register(new SymbolLayout(style, styleLocations.map(location => location.tileID[0])));
 register(new FilterCreate());
 register(new FilterEvaluate());
 

src/render/glyph_atlas.js

@@ -20,9 +20,11 @@ export type GlyphPosition = {
     metrics: GlyphMetrics
 };
 
+export type GlyphPositions = { [string]: { [number]: GlyphPosition } }
+
 export default class GlyphAtlas {
     image: AlphaImage;
-    positions: { [string]: { [number]: GlyphPosition } };
+    positions: GlyphPositions;
 
     constructor(stacks: { [string]: { [number]: ?StyleGlyph } }) {
         const positions = {};

src/source/worker_source.js

@@ -2,13 +2,16 @@
 
 import type {RequestParameters} from '../util/ajax';
 import type {RGBAImage, AlphaImage} from '../util/image';
+import type { GlyphPositions } from '../render/glyph_atlas';
 import type ImageAtlas from '../render/image_atlas';
 import type {OverscaledTileID} from './tile_id';
 import type {Bucket} from '../data/bucket';
 import type FeatureIndex from '../data/feature_index';
 import type {CollisionBoxArray} from '../data/array_types';
 import type DEMData from '../data/dem_data';
 import type {PerformanceResourceTiming} from '../types/performance_resource_timing';
+import type { StyleGlyph } from '../style/style_glyph';
+import type { StyleImage } from '../style/style_image';
 
 export type TileParameters = {
     source: string,
@@ -23,7 +26,8 @@ export type WorkerTileParameters = TileParameters & {
     tileSize: number,
     pixelRatio: number,
     showCollisionBoxes: boolean,
-    collectResourceTiming?: boolean
+    collectResourceTiming?: boolean,
+    returnDependencies?: boolean
 };
 
 export type WorkerDEMTileParameters = TileParameters & {
@@ -39,7 +43,11 @@ export type WorkerTileResult = {
     featureIndex: FeatureIndex,
     collisionBoxArray: CollisionBoxArray,
     rawTileData?: ArrayBuffer,
-    resourceTiming?: Array<PerformanceResourceTiming>
+    resourceTiming?: Array<PerformanceResourceTiming>,
+    // Only used for benchmarking:
+    glyphMap?: {[string]: {[number]: ?StyleGlyph}} | null,
+    iconMap?: {[string]: StyleImage} | null,
+    glyphPositions?: GlyphPositions | null
 };
 
 export type WorkerTileCallback = (error: ?Error, result: ?WorkerTileResult) => void;

src/source/worker_tile.js

@@ -37,6 +37,7 @@ class WorkerTile {
     overscaling: number;
     showCollisionBoxes: boolean;
     collectResourceTiming: boolean;
+    returnDependencies: boolean;
 
     status: 'parsing' | 'done';
     data: VectorTile;
@@ -56,6 +57,7 @@ class WorkerTile {
         this.overscaling = this.tileID.overscaleFactor();
         this.showCollisionBoxes = params.showCollisionBoxes;
         this.collectResourceTiming = !!params.collectResourceTiming;
+        this.returnDependencies = !!params.returnDependencies;
     }
 
     parse(data: VectorTile, layerIndex: StyleLayerIndex, actor: Actor, callback: WorkerTileCallback) {
@@ -196,7 +198,11 @@ class WorkerTile {
                     featureIndex,
                     collisionBoxArray: this.collisionBoxArray,
                     glyphAtlasImage: glyphAtlas.image,
-                    imageAtlas: imageAtlas
+                    imageAtlas: imageAtlas,
+                    // Only used for benchmarking:
+                    glyphMap: this.returnDependencies ? glyphMap : null,
+                    iconMap: this.returnDependencies ? iconMap : null,
+                    glyphPositions: this.returnDependencies ? glyphAtlas.positions : null
                 });
             }
         }