Merge b58cdaa into 62d93cb

docs/api-reference/deck.md

@@ -377,6 +377,26 @@ Notes:
 * The query methods offer more flexibility for developers to handle events compared to the built-in hover and click callbacks.
 
 
+## Member Variables
+
+#### metrics
+
+A map of various performance statistics for the last 60 frames of rendering. Metrics gathered in deck.gl are the following:
+- 'fps': average number of frames rendered per second
+- 'updateAttributesTime': time spent updating layer attributes
+- 'layersRedrawn': number of layers drawn
+- 'setPropsTime': time spent setting layer properties
+- 'drawCount': number of times the scene was rendered
+- 'gpuTime': total time spent on GPU processing
+- 'gpuTimePerFrame': average time spent on GPU processing per frame
+- 'cpuTime': total time spent on CPU processing
+- 'cpuTimePerFrame': average time spent on CPU processing per frame
+- 'bufferMemory': total GPU memory allocated for buffers
+- 'textureMemory': total GPU memory allocated for textures
+- 'renderbufferMemory': total GPU memory allocated for renderbuffers
+- 'gpuMemory': total allocated GPU memory
+
+
 ## Remarks
 
 * Since deck.gl is based on WebGL and uses a single WebGL context, it can only render into a single canvas. Thus all its `View`s will render into the same canvas (unless you use multiple DeckGL instances, but that can have significant resource and performance impact).

modules/core/src/lib/deck.js

@@ -28,7 +28,13 @@ import DeckPicker from './deck-picker';
 import log from '../utils/log';
 
 import GL from '@luma.gl/constants';
-import {AnimationLoop, createGLContext, trackContextState, setParameters} from '@luma.gl/core';
+import {
+  AnimationLoop,
+  createGLContext,
+  trackContextState,
+  setParameters,
+  lumaStats
+} from '@luma.gl/core';
 import {Stats} from 'probe.gl';
 import {EventManager} from 'mjolnir.js';
 
@@ -157,6 +163,22 @@ export default class Deck {
     this.animationLoop = this._createAnimationLoop(props);
 
     this.stats = new Stats({id: 'deck.gl'});
+    this.metrics = {
+      fps: 0,
+      setPropsTime: 0,
+      updateAttributesTime: 0,
+      drawCount: 0,
+      layersRedrawn: 0,
+      gpuTime: 0,
+      gpuTimePerFrame: 0,
+      cpuTime: 0,
+      cpuTimePerFrame: 0,
+      bufferMemory: 0,
+      textureMemory: 0,
+      renderbufferMemory: 0,
+      gpuMemory: 0
+    };
+    this._metricsCounter = 0;
 
     this.setProps(props);
 
@@ -638,26 +660,17 @@ export default class Deck {
   }
 
   _onRenderFrame(animationProps) {
-    this.stats.get('frameRate').timeEnd();
-    this.stats.get('frameRate').timeStart();
+    this._getFrameStats();
 
     // Log perf stats every second
-    if (animationProps.tick % 60 === 0) {
-      const table = {};
-      this.stats.forEach(stat => {
-        table[stat.name] = {
-          time: stat.time || 0,
-          count: stat.count || 0,
-          average: stat.getAverageTime() || 0,
-          hz: stat.getHz() || 0
-        };
-      });
+    if (this._metricsCounter++ % 60 === 0) {
+      this._getMetrics();
       this.stats.reset();
-      log.table(3, table)();
+      log.table(3, this.metrics)();
 
       // Experimental: report metrics
       if (this.props._onMetrics) {
-        this.props._onMetrics(table);
+        this.props._onMetrics(this.metrics);
       }
     }
 
@@ -766,6 +779,63 @@ export default class Deck {
       mode: 'hover'
     });
   }
+
+  _getFrameStats() {
+    this.stats.get('frameRate').timeEnd();
+    this.stats.get('frameRate').timeStart();
+
+    // Get individual stats from luma.gl so reset works
+    const animationLoopStats = this.animationLoop.stats;
+    this.stats
+      .get('GPU Time')
+      .addTime(
+        animationLoopStats.get('GPU Time') ? animationLoopStats.get('GPU Time').lastTiming : 0
+      );
+    this.stats
+      .get('CPU Time')
+      .addTime(
+        animationLoopStats.get('CPU Time') ? animationLoopStats.get('CPU Time').lastTiming : 0
+      );
+  }
+
+  /* eslint-disable complexity */
+  _getMetrics() {
+    this.metrics.fps = this.stats.get('frameRate') ? this.stats.get('frameRate').getHz() : 0;
+    this.metrics.setPropsTime = this.stats.get('setProps Time')
+      ? this.stats.get('setProps Time').time
+      : 0;
+    this.metrics.updateAttributesTime = this.stats.get('Update Attributes')
+      ? this.stats.get('Update Attributes').time
+      : 0;
+    this.metrics.drawCount = this.stats.get('Redraw Count')
+      ? this.stats.get('Redraw Count').count
+      : 0;
+    this.metrics.layersRedrawn = this.stats.get('Redraw Layers')
+      ? this.stats.get('Redraw Layers').count
+      : 0;
+    this.metrics.gpuTime = this.stats.get('GPU Time') ? this.stats.get('GPU Time').time : 0;
+    this.metrics.cpuTime = this.stats.get('CPU Time') ? this.stats.get('CPU Time').time : 0;
+    this.metrics.gpuTimePerFrame = this.stats.get('GPU Time')
+      ? this.stats.get('GPU Time').getAverageTime()
+      : 0;
+    this.metrics.cpuTimePerFrame = this.stats.get('CPU Time')
+      ? this.stats.get('CPU Time').getAverageTime()
+      : 0;
+
+    const memoryStats = lumaStats.get('Memory Usage');
+    this.metrics.bufferMemory = memoryStats.get('Buffer Memory')
+      ? memoryStats.get('Buffer Memory').count
+      : 0;
+    this.metrics.textureMemory = memoryStats.get('Texture Memory')
+      ? memoryStats.get('Texture Memory').count
+      : 0;
+    this.metrics.renderbufferMemory = memoryStats.get('Renderbuffer Memory')
+      ? memoryStats.get('Renderbuffer Memory').count
+      : 0;
+    this.metrics.gpuMemory = memoryStats.get('Memory Usage')
+      ? memoryStats.get('Memory Usage').count
+      : 0;
+  }
 }
 
 Deck.getPropTypes = getPropTypes;