@luma.gl/webgl 9.0.0-beta.4 → 9.0.0-beta.6

package/dist/classic/typed-array-utils.js

@@ -1,91 +1,106 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import { GL } from '@luma.gl/constants';
 const ERR_TYPE_DEDUCTION = 'Failed to deduce GL constant from typed array';
+/**
+ * Converts TYPED ARRAYS to corresponding GL constant
+ * Used to auto deduce gl parameter types
+ * @deprecated Use getDataTypeFromTypedArray
+ * @param arrayOrType
+ * @returns
+ */
 export function getGLTypeFromTypedArray(arrayOrType) {
-  const type = ArrayBuffer.isView(arrayOrType) ? arrayOrType.constructor : arrayOrType;
-  switch (type) {
-    case Float32Array:
-      return 5126;
-    case Uint16Array:
-      return 5123;
-    case Uint32Array:
-      return 5125;
-    case Uint8Array:
-      return 5121;
-    case Uint8ClampedArray:
-      return 5121;
-    case Int8Array:
-      return 5120;
-    case Int16Array:
-      return 5122;
-    case Int32Array:
-      return 5124;
-    default:
-      throw new Error(ERR_TYPE_DEDUCTION);
-  }
+    // If typed array, look up constructor
+    const type = ArrayBuffer.isView(arrayOrType) ? arrayOrType.constructor : arrayOrType;
+    switch (type) {
+        case Float32Array:
+            return GL.FLOAT;
+        case Uint16Array:
+            return GL.UNSIGNED_SHORT;
+        case Uint32Array:
+            return GL.UNSIGNED_INT;
+        case Uint8Array:
+            return GL.UNSIGNED_BYTE;
+        case Uint8ClampedArray:
+            return GL.UNSIGNED_BYTE;
+        case Int8Array:
+            return GL.BYTE;
+        case Int16Array:
+            return GL.SHORT;
+        case Int32Array:
+            return GL.INT;
+        default:
+            throw new Error(ERR_TYPE_DEDUCTION);
+    }
 }
+/**
+ * Converts GL constant to corresponding TYPED ARRAY
+ * Used to auto deduce gl parameter types
+ * @deprecated Use getTypedArrayFromDataType
+ * @param glType
+ * @param param1
+ * @returns
+ */
+// eslint-disable-next-line complexity
 export function getTypedArrayFromGLType(glType, options) {
-  const {
-    clamped = true
-  } = options || {};
-  switch (glType) {
-    case 5126:
-      return Float32Array;
-    case 5123:
-    case 33635:
-    case 32819:
-    case 32820:
-      return Uint16Array;
-    case 5125:
-      return Uint32Array;
-    case 5121:
-      return clamped ? Uint8ClampedArray : Uint8Array;
-    case 5120:
-      return Int8Array;
-    case 5122:
-      return Int16Array;
-    case 5124:
-      return Int32Array;
-    default:
-      throw new Error('Failed to deduce typed array type from GL constant');
-  }
+    const { clamped = true } = options || {};
+    // Sorted in some order of likelihood to reduce amount of comparisons
+    switch (glType) {
+        case GL.FLOAT:
+            return Float32Array;
+        case GL.UNSIGNED_SHORT:
+        case GL.UNSIGNED_SHORT_5_6_5:
+        case GL.UNSIGNED_SHORT_4_4_4_4:
+        case GL.UNSIGNED_SHORT_5_5_5_1:
+            return Uint16Array;
+        case GL.UNSIGNED_INT:
+            return Uint32Array;
+        case GL.UNSIGNED_BYTE:
+            return clamped ? Uint8ClampedArray : Uint8Array;
+        case GL.BYTE:
+            return Int8Array;
+        case GL.SHORT:
+            return Int16Array;
+        case GL.INT:
+            return Int32Array;
+        default:
+            throw new Error('Failed to deduce typed array type from GL constant');
+    }
 }
