@luma.gl/webgl 9.1.0-alpha.15 → 9.1.0-alpha.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luma.gl/webgl",
-  "version": "9.1.0-alpha.15",
+  "version": "9.1.0-alpha.16",
   "description": "WebGL2 adapter for the luma.gl core API",
   "type": "module",
   "license": "MIT",
@@ -43,9 +43,9 @@
     "@luma.gl/core": "9.1.0-alpha.14"
   },
   "dependencies": {
-    "@luma.gl/constants": "9.1.0-alpha.15",
+    "@luma.gl/constants": "9.1.0-alpha.16",
     "@math.gl/types": "4.1.0-alpha.3",
     "@probe.gl/env": "^4.0.8"
   },
-  "gitHead": "41af576ca655cb749a5567cf903f9e9242793c77"
+  "gitHead": "39eec40d12c826548b636c057fdb8572adfe611f"
 }

package/src/adapter/converters/device-parameters.ts

@@ -31,7 +31,7 @@ export function withDeviceAndGLParameters<T = unknown>(
   device: Device,
   parameters: Parameters,
   glParameters: GLParameters,
-  func: (device?: Device) => T
+  func: (_?: Device) => T
 ): T {
   if (isObjectEmpty(parameters)) {
     // Avoid setting state if no parameters provided. Just call and return
@@ -62,7 +62,7 @@ export function withDeviceAndGLParameters<T = unknown>(
 export function withGLParameters<T = unknown>(
   device: Device,
   parameters: GLParameters,
-  func: (device?: Device) => T
+  func: (_?: Device) => T
 ): T {
   if (isObjectEmpty(parameters)) {
     // Avoid setting state if no parameters provided. Just call and return
@@ -91,7 +91,7 @@ export function withGLParameters<T = unknown>(
 export function withDeviceParameters<T = unknown>(
   device: Device,
   parameters: Parameters,
-  func: (device?: Device) => T
+  func: (_?: Device) => T
 ): T {
   if (isObjectEmpty(parameters)) {
     // Avoid setting state if no parameters provided. Just call and return

package/src/adapter/helpers/webgl-texture-utils.ts

@@ -490,6 +490,30 @@ export function setMipLevelFromGPUBuffer(
   gl.bindBuffer(GL.PIXEL_UNPACK_BUFFER, null);
 }
 */
+export type ReadPixelsToArrayOptions = {
+  sourceX?: number;
+  sourceY?: number;
+  sourceFormat?: number;
+  sourceAttachment?: number;
+  target?: Uint8Array | Uint16Array | Float32Array;
+  // following parameters are auto deduced if not provided
+  sourceWidth?: number;
+  sourceHeight?: number;
+  sourceDepth?: number;
+  sourceType?: number;
+};
+
+export type ReadPixelsToBufferOptions = {
+  sourceX?: number;
+  sourceY?: number;
+  sourceFormat?: number;
+  target?: Buffer; // A new Buffer object is created when not provided.
+  targetByteOffset?: number; // byte offset in buffer object
+  // following parameters are auto deduced if not provided
+  sourceWidth?: number;
+  sourceHeight?: number;
+  sourceType?: number;
+};
 
 /**
  * Copies data from a type  or a Texture object into ArrayBuffer object.
@@ -504,18 +528,7 @@ export function setMipLevelFromGPUBuffer(
  */
 export function readPixelsToArray(
   source: Framebuffer | Texture,
-  options?: {
-    sourceX?: number;
-    sourceY?: number;
-    sourceFormat?: number;
-    sourceAttachment?: number;
-    target?: Uint8Array | Uint16Array | Float32Array;
-    // following parameters are auto deduced if not provided
-    sourceWidth?: number;
-    sourceHeight?: number;
-    sourceDepth?: number;
-    sourceType?: number;
-  }
+  options?: ReadPixelsToArrayOptions
 ): Uint8Array | Uint16Array | Float32Array {
   const {
     sourceX = 0,
@@ -576,17 +589,7 @@ export function readPixelsToArray(
  */
 export function readPixelsToBuffer(
   source: Framebuffer | Texture,
-  options?: {
-    sourceX?: number;
-    sourceY?: number;
-    sourceFormat?: number;
-    target?: Buffer; // A new Buffer object is created when not provided.
-    targetByteOffset?: number; // byte offset in buffer object
-    // following parameters are auto deduced if not provided
-    sourceWidth?: number;
-    sourceHeight?: number;
-    sourceType?: number;
-  }
+  options?: ReadPixelsToBufferOptions
 ): WEBGLBuffer {
   const {
     target,
@@ -620,11 +623,11 @@ export function readPixelsToBuffer(
   // TODO(donmccurdy): Do we have tests to confirm this is working?
   const commandEncoder = source.device.createCommandEncoder();
   commandEncoder.copyTextureToBuffer({
-    source: source as Texture,
+    sourceTexture: source as Texture,
     width: sourceWidth,
     height: sourceHeight,
     origin: [sourceX, sourceY],
-    destination: webglBufferTarget,
+    destinationBuffer: webglBufferTarget,
     byteOffset: targetByteOffset
   });
   commandEncoder.destroy();
@@ -642,8 +645,8 @@ export function readPixelsToBuffer(
  */
 // eslint-disable-next-line complexity, max-statements
 export function copyToTexture(
-  source: Framebuffer | Texture,
-  target: Texture | GL,
+  sourceTexture: Framebuffer | Texture,
+  destinationTexture: Texture | GL,
   options?: {
     sourceX?: number;
     sourceY?: number;
@@ -673,7 +676,7 @@ export function copyToTexture(
     height // defaults to target height
   } = options || {};
 
-  const {framebuffer, deleteFramebuffer} = getFramebuffer(source);
+  const {framebuffer, deleteFramebuffer} = getFramebuffer(sourceTexture);
   // assert(framebuffer);
   const webglFramebuffer = framebuffer;
   const {device, handle} = webglFramebuffer;
@@ -690,8 +693,8 @@ export function copyToTexture(
   // assert(target);
   let texture: WEBGLTexture | null = null;
   let textureTarget: GL;
-  if (target instanceof WEBGLTexture) {
-    texture = target;
+  if (destinationTexture instanceof WEBGLTexture) {
+    texture = destinationTexture;
     width = Number.isFinite(width) ? width : texture.width;
     height = Number.isFinite(height) ? height : texture.height;
     texture?.bind(0);

package/src/adapter/resources/webgl-command-buffer.ts

@@ -73,8 +73,8 @@ export class WEBGLCommandBuffer extends CommandBuffer {
 }
 
 function _copyBufferToBuffer(device: WebGLDevice, options: CopyBufferToBufferOptions): void {
-  const source = options.source as WEBGLBuffer;
-  const destination = options.destination as WEBGLBuffer;
+  const source = options.sourceBuffer as WEBGLBuffer;
+  const destination = options.destinationBuffer as WEBGLBuffer;
 
   // {In WebGL2 we can p}erform the copy on the GPU
   // Use GL.COPY_READ_BUFFER+GL.COPY_WRITE_BUFFER avoid disturbing other targets and locking type
@@ -106,22 +106,22 @@ function _copyBufferToTexture(device: WebGLDevice, options: CopyBufferToTextureO
 function _copyTextureToBuffer(device: WebGLDevice, options: CopyTextureToBufferOptions): void {
   const {
     /** Texture to copy to/from. */
-    source,
+    sourceTexture,
     /**  Mip-map level of the texture to copy to/from. (Default 0) */
     mipLevel = 0,
     /** Defines which aspects of the texture to copy to/from. */
     aspect = 'all',
 
     /** Width to copy */
-    width = options.source.width,
+    width = options.sourceTexture.width,
     /** Height to copy */
-    height = options.source.height,
+    height = options.sourceTexture.height,
     depthOrArrayLayers = 0,
     /** Defines the origin of the copy - the minimum corner of the texture sub-region to copy to/from. */
     origin = [0, 0],
 
     /** Destination buffer */
-    destination,
+    destinationBuffer,
     /** Offset, in bytes, from the beginning of the buffer to the start of the image data (default 0) */
     byteOffset = 0,
     /**
@@ -139,7 +139,7 @@ function _copyTextureToBuffer(device: WebGLDevice, options: CopyTextureToBufferO
 
   // TODO - Not possible to read just stencil or depth part in WebGL?
   if (aspect !== 'all') {
-    throw new Error('not supported');
+    throw new Error('aspect not supported in WebGL');
   }
 
   // TODO - mipLevels are set when attaching texture to framebuffer
@@ -148,10 +148,10 @@ function _copyTextureToBuffer(device: WebGLDevice, options: CopyTextureToBufferO
   }
 
   // Asynchronous read (PIXEL_PACK_BUFFER) is WebGL2 only feature
-  const {framebuffer, destroyFramebuffer} = getFramebuffer(source);
+  const {framebuffer, destroyFramebuffer} = getFramebuffer(sourceTexture);
   let prevHandle: WebGLFramebuffer | null | undefined;
   try {
-    const webglBuffer = destination as WEBGLBuffer;
+    const webglBuffer = destinationBuffer as WEBGLBuffer;
     const sourceWidth = width || framebuffer.width;
     const sourceHeight = height || framebuffer.height;
     const sourceParams = getTextureFormatWebGL(
@@ -220,7 +220,7 @@ export function readPixelsToBuffer(
 function _copyTextureToTexture(device: WebGLDevice, options: CopyTextureToTextureOptions): void {
   const {
     /** Texture to copy to/from. */
-    source,
+    sourceTexture,
     /**  Mip-map level of the texture to copy to (Default 0) */
     destinationMipLevel = 0,
     /** Defines which aspects of the texture to copy to/from. */
@@ -232,7 +232,7 @@ function _copyTextureToTexture(device: WebGLDevice, options: CopyTextureToTextur
     destinationOrigin = [0, 0],
 
     /** Texture to copy to/from. */
-    destination
+    destinationTexture
     /**  Mip-map level of the texture to copy to/from. (Default 0) */
     // destinationMipLevel = options.mipLevel,
     /** Defines the origin of the copy - the minimum corner of the texture sub-region to copy to/from. */
@@ -242,12 +242,12 @@ function _copyTextureToTexture(device: WebGLDevice, options: CopyTextureToTextur
   } = options;
 
   let {
-    width = options.destination.width,
-    height = options.destination.height
+    width = options.destinationTexture.width,
+    height = options.destinationTexture.height
     // depthOrArrayLayers = 0
   } = options;
 
-  const {framebuffer, destroyFramebuffer} = getFramebuffer(source);
+  const {framebuffer, destroyFramebuffer} = getFramebuffer(sourceTexture);
   const [sourceX, sourceY] = origin;
   const [destinationX, destinationY, destinationZ] = destinationOrigin;
 
@@ -261,8 +261,8 @@ function _copyTextureToTexture(device: WebGLDevice, options: CopyTextureToTextur
 
   let texture: WEBGLTexture = null;
   let textureTarget: GL;
-  if (destination instanceof WEBGLTexture) {
-    texture = destination;
+  if (destinationTexture instanceof WEBGLTexture) {
+    texture = destinationTexture;
     width = Number.isFinite(width) ? width : texture.width;
     height = Number.isFinite(height) ? height : texture.height;
     texture.bind(0);

package/src/adapter/resources/webgl-render-pipeline.ts

@@ -110,12 +110,12 @@ export class WEBGLRenderPipeline extends RenderPipeline {
       // and reference them as `app` from both GLSL and JS.
       // TODO - this is rather hacky - we could also remap the name directly in the shader layout.
       const binding =
-        this.shaderLayout.bindings.find(binding => binding.name === name) ||
-        this.shaderLayout.bindings.find(binding => binding.name === `${name}Uniforms`);
+        this.shaderLayout.bindings.find(binding_ => binding_.name === name) ||
+        this.shaderLayout.bindings.find(binding_ => binding_.name === `${name}Uniforms`);
 
       if (!binding) {
         const validBindings = this.shaderLayout.bindings
-          .map(binding => `"${binding.name}"`)
+          .map(binding_ => `"${binding_.name}"`)
           .join(', ');
         if (!options?.disableWarnings) {
           log.warn(
@@ -317,22 +317,37 @@ export class WEBGLRenderPipeline extends RenderPipeline {
   }
 
   /** Report link status. First, check for shader compilation failures if linking fails */
-  _reportLinkStatus(status: 'success' | 'linking' | 'validation') {
+  async _reportLinkStatus(status: 'success' | 'linking' | 'validation'): Promise<void> {
     switch (status) {
       case 'success':
         return;
 
       default:
         // First check for shader compilation failures if linking fails
-        if (this.vs.compilationStatus === 'error') {
-          this.vs.debugShader();
-          throw new Error(`Error during compilation of shader ${this.vs.id}`);
+        switch (this.vs.compilationStatus) {
+          case 'error':
+            this.vs.debugShader();
+            throw new Error(`Error during compilation of shader ${this.vs.id}`);
+          case 'pending':
+            this.vs.asyncCompilationStatus.then(() => this.vs.debugShader());
+            break;
+          case 'success':
+            break;
         }
-        if (this.fs?.compilationStatus === 'error') {
-          this.fs.debugShader();
-          throw new Error(`Error during compilation of shader ${this.fs.id}`);
+
+        switch (this.fs?.compilationStatus) {
+          case 'error':
+            this.fs.debugShader();
+            throw new Error(`Error during compilation of shader ${this.fs.id}`);
+          case 'pending':
+            this.fs.asyncCompilationStatus.then(() => this.fs.debugShader());
+            break;
+          case 'success':
+            break;
         }
-        throw new Error(`Error during ${status}: ${this.device.gl.getProgramInfoLog(this.handle)}`);
+
+        const linkErrorLog = this.device.gl.getProgramInfoLog(this.handle);
+        throw new Error(`Error during ${status}: ${linkErrorLog}`);
     }
   }
 

package/src/adapter/resources/webgl-shader.ts

@@ -39,14 +39,18 @@ export class WEBGLShader extends Shader {
     }
   }
 
+  get asyncCompilationStatus(): Promise<'pending' | 'success' | 'error'> {
+    return this._waitForCompilationComplete().then(() => this.compilationStatus);
+  }
+
   override async getCompilationInfo(): Promise<readonly CompilerMessage[]> {
     await this._waitForCompilationComplete();
     return this.getCompilationInfoSync();
   }
 
   override getCompilationInfoSync(): readonly CompilerMessage[] {
-    const log = this.device.gl.getShaderInfoLog(this.handle);
-    return log ? parseShaderCompilerLog(log) : [];
+    const shaderLog = this.device.gl.getShaderInfoLog(this.handle);
+    return shaderLog ? parseShaderCompilerLog(shaderLog) : [];
   }
 
   override getTranslatedSource(): string | null {
@@ -59,9 +63,7 @@ export class WEBGLShader extends Shader {
 
   /** Compile a shader and get compilation status */
   protected async _compile(source: string): Promise<void> {
-    const addGLSLVersion = (source: string) =>
-      source.startsWith('#version ') ? source : `#version 300 es\n${source}`;
-    source = addGLSLVersion(source);
+    source = source.startsWith('#version ') ? source : `#version 300 es\n${source}`;
 
     const {gl} = this.device;
     gl.shaderSource(this.handle, source);

package/src/adapter/webgl-adapter.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {Adapter, Device, DeviceProps, CanvasContext, log} from '@luma.gl/core';
+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';
@@ -52,7 +52,7 @@ export class WebGLAdapter extends Adapter {
     if (!isWebGL(gl)) {
       throw new Error('Invalid WebGL2RenderingContext');
     }
-    return new WebGLDevice({gl: gl as WebGL2RenderingContext});
+    return new WebGLDevice({_handle: gl as WebGL2RenderingContext});
   }
 
   async create(props: DeviceProps = {}): Promise<WebGLDevice> {
@@ -61,20 +61,14 @@ export class WebGLAdapter extends Adapter {
     const promises: Promise<unknown>[] = [];
 
     // Load webgl and spector debug scripts from CDN if requested
-    if (props.debug) {
+    if (props.debugWebGL) {
       promises.push(loadWebGLDeveloperTools());
     }
 
-    if (props.debugWithSpectorJS) {
+    if (props.debugSpectorJS) {
       promises.push(loadSpectorJS(props));
     }
 
-    // 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);
@@ -84,8 +78,6 @@ export class WebGLAdapter extends Adapter {
       }
     }
 
-    log.probe(LOG_LEVEL + 1, 'DOM is loaded')();
-
     const device = new WebGLDevice(props);
 
     // Log some debug info about the newly created context

package/src/adapter/webgl-device.ts

@@ -12,28 +12,7 @@ import type {
   Texture,
   Framebuffer,
   VertexArray,
-  VertexArrayProps
-} 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 {
-  isTextureFormatSupported,
-  isTextureFormatRenderable,
-  isTextureFormatFilterable
-} from './converters/texture-formats';
-import {uid} from '../utils/uid';
-
-// WebGL classes
-import type {
+  VertexArrayProps,
   BufferProps,
   ShaderProps,
   // Sampler,
@@ -55,6 +34,23 @@ import type {
   TransformFeedbackProps,
   QuerySetProps
 } 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 {
+  isTextureFormatSupported,
+  isTextureFormatRenderable,
+  isTextureFormatFilterable
+} from './converters/texture-formats';
+import {uid} from '../utils/uid';
 
 import {WEBGLBuffer} from './resources/webgl-buffer';
 import {WEBGLShader} from './resources/webgl-shader';
@@ -120,35 +116,62 @@ export class WebGLDevice extends Device {
   constructor(props: DeviceProps) {
     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;
     });
 
-    this.handle = 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.'
-        })
-    });
-    this.gl = this.handle;
+    const webglContextAttributes: WebGLContextAttributes = {...props.webgl};
+    // Copy props from CanvasContextProps
+    if (canvasContextProps.alphaMode === 'premultiplied') {
+      webglContextAttributes.premultipliedAlpha = true;
+    }
+    if (props.powerPreference !== undefined) {
+      webglContextAttributes.powerPreference = props.powerPreference;
+    }
 
-    if (!this.handle) {
+    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.
@@ -161,8 +184,12 @@ export class WebGLDevice extends Device {
     // 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();
     }
 
@@ -175,8 +202,8 @@ export class WebGLDevice extends Device {
     glState.trackState(this.gl, {copyState: false});
 
     // DEBUG contexts: Add luma debug instrumentation to the context, force log level to at least 1
-    if (props.debug) {
-      this.gl = makeDebugContext(this.gl, {...props, throwOnError: true});
+    if (props.debugWebGL) {
+      this.gl = makeDebugContext(this.gl, {...props});
       this.debug = true;
       log.level = Math.max(log.level, 1);
       log.warn('WebGL debug mode activated. Performance reduced.')();
@@ -212,7 +239,7 @@ export class WebGLDevice extends Device {
   }
 
   createBuffer(props: BufferProps | ArrayBuffer | ArrayBufferView): WEBGLBuffer {
-    const newProps = this._getBufferProps(props);
+    const newProps = this._normalizeBufferProps(props);
     return new WEBGLBuffer(this, newProps);
   }
 

package/src/context/debug/spector-types.ts

@@ -1,5 +1,5 @@
 // Forked from https://github.com/BabylonJS/Spector.js/blob/master/dist/spector.d.ts
-/* eslint-disable camelcase */
+/* eslint-disable camelcase, no-shadow */
 
 interface IEvent<T> {
   add(callback: (element: T) => void, context?: any): number;

package/src/context/debug/spector.ts

@@ -5,14 +5,14 @@
 import {log} from '@luma.gl/core';
 import {loadScript} from '../../utils/load-script';
 
-import {Spector} from './spector-types';
+import type {Spector} from './spector-types';
 
 /** Spector debug initialization options */
 type SpectorProps = {
-  /** Whether spector is enabled */
-  debugWithSpectorJS?: boolean;
+  /** Whether spector.js is enabled */
+  debugSpectorJS?: boolean;
   /** URL to load spector script from. Typically a CDN URL */
-  spectorUrl?: string;
+  debugSpectorJSUrl?: string;
   /** Canvas to monitor */
   gl?: WebGL2RenderingContext;
 };
@@ -29,19 +29,19 @@ declare global {
 }
 
 export const DEFAULT_SPECTOR_PROPS: Required<SpectorProps> = {
-  debugWithSpectorJS: log.get('spector') || log.get('spectorjs'),
+  debugSpectorJS: log.get('debug-spectorjs'),
   // https://github.com/BabylonJS/Spector.js#basic-usage
   // https://forum.babylonjs.com/t/spectorcdn-is-temporarily-off/48241
   // spectorUrl: 'https://spectorcdn.babylonjs.com/spector.bundle.js';
-  spectorUrl: 'https://cdn.jsdelivr.net/npm/spectorjs@0.9.30/dist/spector.bundle.js',
+  debugSpectorJSUrl: 'https://cdn.jsdelivr.net/npm/spectorjs@0.9.30/dist/spector.bundle.js',
   gl: undefined!
 };
 
 /** Loads spector from CDN if not already installed */
-export async function loadSpectorJS(props: {spectorUrl?: string}): Promise<void> {
+export async function loadSpectorJS(props: {debugSpectorJSUrl?: string}): Promise<void> {
   if (!globalThis.SPECTOR) {
     try {
-      await loadScript(props.spectorUrl || DEFAULT_SPECTOR_PROPS.spectorUrl);
+      await loadScript(props.debugSpectorJSUrl || DEFAULT_SPECTOR_PROPS.debugSpectorJSUrl);
     } catch (error) {
       log.warn(String(error));
     }
@@ -50,14 +50,14 @@ export async function loadSpectorJS(props: {spectorUrl?: string}): Promise<void>
 
 export function initializeSpectorJS(props: SpectorProps): Spector | null {
   props = {...DEFAULT_SPECTOR_PROPS, ...props};
-  if (!props.debugWithSpectorJS) {
+  if (!props.debugSpectorJS) {
     return null;
   }
 
   if (!spector && globalThis.SPECTOR && !globalThis.luma?.spector) {
     log.probe(LOG_LEVEL, 'SPECTOR found and initialized. Start with `luma.spector.displayUI()`')();
-    const {Spector} = globalThis.SPECTOR as any;
-    spector = new Spector();
+    const {Spector: SpectorJS} = globalThis.SPECTOR as any;
+    spector = new SpectorJS();
     if (globalThis.luma) {
       (globalThis.luma as any).spector = spector;
     }