Ensure that externally created contexts are polyfilled, tracked

examples/core/dof/app.js

@@ -379,8 +379,8 @@ export const animationLoopOptions = {
     const statsWidget = new StatsWidget(_animationLoop.stats, {
       containerStyle: 'position: absolute;top: 20px;left: 20px;'
     });
-    statsWidget.setFormatter('CPU Time', stat => `CPU Time: ${stat.getAverageTime().toFixed(2)}`);
-    statsWidget.setFormatter('GPU Time', stat => `GPU Time: ${stat.getAverageTime().toFixed(2)}`);
+    statsWidget.setFormatter('CPU Time', stat => `CPU Time: ${stat.getAverageTime().toFixed(2)}ms`);
+    statsWidget.setFormatter('GPU Time', stat => `GPU Time: ${stat.getAverageTime().toFixed(2)}ms`);
     statsWidget.setFormatter('Frame Rate', stat => `Frame Rate: ${stat.getHz().toFixed(2)}fps`);
 
     return {

examples/core/instancing/app.js

@@ -137,8 +137,8 @@ class AppAnimationLoop extends AnimationLoop {
     const statsWidget = new StatsWidget(this.stats, {
       containerStyle: 'position: absolute;top: 20px;left: 20px;'
     });
-    statsWidget.setFormatter('CPU Time', stat => `CPU Time: ${stat.getAverageTime().toFixed(2)}`);
-    statsWidget.setFormatter('GPU Time', stat => `GPU Time: ${stat.getAverageTime().toFixed(2)}`);
+    statsWidget.setFormatter('CPU Time', stat => `CPU Time: ${stat.getAverageTime().toFixed(2)}ms`);
+    statsWidget.setFormatter('GPU Time', stat => `GPU Time: ${stat.getAverageTime().toFixed(2)}ms`);
     statsWidget.setFormatter('Frame Rate', stat => `Frame Rate: ${stat.getHz().toFixed(2)}fps`);
 
     return {statsWidget};

examples/core/mandelbrot/app.js

@@ -101,8 +101,8 @@ const animationLoop = new AnimationLoop({
     const statsWidget = new StatsWidget(_animationLoop.stats, {
       containerStyle: 'position: absolute;top: 20px;left: 20px;'
     });
-    statsWidget.setFormatter('CPU Time', stat => `CPU Time: ${stat.getAverageTime().toFixed(2)}`);
-    statsWidget.setFormatter('GPU Time', stat => `GPU Time: ${stat.getAverageTime().toFixed(2)}`);
+    statsWidget.setFormatter('CPU Time', stat => `CPU Time: ${stat.getAverageTime().toFixed(2)}ms`);
+    statsWidget.setFormatter('GPU Time', stat => `GPU Time: ${stat.getAverageTime().toFixed(2)}ms`);
     statsWidget.setFormatter('Frame Rate', stat => `Frame Rate: ${stat.getHz().toFixed(2)}fps`);
 
     return {

modules/core/src/core/animation-loop.js

@@ -1,6 +1,11 @@
 /* global OffscreenCanvas */
 
-import {createGLContext, resizeGLContext, resetParameters} from '../webgl/context';
+import {
+  createGLContext,
+  instrumentGLContext,
+  resizeGLContext,
+  resetParameters
+} from '../webgl/context';
 import {getPageLoadPromise} from '../webgl/context';
 import {isWebGL, requestAnimationFrame, cancelAnimationFrame} from '../webgl/utils';
 import {log} from '../utils';
@@ -346,7 +351,7 @@ export default class AnimationLoop {
 
     // Create the WebGL context if necessary
     opts = Object.assign({}, opts, this.props.glOptions);
-    this.gl = this.props.gl || this.onCreateContext(opts);
+    this.gl = this.props.gl ? instrumentGLContext(this.props.gl, opts) : this.onCreateContext(opts);
 
     if (!isWebGL(this.gl)) {
       throw new Error('AnimationLoop.onCreateContext - illegal context returned');

modules/core/src/webgl/context/context.js

@@ -77,7 +77,7 @@ export function setContextDefaults(opts = {}) {
 /* eslint-disable complexity, max-statements */
 export function createGLContext(opts = {}) {
   opts = Object.assign({}, contextDefaults, opts);
-  const {canvas, width, height, throwOnError, manageState, debug} = opts;
+  const {canvas, width, height, throwOnError} = opts;
 
   // Error reporting function, enables exceptions to be disabled
   function onError(message) {
@@ -97,10 +97,24 @@ export function createGLContext(opts = {}) {
     // Create a headless-gl context under Node.js
     gl = createHeadlessContext({width, height, opts, onError});
   }
+
   if (!gl) {
     return null;
   }
 
+  gl = instrumentGLContext(gl);
+
+  // Log some debug info about the newly created context
+  logInfo(gl);
+
+  // Add to seer integration
+  return gl;
+}
+
+export function instrumentGLContext(gl, opts = {}) {
+  opts = Object.assign({}, contextDefaults, opts);
+  const {manageState, debug} = opts;
+
   // Install context state tracking
   if (manageState) {
     trackContextState(gl, {
@@ -120,10 +134,6 @@ export function createGLContext(opts = {}) {
     }
   }
 
-  // Log some debug info about the newly created context
-  logInfo(gl);
-
-  // Add to seer integration
   return gl;
 }
 

modules/core/src/webgl/context/index.js

@@ -9,6 +9,12 @@ export {
   getModifiedParameters
 } from '@luma.gl/webgl-state-tracker';
 
-export {createGLContext, destroyGLContext, resizeGLContext, setContextDefaults} from './context';
+export {
+  createGLContext,
+  instrumentGLContext,
+  destroyGLContext,
+  resizeGLContext,
+  setContextDefaults
+} from './context';
 
 export {getPageLoadPromise, getCanvas} from './create-canvas';