+/**
+ * Flip rows (can be used on arrays returned from `Framebuffer.readPixels`)
+ * https: *stackoverflow.com/questions/41969562/
+ * how-can-i-flip-the-result-of-webglrenderingcontext-readpixels
+ * @param param0
+ */
 export function flipRows(options) {
-  const {
-    data,
-    width,
-    height,
-    bytesPerPixel = 4,
-    temp
-  } = options;
-  const bytesPerRow = width * bytesPerPixel;
-  const tempBuffer = temp || new Uint8Array(bytesPerRow);
-  for (let y = 0; y < height / 2; ++y) {
-    const topOffset = y * bytesPerRow;
-    const bottomOffset = (height - y - 1) * bytesPerRow;
-    tempBuffer.set(data.subarray(topOffset, topOffset + bytesPerRow));
-    data.copyWithin(topOffset, bottomOffset, bottomOffset + bytesPerRow);
-    data.set(tempBuffer, bottomOffset);
-  }
+    const { data, width, height, bytesPerPixel = 4, temp } = options;
+    const bytesPerRow = width * bytesPerPixel;
+    // make a temp buffer to hold one row
+    const tempBuffer = temp || new Uint8Array(bytesPerRow);
+    for (let y = 0; y < height / 2; ++y) {
+        const topOffset = y * bytesPerRow;
+        const bottomOffset = (height - y - 1) * bytesPerRow;
+        // make copy of a row on the top half
+        tempBuffer.set(data.subarray(topOffset, topOffset + bytesPerRow));
+        // copy a row from the bottom half to the top
+        data.copyWithin(topOffset, bottomOffset, bottomOffset + bytesPerRow);
+        // copy the copy of the top half row to the bottom half
+        data.set(tempBuffer, bottomOffset);
+    }
 }
 export function scalePixels(options) {
-  const {
-    data,
-    width,
-    height
-  } = options;
-  const newWidth = Math.round(width / 2);
-  const newHeight = Math.round(height / 2);
-  const newData = new Uint8Array(newWidth * newHeight * 4);
-  for (let y = 0; y < newHeight; y++) {
-    for (let x = 0; x < newWidth; x++) {
-      for (let c = 0; c < 4; c++) {
-        newData[(y * newWidth + x) * 4 + c] = data[(y * 2 * width + x * 2) * 4 + c];
-      }
+    const { data, width, height } = options;
+    const newWidth = Math.round(width / 2);
+    const newHeight = Math.round(height / 2);
+    const newData = new Uint8Array(newWidth * newHeight * 4);
+    for (let y = 0; y < newHeight; y++) {
+        for (let x = 0; x < newWidth; x++) {
+            for (let c = 0; c < 4; c++) {
+                newData[(y * newWidth + x) * 4 + c] = data[(y * 2 * width + x * 2) * 4 + c];
+            }
+        }
     }
-  }
-  return {
-    data: newData,
-    width: newWidth,
-    height: newHeight
-  };
+    return { data: newData, width: newWidth, height: newHeight };
 }
-//# sourceMappingURL=typed-array-utils.js.map

package/dist/context/context/context-data.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Stores luma.gl specific state associated with a context
+ */
+export interface WebGLContextData {
+    _polyfilled: boolean;
+    _extensions: Record<string, any>;
+}
+/**
+ * Gets luma.gl specific state from a context
+ * @returns context state
+ */
+export declare function getContextData(gl: WebGL2RenderingContext): WebGLContextData;
+export declare function initializeExtensions(gl: WebGL2RenderingContext): void;
+//# sourceMappingURL=context-data.d.ts.map

package/dist/context/context/context-data.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-data.d.ts","sourceRoot":"","sources":["../../../src/context/context/context-data.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAClC;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAAE,EAAE,sBAAsB,GAAG,gBAAgB,CAc3E;AAED,wBAAgB,oBAAoB,CAAC,EAAE,EAAE,sBAAsB,GAAG,IAAI,CAYrE"}

package/dist/context/context/context-data.js

@@ -0,0 +1,33 @@
+// luma.gl, MIT license
+// Copyright (c) vis.gl contributors
+/**
+ * Gets luma.gl specific state from a context
+ * @returns context state
+ */
+export function getContextData(gl) {
+    // @ts-expect-error
+    const luma = gl.luma;
+    if (!luma) {
+        const contextState = {
+            _polyfilled: false,
+            _extensions: {}
+        };
+        // @ts-expect-error
+        gl.luma = contextState;
+    }
+    // @ts-expect-error
+    return gl.luma;
+}
+export function initializeExtensions(gl) {
+    const contextState = getContextData(gl);
+    // `getSupportedExtensions` can return null when context is lost.
+    const EXTENSIONS = gl.getSupportedExtensions() || [];
+    // Generates warnings in Chrome
+    const IGNORE_EXTENSIONS = ['WEBGL_polygon_mode'];
+    for (const extensionName of EXTENSIONS) {
+        if (!IGNORE_EXTENSIONS.includes(extensionName)) {
+            const extension = gl.getExtension(extensionName);
+            contextState._extensions[extensionName] = extension;
+        }
+    }
+}

package/dist/context/context/create-browser-context.d.ts

@@ -1,7 +1,5 @@
 /**
  * ContextProps
- * @param webgl2 Set to false to not create a WebGL2 context (force webgl1)
- * @param webgl1 set to false to not create a WebGL1 context (fail if webgl2 not available)
  * @param onContextLost
  * @param onContextRestored
  *
@@ -16,9 +14,6 @@
  * @param failIfMajorPerformanceCaveat Do not create if the system performance is low.
  */
 type ContextProps = {
-    type?: 'webgl' | 'webgl1' | 'webgl2' | string;
-    webgl1?: boolean;
-    webgl2?: boolean;
     onContextLost?: (event: Event) => void;
     onContextRestored?: (event: Event) => void;
     alpha?: boolean;
@@ -35,6 +30,6 @@ type ContextProps = {
  * Note calling this multiple time on the same canvas does return the same context
  * @param canvas A canvas element or offscreen canvas
  */
-export declare function createBrowserContext(canvas: HTMLCanvasElement | OffscreenCanvas, props: ContextProps): WebGLRenderingContext;
+export declare function createBrowserContext(canvas: HTMLCanvasElement | OffscreenCanvas, props: ContextProps): WebGL2RenderingContext;
 export {};
 //# sourceMappingURL=create-browser-context.d.ts.map

package/dist/context/context/create-browser-context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"create-browser-context.d.ts","sourceRoot":"","sources":["../../../src/context/context/create-browser-context.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;GAgBG;AACH,KAAK,YAAY,GAAG;IAClB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC9C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACvC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAC3C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,eAAe,CAAC,EAAE,SAAS,GAAG,kBAAkB,GAAG,WAAW,CAAC;IAC/D,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC,CAAC;AAYF;;;;GAIG;AACH,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,iBAAiB,GAAG,eAAe,EAC3C,KAAK,EAAE,YAAY,GAClB,qBAAqB,CAiEvB"}
+{"version":3,"file":"create-browser-context.d.ts","sourceRoot":"","sources":["../../../src/context/context/create-browser-context.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;GAcG;AACH,KAAK,YAAY,GAAG;IAClB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACvC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAC3C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,eAAe,CAAC,EAAE,SAAS,GAAG,kBAAkB,GAAG,WAAW,CAAC;IAC/D,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC,CAAC;AAUF;;;;GAIG;AACH,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,iBAAiB,GAAG,eAAe,EAC3C,KAAK,EAAE,YAAY,GAClB,sBAAsB,CA+CxB"}

package/dist/context/context/create-browser-context.js

@@ -1,53 +1,66 @@
+// luma.gl, MIT license
+// Copyright (c) vis.gl contributors
 const DEFAULT_CONTEXT_PROPS = {
-  webgl2: true,
-  webgl1: true,
-  powerPreference: 'high-performance',
-  onContextLost: () => console.error('WebGL context lost'),
-  onContextRestored: () => console.info('WebGL context restored')
+    powerPreference: 'high-performance', // After all, most apps are using WebGL for performance reasons
+    // eslint-disable-next-line no-console
+    onContextLost: () => console.error('WebGL context lost'),
+    // eslint-disable-next-line no-console
+    onContextRestored: () => console.info('WebGL context restored')
 };
+/**
+ * Create a WebGL context for a canvas
+ * Note calling this multiple time on the same canvas does return the same context
+ * @param canvas A canvas element or offscreen canvas
+ */
 export function createBrowserContext(canvas, props) {
-  props = {
-    ...DEFAULT_CONTEXT_PROPS,
-    ...props
-  };
-  let errorMessage = null;
-  const onCreateError = error => errorMessage = error.statusMessage || errorMessage;
-  canvas.addEventListener('webglcontextcreationerror', onCreateError, false);
-  let gl = null;
-  if (props.type === 'webgl2') {
-    props = {
-      ...props,
-      webgl1: false
-    };
-  }
-  if (props.type === 'webgl1') {
-    props = {
-      ...props,
-      webgl2: false
-    };
-  }
-  if (!gl && props.webgl2) {
-    gl = canvas.getContext('webgl2', props);
-  }
-  if (!gl && props.webgl1) {
-    gl = canvas.getContext('webgl', props);
-  }
-  canvas.removeEventListener('webglcontextcreationerror', onCreateError, false);
-  if (!gl) {
-    throw new Error(`Failed to create ${props.webgl2 && !props.webgl1 ? 'WebGL2' : 'WebGL'} context: ${errorMessage || 'Unknown error'}`);
-  }
-  if (props.onContextLost) {
-    const {
-      onContextLost
-    } = props;
-    canvas.addEventListener('webglcontextlost', event => onContextLost(event), false);
-  }
-  if (props.onContextRestored) {
-    const {
-      onContextRestored
-    } = props;
-    canvas.addEventListener('webglcontextrestored', event => onContextRestored(event), false);
-  }
-  return gl;
+    props = { ...DEFAULT_CONTEXT_PROPS, ...props };
+    // Try to extract any extra information about why context creation failed
+    let errorMessage = null;
+    const onCreateError = error => (errorMessage = error.statusMessage || errorMessage);
+    canvas.addEventListener('webglcontextcreationerror', onCreateError, false);
+    // Create the desired context
+    let gl = null;
+    // props.failIfMajorPerformanceCaveat = true;
+    // We require webgl2 context
+    gl ||= canvas.getContext('webgl2', props);
+    // Software GPU
+    // props.failIfMajorPerformanceCaveat = false;
+    // if (!gl && props.webgl1) {
+    //   gl = canvas.getContext('webgl', props);
+    // }
+    // TODO are we removing this listener before giving it a chance to fire?
+    canvas.removeEventListener('webglcontextcreationerror', onCreateError, false);
+    if (!gl) {
+        throw new Error(`Failed to create WebGL context: ${errorMessage || 'Unknown error'}`);
+    }
+    if (props.onContextLost) {
+        // Carefully extract and wrap callbacks to prevent addEventListener from rebinding them.
+        const { onContextLost } = props;
+        canvas.addEventListener('webglcontextlost', (event) => onContextLost(event), false);
+    }
+    if (props.onContextRestored) {
+        // Carefully extract and wrap callbacks to prevent addEventListener from rebinding them.
+        const { onContextRestored } = props;
+        canvas.addEventListener('webglcontextrestored', (event) => onContextRestored(event), false);
+    }
+    return gl;
 }
-//# sourceMappingURL=create-browser-context.js.map
+/* TODO - can we call this asynchronously to catch the error events?
+export async function createBrowserContextAsync(canvas: HTMLCanvasElement | OffscreenCanvas, props: ContextProps): Promise<WebGL2RenderingContext> {
+  props = {...DEFAULT_CONTEXT_PROPS, ...props};
+
+ // Try to extract any extra information about why context creation failed
+ let errorMessage = null;
+ const onCreateError = (error) => (errorMessage = error.statusMessage || errorMessage);
+ canvas.addEventListener('webglcontextcreationerror', onCreateError, false);
+
+ const gl = createBrowserContext(canvas, props);
+
+ // Give the listener a chance to fire
+ await new Promise(resolve => setTimeout(resolve, 0));
+
+ canvas.removeEventListener('webglcontextcreationerror', onCreateError, false);
+
+ return gl;
+}
+*/

package/dist/context/debug/spector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"spector.d.ts","sourceRoot":"","sources":["../../../src/context/debug/spector.ts"],"names":[],"mappings":"AAKA,2CAA2C;AAC3C,KAAK,YAAY,GAAG;IAClB,wBAAwB;IACxB,MAAM,CAAC,EAAE,iBAAiB,GAAG,eAAe,CAAC;IAC7C,0DAA0D;IAC1D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,kCAAkC;IAClC,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;CACrC,CAAC;AAaF,OAAO,CAAC,MAAM,CAAC;IAEb,IAAI,OAAO,EAAE,GAAG,CAAC;CAClB;AAED,sDAAsD;AACtD,wBAAsB,aAAa,CAAC,KAAK,CAAC,EAAE,YAAY,iBAQvD;AAED,wBAAgB,mBAAmB,CAAC,KAAK,CAAC,EAAE,YAAY,OAoDvD"}
+{"version":3,"file":"spector.d.ts","sourceRoot":"","sources":["../../../src/context/debug/spector.ts"],"names":[],"mappings":"AAMA,2CAA2C;AAC3C,KAAK,YAAY,GAAG;IAClB,wBAAwB;IACxB,MAAM,CAAC,EAAE,iBAAiB,GAAG,eAAe,CAAC;IAC7C,0DAA0D;IAC1D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,kCAAkC;IAClC,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;CACrC,CAAC;AAaF,OAAO,CAAC,MAAM,CAAC;IAEb,IAAI,OAAO,EAAE,GAAG,CAAC;CAClB;AAED,sDAAsD;AACtD,wBAAsB,aAAa,CAAC,KAAK,CAAC,EAAE,YAAY,iBAQvD;AAED,wBAAgB,mBAAmB,CAAC,KAAK,CAAC,EAAE,YAAY,OAsDvD"}

package/dist/context/debug/spector.js

@@ -1,64 +1,69 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
 import { log, loadScript } from '@luma.gl/core';
 const DEFAULT_SPECTOR_PROPS = {
-  spector: log.get('spector') || log.get('inspect')
+    spector: log.get('spector') || log.get('inspect')
 };
+// https://github.com/BabylonJS/Spector.js#basic-usage
 const SPECTOR_CDN_URL = 'https://spectorcdn.babylonjs.com/spector.bundle.js';
 const LOG_LEVEL = 1;
 let spector = null;
 let initialized = false;
+/** Loads spector from CDN if not already installed */
 export async function loadSpectorJS(props) {
-  if (!globalThis.SPECTOR) {
-    try {
-      await loadScript(SPECTOR_CDN_URL);
-    } catch (error) {
-      log.warn(String(error));
+    if (!globalThis.SPECTOR) {
+        try {
+            await loadScript(SPECTOR_CDN_URL);
+        }
+        catch (error) {
+            log.warn(String(error));
+        }
     }
-  }
 }
 export function initializeSpectorJS(props) {
-  var _props, _props2;
-  props = {
-    ...DEFAULT_SPECTOR_PROPS,
-    ...props
-  };
-  if (!((_props = props) !== null && _props !== void 0 && _props.spector)) {
-    return null;
-  }
-  if (!spector && globalThis.SPECTOR) {
-    log.probe(LOG_LEVEL, 'SPECTOR found and initialized')();
-    spector = new globalThis.SPECTOR.Spector();
-    if (globalThis.luma) {
-      globalThis.luma.spector = spector;
+    props = { ...DEFAULT_SPECTOR_PROPS, ...props };
+    if (!props?.spector) {
+        return null;
     }
-  }
-  if (!spector) {
-    return null;
-  }
-  if (!initialized) {
-    var _spector, _spector2;
-    initialized = true;
-    spector.spyCanvases();
-    (_spector = spector) === null || _spector === void 0 ? void 0 : _spector.onCaptureStarted.add(capture => log.info('Spector capture started:', capture)());
-    (_spector2 = spector) === null || _spector2 === void 0 ? void 0 : _spector2.onCapture.add(capture => {
-      var _spector3, _spector4, _spector5;
-      log.info('Spector capture complete:', capture)();
-      (_spector3 = spector) === null || _spector3 === void 0 ? void 0 : _spector3.getResultUI();
-      (_spector4 = spector) === null || _spector4 === void 0 ? void 0 : _spector4.resultView.display();
-      (_spector5 = spector) === null || _spector5 === void 0 ? void 0 : _spector5.resultView.addCapture(capture);
-    });
-  }
-  if ((_props2 = props) !== null && _props2 !== void 0 && _props2.canvas) {
-    var _spector6, _props3;
-    if (typeof props.spector === 'string' && props.spector !== props.canvas.id) {
-      return spector;
+    if (!spector && globalThis.SPECTOR) {
+        log.probe(LOG_LEVEL, 'SPECTOR found and initialized')();
+        spector = new globalThis.SPECTOR.Spector();
+        if (globalThis.luma) {
+            globalThis.luma.spector = spector;
+        }
     }
-    (_spector6 = spector) === null || _spector6 === void 0 ? void 0 : _spector6.startCapture((_props3 = props) === null || _props3 === void 0 ? void 0 : _props3.canvas, 500);
-    new Promise(resolve => setTimeout(resolve, 2000)).then(_ => {
-      var _spector7;
-      log.info('Spector capture stopped after 2 seconds')();
-      (_spector7 = spector) === null || _spector7 === void 0 ? void 0 : _spector7.stopCapture();
-    });
-  }
-  return spector;
+    if (!spector) {
+        return null;
+    }
+    if (!initialized) {
+        initialized = true;
+        // enables recording some extra information merged in the capture like texture memory sizes and formats
+        spector.spyCanvases();
+        // A callback when results are ready
+        spector?.onCaptureStarted.add((capture) => log.info('Spector capture started:', capture)());
+        spector?.onCapture.add((capture) => {
+            log.info('Spector capture complete:', capture)();
+            // Use undocumented Spector API to open the UI with our capture
+            // See https://github.com/BabylonJS/Spector.js/blob/767ad1195a25b85a85c381f400eb50a979239eca/src/spector.ts#L124
+            spector?.getResultUI();
+            spector?.resultView.display();
+            spector?.resultView.addCapture(capture);
+        });
+    }
+    if (props?.canvas) {
+        // @ts-expect-error If spector is specified as a canvas id, only monitor that canvas
+        if (typeof props.spector === 'string' && props.spector !== props.canvas.id) {
+            return spector;
+        }
+        // capture startup
+        // spector?.captureCanvas(props?.canvas);
+        spector?.startCapture(props?.canvas, 500); // 500 commands
+        new Promise(resolve => setTimeout(resolve, 2000)).then(_ => {
+            log.info('Spector capture stopped after 2 seconds')();
+            spector?.stopCapture();
+            // spector?.displayUI();
+        });
+    }
+    return spector;
 }
-//# sourceMappingURL=spector.js.map

package/dist/context/debug/webgl-developer-tools.d.ts

@@ -2,7 +2,6 @@ type DebugContextProps = {
     debug?: boolean;
     throwOnError?: boolean;
     break?: string[];
-    webgl2?: boolean;
 };
 declare global {
     var WebGLDebugUtils: any;
@@ -14,6 +13,6 @@ declare global {
  * @see https://github.com/vorg/webgl-debug
  */
 export declare function loadWebGLDeveloperTools(): Promise<void>;
-export declare function makeDebugContext(gl: WebGLRenderingContext, props?: DebugContextProps): WebGLRenderingContext | null;
+export declare function makeDebugContext(gl: WebGL2RenderingContext, props?: DebugContextProps): WebGL2RenderingContext | null;
 export {};
 //# sourceMappingURL=webgl-developer-tools.d.ts.map

package/dist/context/debug/webgl-developer-tools.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"webgl-developer-tools.d.ts","sourceRoot":"","sources":["../../../src/context/debug/webgl-developer-tools.ts"],"names":[],"mappings":"AAUA,KAAK,iBAAiB,GAAG;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAoBF,OAAO,CAAC,MAAM,CAAC;IAEb,IAAI,eAAe,EAAE,GAAG,CAAC;CAC1B;AAED;;;;;GAKG;AACH,wBAAsB,uBAAuB,IAAI,OAAO,CAAC,IAAI,CAAC,CAO7D;AAID,wBAAgB,gBAAgB,CAAC,EAAE,EAAE,qBAAqB,EAAE,KAAK,GAAE,iBAAsB,GAAG,qBAAqB,GAAG,IAAI,CAOvH"}
+{"version":3,"file":"webgl-developer-tools.d.ts","sourceRoot":"","sources":["../../../src/context/debug/webgl-developer-tools.ts"],"names":[],"mappings":"AAWA,KAAK,iBAAiB,GAAG;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;CAClB,CAAC;AAoBF,OAAO,CAAC,MAAM,CAAC;IAEb,IAAI,eAAe,EAAE,GAAG,CAAC;CAC1B;AAED;;;;;GAKG;AACH,wBAAsB,uBAAuB,IAAI,OAAO,CAAC,IAAI,CAAC,CAO7D;AAID,wBAAgB,gBAAgB,CAC9B,EAAE,EAAE,sBAAsB,EAC1B,KAAK,GAAE,iBAAsB,GAC5B,sBAAsB,GAAG,IAAI,CAO/B"}