@luma.gl/webgl 9.1.0-alpha.2 → 9.1.0-beta.1

package/src/adapter/webgl-adapter.ts

@@ -0,0 +1,105 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {Adapter, Device, DeviceProps, log} from '@luma.gl/core';
+import {WebGLDevice} from './webgl-device';
+import {enforceWebGL2} from '../context/polyfills/polyfill-webgl1-extensions';
+import {loadSpectorJS, DEFAULT_SPECTOR_PROPS} from '../context/debug/spector';
+import {loadWebGLDeveloperTools} from '../context/debug/webgl-developer-tools';
+
+const LOG_LEVEL = 1;
+
+export class WebGLAdapter extends Adapter {
+  /** type of device's created by this adapter */
+  readonly type: Device['type'] = 'webgl';
+
+  constructor() {
+    super();
+
+    // Add spector default props to device default props, so that runtime settings are observed
+    Device.defaultProps = {...Device.defaultProps, ...DEFAULT_SPECTOR_PROPS};
+
+    // @ts-ignore DEPRECATED For backwards compatibility luma.registerDevices
+    WebGLDevice.adapter = this;
+  }
+
+  /** Check if WebGL 2 is available */
+  isSupported(): boolean {
+    return typeof WebGL2RenderingContext !== 'undefined';
+  }
+
+  /** Force any created WebGL contexts to be WebGL2 contexts, polyfilled with WebGL1 extensions */
+  enforceWebGL2(enable: boolean): void {
+    enforceWebGL2(enable);
+  }
+
+  /**
+   * Get a device instance from a GL context
+   * Creates and instruments the device if not already created
+   * @param gl
+   * @returns
+   */
+  async attach(gl: Device | WebGL2RenderingContext): Promise<WebGLDevice> {
+    if (gl instanceof WebGLDevice) {
+      return gl;
+    }
+    // @ts-expect-error
+    if (gl?.device instanceof Device) {
+      // @ts-expect-error
+      return gl.device as WebGLDevice;
+    }
+    if (!isWebGL(gl)) {
+      throw new Error('Invalid WebGL2RenderingContext');
+    }
+    return new WebGLDevice({_handle: gl as WebGL2RenderingContext});
+  }
+
+  async create(props: DeviceProps = {}): Promise<WebGLDevice> {
+    log.groupCollapsed(LOG_LEVEL, 'WebGLDevice created')();
+
+    const promises: Promise<unknown>[] = [];
+
+    // Load webgl and spector debug scripts from CDN if requested
+    if (props.debugWebGL || props.debug) {
+      promises.push(loadWebGLDeveloperTools());
+    }
+
+    if (props.debugSpectorJS) {
+      promises.push(loadSpectorJS(props));
+    }
+
+    // Wait for all the loads to settle before creating the context.
+    // The Device.create() functions are async, so in contrast to the constructor, we can `await` here.
+    const results = await Promise.allSettled(promises);
+    for (const result of results) {
+      if (result.status === 'rejected') {
+        log.error(`Failed to initialize debug libraries ${result.reason}`)();
+      }
+    }
+
+    const device = new WebGLDevice(props);
+
+    // Log some debug info about the newly created context
+    const message = `\
+Created ${device.type}${device.debug ? ' debug' : ''} context: \
+${device.info.vendor}, ${device.info.renderer} for canvas: ${device.canvasContext.id}`;
+    log.probe(LOG_LEVEL, message)();
+    log.table(LOG_LEVEL, device.info)();
+
+    log.groupEnd(LOG_LEVEL)();
+
+    return device;
+  }
+}
+
+/** Check if supplied parameter is a WebGL2RenderingContext */
+function isWebGL(gl: any): boolean {
+  if (typeof WebGL2RenderingContext !== 'undefined' && gl instanceof WebGL2RenderingContext) {
+    return true;
+  }
+  // Look for debug contexts, headless gl etc
+  return Boolean(gl && Number.isFinite(gl._version));
+}
+
+export const webgl2Adapter = new WebGLAdapter();

