@luma.gl/webgl 9.2.5 → 9.3.0-alpha.2

package/dist/index.d.ts

@@ -8,6 +8,7 @@ export { WEBGLTexture } from "./adapter/resources/webgl-texture.js";
 export { WEBGLShader } from "./adapter/resources/webgl-shader.js";
 export { WEBGLSampler } from "./adapter/resources/webgl-sampler.js";
 export { WEBGLFramebuffer } from "./adapter/resources/webgl-framebuffer.js";
+export { WEBGLFence } from "./adapter/resources/webgl-fence.js";
 export { WEBGLRenderPipeline } from "./adapter/resources/webgl-render-pipeline.js";
 export { WEBGLCommandEncoder } from "./adapter/resources/webgl-command-encoder.js";
 export { WEBGLRenderPass } from "./adapter/resources/webgl-render-pass.js";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAWA,YAAY,EAAC,iBAAiB,EAAC,wDAAqD;AAGpF,OAAO,EAAC,aAAa,EAAC,mCAAgC;AACtD,YAAY,EAAC,YAAY,EAAC,mCAAgC;AAG1D,OAAO,EAAC,WAAW,EAAC,kCAA+B;AACnD,OAAO,EAAC,kBAAkB,EAAC,0CAAuC;AAGlE,OAAO,EAAC,WAAW,EAAC,4CAAyC;AAC7D,OAAO,EAAC,YAAY,EAAC,6CAA0C;AAE/D,OAAO,EAAC,WAAW,EAAC,4CAAyC;AAC7D,OAAO,EAAC,YAAY,EAAC,6CAA0C;AAC/D,OAAO,EAAC,gBAAgB,EAAC,iDAA8C;AAEvE,OAAO,EAAC,mBAAmB,EAAC,qDAAkD;AAE9E,OAAO,EAAC,mBAAmB,EAAC,qDAAkD;AAC9E,OAAO,EAAC,eAAe,EAAC,iDAA8C;AAEtE,OAAO,EAAC,gBAAgB,EAAC,kDAA+C;AAGxE,OAAO,EAAC,sBAAsB,EAAC,wDAAqD;AAIpF,OAAO,EAAC,mBAAmB,EAAE,oBAAoB,EAAC,kDAA+C;AAGjG,OAAO,EAAC,uBAAuB,EAAC,yDAAsD;AACtF,OAAO,EAAC,iBAAiB,EAAC,uDAAoD;AAG9E,OAAO,EACL,iBAAiB,EACjB,eAAe,EACf,eAAe,EAChB,sDAAmD;AAEpD,OAAO,EAAC,gBAAgB,EAAC,mDAAgD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAWA,YAAY,EAAC,iBAAiB,EAAC,wDAAqD;AAGpF,OAAO,EAAC,aAAa,EAAC,mCAAgC;AACtD,YAAY,EAAC,YAAY,EAAC,mCAAgC;AAG1D,OAAO,EAAC,WAAW,EAAC,kCAA+B;AACnD,OAAO,EAAC,kBAAkB,EAAC,0CAAuC;AAGlE,OAAO,EAAC,WAAW,EAAC,4CAAyC;AAC7D,OAAO,EAAC,YAAY,EAAC,6CAA0C;AAE/D,OAAO,EAAC,WAAW,EAAC,4CAAyC;AAC7D,OAAO,EAAC,YAAY,EAAC,6CAA0C;AAC/D,OAAO,EAAC,gBAAgB,EAAC,iDAA8C;AACvE,OAAO,EAAC,UAAU,EAAC,2CAAwC;AAE3D,OAAO,EAAC,mBAAmB,EAAC,qDAAkD;AAE9E,OAAO,EAAC,mBAAmB,EAAC,qDAAkD;AAC9E,OAAO,EAAC,eAAe,EAAC,iDAA8C;AAEtE,OAAO,EAAC,gBAAgB,EAAC,kDAA+C;AAGxE,OAAO,EAAC,sBAAsB,EAAC,wDAAqD;AAIpF,OAAO,EAAC,mBAAmB,EAAE,oBAAoB,EAAC,kDAA+C;AAGjG,OAAO,EAAC,uBAAuB,EAAC,yDAAsD;AACtF,OAAO,EAAC,iBAAiB,EAAC,uDAAoD;AAG9E,OAAO,EACL,iBAAiB,EACjB,eAAe,EACf,eAAe,EAChB,sDAAmD;AAEpD,OAAO,EAAC,gBAAgB,EAAC,mDAAgD"}

package/dist/index.js

