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

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

@@ -2,33 +2,43 @@
 // 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 TextureReadOptions,
+  type TextureWriteOptions,
+  type TextureFormat,
+  Buffer,
+  getTypedArrayConstructor,
+  Texture,
+  log
 } from '@luma.gl/core';
-import {Texture, log} from '@luma.gl/core';
+
 import {
+  GLSamplerParameters,
+  GLValueParameters,
   GL,
   GLTextureTarget,
   GLTextureCubeMapTarget,
   GLTexelDataFormat,
-  GLPixelType,
-  // GLDataType,
-  GLSamplerParameters,
-  GLValueParameters
-} from '@luma.gl/constants';
+  GLPixelType
+} from '@luma.gl/webgl/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 {WEBGLBuffer} from './webgl-buffer';
+import {WEBGLFramebuffer} from './webgl-framebuffer';
 import {WEBGLSampler} from './webgl-sampler';
 import {WEBGLTextureView} from './webgl-texture-view';
+import {convertGLDataTypeToDataType} from '../converters/shader-formats';
 
 /**
  * WebGL... the texture API from hell... hopefully made simpler
@@ -65,9 +75,14 @@ export class WEBGLTexture extends Texture {
   // state
   /** Texture binding slot - TODO - move to texture view? */
   _textureUnit: number = 0;
