@luma.gl/webgl 9.2.6 → 9.3.0-alpha.4

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

@@ -2,33 +2,45 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import type {
-  Device,
-  TextureProps,
-  TextureViewProps,
-  Sampler,
-  SamplerProps,
-  CopyExternalImageOptions,
-  CopyImageDataOptions,
-  TypedArray
+// @ts-nocheck
+
+import {
+  type Device,
+  type TextureProps,
+  type TextureViewProps,
+  type Sampler,
+  type SamplerProps,
+  type CopyExternalImageOptions,
+  type CopyImageDataOptions,
+  type TextureReadOptions,
+  type TextureWriteOptions,
+  type TextureFormat,
+  type TypedArray,
+  Buffer,
+  Texture,
+  log
 } from '@luma.gl/core';
-import {Texture, log} from '@luma.gl/core';
+
 import {
+  GLSamplerParameters,
+  GLValueParameters,
   GL,
   GLTextureTarget,
   GLTextureCubeMapTarget,
   GLTexelDataFormat,
-  GLPixelType,
-  // GLDataType,
-  GLSamplerParameters,
-  GLValueParameters
+  GLPixelType
 } from '@luma.gl/constants';
+
 import {getTextureFormatWebGL} from '../converters/webgl-texture-table';
 import {convertSamplerParametersToWebGL} from '../converters/sampler-parameters';
 import {withGLParameters} from '../../context/state-tracker/with-parameters';
 import {WebGLDevice} from '../webgl-device';
+import {WEBGLFramebuffer} from './webgl-framebuffer';
 import {WEBGLSampler} from './webgl-sampler';
 import {WEBGLTextureView} from './webgl-texture-view';
+import {convertDataTypeToGLDataType} from '../converters/webgl-shadertypes';
+import {convertGLDataTypeToDataType} from '../converters/shader-formats';
+import {getTypedArrayConstructor, getDataType} from '@luma.gl/core';
 
 /**
  * WebGL... the texture API from hell... hopefully made simpler
@@ -65,9 +77,12 @@ export class WEBGLTexture extends Texture {
   // state
   /** Texture binding slot - TODO - move to texture view? */
   _textureUnit: number = 0;
+  /** Chached framebuffer */
+  _framebuffer: WEBGLFramebuffer | null = null;
 
   constructor(device: Device, props: TextureProps) {
-    super(device, props);
+    // const byteAlignment = this._getRowByteAlignment(props.format, props.width);
+    super(device, props, {byteAlignment: 1});
 
     this.device = device as WebGLDevice;
     this.gl = this.device.gl;
@@ -119,6 +134,10 @@ export class WEBGLTexture extends Texture {
 
   override destroy(): void {
     if (this.handle) {
+      // Destroy any cached framebuffer
+      this._framebuffer?.destroy();
+      this._framebuffer = null;
+
       this.gl.deleteTexture(this.handle);
       this.removeStats();
       this.trackDeallocatedMemory('Texture');
@@ -138,12 +157,51 @@ export class WEBGLTexture extends Texture {
     this._setSamplerParameters(parameters);
   }
 
+  copyExternalImage(options_: CopyExternalImageOptions): {width: number; height: number} {
+    const options = this._normalizeCopyExternalImageOptions(options_);
+
+    if (options.sourceX || options.sourceY) {
+      // requires copyTexSubImage2D from a framebuffer'
+      throw new Error('WebGL does not support sourceX/sourceY)');
+    }
+
+    const {glFormat, glType} = this;
+    const {image, depth, mipLevel, x, y, z, width, height} = options;
+
+    // WebGL cube maps specify faces by overriding target instead of using the z parameter
+    const glTarget = getWebGLCubeFaceTarget(this.glTarget, this.dimension, z);
+    const glParameters: GLValueParameters = options.flipY ? {[GL.UNPACK_FLIP_Y_WEBGL]: true} : {};
+
+    this.gl.bindTexture(this.glTarget, this.handle);
+
+    withGLParameters(this.gl, glParameters, () => {
+      switch (this.dimension) {
+        case '2d':
+        case 'cube':
+          // prettier-ignore
+          this.gl.texSubImage2D(glTarget, mipLevel, x, y, width, height, glFormat, glType, image);
+          break;
+        case '2d-array':
+        case '3d':
+          // prettier-ignore
+          this.gl.texSubImage3D(glTarget, mipLevel, x, y, z, width, height, depth, glFormat, glType, image);
+          break;
+        default:
+        // Can never happen in WebGL
+      }
+    });
+
+    this.gl.bindTexture(this.glTarget, null);
+
+    return {width: options.width, height: options.height};
+  }
+
   copyImageData(options_: CopyImageDataOptions): void {
     const options = this._normalizeCopyImageDataOptions(options_);
 
     const typedArray = options.data as TypedArray;
-    const {width, height, depth} = this;
-    const {mipLevel = 0, byteOffset = 0, x = 0, y = 0, z = 0} = options;
+    const {width, height, depth, z = 0} = options;
+    const {mipLevel = 0, byteOffset = 0, x = 0, y = 0} = options;
     const {glFormat, glType, compressed} = this;
 
     // Target used for face updates, but not for binding
@@ -164,12 +222,13 @@ export class WEBGLTexture extends Texture {
 
     const glParameters: GLValueParameters = !this.compressed
       ? {
+          [GL.UNPACK_ALIGNMENT]: this.byteAlignment,
           ...(unpackRowLength !== undefined ? {[GL.UNPACK_ROW_LENGTH]: unpackRowLength} : {}),
           [GL.UNPACK_IMAGE_HEIGHT]: options.rowsPerImage
         }
       : {};
 
-    this.gl.bindTexture(glTarget, this.handle);
+    this.gl.bindTexture(this.glTarget, this.handle);
 
     withGLParameters(this.gl, glParameters, () => {
       switch (this.dimension) {
@@ -198,51 +257,163 @@ export class WEBGLTexture extends Texture {
       }
     });
 
-    this.gl.bindTexture(glTarget, null);
+    this.gl.bindTexture(this.glTarget, null);
   }
 
-  copyExternalImage(options_: CopyExternalImageOptions): {width: number; height: number} {
-    const options = this._normalizeCopyExternalImageOptions(options_);
+  readBuffer(options: TextureReadOptions = {}, buffer?: Buffer): Buffer {
+    throw new Error('readBuffer not implemented');
+  }
 
-    if (options.sourceX || options.sourceY) {
-      // requires copyTexSubImage2D from a framebuffer'
-      throw new Error('WebGL does not support sourceX/sourceY)');
-    }
+  async readDataAsync(options: TextureReadOptions = {}): Promise<ArrayBuffer> {
+    return this.readDataSyncWebGL(options);
+  }
 
-    const {glFormat, glType} = this;
-    const {image, depth, mipLevel, x, y, z, width, height} = options;
+  writeBuffer(buffer: Buffer, options_: TextureWriteOptions = {}) {}
 
-    // WebGL cube maps specify faces by overriding target instead of using the depth parameter
+  writeData(data: ArrayBuffer | ArrayBufferView, options_: TextureWriteOptions = {}): void {
+    const options = this._normalizeTextureWriteOptions(options_);
+
+    const typedArray = ArrayBuffer.isView(data) ? data : new Uint8Array(data);
+    const {} = this;
+    const {width, height, mipLevel, x, y, z} = options;
+    const {glFormat, glType, compressed} = this;
+    const depth = 0; // TODO - fix
     const glTarget = getWebGLCubeFaceTarget(this.glTarget, this.dimension, depth);
-    const glParameters: GLValueParameters = options.flipY ? {[GL.UNPACK_FLIP_Y_WEBGL]: true} : {};
 
-    this.gl.bindTexture(this.glTarget, this.handle);
+    // const byteOffset = 0;
+    // const {bytesPerRow, rowsPerImage} = this.computeMemoryLayout(options);
+
+    const glParameters: GLValueParameters = !this.compressed
+      ? {
+          // WebGL does not require byte alignment, but allows it to be specified
+          [GL.UNPACK_ALIGNMENT]: this.byteAlignment
+          // [GL.UNPACK_ROW_LENGTH]: bytesPerRow,
+          // [GL.UNPACK_IMAGE_HEIGHT]: rowsPerImage
+        }
+      : {};
+
+    this.gl.bindTexture(glTarget, this.handle);
+    this.gl.bindBuffer(GL.PIXEL_UNPACK_BUFFER, null);
 
     withGLParameters(this.gl, glParameters, () => {
       switch (this.dimension) {
         case '2d':
         case 'cube':
-          // prettier-ignore
-          this.gl.texSubImage2D(glTarget, mipLevel, x, y, width, height, glFormat, glType, image);
+          if (compressed) {
+            // prettier-ignore
+            this.gl.compressedTexSubImage2D(glTarget, mipLevel, x, y, width, height, glFormat, typedArray);
+          } else {
+            // prettier-ignore
+            this.gl.texSubImage2D(glTarget, mipLevel, x, y, width, height, glFormat, glType, typedArray);
+          }
           break;
         case '2d-array':
         case '3d':
-          // prettier-ignore
-          this.gl.texSubImage3D(glTarget, mipLevel, x, y, z, width, height, depth, glFormat, glType, image);
+          if (compressed) {
+            // prettier-ignore
+            this.gl.compressedTexSubImage3D(glTarget, mipLevel, x, y, z, width, height, depth, glFormat, typedArray);
+          } else {
+            // prettier-ignore
+            this.gl.texSubImage3D(glTarget, mipLevel, x, y, z, width, height, depth, glFormat, glType, typedArray);
+          }
           break;
         default:
         // Can never happen in WebGL
       }
     });
 
-    this.gl.bindTexture(this.glTarget, null);
+    this.gl.bindTexture(glTarget, null);
+  }
 
-    return {width: options.width, height: options.height};
+  // IMPLEMENTATION SPECIFIC
+
+  /** @todo - for now we always use 1 for maximum compatibility, we can fine tune later */
+  private _getRowByteAlignment(format: TextureFormat, width: number): 1 | 2 | 4 | 8 {
+    // For best texture data read/write performance, calculate the biggest pack/unpack alignment
+    // that fits with the provided texture row byte length
+    // Note: Any RGBA or 32 bit type will be at least 4 bytes, which should result in good performance.
+    // const info = this.device.getTextureFormatInfo(format);
+    // const rowByteLength = width * info.bytesPerPixel;
+    // if (rowByteLength % 8 === 0) return 8;
+    // if (rowByteLength % 4 === 0) return 4;
+    // if (rowByteLength % 2 === 0) return 2;
+    return 1;
+  }
+
+  /**
+   * Wraps a given texture into a framebuffer object, that can be further used
+   * to read data from the texture object.
+   */
+  _getFramebuffer() {
+    this._framebuffer ||= this.device.createFramebuffer({
+      id: `framebuffer-for-${this.id}`,
+      width: this.width,
+      height: this.height,
+      colorAttachments: [this]
+    });
+    return this._framebuffer;
   }
 
   // WEBGL SPECIFIC
 
-  generateMipmapsWebGL(options?: {force?: boolean}): void {
+  override readDataSyncWebGL(options_: TextureReadOptions = {}): ArrayBuffer {
+    const options = this._normalizeTextureReadOptions(options_);
+
+    const memoryLayout = this.computeMemoryLayout(options);
+
+    // const formatInfo = getTextureFormatInfo(format);
+    // Allocate pixel array if not already available, using supplied type
+    const shaderType = convertGLDataTypeToDataType(this.glType);
+
+    const ArrayType = getTypedArrayConstructor(shaderType);
+    // const components = glFormatToComponents(this.glFormat);
+    // TODO - check for composite type (components = 1).
+
+    const targetArray = new ArrayType(memoryLayout.byteLength) as
+      | Uint8Array
+      | Uint16Array
+      | Float32Array;
+
+    // Pixel array available, if necessary, deduce type from it.
+    const signedType = getDataType(targetArray);
+    const sourceType = convertDataTypeToGLDataType(signedType);
+
+    // There is a lot of hedging in the WebGL2 spec about what formats are guaranteed to be readable
+    // (It should always be possible to read RGBA/UNSIGNED_BYTE, but most other combinations are not guaranteed)
+    // Querying is possible but expensive:
+    // const {device} = framebuffer;
+    // texture.glReadFormat ||= gl.getParameter(gl.IMPLEMENTATION_COLOR_READ_FORMAT);
+    // texture.glReadType ||= gl.getParameter(gl.IMPLEMENTATION_COLOR_READ_TYPE);
+    // console.log('params', device.getGLKey(texture.glReadFormat), device.getGLKey(texture.glReadType));
+
+    const framebuffer = this._getFramebuffer();
+
+    // Note: luma.gl overrides bindFramebuffer so that we can reliably restore the previous framebuffer (this is the only function for which we do that)
+    const prevHandle = this.gl.bindFramebuffer(
+      GL.FRAMEBUFFER,
+      framebuffer.handle
+    ) as unknown as WebGLFramebuffer | null;
+
+    // Select the color attachment to read from
+    this.gl.readBuffer(GL.COLOR_ATTACHMENT0);
+    this.gl.readPixels(
+      options.x,
+      options.y,
+      options.width,
+      options.height,
+      this.glFormat,
+      sourceType,
+      targetArray
+    );
+    this.gl.bindFramebuffer(GL.FRAMEBUFFER, prevHandle || null);
+
+    return targetArray.buffer as ArrayBuffer;
+  }
+
+  /**
+   * @note - this is used by the DynamicTexture class to generate mipmaps on WebGL
+   */
+  override generateMipmapsWebGL(options?: {force?: boolean}): void {
     const isFilterableAndRenderable =
       this.device.isTextureFormatRenderable(this.props.format) &&
       this.device.isTextureFormatFilterable(this.props.format);
@@ -312,6 +483,7 @@ export class WEBGLTexture extends Texture {
 
     this.gl.bindTexture(this.glTarget, null);
   }
+
   _getActiveUnit(): number {
     return this.gl.getParameter(GL.ACTIVE_TEXTURE) - GL.TEXTURE0;
   }

package/src/adapter/resources/webgl-transform-feedback.ts

@@ -69,8 +69,8 @@ export class WEBGLTransformFeedback extends TransformFeedback {
     this.unusedBuffers = {};
 
     this.bind(() => {
-      for (const bufferName in buffers) {
-        this.setBuffer(bufferName, buffers[bufferName]);
+      for (const [bufferName, buffer] of Object.entries(buffers)) {
+        this.setBuffer(bufferName, buffer);
       }
     });
   }
@@ -99,7 +99,7 @@ export class WEBGLTransformFeedback extends TransformFeedback {
       return this.buffers[locationOrName] || null;
     }
     const location = this._getVaryingIndex(locationOrName);
-    return location >= 0 ? this.buffers[location] : null;
+    return this.buffers[location] ?? null;
   }
 
   bind(funcOrHandle: (() => void) | WebGLTransformFeedback | null = this.handle) {
@@ -162,8 +162,8 @@ export class WEBGLTransformFeedback extends TransformFeedback {
    * cannot be bound to 'TRANSFORM_FEEDBACK_BUFFER' target.
    */
   protected _bindBuffers(): void {
-    for (const bufferIndex in this.buffers) {
-      const {buffer, byteLength, byteOffset} = this._getBufferRange(this.buffers[bufferIndex]);
+    for (const [bufferIndex, bufferEntry] of Object.entries(this.buffers)) {
+      const {buffer, byteLength, byteOffset} = this._getBufferRange(bufferEntry);
       this._bindBuffer(Number(bufferIndex), buffer, byteOffset, byteLength);
     }
   }

package/src/adapter/webgl-adapter.ts

@@ -55,10 +55,9 @@ export class WebGLAdapter extends Adapter {
     if (gl instanceof WebGLDevice) {
       return gl;
     }
-    // @ts-expect-error
-    if (gl?.device instanceof WebGLDevice) {
-      // @ts-expect-error
-      return gl.device as WebGLDevice;
+    const existingDevice = WebGLDevice.getDeviceFromContext(gl as WebGL2RenderingContext | null);
+    if (existingDevice) {
+      return existingDevice;
     }
     if (!isWebGL(gl)) {
       throw new Error('Invalid WebGL2RenderingContext');
@@ -78,40 +77,44 @@ export class WebGLAdapter extends Adapter {
   async create(props: DeviceProps = {}): Promise<WebGLDevice> {
     const {WebGLDevice} = await import('./webgl-device');
 
-    log.groupCollapsed(LOG_LEVEL, 'WebGLDevice created')();
-    try {
-      const promises: Promise<unknown>[] = [];
+    const promises: Promise<unknown>[] = [];
 
-      // Load webgl and spector debug scripts from CDN if requested
-      if (props.debugWebGL || props.debug) {
-        promises.push(loadWebGLDeveloperTools());
-      }
+    // Load webgl and spector debug scripts from CDN if requested
+    if (props.debugWebGL || props.debug) {
+      promises.push(loadWebGLDeveloperTools());
+    }
 
-      if (props.debugSpectorJS) {
-        promises.push(loadSpectorJS(props));
-      }
+    if (props.debugSpectorJS) {
+      promises.push(loadSpectorJS(props));
+    }
 
-      // Wait for all the loads to settle before creating the context.
-      // The Device.create() functions are async, so in contrast to the constructor, we can `await` here.
-      const results = await Promise.allSettled(promises);
-      for (const result of results) {
-        if (result.status === 'rejected') {
-          log.error(`Failed to initialize debug libraries ${result.reason}`)();
-        }
+    // 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}`)();
       }
+    }
 
+    try {
       const device = new WebGLDevice(props);
 
+      log.groupCollapsed(LOG_LEVEL, `WebGLDevice ${device.id} created`)();
       // Log some debug info about the newly created context
       const message = `\
 ${device._reused ? 'Reusing' : 'Created'} device with WebGL2 ${device.props.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)();
-
       return device;
     } finally {
       log.groupEnd(LOG_LEVEL)();
+      log.info(
+        LOG_LEVEL,
+        `%cWebGL call tracing: luma.log.set('debug-webgl') `,
+        'color: white; background: blue; padding: 2px 6px; border-radius: 3px;'
+      )();
     }
   }
 }
@@ -121,8 +124,7 @@ function isWebGL(gl: any): gl is WebGL2RenderingContext {
   if (typeof WebGL2RenderingContext !== 'undefined' && gl instanceof WebGL2RenderingContext) {
     return true;
   }
-  // Look for debug contexts, headless gl etc
-  return Boolean(gl && Number.isFinite(gl._version));
+  return Boolean(gl && typeof gl.createVertexArray === 'function');
 }
 
 export const webgl2Adapter = new WebGLAdapter();

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

@@ -27,16 +27,27 @@ export class WebGLCanvasContext extends CanvasContext {
 
     // Base class constructor cannot access derived methods/fields, so we need to call these functions in the subclass constructor
     this._setAutoCreatedCanvasId(`${this.device.id}-canvas`);
-    this._updateDevice();
-  }
-
-  getCurrentFramebuffer(): WEBGLFramebuffer {
-    // Setting handle to null returns a reference to the default framebuffer
-    this._framebuffer = this._framebuffer || new WEBGLFramebuffer(this.device, {handle: null});
-    return this._framebuffer;
+    this._configureDevice();
   }
 
   // IMPLEMENTATION OF ABSTRACT METHODS
 
-  _updateDevice(): void {}
+  _configureDevice(): void {
+    const shouldResize =
+      this.drawingBufferWidth !== this._framebuffer?.width ||
+      this.drawingBufferHeight !== this._framebuffer?.height;
+    if (shouldResize) {
+      this._framebuffer?.resize([this.drawingBufferWidth, this.drawingBufferHeight]);
+    }
+  }
+
+  _getCurrentFramebuffer(): WEBGLFramebuffer {
+    this._framebuffer ||= new WEBGLFramebuffer(this.device, {
+      id: 'canvas-context-framebuffer',
+      handle: null, // Setting handle to null returns a reference to the default WebGL framebuffer
+      width: this.drawingBufferWidth,
+      height: this.drawingBufferHeight
+    });
+    return this._framebuffer;
+  }
 }

package/src/adapter/webgl-device.ts

@@ -36,6 +36,7 @@ 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 {getWebGLContextData} from '../context/helpers/webgl-context-data';
 import {getDeviceInfo} from './device-helpers/webgl-device-info';
 import {WebGLDeviceFeatures} from './device-helpers/webgl-device-features';
 import {WebGLDeviceLimits} from './device-helpers/webgl-device-limits';
@@ -57,6 +58,7 @@ import {WEBGLCommandBuffer} from './resources/webgl-command-buffer';
 import {WEBGLVertexArray} from './resources/webgl-vertex-array';
 import {WEBGLTransformFeedback} from './resources/webgl-transform-feedback';
 import {WEBGLQuerySet} from './resources/webgl-query-set';
+import {WEBGLFence} from './resources/webgl-fence';
 
 import {readPixelsToArray, readPixelsToBuffer} from './helpers/webgl-texture-utils';
 import {
@@ -69,6 +71,13 @@ import {getWebGLExtension} from '../context/helpers/webgl-extensions';
 
 /** WebGPU style Device API for a WebGL context */
 export class WebGLDevice extends Device {
+  static getDeviceFromContext(gl: WebGL2RenderingContext | null): WebGLDevice | null {
+    if (!gl) {
+      return null;
+    }
+    // @ts-expect-error Ingore WebGL2RenderingContext type
+    return gl.luma?.device ?? null;
+  }
   // Public `Device` API
 
   /** type of this device */
@@ -99,7 +108,7 @@ export class WebGLDevice extends Device {
   _constants: (TypedArray | null)[];
 
   /** State used by luma.gl classes - TODO - not used? */
-  readonly _extensions: GLExtensions = {};
+  readonly extensions!: GLExtensions;
   _polyfilled: boolean = false;
 
   /** Instance of Spector.js (if initialized) */
@@ -140,7 +149,8 @@ export class WebGLDevice extends Device {
     // Note that this can be avoided in webgl2adapter.create() if
     // DeviceProps._reuseDevices is set.
     // @ts-expect-error device is attached to context
-    let device: WebGLDevice | undefined = canvasContextProps.canvas?.gl?.device;
+    const existingContext = canvasContextProps.canvas?.gl ?? null;
+    let device: WebGLDevice | null = WebGLDevice.getDeviceFromContext(existingContext);
     if (device) {
       throw new Error(`WebGL context already attached to device ${device.id}`);
     }
@@ -160,6 +170,9 @@ export class WebGLDevice extends Device {
     if (props.powerPreference !== undefined) {
       webglContextAttributes.powerPreference = props.powerPreference;
     }
+    if (props.failIfMajorPerformanceCaveat !== undefined) {
+      webglContextAttributes.failIfMajorPerformanceCaveat = props.failIfMajorPerformanceCaveat;
+    }
 
     // Check if we should attach to an externally created context or create a new context
     const externalGLContext = this.props._handle as WebGL2RenderingContext | null;
@@ -186,8 +199,7 @@ export class WebGLDevice extends Device {
 
     // Note that the browser will only create one WebGL context per canvas.
     // This means that a newly created gl context may already have a device attached to it.
-    // @ts-expect-error luma.gl stores a device reference on the context.
-    device = gl.device;
+    device = WebGLDevice.getDeviceFromContext(gl);
     if (device) {
       if (props._reuseDevices) {
         log.log(
@@ -195,6 +207,9 @@ export class WebGLDevice extends Device {
           `Not creating a new Device, instead returning a reference to Device ${device.id} already attached to WebGL context`,
           device
         )();
+        // Destroy the orphaned canvas context that was created above (line 149)
+        // to prevent its ResizeObserver from firing callbacks with undefined device
+        this.canvasContext.destroy();
         device._reused = true;
         return device;
       }
@@ -210,18 +225,15 @@ export class WebGLDevice extends Device {
     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
-    // TODO - remove, this is only used to detect debug contexts.
-    (this.gl as any)._version = 2; // Update GL context: Store WebGL version field on gl context (HACK to identify debug contexts)
+    const contextData = getWebGLContextData(this.handle);
+    contextData.device = this; // Update GL context: Link webgl context back to device
+
+    this.extensions = contextData.extensions || (contextData.extensions = {});
 
     // initialize luma Device fields
-    this.info = getDeviceInfo(this.gl, this._extensions);
+    this.info = getDeviceInfo(this.gl, this.extensions);
     this.limits = new WebGLDeviceLimits(this.gl);
-    this.features = new WebGLDeviceFeatures(
-      this.gl,
-      this._extensions,
-      this.props._disabledFeatures
-    );
+    this.features = new WebGLDeviceFeatures(this.gl, this.extensions, this.props._disabledFeatures);
     if (this.props._initializeFeatures) {
       this.features.initializeFeatures();
     }
@@ -232,15 +244,14 @@ 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
-    const debugWebGL = props.debugWebGL || props.debug;
-    const traceWebGL = props.debugWebGL;
-    if (debugWebGL) {
-      this.gl = makeDebugContext(this.gl, {debugWebGL, traceWebGL});
+    // props.debug - instrument the WebGL context with Khronos debug tools
+    // props.debugWebGL - activate WebGL context tracing, force log level to at least 1
+    if (props.debug || props.debugWebGL) {
+      this.gl = makeDebugContext(this.gl, {debugWebGL: true, traceWebGL: props.debugWebGL});
       log.warn('WebGL debug mode activated. Performance reduced.')();
-      if (props.debugWebGL) {
-        log.level = Math.max(log.level, 1);
-      }
+    }
+    if (props.debugWebGL) {
+      log.level = Math.max(log.level, 1);
     }
 
     this.commandEncoder = new WEBGLCommandEncoder(this, {id: `${this}-command-encoder`});
@@ -264,7 +275,8 @@ export class WebGLDevice extends Device {
     // Therefore we must do nothing in destroy() if props._reuseDevices is true
     if (!this.props._reuseDevices && !this._reused) {
       // Delete the reference to the device that we store on the WebGL context
-      delete (this.gl as any).device;
+      const contextData = getWebGLContextData(this.handle);
+      contextData.device = null;
     }
   }
 
@@ -274,10 +286,6 @@ export class WebGLDevice extends Device {
 
   // IMPLEMENTATION OF ABSTRACT DEVICE
 
-  getTextureByteAlignment(): number {
-    return 4;
-  }
-
   createCanvasContext(props?: CanvasContextProps): CanvasContext {
     throw new Error('WebGL only supports a single canvas');
   }
@@ -319,6 +327,10 @@ export class WebGLDevice extends Device {
     return new WEBGLQuerySet(this, props);
   }
 
+  override createFence(): WEBGLFence {
+    return new WEBGLFence(this);
+  }
+
   createRenderPipeline(props: RenderPipelineProps): WEBGLRenderPipeline {
     return new WEBGLRenderPipeline(this, props);
   }
@@ -406,7 +418,7 @@ export class WebGLDevice extends Device {
   override _getDeviceSpecificTextureFormatCapabilities(
     capabilities: DeviceTextureFormatCapabilities
   ): DeviceTextureFormatCapabilities {
-    return getTextureFormatCapabilitiesWebGL(this.gl, capabilities, this._extensions);
+    return getTextureFormatCapabilitiesWebGL(this.gl, capabilities, this.extensions);
   }
 
   //
@@ -509,8 +521,8 @@ export class WebGLDevice extends Device {
 
   /** Ensure extensions are only requested once */
   getExtension(name: keyof GLExtensions): GLExtensions {
-    getWebGLExtension(this.gl, name, this._extensions);
-    return this._extensions;
+    getWebGLExtension(this.gl, name, this.extensions);
+    return this.extensions;
   }
 
   // INTERNAL SUPPORT METHODS FOR WEBGL RESOURCES