package/src/adapter/webgl-canvas-context.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import type {CanvasContextProps, TextureFormat} from '@luma.gl/core';
+import type {CanvasContextProps} from '@luma.gl/core';
 import {CanvasContext} from '@luma.gl/core';
 import {WebGLDevice} from './webgl-device';
 import {WEBGLFramebuffer} from './resources/webgl-framebuffer';
@@ -12,38 +12,31 @@ import {WEBGLFramebuffer} from './resources/webgl-framebuffer';
  */
 export class WebGLCanvasContext extends CanvasContext {
   readonly device: WebGLDevice;
-  readonly format: TextureFormat = 'rgba8unorm';
-  readonly depthStencilFormat: TextureFormat = 'depth24plus';
+  readonly handle: unknown = null;
 
-  presentationSize: [number, number];
   private _framebuffer: WEBGLFramebuffer | null = null;
 
+  get [Symbol.toStringTag](): string {
+    return 'WebGLCanvasContext';
+  }
+
   constructor(device: WebGLDevice, props: CanvasContextProps) {
     // Note: Base class creates / looks up the canvas (unless under Node.js)
     super(props);
     this.device = device;
-    this.presentationSize = [-1, -1];
+
+    // Base class constructor cannot access derived methods/fields, so we need to call these functions in the subclass constructor
     this._setAutoCreatedCanvasId(`${this.device.id}-canvas`);
-    this.update();
+    this.updateSize([this.drawingBufferWidth, this.drawingBufferHeight]);
   }
 
   getCurrentFramebuffer(): WEBGLFramebuffer {
-    this.update();
     // Setting handle to null returns a reference to the default framebuffer
     this._framebuffer = this._framebuffer || new WEBGLFramebuffer(this.device, {handle: null});
     return this._framebuffer;
   }
 
-  /** Resizes and updates render targets if necessary */
-  update() {
-    const size = this.getPixelSize();
-    const sizeChanged =
-      size[0] !== this.presentationSize[0] || size[1] !== this.presentationSize[1];
-    if (sizeChanged) {
-      this.presentationSize = size;
-      this.resize();
-    }
-  }
+  updateSize(size: [number, number]): void {}
 
   /**
    * Resize the canvas' drawing buffer.
@@ -60,10 +53,14 @@ export class WebGLCanvasContext extends CanvasContext {
   resize(options?: {width?: number; height?: number; useDevicePixels?: boolean | number}): void {
     if (!this.device.gl) return;
 
-    // Resize browser context .
+    if (this.props.autoResize) {
+      return;
+    }
+
+    // Resize browser context. TODO - this likely needs to be rewritten
     if (this.canvas) {
       const devicePixelRatio = this.getDevicePixelRatio(options?.useDevicePixels);
-      this.setDevicePixelRatio(devicePixelRatio, options);
+      this._setDevicePixelRatio(devicePixelRatio, options);
       return;
     }
   }

package/src/adapter/webgl-device.ts

@@ -3,30 +3,16 @@
 // Copyright (c) vis.gl contributors
 
 import type {TypedArray} from '@math.gl/types';
-import type {DeviceProps, DeviceInfo, CanvasContextProps, TextureFormat} from '@luma.gl/core';
-import type {Buffer, Texture, Framebuffer, VertexArray, VertexArrayProps} from '@luma.gl/core';
-import {Device, CanvasContext, log} from '@luma.gl/core';
-import type {GLExtensions} from '@luma.gl/constants';
-import {
-  popContextState,
-  pushContextState,
-  trackContextState
-} from '../context/state-tracker/track-context-state';
-import {createBrowserContext} from '../context/helpers/create-browser-context';
-import {getDeviceInfo} from './device-helpers/webgl-device-info';
-import {WebGLDeviceFeatures} from './device-helpers/webgl-device-features';
-import {WebGLDeviceLimits} from './device-helpers/webgl-device-limits';
-import {WebGLCanvasContext} from './webgl-canvas-context';
-import {loadSpectorJS, initializeSpectorJS} from '../context/debug/spector';
-import {loadWebGLDeveloperTools, makeDebugContext} from '../context/debug/webgl-developer-tools';
-import {
-  isTextureFormatSupported,
-  isTextureFormatRenderable,
-  isTextureFormatFilterable
-} from './converters/texture-formats';
-
-// WebGL classes
 import type {
+  DeviceProps,
+  DeviceInfo,
+  DeviceTextureFormatCapabilities,
+  CanvasContextProps,
+  Buffer,
+  Texture,
+  Framebuffer,
+  VertexArray,
+  VertexArrayProps,
   BufferProps,
   ShaderProps,
   // Sampler,
@@ -46,8 +32,22 @@ import type {
   // CommandEncoder,
   CommandEncoderProps,
   TransformFeedbackProps,
-  QuerySetProps
+  QuerySetProps,
+  Resource
 } from '@luma.gl/core';
+import {Device, CanvasContext, log} from '@luma.gl/core';
+import type {GLExtensions} from '@luma.gl/constants';
+import {WebGLStateTracker} from '../context/state-tracker/webgl-state-tracker';
+import {createBrowserContext} from '../context/helpers/create-browser-context';
+import {getDeviceInfo} from './device-helpers/webgl-device-info';
+import {WebGLDeviceFeatures} from './device-helpers/webgl-device-features';
+import {WebGLDeviceLimits} from './device-helpers/webgl-device-limits';
+import {WebGLCanvasContext} from './webgl-canvas-context';
+import type {Spector} from '../context/debug/spector-types';
+import {initializeSpectorJS} from '../context/debug/spector';
+import {makeDebugContext} from '../context/debug/webgl-developer-tools';
+import {getTextureFormatCapabilitiesWebGL} from './converters/webgl-texture-table';
+import {uid} from '../utils/uid';
 
 import {WEBGLBuffer} from './resources/webgl-buffer';
 import {WEBGLShader} from './resources/webgl-shader';
@@ -61,26 +61,18 @@ import {WEBGLVertexArray} from './resources/webgl-vertex-array';
 import {WEBGLTransformFeedback} from './resources/webgl-transform-feedback';
 import {WEBGLQuerySet} from './resources/webgl-query-set';
 
-import {readPixelsToArray, readPixelsToBuffer} from '../classic/copy-and-blit';
+import {readPixelsToArray, readPixelsToBuffer} from './helpers/webgl-texture-utils';
 import {
   setGLParameters,
   getGLParameters,
   resetGLParameters
 } from '../context/parameters/unified-parameter-api';
 import {withGLParameters} from '../context/state-tracker/with-parameters';
-import {clear} from '../classic/clear';
 import {getWebGLExtension} from '../context/helpers/webgl-extensions';
 
-const LOG_LEVEL = 1;
-
 /** WebGPU style Device API for a WebGL context */
 export class WebGLDevice extends Device {
-  //
   // Public `Device` API
-  //
-
-  /** type of this device */
-  static readonly type: string = 'webgl';
 
   /** type of this device */
   readonly type = 'webgl';
@@ -89,166 +81,129 @@ export class WebGLDevice extends Device {
   readonly handle: WebGL2RenderingContext;
   features: WebGLDeviceFeatures;
   limits: WebGLDeviceLimits;
-
   readonly info: DeviceInfo;
   readonly canvasContext: WebGLCanvasContext;
 
+  readonly preferredColorFormat = 'rgba8unorm';
+  readonly preferredDepthFormat = 'depth24plus';
+
   readonly lost: Promise<{reason: 'destroyed'; message: string}>;
 
   private _resolveContextLost?: (value: {reason: 'destroyed'; message: string}) => void;
 
-  //
-  // Static methods, expected to be present by `luma.createDevice()`
-  //
-
-  /** Check if WebGL 2 is available */
-  static isSupported(): boolean {
-    return typeof WebGL2RenderingContext !== 'undefined';
-  }
-
-  /**
-   * Get a device instance from a GL context
-   * Creates and instruments the device if not already created
-   * @param gl
-   * @returns
-   */
-  static attach(gl: Device | WebGL2RenderingContext): WebGLDevice {
-    if (gl instanceof WebGLDevice) {
-      return gl;
-    }
-    // @ts-expect-error
-    if (gl?.device instanceof Device) {
-      // @ts-expect-error
-      return gl.device as WebGLDevice;
-    }
-    if (!isWebGL(gl)) {
-      throw new Error('Invalid WebGL2RenderingContext');
-    }
-    return new WebGLDevice({gl: gl as WebGL2RenderingContext});
-  }
-
-  static async create(props: DeviceProps = {}): Promise<WebGLDevice> {
-    log.groupCollapsed(LOG_LEVEL, 'WebGLDevice created')();
-
-    const promises: Promise<unknown>[] = [];
-
-    // Load webgl and spector debug scripts from CDN if requested
-    if (props.debug) {
-      promises.push(loadWebGLDeveloperTools());
-    }
-
-    if (props.spector) {
-      promises.push(loadSpectorJS());
-    }
-
-    // Wait for page to load: if canvas is a string we need to query the DOM for the canvas element.
-    // We only wait when props.canvas is string to avoids setting the global page onload callback unless necessary.
-    if (typeof props.canvas === 'string') {
-      promises.push(CanvasContext.pageLoaded);
-    }
-
-    // Wait for all the loads to settle before creating the context.
-    // The Device.create() functions are async, so in contrast to the constructor, we can `await` here.
-    const results = await Promise.allSettled(promises);
-    for (const result of results) {
-      if (result.status === 'rejected') {
-        log.error(`Failed to initialize debug libraries ${result.reason}`)();
-      }
-    }
-
-    log.probe(LOG_LEVEL + 1, 'DOM is loaded')();
-
-    // @ts-expect-error
-    if (props.gl?.device) {
-      log.warn('reattaching existing device')();
-      return WebGLDevice.attach(props.gl);
-    }
-
-    const device = new WebGLDevice(props);
+  /** WebGL2 context. */
+  readonly gl: WebGL2RenderingContext;
+  readonly debug: boolean = false;
 
-    // Log some debug info about the newly created context
-    const message = `\
-Created ${device.type}${device.debug ? ' debug' : ''} context: \
-${device.info.vendor}, ${device.info.renderer} for canvas: ${device.canvasContext.id}`;
-    log.probe(LOG_LEVEL, message)();
-    log.table(LOG_LEVEL, device.info)();
+  /** State used by luma.gl classes: TODO - move to canvasContext*/
+  readonly _canvasSizeInfo = {clientWidth: 0, clientHeight: 0, devicePixelRatio: 1};
 
-    log.groupEnd(LOG_LEVEL)();
+  /** State used by luma.gl classes - TODO - not used? */
+  readonly _extensions: GLExtensions = {};
+  _polyfilled: boolean = false;
 
-    return device;
-  }
+  /** Instance of Spector.js (if initialized) */
+  spectorJS: Spector;
 
   //
   // Public API
   //
 
   constructor(props: DeviceProps) {
-    super({...props, id: props.id || 'webgl-device'});
+    super({...props, id: props.id || uid('webgl-device')});
+
+    // WebGL requires a canvas to be created before creating the context
+    if (!props.createCanvasContext) {
+      throw new Error('WebGLDevice requires props.createCanvasContext to be set');
+    }
+    const canvasContextProps = props.createCanvasContext === true ? {} : props.createCanvasContext;
 
     // If attaching to an already attached context, return the attached device
     // @ts-expect-error device is attached to context
-    const device: WebGLDevice | undefined = props.gl?.device;
+    let device: WebGLDevice | undefined = canvasContextProps.canvas?.gl?.device;
     if (device) {
       throw new Error(`WebGL context already attached to device ${device.id}`);
     }
 
     // Create and instrument context
-    const canvas = props.gl?.canvas || props.canvas;
-    this.canvasContext = new WebGLCanvasContext(this, {...props, canvas});
+    this.canvasContext = new WebGLCanvasContext(this, canvasContextProps);
 
     this.lost = new Promise<{reason: 'destroyed'; message: string}>(resolve => {
       this._resolveContextLost = resolve;
     });
 
-    let gl: WebGL2RenderingContext | null = props.gl || null;
-    gl ||= createBrowserContext(this.canvasContext.canvas, {
-      ...props,
-      onContextLost: (event: Event) =>
-        this._resolveContextLost?.({
-          reason: 'destroyed',
-          message: 'Entered sleep mode, or too many apps or browser tabs are using the GPU.'
-        })
-    });
+    const webglContextAttributes: WebGLContextAttributes = {...props.webgl};
+    // Copy props from CanvasContextProps
+    if (canvasContextProps.alphaMode === 'premultiplied') {
+      webglContextAttributes.premultipliedAlpha = true;
+    }
+    if (props.powerPreference !== undefined) {
+      webglContextAttributes.powerPreference = props.powerPreference;
+    }
+
+    const gl = createBrowserContext(
+      this.canvasContext.canvas,
+      {
+        onContextLost: (event: Event) =>
+          this._resolveContextLost?.({
+            reason: 'destroyed',
+            message: 'Entered sleep mode, or too many apps or browser tabs are using the GPU.'
+          }),
+        // eslint-disable-next-line no-console
+        onContextRestored: (event: Event) => console.log('WebGL context restored')
+      },
+      webglContextAttributes
+    );
 
     if (!gl) {
       throw new Error('WebGL context creation failed');
     }
 
+    // @ts-expect-error device is attached to context
+    device = gl.device;
+    if (device) {
+      throw new Error(`WebGL context already attached to device ${device.id}`);
+    }
+
     this.handle = gl;
     this.gl = gl;
 
+    // Add spector debug instrumentation to context
+    // We need to trust spector integration to decide if spector should be initialized
+    // We also run spector instrumentation first, otherwise spector can clobber luma instrumentation.
+    this.spectorJS = initializeSpectorJS({...this.props, gl: this.handle});
+
+    // Instrument context
     (this.gl as any).device = this; // Update GL context: Link webgl context back to device
     (this.gl as any)._version = 2; // Update GL context: Store WebGL version field on gl context (HACK to identify debug contexts)
 
-    // luma Device fields
+    // initialize luma Device fields
     this.info = getDeviceInfo(this.gl, this._extensions);
     this.limits = new WebGLDeviceLimits(this.gl);
-    this.features = new WebGLDeviceFeatures(this.gl, this._extensions, this.props.disabledFeatures);
-    if (this.props.initalizeFeatures) {
+    this.features = new WebGLDeviceFeatures(
+      this.gl,
+      this._extensions,
+      this.props._disabledFeatures
+    );
+    if (this.props._initializeFeatures) {
       this.features.initializeFeatures();
     }
 
-    this.canvasContext.resize();
-
     // Install context state tracking
-    // @ts-expect-error - hidden parameters
-    const {enable = true, copyState = false} = props;
-    trackContextState(this.gl, {
-      enable,
-      copyState,
+    const glState = new WebGLStateTracker(this.gl, {
       log: (...args: any[]) => log.log(1, ...args)()
     });
+    glState.trackState(this.gl, {copyState: false});
 
-    // DEBUG contexts: Add debug instrumentation to the context, force log level to at least 1
-    if (props.debug) {
-      this.gl = makeDebugContext(this.gl, {...props, throwOnError: true});
-      this.debug = true;
-      log.level = Math.max(log.level, 1);
+    // DEBUG contexts: Add luma debug instrumentation to the context, force log level to at least 1
+    const debugWebGL = props.debugWebGL || props.debug;
+    const traceWebGL = props.debugWebGL;
+    if (debugWebGL) {
+      this.gl = makeDebugContext(this.gl, {debugWebGL, traceWebGL});
       log.warn('WebGL debug mode activated. Performance reduced.')();
-    }
-
-    if (props.spector) {
-      this.spectorJS = initializeSpectorJS({...this.props, canvas: this.handle.canvas});
+      if (props.debugWebGL) {
+        log.level = Math.max(log.level, 1);
+      }
     }
   }
 
@@ -262,22 +217,6 @@ ${device.info.vendor}, ${device.info.renderer} for canvas: ${device.canvasContex
     return this.gl.isContextLost();
   }
 
-  getSize(): [number, number] {
-    return [this.gl.drawingBufferWidth, this.gl.drawingBufferHeight];
-  }
-
-  isTextureFormatSupported(format: TextureFormat): boolean {
-    return isTextureFormatSupported(this.gl, format, this._extensions);
-  }
-
-  isTextureFormatFilterable(format: TextureFormat): boolean {
-    return isTextureFormatFilterable(this.gl, format, this._extensions);
-  }
-
-  isTextureFormatRenderable(format: TextureFormat): boolean {
-    return isTextureFormatRenderable(this.gl, format, this._extensions);
-  }
-
   // IMPLEMENTATION OF ABSTRACT DEVICE
 
   createCanvasContext(props?: CanvasContextProps): CanvasContext {
@@ -285,12 +224,11 @@ ${device.info.vendor}, ${device.info.renderer} for canvas: ${device.canvasContex
   }
 
   createBuffer(props: BufferProps | ArrayBuffer | ArrayBufferView): WEBGLBuffer {
-    const newProps = this._getBufferProps(props);
+    const newProps = this._normalizeBufferProps(props);
     return new WEBGLBuffer(this, newProps);
   }
 
-  // _createTexture(props: TextureProps): WEBGLTexture {
-  _createTexture(props: TextureProps): Texture {
+  createTexture(props: TextureProps): WEBGLTexture {
     return new WEBGLTexture(this, props);
   }
 
@@ -407,38 +345,21 @@ ${device.info.vendor}, ${device.info.renderer} for canvas: ${device.canvasContex
     return withGLParameters(this.gl, parameters, func);
   }
 
-  override clearWebGL(options?: {
-    framebuffer?: Framebuffer;
-    color?: any;
-    depth?: any;
-    stencil?: any;
-  }): void {
-    clear(this, options);
-  }
-
   override resetWebGL(): void {
     log.warn('WebGLDevice.resetWebGL is deprecated, use only for debugging')();
     resetGLParameters(this.gl);
   }
 
+  override _getDeviceSpecificTextureFormatCapabilities(
+    capabilities: DeviceTextureFormatCapabilities
+  ): DeviceTextureFormatCapabilities {
+    return getTextureFormatCapabilitiesWebGL(this.gl, capabilities, this._extensions);
+  }
+
   //
   // WebGL-only API (not part of `Device` API)
   //
 
-  /** WebGL2 context. */
-  readonly gl: WebGL2RenderingContext;
-  readonly debug: boolean = false;
-
-  /** State used by luma.gl classes: TODO - move to canvasContext*/
-  readonly _canvasSizeInfo = {clientWidth: 0, clientHeight: 0, devicePixelRatio: 1};
-
-  /** State used by luma.gl classes - TODO - not used? */
-  readonly _extensions: GLExtensions = {};
-  _polyfilled: boolean = false;
-
-  /** Instance of Spector.js (if initialized) */
-  spectorJS: unknown;
-
   /**
    * Triggers device (or WebGL context) loss.
    * @note primarily intended for testing how application reacts to device loss
@@ -461,22 +382,14 @@ ${device.info.vendor}, ${device.info.renderer} for canvas: ${device.canvasContex
 
   /** Save current WebGL context state onto an internal stack */
   pushState(): void {
-    pushContextState(this.gl);
+    const webglState = WebGLStateTracker.get(this.gl);
+    webglState.push();
   }
 
   /** Restores previously saved context state */
   popState(): void {
-    popContextState(this.gl);
-  }
-
-  /**
-   * Storing data on a special field on WebGLObjects makes that data visible in SPECTOR chrome debug extension
-   * luma.gl ids and props can be inspected
-   */
-  setSpectorMetadata(handle: unknown, props: Record<string, unknown>) {
-    // @ts-expect-error
-    // eslint-disable-next-line camelcase
-    handle.__SPECTOR_Metadata = props;
+    const webglState = WebGLStateTracker.get(this.gl);
+    webglState.pop();
   }
 
   /**
@@ -484,18 +397,28 @@ ${device.info.vendor}, ${device.info.renderer} for canvas: ${device.canvasContex
    * Be aware that there are some duplicates especially for constants that are 0,
    * so this isn't guaranteed to return the right key in all cases.
    */
-  getGLKey(value: unknown, gl?: WebGL2RenderingContext): string {
-    // @ts-ignore expect-error depends on settings
-    gl = gl || this.gl2 || this.gl;
+  getGLKey(value: unknown, options?: {emptyIfUnknown?: boolean}): string {
     const number = Number(value);
-    for (const key in gl) {
+    for (const key in this.gl) {
       // @ts-ignore expect-error depends on settings
-      if (gl[key] === number) {
+      if (this.gl[key] === number) {
         return `GL.${key}`;
       }
     }
     // No constant found. Stringify the value and return it.
-    return String(value);
+    return options?.emptyIfUnknown ? '' : String(value);
+  }
+
+  /**
+   * Returns a map with any GL.<KEY> constants mapped to strings, both for keys and values
+   */
+  getGLKeys(glParameters: Record<number, unknown>): Record<string, string> {
+    const opts = {emptyIfUnknown: true};
+    return Object.entries(glParameters).reduce<Record<string, string>>((keys, [key, value]) => {
+      // eslint-disable-next-line @typescript-eslint/no-base-to-string
+      keys[`${key}:${this.getGLKey(key, opts)}`] = `${value}:${this.getGLKey(value, opts)}`;
+      return keys;
+    }, {});
   }
 
   /** Store constants */
@@ -539,15 +462,26 @@ ${device.info.vendor}, ${device.info.renderer} for canvas: ${device.canvasContex
     getWebGLExtension(this.gl, name, this._extensions);
     return this._extensions;
   }
-}
 
-/** Check if supplied parameter is a WebGL2RenderingContext */
-function isWebGL(gl: any): boolean {
-  if (typeof WebGL2RenderingContext !== 'undefined' && gl instanceof WebGL2RenderingContext) {
-    return true;
+  // INTERNAL SUPPORT METHODS FOR WEBGL RESOURCES
+
+  /**
+   * Storing data on a special field on WebGLObjects makes that data visible in SPECTOR chrome debug extension
+   * luma.gl ids and props can be inspected
+   */
+  _setWebGLDebugMetadata(
+    handle: unknown,
+    resource: Resource<any>,
+    options: {spector: Record<string, unknown>}
+  ): void {
+    // @ts-expect-error
+    handle.luma = resource;
+
+    const spectorMetadata = {props: options.spector, id: options.spector.id};
+    // @ts-expect-error
+    // eslint-disable-next-line camelcase
+    handle.__SPECTOR_Metadata = spectorMetadata;
   }
-  // Look for debug contexts, headless gl etc
-  return Boolean(gl && Number.isFinite(gl._version));
 }
 
 /** Set constant float array attribute */