Extended PerformanceUtils markup functionality for Chrome DevTools

(internal-7705)

GitOrigin-RevId: e018b20517a2036c4d3891f0fb8b84c88af78e35

Author: stephanheigl

3d-style/util/loaders.ts

@@ -10,6 +10,7 @@ import {loadBuildingGen} from './building_gen';
 import assert from 'assert';
 import {DracoDecoderModule} from './draco_decoder_gltf';
 import {MeshoptDecoder} from './meshopt_decoder';
+import {PerformanceUtils} from '../../src/util/performance';
 
 import type {vec3, mat4, quat} from 'gl-matrix';
 import type {BuildingGen} from './building_gen';
@@ -52,6 +53,7 @@ export function setDracoUrl(url: string) {
 function waitForDraco() {
     if (draco) return;
     if (dracoLoading != null) return dracoLoading;
+    const startTime = PerformanceUtils.now();
 
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     dracoLoading = DracoDecoderModule(fetch(getDracoUrl()));
@@ -60,6 +62,7 @@ function waitForDraco() {
         // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
         draco = module;
         dracoLoading = undefined;
+        PerformanceUtils.measureWithDetails("waitForDraco", "Models", startTime);
     });
 }
 
@@ -92,20 +95,23 @@ export function setMeshoptUrl(url: string) {
 
 function waitForMeshopt() {
     if (meshopt) return;
+    const startTime = PerformanceUtils.now();
     const decoder = MeshoptDecoder(fetch(getMeshoptUrl()));
     return decoder.ready.then(() => {
+        PerformanceUtils.measureWithDetails("waitForMeshopt", "Models", startTime);
         meshopt = decoder;
     });
 }
 
 export function waitForBuildingGen(): Promise<unknown> {
     if (buildingGen != null || buildingGenError != null) return null;
     if (buildingGenLoading != null) return buildingGenLoading;
-
+    const m = PerformanceUtils.now();
     const wasmData = fetch(config.BUILDING_GEN_URL);
     buildingGenLoading = loadBuildingGen(wasmData).then((instance) => {
         buildingGenLoading = null;
         buildingGen = instance;
+        PerformanceUtils.measureWithDetails("waitForBuildingGen", "BuildingBucket", m);
         return buildingGen;
     }).catch((error) => {
         warnOnce('Could not load building-gen');
@@ -385,6 +391,8 @@ function loadImage(img: {uri?: string; bufferView?: number; mimeType: string}, g
 }
 
 export function decodeGLTF(arrayBuffer: ArrayBuffer, byteOffset: number = 0, baseUrl?: string): Promise<GLTF | void> {
+    const startTime = PerformanceUtils.now();
+
     const gltf: GLTF = {json: null, images: [], buffers: []};
 
     if (new Uint32Array(arrayBuffer, byteOffset, 1)[0] === MAGIC_GLTF) {
@@ -464,6 +472,8 @@ export function decodeGLTF(arrayBuffer: ArrayBuffer, byteOffset: number = 0, bas
                 }
             }
 
+            PerformanceUtils.measureWithDetails("decodeGLTF", "Models", startTime);
+
             return gltf;
         });
     });

src/render/painter.ts

@@ -54,6 +54,7 @@ import Framebuffer from '../gl/framebuffer';
 import {OcclusionParams} from './occlusion_params';
 import {Rain} from '../precipitation/draw_rain';
 import {Snow} from '../precipitation/draw_snow';
+import {PerformanceUtils} from '../util/performance';
 
 import type ImageManager from './image_manager';
 import type IndexBuffer from '../gl/index_buffer';
@@ -758,6 +759,8 @@ class Painter {
         this._dt = curTime - this._timeStamp;
         this._timeStamp = curTime;
 
+        const renderStartTime = PerformanceUtils.now();
+
         Debug.run(() => { this.updateAverageFPS(); });
 
         // Update debug cache, i.e. clear all unused buffers
@@ -816,17 +819,21 @@ class Painter {
         let conflationSourcesInStyle = 0;
         let conflationActiveThisFrame = false;
 
+        const prepareStartTime = PerformanceUtils.now();
         for (const id in sourceCaches) {
             const sourceCache = sourceCaches[id];
             if (sourceCache.used) {
+                const sourceCachePrepareStartTime = PerformanceUtils.now();
                 sourceCache.prepare(this.context);
+                PerformanceUtils.measureLowOverhead(`prepare: ${sourceCache.id.toString()}`, sourceCachePrepareStartTime, undefined);
 
                 // @ts-expect-error - TS2339 - Property 'usedInConflation' does not exist on type 'Source'.
                 if (sourceCache.getSource().usedInConflation) {
                     ++conflationSourcesInStyle;
                 }
             }
         }
+        PerformanceUtils.measureLowOverhead('sourceCaches: prepare', prepareStartTime, undefined);
 
         let clippingActiveThisFrame = false;
         for (const layer of orderedLayers) {
@@ -1098,8 +1105,10 @@ class Painter {
 
         // Shadow pass ==================================================
         if (this._shadowRenderer) {
+            const shadowPassStartTime = PerformanceUtils.now();
             this.renderPass = 'shadow';
             this._shadowRenderer.drawShadowPass(this.style, coordsShadowCasters);
+            PerformanceUtils.measureLowOverhead('Shadow Pass', shadowPassStartTime);
         }
 
         // Rebind the main framebuffer now that all offscreen layers have been rendered:
@@ -1145,7 +1154,7 @@ class Painter {
         // Opaque pass ===============================================
         // Draw opaque layers top-to-bottom first.
         this.renderPass = 'opaque';
-
+        const opaquePassStartTime = PerformanceUtils.now();
         if (this.style.fog && this.transform.projection.supportsFog && this._atmosphere && !this._showOverdrawInspector && shouldRenderAtmosphere) {
             this._atmosphere.drawStars(this, this.style.fog);
         }
@@ -1164,6 +1173,7 @@ class Painter {
         if (this.style.fog && this.transform.projection.supportsFog && this._atmosphere && !this._showOverdrawInspector && shouldRenderAtmosphere) {
             this._atmosphere.drawAtmosphereGlow(this, this.style.fog);
         }
+        PerformanceUtils.measureLowOverhead('Opaque Pass', opaquePassStartTime);
 
         // Sky pass ======================================================
         // Draw all sky layers bottom to top.
@@ -1185,7 +1195,7 @@ class Painter {
         // Translucent pass ===============================================
         // Draw all other layers bottom-to-top.
         this.renderPass = 'translucent';
-
+        const translucentPassStartTime = PerformanceUtils.now();
         function coordsForTranslucentLayer(layer: TypedStyleLayer, sourceCache?: SourceCache) {
             // For symbol layers in the translucent pass, we add extra tiles to the renderable set
             // for cross-tile symbol fading. Symbol layers don't use tile clipping, so no need to render
@@ -1382,6 +1392,8 @@ class Painter {
         if (this._rain) {
             this._rain.draw(this);
         }
+        PerformanceUtils.measureLowOverhead('Translucent Pass', translucentPassStartTime);
+
         if (this.options.showTileBoundaries || this.options.showQueryGeometry || this.options.showTileAABBs) {
             // Use source with highest maxzoom
             let selectedSource = null;
@@ -1435,6 +1447,8 @@ class Painter {
         if (!conflationActiveThisFrame) {
             this.conflationActive = false;
         }
+
+        PerformanceUtils.measureLowOverhead('Painter.render', renderStartTime);
     }
 
     prepareLayer(layer: TypedStyleLayer) {
@@ -1459,12 +1473,15 @@ class Painter {
 
         this.id = layer.id;
 
+        const startTime = PerformanceUtils.now();
         this.gpuTimingStart(layer);
         if ((!painter.transform.projection.unsupportedLayers || !painter.transform.projection.unsupportedLayers.includes(layer.type) ||
             (painter.terrain && layer.type === 'custom')) && layer.type !== 'clip') {
             draw[layer.type](painter, sourceCache, layer, coords, this.style.placement.variableOffsets, this.options.isInitialLoad);
         }
         this.gpuTimingEnd();
+        // PerformanceUtils.measureLowOverhead(`${layer.type.toString()}:${layer.id.toString()}`, startTime, undefined);
+        PerformanceUtils.measureLowOverhead(`renderLayer: ${layer.type.toString()}`, startTime, undefined);
     }
 
     gpuTimingStart(layer: TypedStyleLayer) {

src/source/worker_tile.ts

@@ -301,7 +301,7 @@ class WorkerTile {
                         iconMap: null,
                         glyphPositions: null
                     });
-                    PerformanceUtils.endMeasure(m);
+                    PerformanceUtils.endMeasure(m, [["tileID", this.tileID.toString()], ["source", this.source]]);
                 } else if (glyphMap && iconMap && patternMap) {
                     const m = PerformanceUtils.beginMeasure('parseTile2');
                     const glyphAtlas = new GlyphAtlas(glyphMap);
@@ -372,7 +372,7 @@ class WorkerTile {
                     imageAtlas,
                     brightness: options.brightness
                 });
-                PerformanceUtils.endMeasure(m);
+                PerformanceUtils.endMeasure(m, [["tileID", this.tileID.toString()], ["source", this.source]]);
             };
 
             if (!this.extraShadowCaster) {
@@ -455,7 +455,7 @@ class WorkerTile {
                 }
             }
 
-            PerformanceUtils.endMeasure(m);
+            PerformanceUtils.endMeasure(m, [["tileID", this.tileID.toString()], ["source", this.source]]);
 
             maybePrepare();
         };

src/util/performance.ts

@@ -55,14 +55,66 @@ type PerformanceMarkOptions = {
 let fullLoadFinished = false;
 let placementTime = 0;
 
+export type PerformanceMeasureDevToolsColor =
+  "primary" | "primary-light" | "primary-dark"
+  | "secondary" | "secondary-light" | "secondary-dark"
+  | "tertiary" | "tertiary-light" | "tertiary-dark"
+  | "error";
+
+// To ensure there is not overlap in zones, use worker name or 'Main' as track and actual track name as trackgroup
+function trackNameOrDefault() {
+    return (isWorker(self) && self.name) ? `${self.name}` : "Main";
+}
+
 export const PerformanceUtils = {
+    now() {
+        return performance.now();
+    },
+
     mark(marker: PerformanceMarker, markOptions?: PerformanceMarkOptions) {
         performance.mark(marker, markOptions);
 
         if (marker === LivePerformanceMarkers.fullLoad) {
             fullLoadFinished = true;
         }
     },
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    measureWithDetails(name: string, track: string, startTime: number, properties?: any[][], color?: PerformanceMeasureDevToolsColor) {
+        performance.measure(name, {start: startTime, detail: {
+            devtools: {
+                trackGroup: track,
+                track: trackNameOrDefault(),
+                properties,
+                color
+            }
+        }});
+    },
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    markWithDetails(name: string, properties?: any[][], color?: PerformanceMeasureDevToolsColor) {
+        performance.mark(name, {
+            detail: {
+                devtools: {
+                    dataType: "marker",
+                    color,
+                    properties,
+                }
+            }
+        });
+    },
+
+    // Based on console.timeStamp()
+    // Records timing measures to DevTools performance panel only
+    // Low overhead, but not recorded on Chrome timeline.
+    measureLowOverhead(label: string,
+                  start?: string | number,
+                  end?: string | number,
+                  trackName?: string) {
+        // @ts-expect-error: TS2554 Chrome extension of console.timeStamp
+        console.timeStamp(label, start, end !== undefined ? end : performance.now(), trackNameOrDefault());
+    },
+
     measure(name: string, begin?: string, end?: string) {
         performance.measure(name, begin, end);
     },
@@ -74,8 +126,17 @@ export const PerformanceUtils = {
             name
         };
     },
-    endMeasure(m: PerformanceMark) {
-        performance.measure(m.name, m.mark);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    endMeasure(m: PerformanceMark, properties?: any[][]) {
+        performance.measure(m.name, {
+            start: m.mark,
+            detail: {
+                devtools: {
+                    track: trackNameOrDefault(),
+                    properties
+                }
+            }
+        });
     },
     recordPlacementTime(time: number) {
         // Ignore placementTimes during loading

src/util/web_worker.ts

@@ -1,6 +1,6 @@
 import WorkerClass from './worker_class';
 
-export function createWorker(): Worker {
+export function createWorker(name?: string): Worker {
     // eslint-disable-next-line new-cap
-    return WorkerClass.workerClass != null ? new WorkerClass.workerClass() : new self.Worker(WorkerClass.workerUrl, WorkerClass.workerParams);
+    return WorkerClass.workerClass != null ? new WorkerClass.workerClass() : new self.Worker(WorkerClass.workerUrl, Object.assign({name}, WorkerClass.workerParams));
 }

src/util/worker_pool.ts

@@ -11,9 +11,10 @@ export default class WorkerPool {
 
     active: Partial<Record<number | string, boolean>>;
     workers: Array<Worker>;
-
-    constructor() {
+    name?: string;
+    constructor(name?: string) {
         this.active = {};
+        this.name = name;
     }
 
     acquire(mapId: number | string, count = WorkerPool.workerCount): Array<Worker> {
@@ -22,7 +23,8 @@ export default class WorkerPool {
             // client code has had a chance to set it.
             this.workers = [];
             while (this.workers.length < count) {
-                this.workers.push(createWorker());
+                const w = createWorker(`${this.name || ''}WorkerPool: ${mapId}-${this.workers.length}`);
+                this.workers.push(w);
             }
         }
 

src/util/worker_pool_factory.ts

@@ -20,7 +20,7 @@ export function getGlobalWorkerPool(): WorkerPool {
 //   - To unblock tiles worker pool when image rasterization is in progress
 export function getImageRasterizerWorkerPool(): WorkerPool {
     if (!imageRasterizerWorkerPool) {
-        imageRasterizerWorkerPool = new WorkerPool();
+        imageRasterizerWorkerPool = new WorkerPool('ImageRasterizer');
     }
 
     return imageRasterizerWorkerPool;