@luma.gl/webgl 9.0.0-alpha.2 → 9.0.0-alpha.20

package/src/adapter/webgl-device.ts

@@ -7,12 +7,15 @@ import type {
   CanvasContextProps,
   TextureFormat
 } from '@luma.gl/api';
-import {Device, CanvasContext, log, assert} from '@luma.gl/api';
+import {Device, CanvasContext, log, uid} from '@luma.gl/api';
 import {isBrowser} from '@probe.gl/env';
 import {polyfillContext} from '../context/polyfill/polyfill-context';
-import {trackContextState} from '../context/state-tracker/track-context-state';
-import {ContextState} from '../context/context/context-state';
-import {createBrowserContext} from '../context/context/create-context';
+import {popContextState, pushContextState, trackContextState} from '../context/state-tracker/track-context-state';
+import {createBrowserContext} from '../context/context/create-browser-context';
+import {
+  createHeadlessContext,
+  isHeadlessGLRegistered
+} from '../context/context/create-headless-context';
 import {getDeviceInfo} from './device-helpers/get-device-info';
 import {getDeviceFeatures} from './device-helpers/device-features';
 import {getDeviceLimits, getWebGLLimits, WebGLLimits} from './device-helpers/device-limits';
@@ -29,17 +32,17 @@ import {
 import type {
   BufferProps,
   ShaderProps,
-  Sampler,
+  // Sampler,
   SamplerProps,
   TextureProps,
   ExternalTexture,
   ExternalTextureProps,
   FramebufferProps,
-  RenderPipeline,
+  // RenderPipeline,
   RenderPipelineProps,
   ComputePipeline,
   ComputePipelineProps,
-  RenderPass,
+  // RenderPass,
   RenderPassProps,
   ComputePass,
   ComputePassProps
@@ -56,21 +59,21 @@ import WEBGLRenderPipeline from './resources/webgl-render-pipeline';
 
 const LOG_LEVEL = 1;
 
-let counter = 0;
-
 /** WebGPU style Device API for a WebGL context */
-export default class WebGLDevice extends Device implements ContextState {
-  // Public API
+export default class WebGLDevice extends Device {
+  //
+  // Public `Device` API
+  //
 
   static type: string = 'webgl';
 
   static isSupported(): boolean {
-    return typeof WebGLRenderingContext !== 'undefined';
+    return typeof WebGLRenderingContext !== 'undefined' || isHeadlessGLRegistered();
   }
 
   readonly info: DeviceInfo;
   readonly canvasContext: WebGLCanvasContext;
-  readonly lost: Promise<{reason: 'destroyed'; message: string}>;
+
   readonly handle: WebGLRenderingContext;
 
   get features(): Set<DeviceFeature> {
@@ -83,36 +86,15 @@ export default class WebGLDevice extends Device implements ContextState {
     return this._limits;
   }
 
-  // WebGL specific API
-
-  /** WebGL1 typed context. Can always be used. */
-  readonly gl: WebGLRenderingContext;
-  /** WebGL2 typed context. Need to check isWebGL2 or isWebGL1 before using. */
-  readonly gl2: WebGL2RenderingContext;
-  readonly debug: boolean = false;
-
-  /** `true` if this is a WebGL1 context. @note `false` if WebGL2 */
-  readonly isWebGL1: boolean;
-  /** `true` if this is a WebGL2 context. @note `false` if WebGL1 */
-  readonly isWebGL2: boolean;
+  readonly lost: Promise<{reason: 'destroyed'; message: string}>;
 
-  get webglLimits(): WebGLLimits {
-    this._webglLimits = this._webglLimits || getWebGLLimits(this.gl);
-    return this._webglLimits;
-  }
+  private _resolveContextLost?: (value: {reason: 'destroyed'; message: string}) => void;
+  private _features?: Set<DeviceFeature>;
+  private _limits?: DeviceLimits;
 
-  private _features: Set<DeviceFeature>;
-  private _limits: DeviceLimits;
-  private _webglLimits: WebGLLimits;
-
-  /** State used by luma.gl classes: TODO - move to canvasContext*/
-  readonly _canvasSizeInfo = {clientWidth: 0, clientHeight: 0, devicePixelRatio: 1};
-  /** State used by luma.gl classes */
-  readonly _extensions: Record<string, any> = {};
-  _polyfilled: boolean = false;
-
-  /** Instance of Spector.js (if initialized) */
-  spector;
+  //
+  // Static methods, expected to be present by `luma.createDevice()`
+  //
 
   /**
    * Get a device instance from a GL context
@@ -135,7 +117,7 @@ export default class WebGLDevice extends Device implements ContextState {
     return new WebGLDevice({gl: gl as WebGLRenderingContext});
   }
 
-  static async create(props?: DeviceProps): Promise<WebGLDevice> {
+  static async create(props: DeviceProps = {}): Promise<WebGLDevice> {
     log.groupCollapsed(LOG_LEVEL, 'WebGLDevice created');
 
     // Wait for page to load. Only wait when props. canvas is string
@@ -153,25 +135,54 @@ export default class WebGLDevice extends Device implements ContextState {
       await loadSpectorJS();
     }
 
-    log.probe(LOG_LEVEL, 'DOM is loaded')();
+    log.probe(LOG_LEVEL + 1, 'DOM is loaded')();
+
+    // @ts-expect-error
+    if (props.gl && props.gl.device) {
+      return WebGLDevice.attach(props.gl);
+    }
+
     return new WebGLDevice(props);
   }
 
+  //
+  // Public API
+  //
+
   constructor(props: DeviceProps) {
-    super(props);
+    super({...props, id: props.id || uid('webgl-device')});
 
     // 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;
     if (device) {
-      log.warn(`WebGL context already attached to device ${device.id}`);
-      return device;
+      throw new Error(`WebGL context already attached to device ${device.id}`);
     }
 
     // Create and instrument context
     this.canvasContext = new WebGLCanvasContext(this, props);
 
-    this.handle = props.gl || createBrowserContext(this.canvasContext.canvas, props);
+    this.lost = new Promise<{reason: 'destroyed'; message: string}>((resolve) => {
+      this._resolveContextLost = resolve;
+    });
+
+    const onContextLost = (event: Event) =>
+      this._resolveContextLost?.({
+        reason: 'destroyed',
+        message: 'Computer entered sleep mode, or too many apps or browser tabs are using the GPU.'
+      });
+
+    let gl: WebGLRenderingContext | WebGL2RenderingContext | null = props.gl || null;
+    gl =
+      gl ||
+      (isBrowser() ? createBrowserContext(this.canvasContext.canvas, {...props, onContextLost}) : null);
+    gl = gl || (!isBrowser() ? createHeadlessContext({...props, onContextLost}) : null);
+
+    if (!gl) {
+      throw new Error('WebGL context creation failed');
+    }
+
+    this.handle = gl;
     this.gl = this.handle;
     this.gl2 = this.gl as WebGL2RenderingContext;
     this.isWebGL2 = isWebGL2(this.gl);
@@ -182,13 +193,20 @@ export default class WebGLDevice extends Device implements ContextState {
 
     // @ts-expect-error Link webgl context back to device
     this.gl.device = this;
-    // @ts-expect-error Annotate webgl context to handle 
+    // @ts-expect-error Annotate webgl context to handle
     this.gl._version = this.isWebGL2 ? 2 : 1;
 
     // Add subset of WebGL2 methods to WebGL1 context
     polyfillContext(this.gl);
+
     // Install context state tracking
-    trackContextState(this.gl, {copyState: false, log: (...args: any[]) => log.log(1, ...args)()});
+    // @ts-expect-error - hidden parameters
+    const {enable = true, copyState = false} = props;
+    trackContextState(this.gl, {
+      enable,
+      copyState,
+      log: (...args: any[]) => log.log(1, ...args)()
+    });
 
     // DEBUG contexts: Add debug instrumentation to the context, force log level to at least 1
     if (isBrowser() && props.debug) {
@@ -218,16 +236,11 @@ ${this.info.vendor}, ${this.info.renderer} for canvas: ${this.canvasContext.id}`
    * Destroys the context
    * @note Has no effect for browser contexts, there is no browser API for destroying contexts
    */
-  destroy() {
-    let ext = this.gl.getExtension('STACKGL_destroy_context');
+  destroy(): void {
+    const ext = this.gl.getExtension('STACKGL_destroy_context');
     if (ext) {
       ext.destroy();
     }
-    // ext = this.gl.getExtension('WEBGL_lose_context');
-    // if (ext) {
-    //   // TODO - disconnect context lost callbacks?
-    //   ext.loseContext();
-    // }
   }
 
   get isLost(): boolean {
@@ -254,7 +267,9 @@ ${this.info.vendor}, ${this.info.renderer} for canvas: ${this.canvasContext.id}`
 
   /** Returns a WebGL2RenderingContext or throws an error */
   assertWebGL2(): WebGL2RenderingContext {
-    assert(this.isWebGL2, 'Requires WebGL2');
+    if (!this.gl2) {
+      throw new Error('Requires WebGL2');
+    }
     return this.gl2;
   }
 
@@ -304,7 +319,7 @@ ${this.info.vendor}, ${this.info.renderer} for canvas: ${this.canvasContext.id}`
     throw new Error('compute shaders not supported in WebGL');
   }
 
-  private renderPass: WEBGLRenderPass;
+  private renderPass: WEBGLRenderPass | null = null;
 
   getDefaultRenderPass(): WEBGLRenderPass {
     this.renderPass =
@@ -321,10 +336,80 @@ ${this.info.vendor}, ${this.info.renderer} for canvas: ${this.canvasContext.id}`
    * Chrome's offscreen canvas does not require gl.commit
    */
   submit(): void {
-    this.renderPass.endPass();
+    this.renderPass?.end();
     this.renderPass = null;
     // this.canvasContext.commit();
   }
+
+  //
+  // WebGL-only API (not part of `Device` API)
+  //
+
+  /** WebGL1 typed context. Can always be used. */
+  readonly gl: WebGLRenderingContext;
+  /** WebGL2 typed context. Need to check isWebGL2 or isWebGL1 before using. */
+  readonly gl2: WebGL2RenderingContext | null = null;
+  readonly debug: boolean = false;
+
+  /** `true` if this is a WebGL1 context. @note `false` if WebGL2 */
+  readonly isWebGL1: boolean;
+  /** `true` if this is a WebGL2 context. @note `false` if WebGL1 */
+  readonly isWebGL2: boolean;
+
+  /** 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: Record<string, any> = {};
+  _polyfilled: boolean = false;
+
+  /** Instance of Spector.js (if initialized) */
+  spector;
+
+  private _webglLimits?: WebGLLimits;
+
+  /** Return WebGL specific limits */
+  get webglLimits() : WebGLLimits {
+    this._webglLimits = this._webglLimits || getWebGLLimits(this.gl);
+    return this._webglLimits;
+  }
+
+  /**
+   * Loses the context
+   * @note Triggers context loss, mainly for testing
+   * @todo Promote to `Device` API?
+   */
+  loseDevice(): void {
+    const ext = this.gl.getExtension('WEBGL_lose_context');
+    if (ext) {
+      ext.loseContext();
+    }
+    // loseContext should trigger context loss callback but 
+    this._resolveContextLost?.({
+      reason: 'destroyed',
+      message: 'Application triggered context loss'
+    });
+  }
+
+  /** Save current WebGL context state onto an internal stack */
+  pushState(): void {
+    pushContextState(this.gl);
+  }
+
+  /** 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;
+  }
 }
 
 /** Check if supplied parameter is a WebGLRenderingContext */
@@ -339,7 +424,6 @@ function isWebGL(gl: any): boolean {
   return Boolean(gl && Number.isFinite(gl._version));
 }
 
-
 /** Check if supplied parameter is a WebGL2RenderingContext */
 function isWebGL2(gl: any): boolean {
   if (typeof WebGL2RenderingContext !== 'undefined' && gl instanceof WebGL2RenderingContext) {

package/src/classic/accessor.ts

@@ -2,19 +2,6 @@ import {assert, checkProps, Buffer, AccessorObject} from '@luma.gl/api';
 import GL from '@luma.gl/constants';
 import {getTypedArrayFromGLType} from './typed-array-utils';
 
-// export interface AccessorObject {
-//   offset?: number;
-//   stride?: number;
-//   type?: number;
-//   size?: number;
-//   divisor?: number;
-//   normalized?: boolean;
-//   integer?: boolean;
-
-//   buffer?: Buffer;
-//   index?: number;
-// }
-
 const DEFAULT_ACCESSOR_VALUES = {
   offset: 0,
   stride: 0,
@@ -98,7 +85,7 @@ export default class Accessor implements AccessorObject {
 
       // Auto-deduce integer type?
       if (props.type === GL.INT || props.type === GL.UNSIGNED_INT) {
-      this.integer = true;
+        this.integer = true;
       }
     }
     if (props.size !== undefined) {

package/src/classic/buffer.ts

@@ -1,5 +1,7 @@
+// luma.gl, MIT license
+
 import type {Device, BufferProps, TypedArray} from '@luma.gl/api';
-import {Buffer, log, assert, checkProps} from '@luma.gl/api';
+import {assert, checkProps} from '@luma.gl/api';
 import GL from '@luma.gl/constants';
 import {assertWebGL2Context} from '../context/context/webgl-checks';
 import {AccessorObject} from '../types';
@@ -48,11 +50,11 @@ function getWEBGLBufferProps(props: ClassicBufferProps | ArrayBufferView | numbe
 
   // Signature: `new Buffer(gl, 100)`
   else if (typeof props === 'number') {
-    return {byteLength: props as number};
+    return {byteLength: props };
   }
 
   props = checkProps('Buffer', props, PROP_CHECKS_INITIALIZE);
-  const bufferProps = {...props as ClassicBufferProps};
+  const bufferProps = {...props };
   if (bufferProps.offset) {
     bufferProps.byteOffset = bufferProps.offset;
   }
@@ -106,19 +108,10 @@ export default class ClassicBuffer extends WEBGLBuffer {
     Object.seal(this);
   }
 
-  destroy(): void {
-    if (this.handle) {
-      this.removeStats();
-      this.trackDeallocatedMemory();
-      this.gl.deleteBuffer(this.handle);
-      // @ts-expect-error
-      this.handle = null;
-    }
-  }
-
-  write(data: TypedArray, byteOffset?: number): void {
+  override write(data: TypedArray, byteOffset?: number): void {
     this.subData({data, offset: byteOffset});
   }
+
   // returns number of elements in the buffer (assuming that the full buffer is used)
   getElementCount(accessor: AccessorObject = this.accessor): number {
     return Math.round(this.byteLength / Accessor.getBytesPerElement(accessor));
@@ -264,7 +257,7 @@ export default class ClassicBuffer extends WEBGLBuffer {
     // Use GL.COPY_READ_BUFFER+GL.COPY_WRITE_BUFFER avoid disturbing other targets and locking type
     gl.bindBuffer(GL.COPY_READ_BUFFER, sourceBuffer.handle);
     gl.bindBuffer(GL.COPY_WRITE_BUFFER, this.handle);
-    gl2.copyBufferSubData(GL.COPY_READ_BUFFER, GL.COPY_WRITE_BUFFER, readOffset, writeOffset, size);
+    gl2?.copyBufferSubData(GL.COPY_READ_BUFFER, GL.COPY_WRITE_BUFFER, readOffset, writeOffset, size);
     gl.bindBuffer(GL.COPY_READ_BUFFER, null);
     gl.bindBuffer(GL.COPY_WRITE_BUFFER, null);
 
@@ -278,7 +271,7 @@ export default class ClassicBuffer extends WEBGLBuffer {
    * Reads data from buffer into an ArrayBufferView or SharedArrayBuffer.
    * @note WEBGL2 ONLY
    */
-  getData(options?: {
+  override getData(options?: {
     dstData?: any;
     srcByteOffset?: number;
     dstOffset?: number;
@@ -314,7 +307,7 @@ export default class ClassicBuffer extends WEBGLBuffer {
 
     // Use GL.COPY_READ_BUFFER to avoid disturbing other targets and locking type
     this.gl.bindBuffer(GL.COPY_READ_BUFFER, this.handle);
-    this.gl2.getBufferSubData(GL.COPY_READ_BUFFER, srcByteOffset, dstData, dstOffset, length);
+    this.gl2?.getBufferSubData(GL.COPY_READ_BUFFER, srcByteOffset, dstData, dstOffset, length);
     this.gl.bindBuffer(GL.COPY_READ_BUFFER, null);
 
     // TODO - update local `data` if offsets are 0
@@ -340,10 +333,10 @@ export default class ClassicBuffer extends WEBGLBuffer {
     // uniform buffer state. Instead indexed bindings need to be made.
     if (target === GL.UNIFORM_BUFFER || target === GL.TRANSFORM_FEEDBACK_BUFFER) {
       if (size !== undefined) {
-        this.gl2.bindBufferRange(target, index, this.handle, offset, size);
+        this.gl2?.bindBufferRange(target, index, this.handle, offset, size);
       } else {
         assert(offset === 0); // Make sure offset wasn't supplied
-        this.gl2.bindBufferBase(target, index, this.handle);
+        this.gl2?.bindBufferBase(target, index, this.handle);
       }
     } else {
       this.gl.bindBuffer(target, this.handle);
@@ -356,7 +349,7 @@ export default class ClassicBuffer extends WEBGLBuffer {
     const {target = this.target, index = this.accessor && this.accessor.index} = options || {};
     const isIndexedBuffer = target === GL.UNIFORM_BUFFER || target === GL.TRANSFORM_FEEDBACK_BUFFER;
     if (isIndexedBuffer) {
-      this.gl2.bindBufferBase(target, index, null);
+      this.gl2?.bindBufferBase(target, index, null);
     } else {
       this.gl.bindBuffer(target, null);
     }
@@ -369,7 +362,7 @@ export default class ClassicBuffer extends WEBGLBuffer {
   getDebugData(): {
     data: any;
     changed: boolean;
-  } {
+    } {
     if (!this.debugData) {
       this.debugData = this.getData({length: Math.min(DEBUG_DATA_LENGTH, this.byteLength)});
       return {data: this.debugData, changed: true};

package/src/classic/typed-array-utils.ts

@@ -1,4 +1,6 @@
-import {TypedArray} from '@luma.gl/api/types';
+// luma.gl, MIT license
+
+import {TypedArray} from '@luma.gl/api';
 import GL from '@luma.gl/constants';
 import {GLType} from '../types/webgl'
 
@@ -90,7 +92,7 @@ export function getTypedArrayFromGLType(
  * how-can-i-flip-the-result-of-webglrenderingcontext-readpixels
  * @param {*} param0
  */
- export function flipRows(options: {
+export function flipRows(options: {
   data: any;
   width: any;
   height: any;

package/src/context/context/{create-context.ts → create-browser-context.ts}

@@ -37,7 +37,9 @@ const DEFAULT_CONTEXT_PROPS: ContextProps = {
   webgl2: true, // Attempt to create a WebGL2 context
   webgl1: true, // Attempt to create a WebGL1 context (false to fail if webgl2 not available)
   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'),
 };
 
@@ -46,8 +48,8 @@ const DEFAULT_CONTEXT_PROPS: ContextProps = {
  * 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: HTMLCanvasElement | OffscreenCanvas, props: ContextProps): WebGLRenderingContext {
-   props = {...DEFAULT_CONTEXT_PROPS, ...props};
+export function createBrowserContext(canvas: HTMLCanvasElement | OffscreenCanvas, props: ContextProps): WebGLRenderingContext {
+  props = {...DEFAULT_CONTEXT_PROPS, ...props};
 
   // Try to extract any extra information about why context creation failed
   let errorMessage = null;
@@ -55,7 +57,7 @@ const DEFAULT_CONTEXT_PROPS: ContextProps = {
   canvas.addEventListener('webglcontextcreationerror', onCreateError, false);
 
   // Create the desired context
-  let gl = null;
+  let gl: WebGLRenderingContext | null = null;
 
   if (props.type === 'webgl2') {
     props = {...props, webgl1: false};
@@ -66,10 +68,10 @@ const DEFAULT_CONTEXT_PROPS: ContextProps = {
 
   // Prefer webgl2 over webgl1 if both are acceptable
   if (props.webgl2) {
-    gl = gl || canvas.getContext('webgl2', props);
+    gl = gl || canvas.getContext('webgl2', props) as WebGL2RenderingContext | null;
   }
   if (props.webgl1) {
-    gl = gl || canvas.getContext('webgl', props);
+    gl = gl || canvas.getContext('webgl', props) as WebGLRenderingContext | null;
   }
 
   // TODO are we removing this listener before giving it a chance to fire?
@@ -83,8 +85,16 @@ const DEFAULT_CONTEXT_PROPS: ContextProps = {
     );
   }
 
-  canvas.addEventListener('webglcontextlost', props.onContextLost, false);
-  canvas.addEventListener('webglcontextrestored', props.onContextRestored, false);
+  if (props.onContextLost) {
+    // Carefully extract and wrap callbacks to prevent addEventListener from rebinding them.
+    const {onContextLost} = props;
+    canvas.addEventListener('webglcontextlost',(event: 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: Event) => onContextRestored(event), false);
+  }
 
   return gl;
 }

package/src/context/context/create-headless-context.ts

@@ -0,0 +1,48 @@
+const ERR_HEADLESSGL_FAILED =
+  'Failed to create WebGL context in Node.js, headless gl returned null';
+
+const ERR_HEADLESSGL_LOAD = '\
+  luma.gl: loaded under Node.js without headless gl installed, meaning that WebGL \
+  contexts can not be created. This may not be an error. For example, this is a \
+  typical configuration for isorender applications running on the server.';
+
+const CONTEXT_DEFAULTS = {
+  width: 1,
+  height: 1,
+  debug: true,
+  throwOnError: false
+};
+
+/** Duck typing for the main headless gl export, a function to create contexts */
+export type HeadlessGL = (width: number, height: number, options: Record<string, unknown>) => WebGLRenderingContext;
+
+let headlessGL: HeadlessGL | null = null; 
+
+/** By importing `gl` and registering it with this function, contexts can be created under Node.js */
+export function registerHeadlessGL(headlessgl: HeadlessGL) {
+  headlessGL = headlessgl;
+}
+
+/** @returns true if headless gl is registered */
+export function isHeadlessGLRegistered(): boolean {
+  return headlessGL !== null;
+}
+
+/** Create headless gl context (for running under Node.js) */
+export function createHeadlessContext(options?: Record<string, any>): WebGLRenderingContext {
+  options = {...CONTEXT_DEFAULTS, ...options};
+
+  const {width, height, webgl1, webgl2} = options;
+
+  if (webgl2 && !webgl1) {
+    throw new Error('headless-gl does not support WebGL2');
+  }
+  if (!headlessGL) {
+    throw new Error(ERR_HEADLESSGL_LOAD);
+  }
+  const gl = headlessGL(width, height, options);
+  if (!gl) {
+    throw new Error(ERR_HEADLESSGL_FAILED);
+  }
+  return gl;
+}

package/src/context/debug/spector.ts

@@ -23,6 +23,7 @@ let spector: any = null;
 let initialized: boolean = false;
 
 declare global {
+  // eslint-disable-next-line no-var
   var SPECTOR: any;
 }
 
@@ -32,7 +33,7 @@ export async function loadSpectorJS(props?: SpectorProps) {
     try {
       await loadScript(SPECTOR_CDN_URL);
     } catch(error) {
-      log.warn(error)
+      log.warn(String(error))
     }
   }
 }
@@ -44,7 +45,7 @@ export function initializeSpectorJS(props?: SpectorProps) {
   }
 
   if (!spector && globalThis.SPECTOR) {
-    log.probe(LOG_LEVEL, "SPECTOR found and initialized")();
+    log.probe(LOG_LEVEL, 'SPECTOR found and initialized')();
     spector = new globalThis.SPECTOR.Spector();
     if (globalThis.luma) {
       globalThis.luma.spector = spector;
@@ -61,9 +62,9 @@ export function initializeSpectorJS(props?: SpectorProps) {
     // 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: unknown) => log.info(`Spector capture started:`, capture)());
+    spector?.onCaptureStarted.add((capture: unknown) => log.info('Spector capture started:', capture)());
     spector?.onCapture.add((capture: unknown) => {
-      log.info(`Spector capture complete:`, 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()
@@ -82,7 +83,7 @@ export function initializeSpectorJS(props?: SpectorProps) {
     // 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`)();
+      log.info('Spector capture stopped after 2 seconds')();
       spector?.stopCapture();
       // spector?.displayUI();
     });