@@ -13,6 +13,7 @@ export { WEBGLTexture } from "./adapter/resources/webgl-texture.js";
 export { WEBGLShader } from "./adapter/resources/webgl-shader.js";
 export { WEBGLSampler } from "./adapter/resources/webgl-sampler.js";
 export { WEBGLFramebuffer } from "./adapter/resources/webgl-framebuffer.js";
+export { WEBGLFence } from "./adapter/resources/webgl-fence.js";
 export { WEBGLRenderPipeline } from "./adapter/resources/webgl-render-pipeline.js";
 // export {WEBGLComputePipeline} from './adapter/resources/webgl-compute-pipeline';
 export { WEBGLCommandEncoder } from "./adapter/resources/webgl-command-encoder.js";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,UAAU;AACV,+BAA+B;AAC/B,oCAAoC;AAWpC,wBAAwB;AACxB,OAAO,EAAC,aAAa,EAAC,mCAAgC;AAGtD,uBAAuB;AACvB,OAAO,EAAC,WAAW,EAAC,kCAA+B;AACnD,OAAO,EAAC,kBAAkB,EAAC,0CAAuC;AAElE,yBAAyB;AACzB,OAAO,EAAC,WAAW,EAAC,4CAAyC;AAC7D,OAAO,EAAC,YAAY,EAAC,6CAA0C;AAC/D,mFAAmF;AACnF,OAAO,EAAC,WAAW,EAAC,4CAAyC;AAC7D,OAAO,EAAC,YAAY,EAAC,6CAA0C;AAC/D,OAAO,EAAC,gBAAgB,EAAC,iDAA8C;AAEvE,OAAO,EAAC,mBAAmB,EAAC,qDAAkD;AAC9E,mFAAmF;AACnF,OAAO,EAAC,mBAAmB,EAAC,qDAAkD;AAC9E,OAAO,EAAC,eAAe,EAAC,iDAA8C;AACtE,2EAA2E;AAC3E,OAAO,EAAC,gBAAgB,EAAC,kDAA+C;AAExE,wBAAwB;AACxB,OAAO,EAAC,sBAAsB,EAAC,wDAAqD;AAEpF,wBAAwB;AAExB,OAAO,EAAC,mBAAmB,EAAE,oBAAoB,EAAC,kDAA+C;AAEjG,yBAAyB;AACzB,OAAO,EAAC,uBAAuB,EAAC,yDAAsD;AACtF,OAAO,EAAC,iBAAiB,EAAC,uDAAoD;AAE9E,0BAA0B;AAC1B,OAAO,EACL,iBAAiB,EACjB,eAAe,EACf,eAAe,EAChB,sDAAmD;AAEpD,OAAO,EAAC,gBAAgB,EAAC,mDAAgD"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,UAAU;AACV,+BAA+B;AAC/B,oCAAoC;AAWpC,wBAAwB;AACxB,OAAO,EAAC,aAAa,EAAC,mCAAgC;AAGtD,uBAAuB;AACvB,OAAO,EAAC,WAAW,EAAC,kCAA+B;AACnD,OAAO,EAAC,kBAAkB,EAAC,0CAAuC;AAElE,yBAAyB;AACzB,OAAO,EAAC,WAAW,EAAC,4CAAyC;AAC7D,OAAO,EAAC,YAAY,EAAC,6CAA0C;AAC/D,mFAAmF;AACnF,OAAO,EAAC,WAAW,EAAC,4CAAyC;AAC7D,OAAO,EAAC,YAAY,EAAC,6CAA0C;AAC/D,OAAO,EAAC,gBAAgB,EAAC,iDAA8C;AACvE,OAAO,EAAC,UAAU,EAAC,2CAAwC;AAE3D,OAAO,EAAC,mBAAmB,EAAC,qDAAkD;AAC9E,mFAAmF;AACnF,OAAO,EAAC,mBAAmB,EAAC,qDAAkD;AAC9E,OAAO,EAAC,eAAe,EAAC,iDAA8C;AACtE,2EAA2E;AAC3E,OAAO,EAAC,gBAAgB,EAAC,kDAA+C;AAExE,wBAAwB;AACxB,OAAO,EAAC,sBAAsB,EAAC,wDAAqD;AAEpF,wBAAwB;AAExB,OAAO,EAAC,mBAAmB,EAAE,oBAAoB,EAAC,kDAA+C;AAEjG,yBAAyB;AACzB,OAAO,EAAC,uBAAuB,EAAC,yDAAsD;AACtF,OAAO,EAAC,iBAAiB,EAAC,uDAAoD;AAE9E,0BAA0B;AAC1B,OAAO,EACL,iBAAiB,EACjB,eAAe,EACf,eAAe,EAChB,sDAAmD;AAEpD,OAAO,EAAC,gBAAgB,EAAC,mDAAgD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luma.gl/webgl",
