@luma.gl/webgl 9.0.0-alpha.3 → 9.0.0-alpha.30

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

@@ -1,25 +1,30 @@
-import type {BufferProps} from '@luma.gl/api';
-import {Buffer, assert} from '@luma.gl/api';
-import GL from '@luma.gl/constants';
-import WebGLDevice from '../webgl-device';
+import type {BufferProps} from '@luma.gl/core';
+import {Buffer, assert} from '@luma.gl/core';
+import {GL} from '@luma.gl/constants';
+import {WebGLDevice} from '../webgl-device';
 
 const DEBUG_DATA_LENGTH = 10;
 
 /** WebGL Buffer interface */
-export default class WEBGLBuffer extends Buffer {
+export class WEBGLBuffer extends Buffer {
   readonly device: WebGLDevice;
   readonly gl: WebGLRenderingContext;
   readonly gl2: WebGL2RenderingContext | null;
   readonly handle: WebGLBuffer;
-  readonly target: number;
 
+  /** Target in OpenGL defines the type of buffer */
+  readonly glTarget: GL.ARRAY_BUFFER | GL.ELEMENT_ARRAY_BUFFER | GL.UNIFORM_BUFFER;
+  /** Usage is a hint on how frequently the buffer will be updates */
+  readonly glUsage: GL.STATIC_DRAW | GL.DYNAMIC_DRAW;
+  /** Index type is needed when issuing draw calls, so we pre-compute it */
+  readonly glIndexType: GL.UNSIGNED_SHORT | GL.UNSIGNED_INT = GL.UNSIGNED_SHORT;
+
+  /** Number of bytes allocated on the GPU for this buffer */
   byteLength: number;
+  /** Number of bytes used */
   bytesUsed: number;
-  debugData: ArrayBuffer;
-
-  webglUsage: number;
-
-  accessor: {};
+  /** A partial CPU-side copy of the data in this buffer, for debugging purposes */
+  debugData: ArrayBuffer | null = null;
 
   constructor(device: WebGLDevice, props: BufferProps = {}) {
     super(device, props);
@@ -28,18 +33,17 @@ export default class WEBGLBuffer extends Buffer {
     this.gl = this.device.gl;
     this.gl2 = this.device.gl2;
 
-    const handle = typeof props === 'object' ? (props as BufferProps).handle : undefined;
+    const handle = typeof props === 'object' ? (props ).handle : undefined;
     this.handle = handle || this.gl.createBuffer();
-    // @ts-expect-error Add metadata for spector
-    this.handle.__SPECTOR_Metadata = {...this.props, data: typeof this.props.data}; // {name: this.props.id};
-
-    // In WebGL1, need to make sure we use GL.ELEMENT_ARRAY_BUFFER when initializing element buffers
-    // otherwise buffer type will lock to generic (non-element) buffer
-    // In WebGL2, we can use GL.COPY_READ_BUFFER which avoids locking the type here
-    // @ts-expect-error Hack - Checking for subclass prop
-    this.target = this.props.target || getWebGLTarget(this.props.usage);
-    // @ts-expect-error Hack - Checking for subclass prop
-    this.webglUsage = this.props.webglUsage || getWebGLUsage(this.props.usage);
+    device.setSpectorMetadata(this.handle, {...this.props, data: typeof this.props.data});
+
+    // - In WebGL1, need to make sure we use GL.ELEMENT_ARRAY_BUFFER when initializing element buffers
+    //   otherwise buffer type will lock to generic (non-element) 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);
+    this.glIndexType = this.props.indexType === 'uint32' ? GL.UNSIGNED_INT :  GL.UNSIGNED_SHORT;
+
     this.debugData = null;
 
     // Set data: (re)initializes the buffer
@@ -48,25 +52,19 @@ export default class WEBGLBuffer extends Buffer {
     } else {
       this._initWithByteLength(props.byteLength || 0);
     }
-
-    // Deprecated: Merge main props and accessor
-    // this.accessor = {...props.accessor};
-
-    // Object.seal(this);
   }
 
-   // PRIVATE METHODS
+  // PRIVATE METHODS
 
-  // Allocate a new buffer and initialize to contents of typed array
+  /** Allocate a new buffer and initialize to contents of typed array */
   _initWithData(data, byteOffset: number = 0, byteLength: number = data.byteLength + byteOffset): this {
     assert(ArrayBuffer.isView(data));
 
-    const target = this._getWriteTarget();
-
-    this.gl.bindBuffer(target, this.handle);
-    this.gl.bufferData(target, byteLength, this.webglUsage);
-    this.gl.bufferSubData(target, byteOffset, data);
-    this.gl.bindBuffer(target, null);
+    const glTarget = this._getWriteTarget();
+    this.gl.bindBuffer(glTarget, this.handle);
+    this.gl.bufferData(glTarget, byteLength, this.glUsage);
+    this.gl.bufferSubData(glTarget, byteOffset, data);
+    this.gl.bindBuffer(glTarget, null);
 
     this.debugData = data.slice(0, DEBUG_DATA_LENGTH);
     this.bytesUsed = byteLength;
@@ -88,11 +86,11 @@ export default class WEBGLBuffer extends Buffer {
       data = new Float32Array(0);
     }
 
-    const target = this._getWriteTarget();
+    const glTarget = this._getWriteTarget();
 
-    this.gl.bindBuffer(target, this.handle);
-    this.gl.bufferData(target, data, this.webglUsage);
-    this.gl.bindBuffer(target, null);
+    this.gl.bindBuffer(glTarget, this.handle);
+    this.gl.bufferData(glTarget, data, this.glUsage);
+    this.gl.bindBuffer(glTarget, null);
 
     this.debugData = null;
     this.bytesUsed = byteLength;
@@ -101,41 +99,40 @@ export default class WEBGLBuffer extends Buffer {
     return this;
   }
 
-  destroy(): void {
-    if (this.handle) {
+  override destroy(): void {
+    if (!this.destroyed && this.handle) {
       this.removeStats();
       this.trackDeallocatedMemory();
       this.gl.deleteBuffer(this.handle);
+      this.destroyed = true;
       // @ts-expect-error
       this.handle = null;
     }
   }
 
-  write(data: ArrayBufferView, byteOffset: number = 0): void {
+  override write(data: ArrayBufferView, byteOffset: number = 0): void {
     const srcOffset = 0;
-    const byteLength = data.byteLength;
+    const byteLength = undefined; // data.byteLength;
 
     // Create the buffer - binding it here for the first time locks the type
     // In WebGL2, use GL.COPY_WRITE_BUFFER to avoid locking the type
-    const target = this.device.isWebGL2 ? GL.COPY_WRITE_BUFFER : this.target;
-    this.gl.bindBuffer(target, this.handle);
+    const glTarget = this.device.isWebGL2 ? GL.COPY_WRITE_BUFFER : this.glTarget;
+    this.gl.bindBuffer(glTarget, this.handle);
     // WebGL2: subData supports additional srcOffset and length parameters
     if (srcOffset !== 0 || byteLength !== undefined) {
       this.device.assertWebGL2();
-
-      // @ts-expect-error
-      this.gl.bufferSubData(this.target, offset, data, srcOffset, byteLength);
+      this.gl2.bufferSubData(glTarget, byteOffset, data, srcOffset, byteLength);
     } else {
-      this.gl.bufferSubData(target, byteOffset, data);
+      this.gl.bufferSubData(glTarget, byteOffset, data);
     }
-    this.gl.bindBuffer(target, null);
+    this.gl.bindBuffer(glTarget, null);
 
     // TODO - update local `data` if offsets are right
     // this.debugData = data.slice(byteOffset, 40);
   }
 
   /** Read data from the buffer */
-  async readAsync(
+  override async readAsync(
     byteOffset: number = 0,
     byteLength?: number
   ): Promise<ArrayBuffer> {
@@ -162,13 +159,13 @@ export default class WEBGLBuffer extends Buffer {
   }
 
   _getWriteTarget() {
-    return this.target;
-    // return this.device.isWebGL2 ? GL.COPY_WRITE_BUFFER : this.target;
+    return this.glTarget;
+    // return this.device.isWebGL2 ? GL.COPY_WRITE_BUFFER : this.glTarget;
   }
 
   _getReadTarget() {
-    return this.target;
-    return this.device.isWebGL2 ? GL.COPY_READ_BUFFER : this.target;
+    return this.glTarget;
+    // return this.device.isWebGL2 ? GL.COPY_READ_BUFFER : this.glTarget;
   }
 }
 
@@ -183,7 +180,7 @@ export default class WEBGLBuffer extends Buffer {
 // static INDIRECT = 0x0100;
 // static QUERY_RESOLVE = 0x0200;
 
-function getWebGLTarget(usage: number): GL {
+function getWebGLTarget(usage: number): GL.ARRAY_BUFFER | GL.ELEMENT_ARRAY_BUFFER | GL.UNIFORM_BUFFER {
   if (usage & Buffer.INDEX) {
     return GL.ELEMENT_ARRAY_BUFFER;
   }
@@ -205,7 +202,8 @@ function getWebGLTarget(usage: number): GL {
   return GL.ARRAY_BUFFER;
 }
 
-function getWebGLUsage(usage: number): GL {
+/** @todo usage is not passed correctly */
+function getWebGLUsage(usage: number): GL.STATIC_DRAW | GL.DYNAMIC_DRAW {
   if (usage & Buffer.INDEX) {
     return GL.STATIC_DRAW;
   }
@@ -215,5 +213,5 @@ function getWebGLUsage(usage: number): GL {
   if (usage & Buffer.UNIFORM) {
     return GL.DYNAMIC_DRAW;
   }
-  return GL.DYNAMIC_DRAW;
+  return GL.STATIC_DRAW;
 }

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

@@ -1,12 +1,24 @@
+// luma.gl, MIT license
+
 import type {
   CopyBufferToBufferOptions,
   CopyBufferToTextureOptions,
   CopyTextureToBufferOptions,
   CopyTextureToTextureOptions
-} from '@luma.gl/api';
-import GL from '@luma.gl/constants';
-import WebGLDevice from '../webgl-device';
-import WEBGLBuffer from './webgl-buffer';
+} from '@luma.gl/core';
+import {
+  CommandBuffer,
+  Texture,
+  // Buffer,
+  Framebuffer
+} from '@luma.gl/core';
+import {GL} from '@luma.gl/constants';
+
+// import {getTypedArrayFromGLType, getGLTypeFromTypedArray} from '../../classic/typed-array-utils';
+import {WebGLDevice} from '../webgl-device';
+import {WEBGLBuffer} from './webgl-buffer';
+import {WEBGLTexture} from './webgl-texture';
+import {WEBGLFramebuffer} from './webgl-framebuffer';
 
 function cast<T>(value: unknown): T {
   return value as T;
@@ -38,25 +50,31 @@ type Command =
   | CopyTextureToBufferCommand
   | CopyTextureToTextureCommand;
 
-export default class CommandBuffer {
+export class WEBGLCommandBuffer extends CommandBuffer {
+  device: WebGLDevice;
   commands: Command[] = [];
-}
 
-export function submitCommands(device: WebGLDevice, commands: Command[] = []) {
-  for (const command of commands) {
-    switch (command.name) {
-      case 'copy-buffer-to-buffer':
-        _copyBufferToBuffer(device, command.options);
-        break;
-      case 'copy-buffer-to-texture':
-        _copyBufferToTexture(device, command.options);
-        break;
-      case 'copy-texture-to-buffer':
-        _copyTextureToBuffer(device, command.options);
-        break;
-      case 'copy-texture-to-texture':
-        _copyTextureToTexture(device, command.options);
-        break;
+  constructor(device: WebGLDevice) {
+    super({});
+    this.device = device;
+  }
+
+  submitCommands(commands: Command[] = this.commands) {
+    for (const command of commands) {
+      switch (command.name) {
+        case 'copy-buffer-to-buffer':
+          _copyBufferToBuffer(this.device, command.options);
+          break;
+        case 'copy-buffer-to-texture':
+          _copyBufferToTexture(this.device, command.options);
+          break;
+        case 'copy-texture-to-buffer':
+          _copyTextureToBuffer(this.device, command.options);
+          break;
+        case 'copy-texture-to-texture':
+          _copyTextureToTexture(this.device, command.options);
+          break;
+      }
     }
   }
 }
@@ -65,7 +83,7 @@ function _copyBufferToBuffer(device: WebGLDevice, options: CopyBufferToBufferOpt
   const source = cast<WEBGLBuffer>(options.source);
   const destination = cast<WEBGLBuffer>(options.destination);
 
-  const {gl2} = device;
+  const gl2 = device.assertWebGL2();
   if (gl2) {
     // In WebGL2 we can perform the copy on the GPU
     // Use GL.COPY_READ_BUFFER+GL.COPY_WRITE_BUFFER avoid disturbing other targets and locking type
@@ -87,8 +105,297 @@ function _copyBufferToBuffer(device: WebGLDevice, options: CopyBufferToBufferOpt
   }
 }
 
-function _copyBufferToTexture(device: WebGLDevice, options: CopyBufferToTextureOptions): void {}
+/**
+ * Copies data from a Buffer object into a Texture object
+ * NOTE: doesn't wait for copy to be complete
+ */
+function _copyBufferToTexture(device: WebGLDevice, options: CopyBufferToTextureOptions): void {
+  throw new Error('Not implemented');
+}
+
+/**
+ * Copies data from a Texture object into a Buffer object.
+ * NOTE: doesn't wait for copy to be complete
+ */
+function _copyTextureToBuffer(device: WebGLDevice, options: CopyTextureToBufferOptions): void {
+  const {
+    /** Texture to copy to/from. */
+    source,
+    /**  Mip-map level of the texture to copy to/from. (Default 0) */
+    mipLevel = 0,
+    /** Defines which aspects of the texture to copy to/from. */
+    aspect = 'all',
+
+    /** Width to copy */
+    width = options.source.width,
+    /** Height to copy */
+    height = options.source.height,
+    depthOrArrayLayers = 0,
+    /** Defines the origin of the copy - the minimum corner of the texture sub-region to copy to/from. */
+    origin = [0, 0],
+
+    /** Destination buffer */
+    destination,
+    /** Offset, in bytes, from the beginning of the buffer to the start of the image data (default 0) */
+    byteOffset = 0,
+    /**
+     * The stride, in bytes, between the beginning of each block row and the subsequent block row.
+     * Required if there are multiple block rows (i.e. the copy height or depth is more than one block).
+     */
+    bytesPerRow,
+    /**
+     * Number of block rows per single image of the texture.
+     * rowsPerImage &times; bytesPerRow is the stride, in bytes, between the beginning of each image of data and the subsequent image.
+     * Required if there are multiple images (i.e. the copy depth is more than one).
+     */
+    rowsPerImage
+  } = options;
+
+  // TODO - Not possible to read just stencil or depth part in WebGL?
+  if (aspect !== 'all') {
+    throw new Error('not supported');
+  }
+
+  // TODO - mipLevels are set when attaching texture to framebuffer
+  if (mipLevel !== 0 || depthOrArrayLayers !== undefined || bytesPerRow || rowsPerImage) {
+    throw new Error('not implemented');
+  }
+
+  // Asynchronous read (PIXEL_PACK_BUFFER) is WebGL2 only feature
+  const gl2 = device.assertWebGL2();
+
+  const {framebuffer, destroyFramebuffer} = getFramebuffer(source);
+  try {
+    const webglBuffer = destination as WEBGLBuffer;
+    const sourceWidth = width || framebuffer.width;
+    const sourceHeight = height || framebuffer.height;
+
+    // TODO - hack - should be deduced
+    const sourceFormat = GL.RGBA;
+    const sourceType = GL.UNSIGNED_BYTE;
+
+    // if (!target) {
+    //   // Create new buffer with enough size
+    //   const components = glFormatToComponents(sourceFormat);
+    //   const byteCount = glTypeToBytes(sourceType);
+    //   const byteLength = byteOffset + sourceWidth * sourceHeight * components * byteCount;
+    //   target = device.createBuffer({byteLength});
+    // }
+
+    gl2.bindBuffer(GL.PIXEL_PACK_BUFFER, webglBuffer.handle);
+    gl2.bindFramebuffer(GL.FRAMEBUFFER, framebuffer.handle);
+
+    gl2.readPixels(
+      origin[0],
+      origin[1],
+      sourceWidth,
+      sourceHeight,
+      sourceFormat,
+      sourceType,
+      byteOffset
+    );
+  } finally {
+    gl2.bindBuffer(GL.PIXEL_PACK_BUFFER, null);
+    gl2.bindFramebuffer(GL.FRAMEBUFFER, null);
+
+    if (destroyFramebuffer) {
+      framebuffer.destroy();
+    }
+  }
+}
+
+/**
+ * Copies data from a Framebuffer or a Texture object into a Buffer object.
+ * NOTE: doesn't wait for copy to be complete, it programs GPU to perform a DMA transfer.
+export function readPixelsToBuffer(
+  source: Framebuffer | Texture,
+  options?: {
+    sourceX?: number;
+    sourceY?: number;
+    sourceFormat?: number;
+    target?: Buffer; // A new Buffer object is created when not provided.
+    targetByteOffset?: number; // byte offset in buffer object
+    // following parameters are auto deduced if not provided
+    sourceWidth?: number;
+    sourceHeight?: number;
+    sourceType?: number;
+  }
+): Buffer
+ */
+
+/**
+ * Copy a rectangle from a Framebuffer or Texture object into a texture (at an offset)
+ */
+// eslint-disable-next-line complexity, max-statements
+function _copyTextureToTexture(device: WebGLDevice, options: CopyTextureToTextureOptions): void {
+  const {
+    /** Texture to copy to/from. */
+    source,
+    /**  Mip-map level of the texture to copy to/from. (Default 0) */
+    // mipLevel = 0,
+    /** Defines which aspects of the texture to copy to/from. */
+    // aspect = 'all',
+    /** Defines the origin of the copy - the minimum corner of the texture sub-region to copy to/from. */
+    origin = [0, 0],
 
-function _copyTextureToBuffer(device: WebGLDevice, options: CopyTextureToBufferOptions): void {}
+    /** Texture to copy to/from. */
+    destination,
+    /**  Mip-map level of the texture to copy to/from. (Default 0) */
+    // destinationMipLevel = options.mipLevel,
+    /** Defines the origin of the copy - the minimum corner of the texture sub-region to copy to/from. */
+    // destinationOrigin = [0, 0],
+    /** Defines which aspects of the texture to copy to/from. */
+    // destinationAspect = options.aspect,
 
-function _copyTextureToTexture(device: WebGLDevice, options: CopyTextureToTextureOptions): void {}
+  } = options;
+
+  let {
+    width = options.destination.width,
+    height = options.destination.width,
+    // depthOrArrayLayers = 0
+  } = options;
+
+  const destinationMipmaplevel = 0;
+  const destinationInternalFormat = GL.RGBA;
+
+  const {framebuffer, destroyFramebuffer} = getFramebuffer(source);
+  const [sourceX, sourceY] = origin;
+
+  const isSubCopy = false;
+  // typeof destinationX !== 'undefined' ||
+  // typeof destinationY !== 'undefined' ||
+  // typeof destinationZ !== 'undefined';
+
+  // destinationX = destinationX || 0;
+  // destinationY = destinationY || 0;
+  // destinationZ = destinationZ || 0;
+  device.gl.bindFramebuffer(GL.FRAMEBUFFER, framebuffer.handle);
+  // TODO - support gl.readBuffer (WebGL2 only)
+  // const prevBuffer = gl.readBuffer(attachment);
+
+  let texture = null;
+  let textureTarget: GL;
+  if (destination instanceof WEBGLTexture) {
+    texture = destination;
+    width = Number.isFinite(width) ? width : texture.width;
+    height = Number.isFinite(height) ? height : texture.height;
+    texture.bind(0);
+    textureTarget = texture.destination;
+  } else {
+    throw new Error('whoops');
+    //  textureTarget = destination;
+  }
+
+  if (!isSubCopy) {
+    device.gl.copyTexImage2D(
+      textureTarget,
+      destinationMipmaplevel,
+      destinationInternalFormat,
+      sourceX,
+      sourceY,
+      width,
+      height,
+      0 /* border must be 0 */
+    );
+  } else {
+    // switch (textureTarget) {
+    //   case GL.TEXTURE_2D:
+    //   case GL.TEXTURE_CUBE_MAP:
+    //     device.gl.copyTexSubImage2D(
+    //       textureTarget,
+    //       destinationMipmaplevel,
+    //       destinationX,
+    //       destinationY,
+    //       sourceX,
+    //       sourceY,
+    //       width,
+    //       height
+    //     );
+    //     break;
+    //   case GL.TEXTURE_2D_ARRAY:
+    //   case GL.TEXTURE_3D:
+    //     const gl2 = device.assertWebGL2();
+    //     gl2.copyTexSubImage3D(
+    //       textureTarget,
+    //       destinationMipmaplevel,
+    //       destinationX,
+    //       destinationY,
+    //       destinationZ,
+    //       sourceX,
+    //       sourceY,
+    //       width,
+    //       height
+    //     );
+    //     break;
+    //   default:
+    // }
+  }
+  if (texture) {
+    texture.unbind();
+  }
+  // @ts-expect-error
+  device.gl.bindFramebuffer(GL.FRAMEBUFFER, prevHandle || null);
+  if (destroyFramebuffer) {
+    framebuffer.destroy();
+  }
+  return texture;
+}
+
+// Returns number of components in a specific readPixels WebGL format
+export function glFormatToComponents(format): 1 | 2 | 3 | 4 {
+  switch (format) {
+    case GL.ALPHA:
+    case GL.R32F:
+    case GL.RED:
+      return 1;
+    case GL.RG32F:
+    case GL.RG:
+      return 2;
+    case GL.RGB:
+    case GL.RGB32F:
+      return 3;
+    case GL.RGBA:
+    case GL.RGBA32F:
+      return 4;
+    // TODO: Add support for additional WebGL2 formats
+    default:
+      throw new Error('GLFormat');
+  }
+}
+
+// Return byte count for given readPixels WebGL type
+export function glTypeToBytes(type: GL): 1 | 2 | 4 {
+  switch (type) {
+    case GL.UNSIGNED_BYTE:
+      return 1;
+    case GL.UNSIGNED_SHORT_5_6_5:
+    case GL.UNSIGNED_SHORT_4_4_4_4:
+    case GL.UNSIGNED_SHORT_5_5_5_1:
+      return 2;
+    case GL.FLOAT:
+      return 4;
+    // TODO: Add support for additional WebGL2 types
+    default:
+      throw new Error('GLType');
+  }
+}
+
+// Helper methods
+
+function getFramebuffer(source: Texture | Framebuffer): {
+  framebuffer: WEBGLFramebuffer;
+  destroyFramebuffer: boolean;
+} {
+  if (source instanceof Texture) {
+    const {width, height, id} = source;
+    const framebuffer = source.device.createFramebuffer({
+      id: `framebuffer-for-${id}`,
+      width,
+      height,
+      colorAttachments: [source]
+    }) as unknown as WEBGLFramebuffer;
+
+    return {framebuffer, destroyFramebuffer: true};
+  }
+  return {framebuffer: source as unknown as WEBGLFramebuffer, destroyFramebuffer: false};
+}

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

@@ -1,25 +1,30 @@
-import {CommandEncoder, CommandEncoderProps} from '@luma.gl/api';
+import {CommandEncoder, CommandEncoderProps} from '@luma.gl/core';
 import type {
   CopyBufferToBufferOptions,
   CopyBufferToTextureOptions,
   CopyTextureToBufferOptions,
   CopyTextureToTextureOptions
-} from '@luma.gl/api';
+} from '@luma.gl/core';
 
-import CommandBuffer from './webgl-command-buffer';
-import WebGLDevice from '../webgl-device';
+import {WEBGLCommandBuffer} from './webgl-command-buffer';
+import {WebGLDevice} from '../webgl-device';
 
-export default class WEBGLCommandEncoder extends CommandEncoder {
+export class WEBGLCommandEncoder extends CommandEncoder {
   readonly device: WebGLDevice;
 
-  readonly commandBuffer = new CommandBuffer();
+  readonly commandBuffer: WEBGLCommandBuffer;
 
   constructor(device: WebGLDevice, props: CommandEncoderProps) {
     super(props);
     this.device = device;
+    this.commandBuffer = new WEBGLCommandBuffer(device);
   }
 
-  destroy() {}
+  override destroy(): void {}
+
+  override finish(): void {
+    this.commandBuffer.submitCommands();
+  }
 
   // beginRenderPass(GPURenderPassDescriptor descriptor): GPURenderPassEncoder;
   // beginComputePass(optional GPUComputePassDescriptor descriptor = {}): GPUComputePassEncoder;
@@ -41,10 +46,10 @@ export default class WEBGLCommandEncoder extends CommandEncoder {
     this.commandBuffer.commands.push({name: 'copy-texture-to-texture', options});
   }
 
-  pushDebugGroup(groupLabel: string): void {}
-  popDebugGroup() {}
+  override pushDebugGroup(groupLabel: string): void {}
+  override popDebugGroup() {}
 
-  insertDebugMarker(markerLabel: string): void {}
+  override insertDebugMarker(markerLabel: string): void {}
 
   // writeTimestamp(querySet: Query, queryIndex: number): void {}
 
@@ -55,4 +60,4 @@ export default class WEBGLCommandEncoder extends CommandEncoder {
   //   destination: Buffer,
   //   destinationOffset?: number;
   // }): void;
-};
+}

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

@@ -1,5 +1,5 @@
 /*
-export default class WEBGLExternalTexture extends WEBGLTexture {
+export class WEBGLExternalTexture extends WEBGLTexture {
   readonly device: WebGLDevice;
   readonly gl: WebGLRenderingContext;
   readonly gl2: WebGL2RenderingContext | null;
@@ -53,7 +53,7 @@ export default class WEBGLExternalTexture extends WEBGLTexture {
   constructor(device: Device | WebGLRenderingContext, props: TextureProps) {
     super(WebGLDevice.attach(device), {id: uid('texture'), ...props});
 
-    this.target = getWebGLTextureTarget(props);
+    this.glTarget = getWebGLTextureTarget(props);
 
     this.device = WebGLDevice.attach(device);
     this.gl = this.device.gl;