@luma.gl/webgl 9.0.17 → 9.1.0-alpha.10

package/src/adapter/resources/webgl-vertex-array.ts

@@ -2,8 +2,9 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import type {Device, Buffer, VertexArrayProps, TypedArray, NumberArray} from '@luma.gl/core';
-import {VertexArray, getScratchArray, fillArray} from '@luma.gl/core';
+import type {TypedArray, NumericArray} from '@math.gl/types';
+import type {Device, Buffer, VertexArrayProps} from '@luma.gl/core';
+import {VertexArray, getScratchArray} from '@luma.gl/core';
 import {GL} from '@luma.gl/constants';
 import {getBrowser} from '@probe.gl/env';
 
@@ -11,7 +12,7 @@ import {WebGLDevice} from '../webgl-device';
 import {WEBGLBuffer} from '../resources/webgl-buffer';
 
 import {getGLFromVertexType} from '../converters/vertex-formats';
-// import {getGLFromVertexType} from '../converters/vertex-formats';
+import {fillArray} from '../../utils/fill-array';
 
 /** VertexArrayObject wrapper */
 export class WEBGLVertexArray extends VertexArray {
@@ -32,10 +33,10 @@ export class WEBGLVertexArray extends VertexArray {
   }
 
   // Create a VertexArray
-  constructor(device: WebGLDevice, props?: VertexArrayProps) {
+  constructor(device: WebGLDevice, props: VertexArrayProps) {
     super(device, props);
     this.device = device;
-    this.handle = this.device.gl.createVertexArray();
+    this.handle = this.device.gl.createVertexArray()!;
   }
 
   override destroy(): void {
@@ -252,7 +253,7 @@ export class WEBGLVertexArray extends VertexArray {
  * TODO - convert Arrays based on known type? (read type from accessor, don't assume Float32Array)
  * TODO - handle single values for size 1 attributes?
  */
-function normalizeConstantArrayValue(arrayValue: NumberArray) {
+function normalizeConstantArrayValue(arrayValue: NumericArray) {
   if (Array.isArray(arrayValue)) {
     return new Float32Array(arrayValue);
   }
@@ -262,7 +263,7 @@ function normalizeConstantArrayValue(arrayValue: NumberArray) {
 /**
  *
  */
-function compareConstantArrayValues(v1: NumberArray, v2: NumberArray): boolean {
+function compareConstantArrayValues(v1: NumericArray, v2: NumericArray): boolean {
   if (!v1 || !v2 || v1.length !== v2.length || v1.constructor !== v2.constructor) {
     return false;
   }

package/src/adapter/webgl-adapter.ts

@@ -0,0 +1,113 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {Adapter, Device, DeviceProps, CanvasContext, 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({gl: 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.debug) {
+      promises.push(loadWebGLDeveloperTools());
+    }
+
+    if (props.debugWithSpectorJS) {
+      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);
+    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')();
+
+    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} from '@luma.gl/core';
+import type {CanvasContextProps, TextureFormat} from '@luma.gl/core';
 import {CanvasContext} from '@luma.gl/core';
 import {WebGLDevice} from './webgl-device';
 import {WEBGLFramebuffer} from './resources/webgl-framebuffer';
@@ -12,6 +12,9 @@ import {WEBGLFramebuffer} from './resources/webgl-framebuffer';
  */
 export class WebGLCanvasContext extends CanvasContext {
   readonly device: WebGLDevice;
+  readonly format: TextureFormat = 'rgba8unorm';
+  readonly depthStencilFormat: TextureFormat = 'depth24plus';
+
   presentationSize: [number, number];
   private _framebuffer: WEBGLFramebuffer | null = null;
 

package/src/adapter/webgl-device.ts

@@ -2,37 +2,26 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import type {
-  DeviceProps,
-  DeviceInfo,
-  CanvasContextProps,
-  TextureFormat,
-  VertexArray,
-  VertexArrayProps,
-  Framebuffer,
-  Buffer,
-  Texture,
-  TypedArray
-} from '@luma.gl/core';
-import {Device, CanvasContext, log, uid, assert} from '@luma.gl/core';
+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 {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 {loadSpectorJS, initializeSpectorJS} from '../context/debug/spector';
-import {loadWebGLDeveloperTools, makeDebugContext} from '../context/debug/webgl-developer-tools';
+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 {
@@ -80,17 +69,12 @@ 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';
 
@@ -106,86 +90,19 @@ export class WebGLDevice extends Device {
 
   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
@@ -209,8 +126,7 @@ ${device.info.vendor}, ${device.info.renderer} for canvas: ${device.canvasContex
       this._resolveContextLost = resolve;
     });
 
-    let gl: WebGL2RenderingContext | null = props.gl || null;
-    gl ||= createBrowserContext(this.canvasContext.canvas, {
+    this.handle = createBrowserContext(this.canvasContext.canvas, {
       ...props,
       onContextLost: (event: Event) =>
         this._resolveContextLost?.({
@@ -218,22 +134,22 @@ ${device.info.vendor}, ${device.info.renderer} for canvas: ${device.canvasContex
           message: 'Entered sleep mode, or too many apps or browser tabs are using the GPU.'
         })
     });
+    this.gl = this.handle;
 
-    if (!gl) {
+    if (!this.handle) {
       throw new Error('WebGL context creation failed');
     }
 
-    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)
 
-    if (props.spector) {
-      this.spectorJS = initializeSpectorJS({...this.props, canvas: this.handle.canvas});
-    }
-
-    // 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);
@@ -244,15 +160,12 @@ ${device.info.vendor}, ${device.info.renderer} for canvas: ${device.canvasContex
     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
+    // 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});
       this.debug = true;
@@ -271,10 +184,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);
   }
@@ -298,7 +207,8 @@ ${device.info.vendor}, ${device.info.renderer} for canvas: ${device.canvasContex
     return new WEBGLBuffer(this, newProps);
   }
 
-  _createTexture(props: TextureProps): WEBGLTexture {
+  // _createTexture(props: TextureProps): WEBGLTexture {
+  _createTexture(props: TextureProps): Texture {
     return new WEBGLTexture(this, props);
   }
 
@@ -348,7 +258,7 @@ ${device.info.vendor}, ${device.info.renderer} for canvas: ${device.canvasContex
 
   private renderPass: WEBGLRenderPass | null = null;
 
-  override createCommandEncoder(props?: CommandEncoderProps): WEBGLCommandEncoder {
+  override createCommandEncoder(props: CommandEncoderProps = {}): WEBGLCommandEncoder {
     return new WEBGLCommandEncoder(this, props);
   }
 
@@ -433,20 +343,6 @@ ${device.info.vendor}, ${device.info.renderer} for canvas: ${device.canvasContex
   // 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
@@ -469,12 +365,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);
+    const webglState = WebGLStateTracker.get(this.gl);
+    webglState.pop();
   }
 
   /**
@@ -538,7 +436,7 @@ ${device.info.vendor}, ${device.info.renderer} for canvas: ${device.canvasContex
         setConstantUintArray(this, location, constant as Uint32Array);
         break;
       default:
-        assert(false);
+        throw new Error('constant');
     }
   }
 
@@ -549,15 +447,6 @@ ${device.info.vendor}, ${device.info.renderer} for canvas: ${device.canvasContex
   }
 }
 
-/** 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));
-}
-
 /** Set constant float array attribute */
 function setConstantFloatArray(device: WebGLDevice, location: number, array: Float32Array): void {
   switch (array.length) {
@@ -574,7 +463,7 @@ function setConstantFloatArray(device: WebGLDevice, location: number, array: Flo
       device.gl.vertexAttrib4fv(location, array);
       break;
     default:
-      assert(false);
+    // assert(false);
   }
 }
 

package/src/classic/accessor.ts

@@ -2,10 +2,39 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {assert, checkProps, Buffer, AccessorObject} from '@luma.gl/core';
+import {Buffer} from '@luma.gl/core';
 import {GL} from '@luma.gl/constants';
 import {getTypedArrayFromGLType} from './typed-array-utils';
 
+/**
+ * Attribute descriptor object
+ * @deprecated Use ShaderLayout
+ */
+export interface AccessorObject {
+  buffer?: Buffer;
+  // format: VertexFormat;
+  offset?: number;
+  // can now be described with single WebGPU-style `format` string
+
+  //
+  stride?: number;
+
+  /** @deprecated - Use accessor.stepMode */
+  divisor?: number;
+
+  /** @deprecated - Infer from format */
+  type?: number;
+  /** @deprecated - Infer from format */
+  size?: number;
+  /** @deprecated - Infer from format */
+  normalized?: boolean;
+  /** @deprecated - Infer from format */
+  integer?: boolean;
+
+  /** @deprecated */
+  index?: number;
+}
+
 const DEFAULT_ACCESSOR_VALUES = {
   offset: 0,
   stride: 0,
@@ -16,13 +45,6 @@ const DEFAULT_ACCESSOR_VALUES = {
   integer: false
 };
 
-const PROP_CHECKS = {
-  deprecatedProps: {
-    instanced: 'divisor',
-    isInstanced: 'divisor'
-  }
-};
-
 export class Accessor implements AccessorObject {
   offset?: number;
   stride?: number;
@@ -43,7 +65,7 @@ export class Accessor implements AccessorObject {
   }
 
   static getBytesPerVertex(accessor: AccessorObject): number {
-    assert(accessor.size);
+    // assert(accessor.size);
     // TODO: using `FLOAT` when type is not specified,
     // ensure this assumption is valid or force API to specify type.
     const ArrayType = getTypedArrayFromGLType(accessor.type || GL.FLOAT);
@@ -82,8 +104,6 @@ export class Accessor implements AccessorObject {
 
   // eslint-disable-next-line complexity, max-statements
   _assign(props: AccessorObject = {}): this {
-    props = checkProps('Accessor', props, PROP_CHECKS);
-
     if (props.type !== undefined) {
       this.type = props.type;
 

package/src/classic/clear.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {Device, Framebuffer, assert} from '@luma.gl/core';
+import {Device, Framebuffer} from '@luma.gl/core';
 import {WebGLDevice} from '../adapter/webgl-device';
 import {withGLParameters} from '../context/state-tracker/with-parameters';
 
@@ -16,9 +16,6 @@ const GL_DEPTH = 0x1801;
 const GL_STENCIL = 0x1802;
 const GL_DEPTH_STENCIL = 0x84f9;
 
-// Should disappear if asserts are removed
-const ERR_ARGUMENTS = 'clear: bad arguments';
-
 /**
  * Optionally clears depth, color and stencil buffers
  * @deprecated Set clear color when creating a RenderPass.
@@ -57,7 +54,7 @@ export function clear(
     }
   }
 
-  assert(clearFlags !== 0, ERR_ARGUMENTS);
+  // assert(clearFlags !== 0, ERR_ARGUMENTS);
 
   // Temporarily set any clear "colors" and call clear
   const gl = (device as WebGLDevice).gl;
@@ -112,7 +109,7 @@ export function clearBuffer(
         break;
 
       default:
-        assert(false, ERR_ARGUMENTS);
+      // assert(false, ERR_ARGUMENTS);
     }
   });
 }