add gpu timing map events

src/gl/context.js

@@ -63,6 +63,7 @@ class Context {
  extTextureFilterAnisotropic: any;
  extTextureFilterAnisotropicMax: any;
  extTextureHalfFloat: any;
+ extTimerQuery: any;
 
  constructor(gl: WebGLRenderingContext) {
  this.gl = gl;
@@ -113,6 +114,8 @@ class Context {
  if (this.extTextureHalfFloat) {
  gl.getExtension('OES_texture_half_float_linear');
  }
+
+ this.extTimerQuery = gl.getExtension('EXT_disjoint_timer_query');
  }
 
  setDefault() {

src/render/painter.js

@@ -72,6 +72,7 @@ type PainterOptions = {
  rotating: boolean,
  zooming: boolean,
  moving: boolean,
+ gpuTiming: boolean,
  fadeDuration: number
 }
 
@@ -120,6 +121,7 @@ class Painter {
  cache: { [string]: Program<*> };
  crossTileSymbolIndex: CrossTileSymbolIndex;
  symbolFadeChange: number;
+ gpuTimers: { [string]: any };
 
  constructor(gl: WebGLRenderingContext, transform: Transform) {
  this.context = new Context(gl);
@@ -138,6 +140,8 @@ class Painter {
  this.emptyProgramConfiguration = new ProgramConfiguration();
 
  this.crossTileSymbolIndex = new CrossTileSymbolIndex();
+
+ this.gpuTimers = {};
  }
 
  /*
@@ -455,7 +459,52 @@ class Painter {
  if (layer.type !== 'background' && layer.type !== 'custom' && !coords.length) return;
  this.id = layer.id;
 
+ this.gpuTimingStart(layer);
  draw[layer.type](painter, sourceCache, layer, coords, this.style.placement.variableOffsets);
+ this.gpuTimingEnd();
+ }
+
+ gpuTimingStart(layer: StyleLayer) {
+ if (!this.options.gpuTiming) return;
+ const ext = this.context.extTimerQuery;
+ // This tries to time the draw call itself, but note that the cost for drawing a layer
+ // may be dominated by the cost of uploading vertices to the GPU.
+ // To instrument that, we'd need to pass the layerTimers object down into the bucket
+ // uploading logic.
+ let layerTimer = this.gpuTimers[layer.id];
+ if (!layerTimer) {
+ layerTimer = this.gpuTimers[layer.id] = {
+ calls: 0,
+ cpuTime: 0,
+ query: ext.createQueryEXT()
+ };
+ }
+ layerTimer.calls++;
+ ext.beginQueryEXT(ext.TIME_ELAPSED_EXT, layerTimer.query);
+ }
+
+ gpuTimingEnd() {
+ if (!this.options.gpuTiming) return;
+ const ext = this.context.extTimerQuery;
+ ext.endQueryEXT(ext.TIME_ELAPSED_EXT);
+ }
+
+ collectGpuTimers() {
+ const currentLayerTimers = this.gpuTimers;
+ this.gpuTimers = {};
+ return currentLayerTimers;
+ }
+
+ queryGpuTimers(gpuTimers: {[string]: any}) {
+ const layers = {};
+ for (const layerId in gpuTimers) {
+ const gpuTimer = gpuTimers[layerId];
+ const ext = this.context.extTimerQuery;
+ const gpuTime = ext.getQueryObjectEXT(gpuTimer.query, ext.QUERY_RESULT_EXT) / (1000 * 1000);
+ ext.deleteQueryEXT(gpuTimer.query);
+ layers[layerId] = gpuTime;
+ }
+ return layers;
  }
 
  /**

src/ui/map.js

@@ -1915,6 +1915,14 @@ class Map extends Camera {
  * @private
  */
  _render() {
+ let gpuTimer, frameStartTime = 0;
+ const extTimerQuery = this.painter.context.extTimerQuery;
+ if (this.listens('gpu-timing-frame')) {
+ gpuTimer = extTimerQuery.createQueryEXT();
+ extTimerQuery.beginQueryEXT(extTimerQuery.TIME_ELAPSED_EXT, gpuTimer);
+ frameStartTime = browser.now();
+ }
+
  // A custom layer may have used the context asynchronously. Mark the state as dirty.
  this.painter.context.setDirty();
  this.painter.setBaseState();
@@ -1966,6 +1974,7 @@ class Map extends Camera {
  rotating: this.isRotating(),
  zooming: this.isZooming(),
  moving: this.isMoving(),
+ gpuTiming: !!this.listens('gpu-timing-layer'),
  fadeDuration: this._fadeDuration
  });
 
@@ -1987,6 +1996,33 @@ class Map extends Camera {
  this.style._releaseSymbolFadeTiles();
  }
 
+ if (this.listens('gpu-timing-frame')) {
+ const renderCPUTime = browser.now() - frameStartTime;
+ extTimerQuery.endQueryEXT(extTimerQuery.TIME_ELAPSED_EXT, gpuTimer);
+ setTimeout(() => {
+ const renderGPUTime = extTimerQuery.getQueryObjectEXT(gpuTimer, extTimerQuery.QUERY_RESULT_EXT) / (1000 * 1000);
+ extTimerQuery.deleteQueryEXT(gpuTimer);
+ this.fire(new Event('gpu-timing-frame', {
+ cpuTime: renderCPUTime,
+ gpuTime: renderGPUTime
+ }));
+ }, 50); // Wait 50ms to give time for all GPU calls to finish before querying
+ }
+
+ if (this.listens('gpu-timing-layer')) {
+ // Resetting the Painter's per-layer timing queries here allows us to isolate
+ // the queries to individual frames.
+ const frameLayerQueries = this.painter.collectGpuTimers();
+
+ setTimeout(() => {
+ const renderedLayerTimes = this.painter.queryGpuTimers(frameLayerQueries);
+
+ this.fire(new Event('gpu-timing-layer', {
+ layerTimes: renderedLayerTimes
+ }));
+ }, 50); // Wait 50ms to give time for all GPU calls to finish before querying
+ }
+
  // Schedule another render frame if it's needed.
  //
  // Even though `_styleDirty` and `_sourcesDirty` are reset in this
@@ -1997,6 +2033,7 @@ class Map extends Camera {
  } else if (!this.isMoving() && this.loaded()) {
  this.fire(new Event('idle'));
  }
+
  return this;
  }