+  /** Cached framebuffer reused for color texture readback. */
+  _framebuffer: WEBGLFramebuffer | null = null;
+  /** Cache key for the currently attached readback subresource `${mipLevel}:${layer}`. */
+  _framebufferAttachmentKey: string | 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;
@@ -92,23 +107,31 @@ export class WEBGLTexture extends Texture {
      */
     this.gl.bindTexture(this.glTarget, this.handle);
     const {dimension, width, height, depth, mipLevels, glTarget, glInternalFormat} = this;
-    switch (dimension) {
-      case '2d':
-      case 'cube':
-        this.gl.texStorage2D(glTarget, mipLevels, glInternalFormat, width, height);
-        break;
-      case '2d-array':
-      case '3d':
-        this.gl.texStorage3D(glTarget, mipLevels, glInternalFormat, width, height, depth);
-        break;
-      default:
-        throw new Error(dimension);
+    if (!this.compressed) {
+      switch (dimension) {
+        case '2d':
+        case 'cube':
+          this.gl.texStorage2D(glTarget, mipLevels, glInternalFormat, width, height);
+          break;
+        case '2d-array':
+        case '3d':
+          this.gl.texStorage3D(glTarget, mipLevels, glInternalFormat, width, height, depth);
+          break;
+        default:
+          throw new Error(dimension);
+      }
     }
     this.gl.bindTexture(this.glTarget, null);
 
     // Set data
     this._initializeData(props.data);
 
+    if (!this.props.handle) {
+      this.trackAllocatedMemory(this.getAllocatedByteLength(), 'Texture');
+    } else {
+      this.trackReferencedMemory(this.getAllocatedByteLength(), 'Texture');
+    }
+
     // Set texture sampler parameters
     this.setSampler(this.props.sampler);
     // @ts-ignore TODO - fix types
@@ -119,9 +142,18 @@ export class WEBGLTexture extends Texture {
 
   override destroy(): void {
     if (this.handle) {
-      this.gl.deleteTexture(this.handle);
+      // Destroy any cached framebuffer
+      this._framebuffer?.destroy();
+      this._framebuffer = null;
+      this._framebufferAttachmentKey = null;
+
       this.removeStats();
-      this.trackDeallocatedMemory('Texture');
+      if (!this.props.handle) {
+        this.gl.deleteTexture(this.handle);
+        this.trackDeallocatedMemory('Texture');
+      } else {
+        this.trackDeallocatedReferencedMemory('Texture');
+      }
       // this.handle = null;
       this.destroyed = true;
     }
@@ -138,59 +170,247 @@ export class WEBGLTexture extends Texture {
     this._setSamplerParameters(parameters);
   }
 
-  copyImageData(options_: CopyImageDataOptions): void {
-    const options = this._normalizeCopyImageDataOptions(options_);
+  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};
+  }
+
+  override copyImageData(options_): void {
+    super.copyImageData(options_);
+  }
+
+  /**
+   * Reads a color texture subresource into a GPU buffer using `PIXEL_PACK_BUFFER`.
+   *
+   * @note Only first-pass color readback is supported. Unsupported formats and aspects throw
+   * before any WebGL calls are issued.
+   */
+  readBuffer(options: TextureReadOptions & {byteOffset?: number} = {}, buffer?: Buffer): Buffer {
+    if (!buffer) {
+      throw new Error(`${this} readBuffer requires a destination buffer`);
+    }
+    const normalizedOptions = this._getSupportedColorReadOptions(options);
+    const byteOffset = options.byteOffset ?? 0;
+    const memoryLayout = this.computeMemoryLayout(normalizedOptions);
+
+    if (buffer.byteLength < byteOffset + memoryLayout.byteLength) {
+      throw new Error(
+        `${this} readBuffer target is too small (${buffer.byteLength} < ${byteOffset + memoryLayout.byteLength})`
+      );
+    }
+
+    const webglBuffer = buffer as WEBGLBuffer;
+    this.gl.bindBuffer(GL.PIXEL_PACK_BUFFER, webglBuffer.handle);
+    try {
+      this._readColorTextureLayers(normalizedOptions, memoryLayout, destinationByteOffset => {
+        this.gl.readPixels(
+          normalizedOptions.x,
+          normalizedOptions.y,
+          normalizedOptions.width,
+          normalizedOptions.height,
+          this.glFormat,
+          this.glType,
+          byteOffset + destinationByteOffset
+        );
+      });
+    } finally {
+      this.gl.bindBuffer(GL.PIXEL_PACK_BUFFER, null);
+    }
+
+    return buffer;
+  }
+
+  async readDataAsync(options: TextureReadOptions = {}): Promise<ArrayBuffer> {
+    throw new Error(
+      `${this} readDataAsync is deprecated; use readBuffer() with an explicit destination buffer or DynamicTexture.readAsync()`
+    );
+  }
 
-    const typedArray = options.data as TypedArray;
-    const {width, height, depth} = this;
-    const {mipLevel = 0, byteOffset = 0, x = 0, y = 0, z = 0} = options;
+  writeBuffer(buffer: Buffer, options_: TextureWriteOptions = {}) {
+    const options = this._normalizeTextureWriteOptions(options_);
+    const {width, height, depthOrArrayLayers, mipLevel, byteOffset, x, y, z} = options;
     const {glFormat, glType, compressed} = this;
+    const glTarget = getWebGLCubeFaceTarget(this.glTarget, this.dimension, z);
+
+    if (compressed) {
+      throw new Error('writeBuffer for compressed textures is not implemented in WebGL');
+    }
+
+    const {bytesPerPixel} = this.device.getTextureFormatInfo(this.format);
+    const unpackRowLength = bytesPerPixel ? options.bytesPerRow / bytesPerPixel : undefined;
+    const glParameters: GLValueParameters = {
+      [GL.UNPACK_ALIGNMENT]: this.byteAlignment,
+      ...(unpackRowLength !== undefined ? {[GL.UNPACK_ROW_LENGTH]: unpackRowLength} : {}),
+      [GL.UNPACK_IMAGE_HEIGHT]: options.rowsPerImage
+    };
+
+    this.gl.bindTexture(this.glTarget, this.handle);
+    this.gl.bindBuffer(GL.PIXEL_UNPACK_BUFFER, buffer.handle);
+
+    withGLParameters(this.gl, glParameters, () => {
+      switch (this.dimension) {
+        case '2d':
+        case 'cube':
+          this.gl.texSubImage2D(
+            glTarget,
+            mipLevel,
+            x,
+            y,
+            width,
+            height,
+            glFormat,
+            glType,
+            byteOffset
+          );
+          break;
+        case '2d-array':
+        case '3d':
+          this.gl.texSubImage3D(
+            glTarget,
+            mipLevel,
+            x,
+            y,
+            z,
+            width,
+            height,
+            depthOrArrayLayers,
+            glFormat,
+            glType,
+            byteOffset
+          );
+          break;
+        default:
+      }
+    });
 
-    // Target used for face updates, but not for binding
+    this.gl.bindBuffer(GL.PIXEL_UNPACK_BUFFER, null);
+    this.gl.bindTexture(this.glTarget, null);
+  }
+
+  writeData(
+    data: ArrayBuffer | SharedArrayBuffer | ArrayBufferView,
+    options_: TextureWriteOptions = {}
+  ): void {
+    const options = this._normalizeTextureWriteOptions(options_);
+
+    const typedArray = ArrayBuffer.isView(data) ? data : new Uint8Array(data);
+    const {width, height, depthOrArrayLayers, mipLevel, x, y, z, byteOffset} = options;
+    const {glFormat, glType, compressed} = this;
     const glTarget = getWebGLCubeFaceTarget(this.glTarget, this.dimension, z);
 
     let unpackRowLength: number | undefined;
-    if (!this.compressed) {
+    if (!compressed) {
       const {bytesPerPixel} = this.device.getTextureFormatInfo(this.format);
       if (bytesPerPixel) {
-        if (options.bytesPerRow % bytesPerPixel !== 0) {
-          throw new Error(
-            `bytesPerRow (${options.bytesPerRow}) must be a multiple of bytesPerPixel (${bytesPerPixel}) for ${this.format}`
-          );
-        }
         unpackRowLength = options.bytesPerRow / bytesPerPixel;
       }
     }
 
     const glParameters: GLValueParameters = !this.compressed
       ? {
+          [GL.UNPACK_ALIGNMENT]: this.byteAlignment,
           ...(unpackRowLength !== undefined ? {[GL.UNPACK_ROW_LENGTH]: unpackRowLength} : {}),
           [GL.UNPACK_IMAGE_HEIGHT]: options.rowsPerImage
         }
       : {};
+    const sourceElementOffset = getWebGLTextureSourceElementOffset(typedArray, byteOffset);
+    const compressedData = compressed ? getArrayBufferView(typedArray, byteOffset) : typedArray;
+    const mipLevelSize = this._getMipLevelSize(mipLevel);
+    const isFullMipUpload =
+      x === 0 &&
+      y === 0 &&
+      z === 0 &&
+      width === mipLevelSize.width &&
+      height === mipLevelSize.height &&
+      depthOrArrayLayers === mipLevelSize.depthOrArrayLayers;
 
-    this.gl.bindTexture(glTarget, this.handle);
+    this.gl.bindTexture(this.glTarget, this.handle);
+    this.gl.bindBuffer(GL.PIXEL_UNPACK_BUFFER, null);
 
     withGLParameters(this.gl, glParameters, () => {
       switch (this.dimension) {
         case '2d':
         case 'cube':
           if (compressed) {
-            // prettier-ignore
-            this.gl.compressedTexSubImage2D(glTarget, mipLevel, x, y, width, height, glFormat, typedArray, byteOffset); // , byteLength
+            if (isFullMipUpload) {
+              // prettier-ignore
+              this.gl.compressedTexImage2D(glTarget, mipLevel, glFormat, width, height, 0, compressedData);
+            } else {
+              // prettier-ignore
+              this.gl.compressedTexSubImage2D(glTarget, mipLevel, x, y, width, height, glFormat, compressedData);
+            }
           } else {
             // prettier-ignore
-            this.gl.texSubImage2D(glTarget, mipLevel, x, y, width, height, glFormat, glType, typedArray, byteOffset); // , byteLength
+            this.gl.texSubImage2D(glTarget, mipLevel, x, y, width, height, glFormat, glType, typedArray, sourceElementOffset);
           }
           break;
         case '2d-array':
         case '3d':
           if (compressed) {
-            // prettier-ignore
-            this.gl.compressedTexSubImage3D(glTarget, mipLevel, x, y, z, width, height, depth, glFormat, typedArray, byteOffset); // , byteLength
+            if (isFullMipUpload) {
+              // prettier-ignore
+              this.gl.compressedTexImage3D(
+                glTarget,
+                mipLevel,
+                glFormat,
+                width,
+                height,
+                depthOrArrayLayers,
+                0,
+                compressedData
+              );
+            } else {
+              // prettier-ignore
+              this.gl.compressedTexSubImage3D(
+                glTarget,
+                mipLevel,
+                x,
+                y,
+                z,
+                width,
+                height,
+                depthOrArrayLayers,
+                glFormat,
+                compressedData
+              );
+            }
           } else {
             // prettier-ignore
-            this.gl.texSubImage3D(glTarget, mipLevel, x, y, z, width, height, depth, glFormat, glType, typedArray, byteOffset); // , byteLength
+            this.gl.texSubImage3D(glTarget, mipLevel, x, y, z, width, height, depthOrArrayLayers, glFormat, glType, typedArray, sourceElementOffset);
           }
           break;
         default:
@@ -198,51 +418,179 @@ 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_);
+  // 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;
+  }
 
-    if (options.sourceX || options.sourceY) {
-      // requires copyTexSubImage2D from a framebuffer'
-      throw new Error('WebGL does not support sourceX/sourceY)');
+  /**
+   * 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
+
+  override readDataSyncWebGL(options_: TextureReadOptions = {}): ArrayBuffer {
+    const options = this._getSupportedColorReadOptions(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 targetArray = new ArrayType(memoryLayout.byteLength / ArrayType.BYTES_PER_ELEMENT) as
+      | Uint8Array
+      | Uint16Array
+      | Float32Array
+      | Int8Array
+      | Int16Array
+      | Int32Array
+      | Uint32Array;
+
+    this._readColorTextureLayers(options, memoryLayout, destinationByteOffset => {
+      const layerView = new ArrayType(
+        targetArray.buffer,
+        targetArray.byteOffset + destinationByteOffset,
+        memoryLayout.bytesPerImage / ArrayType.BYTES_PER_ELEMENT
+      );
+      this.gl.readPixels(
+        options.x,
+        options.y,
+        options.width,
+        options.height,
+        this.glFormat,
+        this.glType,
+        layerView
+      );
+    });
+
+    return targetArray.buffer as ArrayBuffer;
+  }
+
+  /**
+   * Iterates the requested mip/layer/slice range, reattaching the cached read framebuffer as
+   * needed before delegating the actual `readPixels()` call to the supplied callback.
+   */
+  private _readColorTextureLayers(
+    options: Required<TextureReadOptions>,
+    memoryLayout: ReturnType<Texture['computeMemoryLayout']>,
+    readLayer: (destinationByteOffset: number) => void
+  ): void {
+    const framebuffer = this._getFramebuffer();
+    const packRowLength = memoryLayout.bytesPerRow / memoryLayout.bytesPerPixel;
+    const glParameters: GLValueParameters = {
+      [GL.PACK_ALIGNMENT]: this.byteAlignment,
+      ...(packRowLength !== options.width ? {[GL.PACK_ROW_LENGTH]: packRowLength} : {})
+    };
+
+    // Note: luma.gl overrides bindFramebuffer so that we can reliably restore the previous framebuffer.
+    const prevReadBuffer = this.gl.getParameter(GL.READ_BUFFER) as GL;
+    const prevHandle = this.gl.bindFramebuffer(
+      GL.FRAMEBUFFER,
+      framebuffer.handle
+    ) as unknown as WebGLFramebuffer | null;
+
+    try {
+      this.gl.readBuffer(GL.COLOR_ATTACHMENT0);
+      withGLParameters(this.gl, glParameters, () => {
+        for (let layerIndex = 0; layerIndex < options.depthOrArrayLayers; layerIndex++) {
+          this._attachReadSubresource(framebuffer, options.mipLevel, options.z + layerIndex);
+          readLayer(layerIndex * memoryLayout.bytesPerImage);
+        }
+      });
+    } finally {
+      this.gl.bindFramebuffer(GL.FRAMEBUFFER, prevHandle || null);
+      this.gl.readBuffer(prevReadBuffer);
     }
+  }
 
-    const {glFormat, glType} = this;
-    const {image, depth, mipLevel, x, y, z, width, height} = options;
+  /**
+   * Attaches a single color subresource to the cached read framebuffer.
+   *
+   * @note Repeated attachments of the same `(mipLevel, layer)` tuple are skipped.
+   */
+  private _attachReadSubresource(
+    framebuffer: WEBGLFramebuffer,
+    mipLevel: number,
+    layer: number
+  ): void {
+    const attachmentKey = `${mipLevel}:${layer}`;
+    if (this._framebufferAttachmentKey === attachmentKey) {
+      return;
+    }
 
-    // WebGL cube maps specify faces by overriding target instead of using the depth parameter
-    const glTarget = getWebGLCubeFaceTarget(this.glTarget, this.dimension, depth);
-    const glParameters: GLValueParameters = options.flipY ? {[GL.UNPACK_FLIP_Y_WEBGL]: true} : {};
+    switch (this.dimension) {
+      case '2d':
+        this.gl.framebufferTexture2D(
+          GL.FRAMEBUFFER,
+          GL.COLOR_ATTACHMENT0,
+          GL.TEXTURE_2D,
+          this.handle,
+          mipLevel
+        );
+        break;
 
-    this.gl.bindTexture(this.glTarget, this.handle);
+      case 'cube':
+        this.gl.framebufferTexture2D(
+          GL.FRAMEBUFFER,
+          GL.COLOR_ATTACHMENT0,
+          getWebGLCubeFaceTarget(this.glTarget, this.dimension, layer),
+          this.handle,
+          mipLevel
+        );
+        break;
 
-    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
-      }
-    });
+      case '2d-array':
+      case '3d':
+        this.gl.framebufferTextureLayer(
+          GL.FRAMEBUFFER,
+          GL.COLOR_ATTACHMENT0,
+          this.handle,
+          mipLevel,
+          layer
+        );
+        break;
 
-    this.gl.bindTexture(this.glTarget, null);
+      default:
+        throw new Error(`${this} color readback does not support ${this.dimension} textures`);
+    }
 
-    return {width: options.width, height: options.height};
-  }
+    if (this.device.props.debug) {
+      const status = Number(this.gl.checkFramebufferStatus(GL.FRAMEBUFFER));
+      if (status !== Number(GL.FRAMEBUFFER_COMPLETE)) {
+        throw new Error(`${framebuffer} incomplete for ${this} readback (${status})`);
+      }
+    }
 
-  // WEBGL SPECIFIC
+    this._framebufferAttachmentKey = attachmentKey;
+  }
 
-  generateMipmapsWebGL(options?: {force?: boolean}): void {
+  /**
+   * @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 +660,7 @@ export class WEBGLTexture extends Texture {
 
     this.gl.bindTexture(this.glTarget, null);
   }
+
   _getActiveUnit(): number {
     return this.gl.getParameter(GL.ACTIVE_TEXTURE) - GL.TEXTURE0;
   }
@@ -342,6 +691,31 @@ export class WEBGLTexture extends Texture {
   }
 }
 
+function getArrayBufferView(typedArray: ArrayBufferView, byteOffset = 0): ArrayBufferView {
+  if (!byteOffset) {
+    return typedArray;
+  }
+
+  return new typedArray.constructor(
+    typedArray.buffer,
+    typedArray.byteOffset + byteOffset,
+    (typedArray.byteLength - byteOffset) / typedArray.BYTES_PER_ELEMENT
+  ) as ArrayBufferView;
+}
+
+function getWebGLTextureSourceElementOffset(
+  typedArray: ArrayBufferView,
+  byteOffset: number
+): number {
+  if (byteOffset % typedArray.BYTES_PER_ELEMENT !== 0) {
+    throw new Error(
+      `Texture byteOffset ${byteOffset} must align to typed array element size ${typedArray.BYTES_PER_ELEMENT}`
+    );
+  }
+
+  return byteOffset / typedArray.BYTES_PER_ELEMENT;
+}
+
 // INTERNAL HELPERS
 
 /** Convert a WebGPU style texture constant to a WebGL style texture constant */

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

@@ -1,6 +1,6 @@
 import type {PrimitiveTopology, ShaderLayout, TransformFeedbackProps} from '@luma.gl/core';
 import {log, TransformFeedback, Buffer, BufferRange} from '@luma.gl/core';
-import {GL} from '@luma.gl/constants';
+import {GL} from '@luma.gl/webgl/constants';
 import {WebGLDevice} from '../webgl-device';
 import {WEBGLBuffer} from '../../index';
 import {getGLPrimitive} from '../helpers/webgl-topology-utils';
@@ -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);
     }
   }