@luma.gl/core 9.1.0-beta.8 → 9.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luma.gl/core",
-  "version": "9.1.0-beta.8",
+  "version": "9.1.0",
   "description": "The luma.gl core Device API",
   "license": "MIT",
   "type": "module",
@@ -46,5 +46,5 @@
     "@probe.gl/stats": "^4.0.8",
     "@types/offscreencanvas": "^2019.6.4"
   },
-  "gitHead": "10846580c7a10c4cc48de01a4e5259cc0a00c249"
+  "gitHead": "e5cb5a93674bc7cc571c26dee4d2aef841fdff7f"
 }

package/src/adapter/canvas-context.ts

@@ -7,12 +7,10 @@ import type {Device} from './device';
 import type {Framebuffer} from './resources/framebuffer';
 import {log} from '../utils/log';
 import {uid} from '../utils/uid';
-import type {DepthStencilTextureFormat} from '../gpu-type-utils/texture-formats';
+import type {TextureFormat} from '../gpu-type-utils/texture-formats';
 
 /** Properties for a CanvasContext */
 export type CanvasContextProps = {
-  /** Identifier, for debugging */
-  id?: string;
   /** If a canvas not supplied, one will be created and added to the DOM. If a string, a canvas with that id will be looked up in the DOM */
   canvas?: HTMLCanvasElement | OffscreenCanvas | string | null;
   /** If new canvas is created, it will be created in the specified container, otherwise is appended as a child of document.body */
@@ -42,9 +40,8 @@ export type CanvasContextProps = {
  */
 export abstract class CanvasContext {
   static defaultProps: Required<CanvasContextProps> = {
-    id: undefined!,
     canvas: null,
-    width: 800,
+    width: 800, // width are height are only used by headless gl
     height: 600,
     useDevicePixels: true,
     autoResize: true,
@@ -55,41 +52,24 @@ export abstract class CanvasContext {
   };
 
   abstract readonly device: Device;
-  abstract readonly handle: unknown;
   readonly id: string;
-
   readonly props: Required<CanvasContextProps>;
   readonly canvas: HTMLCanvasElement | OffscreenCanvas;
   readonly htmlCanvas?: HTMLCanvasElement;
   readonly offscreenCanvas?: OffscreenCanvas;
   readonly type: 'html-canvas' | 'offscreen-canvas' | 'node';
 
-  protected _initializedResolvers = withResolvers<void>();
-
-  /** Promise that resolved once the resize observer has updated the pixel size */
-  initialized: Promise<void>;
-  isInitialized: boolean = false;
-
-  /** Visibility is automatically updated (via an IntersectionObserver) */
-  isVisible: boolean = true;
-
-  /** Device pixel ratio. Automatically updated via media queries */
-  devicePixelRatio: number;
+  /** Format of returned textures: "bgra8unorm", "rgba8unorm" */
+  abstract readonly format: TextureFormat;
+  /** Default stencil format for depth textures */
+  abstract readonly depthStencilFormat: TextureFormat;
 
-  /** Exact width of canvas in physical pixels (tracked by a ResizeObserver) */
-  pixelWidth: number;
-  /** Exact height of canvas in physical pixels (tracked by a ResizeObserver) */
-  pixelHeight: number;
+  width: number = 1;
+  height: number = 1;
 
-  /** Width of drawing buffer: automatically updated if props.autoResize is true */
-  drawingBufferWidth: number;
-  /** Height of drawing buffer: automatically updated if props.autoResize is true */
-  drawingBufferHeight: number;
+  readonly resizeObserver: ResizeObserver | undefined;
 
-  protected readonly _resizeObserver: ResizeObserver | undefined;
-  protected readonly _intersectionObserver: IntersectionObserver | undefined;
-
-  /** State used by luma.gl classes: TODO - remove */
+  /** State used by luma.gl classes: TODO - move to canvasContext*/
   readonly _canvasSizeInfo = {clientWidth: 0, clientHeight: 0, devicePixelRatio: 1};
 
   abstract get [Symbol.toStringTag](): string;
@@ -102,121 +82,61 @@ export abstract class CanvasContext {
     this.props = {...CanvasContext.defaultProps, ...props};
     props = this.props;
 
-    this.initialized = this._initializedResolvers.promise;
-
-    // Create a canvas element if needed
     if (!isBrowser()) {
+      this.id = 'node-canvas-context';
+      this.type = 'node';
+      this.width = this.props.width;
+      this.height = this.props.height;
       // TODO - does this prevent app from using jsdom style polyfills?
-      this.canvas = {width: props.width || 1, height: props.height || 1} as OffscreenCanvas;
-    } else if (!props.canvas) {
-      this.canvas = createCanvasElement(props);
+      this.canvas = null!;
+      return;
+    }
+
+    if (!props.canvas) {
+      const canvas = createCanvas(props);
+      const container = getContainer(props?.container || null);
+      container.insertBefore(canvas, container.firstChild);
+
+      this.canvas = canvas;
+
+      if (!props?.visible) {
+        this.canvas.style.visibility = 'hidden';
+      }
     } else if (typeof props.canvas === 'string') {
       this.canvas = getCanvasFromDOM(props.canvas);
     } else {
       this.canvas = props.canvas;
     }
 
-    if (typeof HTMLCanvasElement !== 'undefined' && this.canvas instanceof HTMLCanvasElement) {
-      this.id = props.id || this.canvas.id;
+    if (this.canvas instanceof HTMLCanvasElement) {
+      this.id = this.canvas.id;
       this.type = 'html-canvas';
       this.htmlCanvas = this.canvas;
-    } else if (typeof OffscreenCanvas !== 'undefined' && this.canvas instanceof OffscreenCanvas) {
-      this.id = props.id || 'offscreen-canvas';
+    } else {
+      this.id = 'offscreen-canvas';
       this.type = 'offscreen-canvas';
       this.offscreenCanvas = this.canvas;
-    } else {
-      // TODO - Node.js support is currently untested (was used for headless-gl in luma v8)
-      this.id = props.id || 'node-canvas-context';
-      this.type = 'node';
     }
 
-    // Initialize size variables (these will be updated by ResizeObserver)
-    this.pixelWidth = this.canvas.width;
-    this.pixelHeight = this.canvas.height;
-    this.drawingBufferWidth = this.canvas.width;
-    this.drawingBufferHeight = this.canvas.height;
-    this.devicePixelRatio = globalThis.devicePixelRatio || 1;
-
-    if (typeof HTMLCanvasElement !== 'undefined' && this.canvas instanceof HTMLCanvasElement) {
-      // Track visibility changes
-      this._intersectionObserver = new IntersectionObserver(entries =>
-        this._handleIntersection(entries)
-      );
-      this._intersectionObserver.observe(this.canvas);
-
-      // Track size changes
-      this._resizeObserver = new ResizeObserver(entries => this._handleResize(entries));
-      try {
-        this._resizeObserver.observe(this.canvas, {box: 'device-pixel-content-box'});
-      } catch {
-        // Safari fallback
-        this._resizeObserver.observe(this.canvas, {box: 'content-box'});
-      }
-
-      // Track device pixel ratio changes.
-      // Defer call to after construction completes to ensure `this.device` is available.
-      setTimeout(() => this._observeDevicePixelRatio(), 0);
+    // React to size changes
+    if (this.canvas instanceof HTMLCanvasElement && props.autoResize) {
+      this.resizeObserver = new ResizeObserver(entries => {
+        for (const entry of entries) {
+          if (entry.target === this.canvas) {
+            this.update();
+          }
+        }
+      });
+      this.resizeObserver.observe(this.canvas);
     }
   }
 
   /** Returns a framebuffer with properly resized current 'swap chain' textures */
-  abstract getCurrentFramebuffer(options?: {
-    depthStencilFormat?: DepthStencilTextureFormat | false;
-  }): Framebuffer;
-
-  // SIZE METHODS
-
-  /**
-   * Returns the size covered by the canvas in CSS pixels
-   * @note This can be different from the actual device pixel size of a canvas due to DPR scaling, and rounding to integer pixels
-   * @note This is independent of the canvas' internal drawing buffer size (.width, .height).
-   */
-  getCSSSize(): [number, number] {
-    if (typeof HTMLCanvasElement !== 'undefined' && this.canvas instanceof HTMLCanvasElement) {
-      return [this.canvas.clientWidth, this.canvas.clientHeight];
-    }
-    return [this.pixelWidth, this.pixelHeight];
-  }
-
-  /**
-   * Returns the size covered by the canvas in actual device pixels.
-   * @note This can be different from the 'CSS' size of a canvas due to DPR scaling, and rounding to integer pixels
-   * @note This is independent of the canvas' internal drawing buffer size (.width, .height).
-   */
-  getPixelSize(): [number, number] {
-    return [this.pixelWidth, this.pixelHeight];
-  }
-
-  /** Get the drawing buffer size (number of pixels GPU is rendering into, can be different from CSS size) */
-  getDrawingBufferSize(): [number, number] {
-    return [this.drawingBufferWidth, this.drawingBufferHeight];
-  }
-
-  /** Returns the biggest allowed framebuffer size. @todo Allow the application to limit this? */
-  getMaxDrawingBufferSize(): [number, number] {
-    const maxTextureDimension = this.device.limits.maxTextureDimension2D;
-    return [maxTextureDimension, maxTextureDimension];
-  }
-
-  /** Update the canvas drawing buffer size. Called automatically if props.autoResize is true. */
-  setDrawingBufferSize(width: number, height: number) {
-    this.canvas.width = width;
-    this.canvas.height = height;
-
-    this.drawingBufferWidth = width;
-    this.drawingBufferHeight = height;
-  }
-
-  /** @deprecated - TODO which values should we use for aspect */
-  getAspect(): number {
-    const [width, height] = this.getPixelSize();
-    return width / height;
-  }
+  abstract getCurrentFramebuffer(): Framebuffer;
 
   /**
-   * Returns the current DPR (number of physical pixels per CSS pixel), if props.useDevicePixels is true
-   * @note This can be a fractional (non-integer) number, e.g. when the user zooms in the browser.
-   * @note This function handles the non-HTML canvas cases
+   * Returns the current DPR, if props.useDevicePixels is true
+   * Device refers to physical
    */
   getDevicePixelRatio(useDevicePixels?: boolean | number): number {
     if (typeof OffscreenCanvas !== 'undefined' && this.canvas instanceof OffscreenCanvas) {
@@ -238,6 +158,35 @@ export abstract class CanvasContext {
     return useDevicePixels;
   }
 
+  /**
+   * Returns the size of drawing buffer in device pixels.
+   * @note This can be different from the 'CSS' size of a canvas, and also from the
+   * canvas' internal drawing buffer size (.width, .height).
+   * This is the size required to cover the canvas, adjusted for DPR
+   */
+  getPixelSize(): [number, number] {
+    switch (this.type) {
+      case 'node':
+        return [this.width, this.height];
+      case 'offscreen-canvas':
+        return [this.canvas.width, this.canvas.height];
+      case 'html-canvas':
+        const dpr = this.getDevicePixelRatio();
+        const canvas = this.canvas as HTMLCanvasElement;
+        // If not attached to DOM client size can be 0
+        return canvas.parentElement
+          ? [canvas.clientWidth * dpr, canvas.clientHeight * dpr]
+          : [this.canvas.width, this.canvas.height];
+      default:
+        throw new Error(this.type);
+    }
+  }
+
+  getAspect(): number {
+    const [width, height] = this.getPixelSize();
+    return width / height;
+  }
+
   /**
    * Returns multiplier need to convert CSS size to Device size
    */
@@ -246,7 +195,8 @@ export abstract class CanvasContext {
       // For headless gl we might have used custom width and height
       // hence use cached clientWidth
       const [drawingBufferWidth] = this.getDrawingBufferSize();
-      const {clientWidth} = this._canvasSizeInfo;
+      // _canvasSizeInfo may not be populated if `setDevicePixelRatio` is never called
+      const clientWidth = this._canvasSizeInfo.clientWidth || this.htmlCanvas?.clientWidth;
       return clientWidth ? drawingBufferWidth / clientWidth : 1;
     } catch {
       return 1;
@@ -270,114 +220,11 @@ export abstract class CanvasContext {
     return scalePixels(cssPixel, ratio, width, height, yInvert);
   }
 
-  // SUBCLASS OVERRIDES
-
-  /** Performs platform specific updates (WebGPU vs WebGL) */
-  protected abstract updateSize(size: [width: number, height: number]): void;
-
-  // IMPLEMENTATION
-
-  /**
-   * Allows subclass constructor to override the canvas id for auto created canvases.
-   * This can really help when debugging DOM in apps that create multiple devices
-   */
-  protected _setAutoCreatedCanvasId(id: string) {
-    if (this.htmlCanvas?.id === 'lumagl-auto-created-canvas') {
-      this.htmlCanvas.id = id;
-    }
-  }
-
-  /** reacts to our intersection observer */
-  protected _handleIntersection(entries: IntersectionObserverEntry[]) {
-    const entry = entries.find(entry_ => entry_.target === this.canvas);
-    if (!entry) {
-      return;
-    }
-    // TODO - store intersection rectangle?
-    const isVisible = entry.isIntersecting;
-    if (this.isVisible !== isVisible) {
-      this.isVisible = isVisible;
-      this.device.props.onVisibilityChange(this);
-    }
-  }
-
-  /**
-   * Reacts to an observed resize by using the most accurate pixel size information the browser can provide
-   * @see https://web.dev/articles/device-pixel-content-box
-   * @see https://webgpufundamentals.org/webgpu/lessons/webgpu-resizing-the-canvas.html
-   */
-  protected _handleResize(entries: ResizeObserverEntry[]) {
-    const entry = entries.find(entry_ => entry_.target === this.canvas);
-    if (!entry) {
-      return;
-    }
-
-    // Use the most accurate drawing buffer size information the current browser can provide
-    // Note: content box sizes are guaranteed to be integers
-    // Note: Safari falls back to contentBoxSize
-    const boxWidth =
-      entry.devicePixelContentBoxSize?.[0].inlineSize ||
-      entry.contentBoxSize[0].inlineSize * devicePixelRatio;
-
-    const boxHeight =
-      entry.devicePixelContentBoxSize?.[0].blockSize ||
-      entry.contentBoxSize[0].blockSize * devicePixelRatio;
-
-    // Update our drawing buffer size variables, saving the old values for logging
-    const oldPixelSize = this.getPixelSize();
-
-    // Make sure we don't overflow the maximum supported texture size
-    const [maxPixelWidth, maxPixelHeight] = this.getMaxDrawingBufferSize();
-    this.pixelWidth = Math.max(1, Math.min(boxWidth, maxPixelWidth));
-    this.pixelHeight = Math.max(1, Math.min(boxHeight, maxPixelHeight));
-
-    if (this.props.autoResize) {
-      // Update the canvas drawing buffer size
-      // TODO - This does not account for props.useDevicePixels
-      this.setDrawingBufferSize(this.pixelWidth, this.pixelHeight);
-
-      // Inform the subclass
-      this.updateSize(this.getDrawingBufferSize());
-    }
-
-    // Resolve the initialized promise
-    this._initializedResolvers.resolve();
-    this.isInitialized = true;
-
-    // Inform the device
-    this.device.props.onResize(this, {oldPixelSize});
-  }
-
-  /** Monitor DPR changes */
-  _observeDevicePixelRatio() {
-    const oldRatio = this.devicePixelRatio;
-    this.devicePixelRatio = window.devicePixelRatio;
-
-    // Inform the device
-    this.device.props.onDevicePixelRatioChange(this, {oldRatio});
-    // Set up a one time query against the current resolution.
-    matchMedia(`(resolution: ${this.devicePixelRatio}dppx)`).addEventListener(
-      'change',
-      () => this._observeDevicePixelRatio(),
-      {once: true}
-    );
-  }
-
-  // DEPRECATED
-
-  /** @deprecated Use canvasContext.setDrawingBufferSize()
-   * Resizes the canvas. Note: Has no effect if props.autoResize is true */
-  abstract resize(options?: {
-    width?: number;
-    height?: number;
-    useDevicePixels?: boolean | number;
-  }): void;
-
   /**
-   * @deprecated Use devicePixelRatio to set canvas width and height
+   * Use devicePixelRatio to set canvas width and height
    * @note this is a raw port of luma.gl v8 code. Might be worth a review
    */
-  _setDevicePixelRatio(
+  setDevicePixelRatio(
     devicePixelRatio: number,
     options: {width?: number; height?: number} = {}
   ): void {
@@ -437,11 +284,42 @@ export abstract class CanvasContext {
       }
     }
   }
+
+  // PRIVATE
+
+  /** @todo Major hack done to port the CSS methods above, base canvas context should not depend on WebGL */
+  getDrawingBufferSize(): [number, number] {
+    // @ts-expect-error This only works for WebGL
+    const gl = this.device.gl;
+    if (!gl) {
+      // use default device pixel ratio
+      throw new Error('canvas size');
+    }
+    return [gl.drawingBufferWidth, gl.drawingBufferHeight];
+  }
+
+  abstract resize(options?: {
+    width?: number;
+    height?: number;
+    useDevicePixels?: boolean | number;
+  }): void;
+
+  /** Perform platform specific updates (WebGPU vs WebGL) */
+  protected abstract update(): void;
+
+  /**
+   * Allows subclass constructor to override the canvas id for auto created canvases.
+   * This can really help when debugging DOM in apps that create multiple devices
+   */
+  protected _setAutoCreatedCanvasId(id: string) {
+    if (this.htmlCanvas?.id === 'lumagl-auto-created-canvas') {
+      this.htmlCanvas.id = id;
+    }
+  }
 }
 
 // HELPER FUNCTIONS
 
-/** Get a container element from a string or DOM element */
 function getContainer(container: HTMLElement | string | null): HTMLElement {
   if (typeof container === 'string') {
     const element = document.getElementById(container);
@@ -449,8 +327,7 @@ function getContainer(container: HTMLElement | string | null): HTMLElement {
       throw new Error(`${container} is not an HTML element`);
     }
     return element;
-  }
-  if (container) {
+  } else if (container) {
     return container;
   }
   return document.body;
@@ -459,37 +336,26 @@ function getContainer(container: HTMLElement | string | null): HTMLElement {
 /** Get a Canvas element from DOM id */
 function getCanvasFromDOM(canvasId: string): HTMLCanvasElement {
   const canvas = document.getElementById(canvasId);
-  if (
-    typeof canvas !== 'undefined' &&
-    typeof HTMLCanvasElement !== 'undefined' &&
-    !(canvas instanceof HTMLCanvasElement)
-  ) {
+  if (!(canvas instanceof HTMLCanvasElement)) {
     throw new Error('Object is not a canvas element');
   }
-  return canvas as HTMLCanvasElement;
+  return canvas;
 }
 
 /** Create a new canvas */
-function createCanvasElement(props: CanvasContextProps) {
+function createCanvas(props: CanvasContextProps) {
   const {width, height} = props;
-  const newCanvas = document.createElement('canvas');
-  newCanvas.id = uid('lumagl-auto-created-canvas');
-  newCanvas.width = width || 1;
-  newCanvas.height = height || 1;
-  newCanvas.style.width = Number.isFinite(width) ? `${width}px` : '100%';
-  newCanvas.style.height = Number.isFinite(height) ? `${height}px` : '100%';
-  if (!props?.visible) {
-    newCanvas.style.visibility = 'hidden';
-  }
-  // Insert the canvas in the DOM
-  const container = getContainer(props?.container || null);
-  container.insertBefore(newCanvas, container.firstChild);
-
-  return newCanvas;
+  const targetCanvas = document.createElement('canvas');
+  targetCanvas.id = uid('lumagl-auto-created-canvas');
+  targetCanvas.width = width || 1;
+  targetCanvas.height = height || 1;
+  targetCanvas.style.width = Number.isFinite(width) ? `${width}px` : '100%';
+  targetCanvas.style.height = Number.isFinite(height) ? `${height}px` : '100%';
+  return targetCanvas;
 }
 
 /**
- * Scales pixels linearly, handles edge cases
+ *
  * @param pixel
  * @param ratio
  * @param width
@@ -554,19 +420,3 @@ function scaleY(y: number, ratio: number, height: number, yInvert: boolean): num
     ? Math.max(0, height - 1 - Math.round(y * ratio))
     : Math.min(Math.round(y * ratio), height - 1);
 }
-
-// TODO - replace with Promise.withResolvers once we upgrade TS baseline
-function withResolvers<T>(): {
-  promise: Promise<T>;
-  resolve: (t: T) => void;
-  reject: (error: Error) => void;
-} {
-  let resolve: (t: T) => void;
-  let reject: (error: Error) => void;
-  const promise = new Promise<T>((_resolve, _reject) => {
-    resolve = _resolve;
-    reject = _reject;
-  });
-  // @ts-expect-error - in fact these are no used before initialized
-  return {promise, resolve, reject};
-}

package/src/adapter/device.ts

@@ -219,21 +219,12 @@ export type DeviceProps = {
   powerPreference?: 'default' | 'high-performance' | 'low-power';
   /** Hints that device creation should fail if no hardware GPU is available (if the system performance is "low"). */
   failIfMajorPerformanceCaveat?: boolean;
+  /** Error handling */
+  onError?: (error: Error) => unknown;
 
   /** WebGL specific: Properties passed through to WebGL2RenderingContext creation: `canvas.getContext('webgl2', props.webgl)` */
   webgl?: WebGLContextProps;
 
-  // CALLBACKS
-
-  /** Error handling - uncaught errors */
-  onError?: (error: Error) => unknown;
-  /** Called when the size of a canvas changes */
-  onResize?: (ctx: CanvasContext, info: {oldPixelSize: [number, number]}) => unknown;
-  /** Called when the visibility of a canvas changes */
-  onVisibilityChange?: (ctx: CanvasContext) => unknown;
-  /** Called when the device pixel ratio of a canvas changes */
-  onDevicePixelRatioChange?: (ctx: CanvasContext, info: {oldRatio: number}) => unknown;
-
   // DEBUG SETTINGS
 
   /** Turn on implementation defined checks that slow down execution but help break where errors occur */
@@ -242,8 +233,6 @@ export type DeviceProps = {
   debugShaders?: 'never' | 'errors' | 'warnings' | 'always';
   /** Renders a small version of updated Framebuffers into the primary canvas context. Can be set in console luma.log.set('debug-framebuffers', true) */
   debugFramebuffers?: boolean;
-  /** Traces resource caching, reuse, and destroys in the PipelineFactory */
-  debugFactories?: boolean;
   /** WebGL specific - Trace WebGL calls (instruments WebGL2RenderingContext at the expense of performance). Can be set in console luma.log.set('debug-webgl', true)  */
   debugWebGL?: boolean;
   /** WebGL specific - Initialize the SpectorJS WebGL debugger. Can be set in console luma.log.set('debug-spectorjs', true)  */
@@ -259,12 +248,8 @@ export type DeviceProps = {
   _disabledFeatures?: Partial<Record<DeviceFeature, boolean>>;
   /** WebGL specific - Initialize all features on startup */
   _initializeFeatures?: boolean;
-  /** Enable shader caching (via ShaderFactory) */
-  _cacheShaders?: boolean;
-  /** Enable shader caching (via PipelineFactory) */
-  _cachePipelines?: boolean;
   /** Never destroy cached shaders and pipelines */
-  _cacheDestroyPolicy?: 'unused' | 'never';
+  _factoryDestroyPolicy?: 'unused' | 'never';
   /** Resource default overrides */
   _resourceDefaults?: {
     texture?: Partial<TextureProps>;
@@ -308,35 +293,12 @@ export abstract class Device {
     powerPreference: 'high-performance',
     failIfMajorPerformanceCaveat: false,
     createCanvasContext: undefined!,
-    // WebGL specific
-    webgl: {},
 
     // Callbacks
     onError: (error: Error) => log.error(error.message)(),
-    onResize: (context: CanvasContext, info: {oldPixelSize: [number, number]}) => {
-      const [width, height] = context.getPixelSize();
-      const [prevWidth, prevHeight] = info.oldPixelSize;
-      log.log(1, `${context} Resized ${prevWidth}x${prevHeight} => ${width}x${height}px`)();
-    },
-    onVisibilityChange: (context: CanvasContext) =>
-      log.log(1, `${context} Visibility changed ${context.isVisible}`)(),
-    onDevicePixelRatioChange: (context: CanvasContext, info: {oldRatio: number}) =>
-      log.log(1, `${context} DPR changed ${info.oldRatio} => ${context.devicePixelRatio}`)(),
-
-    // Debug flags
-    debug: log.get('debug') || undefined!,
-    debugShaders: log.get('debug-shaders') || undefined!,
-    debugFramebuffers: Boolean(log.get('debug-framebuffers')),
-    debugFactories: Boolean(log.get('debug-factories')),
-    debugWebGL: Boolean(log.get('debug-webgl')),
-    debugSpectorJS: undefined!, // Note: log setting is queried by the spector.js code
-    debugSpectorJSUrl: undefined!,
 
-    // Experimental
     _requestMaxLimits: true,
-    _cacheShaders: false,
-    _cachePipelines: false,
-    _cacheDestroyPolicy: 'unused',
+    _factoryDestroyPolicy: 'unused',
     // TODO - Change these after confirming things work as expected
     _initializeFeatures: true,
     _disabledFeatures: {
@@ -344,6 +306,16 @@ export abstract class Device {
     },
     _resourceDefaults: {},
 
+    // WebGL specific
+    webgl: {},
+
+    debug: log.get('debug') || undefined!,
+    debugShaders: log.get('debug-shaders') || undefined!,
+    debugFramebuffers: Boolean(log.get('debug-framebuffers')),
+    debugWebGL: Boolean(log.get('debug-webgl')),
+    debugSpectorJS: undefined!, // Note: log setting is queried by the spector.js code
+    debugSpectorJSUrl: undefined!,
+
     // INTERNAL
     _handle: undefined!
   };
@@ -361,8 +333,6 @@ export abstract class Device {
   readonly id: string;
   /** type of this device */
   abstract readonly type: 'webgl' | 'webgpu' | 'unknown';
-  abstract readonly handle: unknown;
-
   /** A copy of the device props  */
   readonly props: Required<DeviceProps>;
   /** Available for the application to store data on the device */
@@ -386,11 +356,6 @@ export abstract class Device {
   /** WebGPU style device limits */
   abstract get limits(): DeviceLimits;
 
-  /** Optimal TextureFormat for displaying 8-bit depth, standard dynamic range content on this system. */
-  abstract preferredColorFormat: 'rgba8unorm' | 'bgra8unorm';
-  /** Default depth format used on this system */
-  abstract preferredDepthFormat: 'depth16' | 'depth24plus' | 'depth32float';
-
   /** Determines what operations are supported on a texture format, checking against supported device features */
   getTextureFormatCapabilities(format: TextureFormat): DeviceTextureFormatCapabilities {
     const genericCapabilities = getTextureFormatCapabilities(format);
@@ -633,7 +598,7 @@ export abstract class Device {
       } else if (props.data instanceof Uint16Array) {
         newProps.indexType = 'uint16';
       } else {
-        log.warn('indices buffer content must be of type uint16 or uint32')();
+        log.warn('indices buffer content must be of integer type')();
       }
     }
     return newProps;