-  "version": "9.2.5",
+  "version": "9.3.0-alpha.2",
   "description": "WebGL2 adapter for the luma.gl core API",
   "type": "module",
   "license": "MIT",
@@ -40,12 +40,12 @@
     "prepublishOnly": "npm run build-minified-bundle && npm run build-dev-bundle"
   },
   "peerDependencies": {
-    "@luma.gl/core": "~9.2.0"
+    "@luma.gl/core": "9.2.0-alpha.6"
   },
   "dependencies": {
-    "@luma.gl/constants": "9.2.5",
+    "@luma.gl/constants": "9.3.0-alpha.2",
     "@math.gl/types": "^4.1.0",
     "@probe.gl/env": "^4.0.8"
   },
-  "gitHead": "a8efd26edd0c61c7bb29ea700c6c38f544f60326"
+  "gitHead": "7fedf8d8902f58490a4ffca9a873daee3c732f24"
 }

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

@@ -42,6 +42,7 @@ export class WEBGLBuffer extends Buffer {
     // - In WebGL2, we can use GL.COPY_READ_BUFFER which avoids locking the type here
     this.glTarget = getWebGLTarget(this.props.usage);
     this.glUsage = getWebGLUsage(this.props.usage);
+    // Note: uint8 indices are converted to uint16 during device normalization for WebGPU compatibility
     this.glIndexType = this.props.indexType === 'uint32' ? GL.UNSIGNED_INT : GL.UNSIGNED_SHORT;
 
     // Set data: (re)initializes the buffer

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

@@ -0,0 +1,55 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {Fence, type FenceProps} from '@luma.gl/core';
+import {WebGLDevice} from '../webgl-device';
+
+/** WebGL fence implemented with gl.fenceSync */
+export class WEBGLFence extends Fence {
+  readonly device: WebGLDevice;
+  readonly gl: WebGL2RenderingContext;
+  readonly handle: WebGLSync;
+  readonly signaled: Promise<void>;
+  private _signaled = false;
+
+  constructor(device: WebGLDevice, props: FenceProps = {}) {
+    super(device, {});
+    this.device = device;
+    this.gl = device.gl;
+
+    const sync = this.props.handle || this.gl.fenceSync(this.gl.SYNC_GPU_COMMANDS_COMPLETE, 0);
+    if (!sync) {
+      throw new Error('Failed to create WebGL fence');
+    }
+    this.handle = sync;
+
+    this.signaled = new Promise(resolve => {
+      const poll = () => {
+        const status = this.gl.clientWaitSync(this.handle, 0, 0);
+        if (status === this.gl.ALREADY_SIGNALED || status === this.gl.CONDITION_SATISFIED) {
+          this._signaled = true;
+          resolve();
+        } else {
+          setTimeout(poll, 1);
+        }
+      };
+      poll();
+    });
+  }
+
+  isSignaled(): boolean {
+    if (this._signaled) {
+      return true;
+    }
+    const status = this.gl.getSyncParameter(this.handle, this.gl.SYNC_STATUS);
+    this._signaled = status === this.gl.SIGNALED;
+    return this._signaled;
+  }
+
+  destroy(): void {
+    if (!this.destroyed) {
+      this.gl.deleteSync(this.handle);
+    }
+  }
+}

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

@@ -50,7 +50,8 @@ export class WEBGLRenderPass extends RenderPass {
         (_, i) => GL.COLOR_ATTACHMENT0 + i
       );
       this.device.gl.drawBuffers(drawBuffers);
-    } else {
+    } else if (!this.props.framebuffer) {
+      // Default framebuffer only supports GL.BACK/GL.NONE draw buffers
       this.device.gl.drawBuffers([GL.BACK]);
     }
 
@@ -110,12 +111,9 @@ export class WEBGLRenderPass extends RenderPass {
     if (parameters.blendConstant) {
       glParameters.blendColor = parameters.blendConstant;
     }
-    if (parameters.stencilReference) {
-      // eslint-disable-next-line no-console
-      console.warn('RenderPassParameters.stencilReference not yet implemented in WebGL');
-      // parameters.stencilFunc = [func, ref, mask];
-      // Does this work?
+    if (parameters.stencilReference !== undefined) {
       glParameters[GL.STENCIL_REF] = parameters.stencilReference;
+      glParameters[GL.STENCIL_BACK_REF] = parameters.stencilReference;
     }
 
     if ('colorMask' in parameters) {

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/webgl-adapter.ts

@@ -78,40 +78,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 +125,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;
+  }
 }