@luma.gl/webgl 9.1.9 → 9.2.0-alpha.2

package/src/adapter/helpers/{get-shader-layout.ts → get-shader-layout-from-glsl.ts}

@@ -7,11 +7,17 @@ import type {
   UniformBinding,
   UniformBlockBinding,
   AttributeDeclaration,
-  VaryingBinding
+  VaryingBinding,
+  AttributeShaderType
 } from '@luma.gl/core';
+import {getVariableShaderTypeInfo} from '@luma.gl/core';
 
-import {GL} from '@luma.gl/constants';
-import {decodeGLUniformType, decodeGLAttributeType, isSamplerUniform} from './decode-webgl-types';
+import {GL, GLUniformType} from '@luma.gl/constants';
+import {
+  isGLSamplerType,
+  getTextureBindingFromGLSamplerType,
+  convertGLUniformTypeToShaderVariableType
+} from '../converters/webgl-shadertypes';
 
 /**
  * Extract metadata describing binding information for a program's shaders
@@ -53,8 +59,8 @@ export function getShaderLayoutFromGLSL(
   const uniforms: UniformBinding[] = readUniformBindings(gl, program);
   let textureUnit = 0;
   for (const uniform of uniforms) {
-    if (isSamplerUniform(uniform.type)) {
-      const {viewDimension, sampleType} = getSamplerInfo(uniform.type);
+    if (isGLSamplerType(uniform.type)) {
+      const {viewDimension, sampleType} = getTextureBindingFromGLSamplerType(uniform.type);
       shaderLayout.bindings.push({
         type: 'texture',
         name: uniform.name,
@@ -108,7 +114,7 @@ function readAttributeDeclarations(
     const location = gl.getAttribLocation(program, name);
     // Add only user provided attributes, for built-in attributes like `gl_InstanceID` location will be < 0
     if (location >= 0) {
-      const {attributeType} = decodeGLAttributeType(compositeType);
+      const attributeType = convertGLUniformTypeToShaderVariableType(compositeType);
 
       // Whether an attribute is instanced is essentially fixed by the structure of the shader code,
       // so it is arguably a static property of the shader.
@@ -120,7 +126,7 @@ function readAttributeDeclarations(
         name,
         location,
         stepMode,
-        type: attributeType
+        type: attributeType as AttributeShaderType
         // size - for arrays, size is the number of elements in the array
       });
     }
@@ -145,10 +151,10 @@ function readVaryings(gl: WebGL2RenderingContext, program: WebGLProgram): Varyin
     if (!activeInfo) {
       throw new Error('activeInfo');
     }
-    const {name, type: compositeType, size} = activeInfo;
-    const {glType, components} = decodeGLUniformType(compositeType);
-    const varying = {location, name, type: glType, size: size * components}; // Base values
-    varyings.push(varying);
+    const {name, type: glUniformType, size} = activeInfo;
+    const uniformType = convertGLUniformTypeToShaderVariableType(glUniformType as GLUniformType);
+    const {type, components} = getVariableShaderTypeInfo(uniformType);
+    varyings.push({location, name, type, size: size * components});
   }
 
   varyings.sort((a, b) => a.location - b.location);
@@ -251,9 +257,11 @@ function readUniformBlocks(
         throw new Error('activeInfo');
       }
 
+      const format = convertGLUniformTypeToShaderVariableType(uniformType[i]);
+
       blockInfo.uniforms.push({
         name: activeInfo.name,
-        format: decodeGLUniformType(uniformType[i]).format,
+        format,
         type: uniformType[i],
         arrayLength: uniformArrayLength[i],
         byteOffset: uniformOffset[i],
@@ -291,44 +299,6 @@ function readUniformBlocks(
   }
 */
 
-const SAMPLER_UNIFORMS_GL_TO_GPU: Record<
-  number,
-  [
-    '1d' | '2d' | '2d-array' | 'cube' | 'cube-array' | '3d',
-    'float' | 'unfilterable-float' | 'depth' | 'sint' | 'uint'
-  ]
-> = {
-  [GL.SAMPLER_2D]: ['2d', 'float'],
-  [GL.SAMPLER_CUBE]: ['cube', 'float'],
-  [GL.SAMPLER_3D]: ['3d', 'float'],
-  [GL.SAMPLER_2D_SHADOW]: ['3d', 'depth'],
-  [GL.SAMPLER_2D_ARRAY]: ['2d-array', 'float'],
-  [GL.SAMPLER_2D_ARRAY_SHADOW]: ['2d-array', 'depth'],
-  [GL.SAMPLER_CUBE_SHADOW]: ['cube', 'float'],
-  [GL.INT_SAMPLER_2D]: ['2d', 'sint'],
-  [GL.INT_SAMPLER_3D]: ['3d', 'sint'],
-  [GL.INT_SAMPLER_CUBE]: ['cube', 'sint'],
-  [GL.INT_SAMPLER_2D_ARRAY]: ['2d-array', 'uint'],
-  [GL.UNSIGNED_INT_SAMPLER_2D]: ['2d', 'uint'],
-  [GL.UNSIGNED_INT_SAMPLER_3D]: ['3d', 'uint'],
-  [GL.UNSIGNED_INT_SAMPLER_CUBE]: ['cube', 'uint'],
-  [GL.UNSIGNED_INT_SAMPLER_2D_ARRAY]: ['2d-array', 'uint']
-};
-
-type SamplerInfo = {
-  viewDimension: '1d' | '2d' | '2d-array' | 'cube' | 'cube-array' | '3d';
-  sampleType: 'float' | 'unfilterable-float' | 'depth' | 'sint' | 'uint';
-};
-
-function getSamplerInfo(type: GL): SamplerInfo {
-  const sampler = SAMPLER_UNIFORMS_GL_TO_GPU[type];
-  if (!sampler) {
-    throw new Error('sampler');
-  }
-  const [viewDimension, sampleType] = sampler;
-  return {viewDimension, sampleType};
-}
-
 // HELPERS
 
 function parseUniformName(name: string): {name: string; length: number; isArray: boolean} {

package/src/adapter/helpers/set-uniform.ts

@@ -6,14 +6,14 @@
 
 // Uniforms
 import type {UniformValue} from '@luma.gl/core';
-import {GL, GLCompositeType, GLSamplerType} from '@luma.gl/constants';
+import {GL, GLUniformType, GLSamplerType} from '@luma.gl/constants';
 
 /** Set a raw uniform (without type conversion and caching) */
 /* eslint-disable max-len */
 export function setUniform(
   gl: WebGL2RenderingContext,
   location: WebGLUniformLocation,
-  type: GLCompositeType | GLSamplerType,
+  type: GLUniformType | GLSamplerType,
   value: UniformValue
 ): void {
   const gl2 = gl as WebGL2RenderingContext;

package/src/adapter/helpers/webgl-texture-utils.ts

@@ -2,13 +2,10 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-//
-// WebGL... the texture API from hell... hopefully made simpler
-//
+// @ts-nocheck This file will be deleted in upcoming refactor
 
-import {TypedArray} from '@math.gl/types';
-import type {ExternalImage} from '@luma.gl/core';
-import {Buffer, Texture, Framebuffer, FramebufferProps} from '@luma.gl/core';
+import type {Buffer, Texture, FramebufferProps} from '@luma.gl/core';
+import {Framebuffer, getTypedArrayConstructor, getDataType} from '@luma.gl/core';
 import {
   GL,
   GLTextureTarget,
@@ -18,12 +15,12 @@ import {
   GLDataType
 } from '@luma.gl/constants';
 
+import {convertDataTypeToGLDataType} from '../converters/webgl-shadertypes';
 import {WEBGLFramebuffer} from '../resources/webgl-framebuffer';
-import {getGLTypeFromTypedArray, getTypedArrayFromGLType} from './typed-array-utils';
 import {glFormatToComponents, glTypeToBytes} from './format-utils';
 import {WEBGLBuffer} from '../resources/webgl-buffer';
 import {WEBGLTexture} from '../resources/webgl-texture';
-import {withGLParameters} from '../../context/state-tracker/with-parameters';
+import {convertGLDataTypeToDataType} from '../converters/shader-formats';
 
 /** A "border" parameter is required in many WebGL texture APIs, but must always be 0... */
 const BORDER = 0;
@@ -83,120 +80,6 @@ export type WebGLCopyTextureOptions = {
   byteLength?: number;
 };
 
-/**
- * Initializes a texture memory space
- * Clear all the textures and mip levels of a two-dimensional or array texture at the same time.
- * On some implementations faster than repeatedly setting levels
- *
- * @note From WebGL 2 spec section 3.7.6:
- * @see https://registry.khronos.org/webgl/specs/latest/2.0/
- * - The image contents are set as if a buffer of sufficient size initialized to 0 would be passed to each level's texImage2D/3D
- * - texStorage2D should be considered a preferred alternative to texImage2D. It may have lower memory costs than texImage2D in some implementations.
- * - Once texStorage*D has been called, the texture is immutable and can only be updated with texSubImage*(), not texImage()
- */
-export function initializeTextureStorage(
-  gl: WebGL2RenderingContext,
-  levels: number,
-  options: WebGLSetTextureOptions
-): void {
-  const {dimension, width, height, depth = 0} = options;
-  const {glInternalFormat} = options;
-  const glTarget = options.glTarget; // getWebGLCubeFaceTarget(options.glTarget, dimension, depth);
-  switch (dimension) {
-    case '2d-array':
-    case '3d':
-      gl.texStorage3D(glTarget, levels, glInternalFormat, width, height, depth);
-      break;
-
-    default:
-      gl.texStorage2D(glTarget, levels, glInternalFormat, width, height);
-  }
-}
-
-/**
- * Copy a region of compressed data from a GPU memory buffer into this texture.
- */
-export function copyExternalImageToMipLevel(
-  gl: WebGL2RenderingContext,
-  handle: WebGLTexture,
-  image: ExternalImage,
-  options: WebGLCopyTextureOptions & {flipY?: boolean}
-): void {
-  const {width, height} = options;
-  const {dimension, depth = 0, mipLevel = 0} = options;
-  const {x = 0, y = 0, z = 0} = options;
-  const {glFormat, glType} = options;
-
-  const glTarget = getWebGLCubeFaceTarget(options.glTarget, dimension, depth);
-
-  const glParameters = options.flipY ? {[GL.UNPACK_FLIP_Y_WEBGL]: true} : {};
-  withGLParameters(gl, glParameters, () => {
-    switch (dimension) {
-      case '2d-array':
-      case '3d':
-        gl.bindTexture(glTarget, handle);
-        // prettier-ignore
-        gl.texSubImage3D(glTarget, mipLevel, x, y, z, width, height, depth, glFormat, glType, image);
-        gl.bindTexture(glTarget, null);
-        break;
-
-      case '2d':
-      case 'cube':
-        gl.bindTexture(glTarget, handle);
-        // prettier-ignore
-        gl.texSubImage2D(glTarget, mipLevel, x, y, width, height, glFormat, glType, image);
-        gl.bindTexture(glTarget, null);
-        break;
-
-      default:
-        throw new Error(dimension);
-    }
-  });
-}
-
-/**
- * Copy a region of data from a CPU memory buffer into this texture.
- */
-export function copyCPUDataToMipLevel(
-  gl: WebGL2RenderingContext,
-  typedArray: TypedArray,
-  options: WebGLCopyTextureOptions
-): void {
-  const {dimension, width, height, depth = 0, mipLevel = 0, byteOffset = 0} = options;
-  const {x = 0, y = 0, z = 0} = options;
-  const {glFormat, glType, compressed} = options;
-  const glTarget = getWebGLCubeFaceTarget(options.glTarget, dimension, depth);
-
-  // gl.bindTexture(glTarget, null);
-
-  switch (dimension) {
-    case '2d-array':
-    case '3d':
-      if (compressed) {
-        // prettier-ignore
-        gl.compressedTexSubImage3D(glTarget, mipLevel, x, y, z, width, height, depth, glFormat, typedArray, byteOffset); // , byteLength
-      } else {
-        // prettier-ignore
-        gl.texSubImage3D(glTarget, mipLevel, x, y, z, width, height, depth, glFormat, glType, typedArray, byteOffset); // , byteLength
-      }
-      break;
-
-    case '2d':
-    case 'cube':
-      if (compressed) {
-        // prettier-ignore
-        gl.compressedTexSubImage2D(glTarget, mipLevel, x, y, width, height, glFormat, typedArray, byteOffset); // , byteLength
-      } else {
-        // prettier-ignore
-        gl.texSubImage2D(glTarget, mipLevel, x, y, width, height, glFormat, glType, typedArray, byteOffset); // , byteLength
-      }
-      break;
-
-    default:
-      throw new Error(dimension);
-  }
-}
-
 /**
  * Copy a region of compressed data from a GPU memory buffer into this texture.
  */
@@ -273,227 +156,6 @@ export function getWebGLCubeFaceTarget(
 ): GLTextureTarget | GLTextureCubeMapTarget {
   return dimension === 'cube' ? GL.TEXTURE_CUBE_MAP_POSITIVE_X + level : glTarget;
 }
-
-// texImage methods
-
-/**
- * Clear a texture mip level.
- * Wrapper for the messy WebGL texture API
- *
-export function clearMipLevel(gl: WebGL2RenderingContext, options: WebGLSetTextureOptions): void {
-  const {dimension, width, height, depth = 0, mipLevel = 0} = options;
-  const {glInternalFormat, glFormat, glType, compressed} = options;
-  const glTarget = getWebGLCubeFaceTarget(options.glTarget, dimension, depth);
-
-  switch (dimension) {
-    case '2d-array':
-    case '3d':
-      if (compressed) {
-        // prettier-ignore
-        gl.compressedTexImage3D(glTarget, mipLevel, glInternalFormat, width, height, depth, BORDER, null);
-      } else {
-        // prettier-ignore
-        gl.texImage3D( glTarget, mipLevel, glInternalFormat, width, height, depth, BORDER, glFormat, glType, null);
-      }
-      break;
-
-    case '2d':
-    case 'cube':
-      if (compressed) {
-        // prettier-ignore
-        gl.compressedTexImage2D(glTarget, mipLevel, glInternalFormat, width, height, BORDER, null);
-      } else {
-        // prettier-ignore
-        gl.texImage2D(glTarget, mipLevel, glInternalFormat, width, height, BORDER, glFormat, glType, null);
-      }
-      break;
-
-    default:
-      throw new Error(dimension);
-  }
-}
-  */
-
-/**
- * Set a texture mip level to the contents of an external image.
- * Wrapper for the messy WebGL texture API
- * @note Corresponds to WebGPU device.queue.copyExternalImageToTexture()
- *
-export function setMipLevelFromExternalImage(
-  gl: WebGL2RenderingContext,
-  image: ExternalImage,
-  options: WebGLSetTextureOptions
-): void {
-  const {dimension, width, height, depth = 0, level = 0} = options;
-  const {glInternalFormat, glType} = options;
-
-  const glTarget = getWebGLCubeFaceTarget(options.glTarget, dimension, depth);
-
-  // TODO - we can't change texture width (due to WebGPU limitations) -
-  // and the width/heigh of an external image is implicit, so why do we need to extract it?
-  // So what width height do we supply? The image size or the texture size?
-  // const {width, height} = Texture.getExternalImageSize(image);
-
-  switch (dimension) {
-    case '2d-array':
-    case '3d':
-      // prettier-ignore
-      gl.texImage3D(glTarget, level, glInternalFormat, width, height, depth, BORDER, glInternalFormat, glType, image);
-      break;
-
-    case '2d':
-    case 'cube':
-      // prettier-ignore
-      gl.texImage2D(glTarget, level, glInternalFormat, width, height, BORDER, glInternalFormat, glType, image);
-      break;
-
-    default:
-      throw new Error(dimension);
-  }
-}
-
-/**
- * Set a texture mip level from CPU memory
- * Wrapper for the messy WebGL texture API
- * @note Not available (directly) in WebGPU
- *
-export function setMipLevelFromTypedArray(
-  gl: WebGL2RenderingContext,
-  data: TypedArray,
-  parameters: {},
-  options: {
-    dimension: '1d' | '2d' | '2d-array' | 'cube' | 'cube-array' | '3d';
-    height: number;
-    width: number;
-    depth?: number;
-    level?: number;
-    offset?: number;
-    glTarget: GLTextureTarget;
-    glInternalFormat: GL;
-    glFormat: GL;
-    glType: GL;
-    compressed?: boolean;
-  }
-): void {
-  const {dimension, width, height, depth = 0, level = 0, offset = 0} = options;
-  const {glInternalFormat, glFormat, glType, compressed} = options;
-
-  const glTarget = getWebGLCubeFaceTarget(options.glTarget, dimension, depth);
-
-  withGLParameters(gl, parameters, () => {
-    switch (dimension) {
-      case '2d-array':
-      case '3d':
-        if (compressed) {
-          // prettier-ignore
-          gl.compressedTexImage3D(glTarget, level, glInternalFormat, width, height, depth, BORDER, data);
-        } else {
-          // prettier-ignore
-          gl.texImage3D( glTarget, level, glInternalFormat, width, height, depth, BORDER, glFormat, glType, data);
-        }
-        break;
-
-      case '2d':
-        if (compressed) {
-          // prettier-ignore
-          gl.compressedTexImage2D(glTarget, level, glInternalFormat, width, height, BORDER, data);
-        } else {
-          // prettier-ignore
-          gl.texImage2D( glTarget, level, glInternalFormat, width, height, BORDER, glFormat, glType, data, offset);
-        }
-        break;
-
-      default:
-        throw new Error(dimension);
-    }
-  });
-}
-
-/**
-   * Set a texture level from CPU memory
-   * @note Not available (directly) in WebGPU
-  _setMipLevelFromTypedArray(
-    depth: number,
-    level: number,
-    data: TextureLevelData,
-    offset = 0,
-    parameters
-  ): void {
-    withGLParameters(this.gl, parameters, () => {
-      switch (this.props.dimension) {
-        case '2d-array':
-        case '3d':
-          if (this.compressed) {
-            // prettier-ignore
-            this.device.gl.compressedTexImage3D(this.glTarget, level, this.glInternalFormat, data.width, data.height, depth, BORDER, data.data);
-          } else {
-            // prettier-ignore
-            this.gl.texImage3D( this.glTarget, level, this.glInternalFormat, this.width, this.height, depth, BORDER, this.glFormat, this.glType, data.data);
-          }
-          break;
-
-        case '2d':
-          if (this.compressed) {
-            // prettier-ignore
-            this.device.gl.compressedTexImage2D(this.glTarget, level, this.glInternalFormat, data.width, data.height, BORDER, data.data);
-          } else {
-            // prettier-ignore
-            this.device.gl.texImage2D( this.glTarget, level, this.glInternalFormat, this.width, this.height, BORDER, this.glFormat, this.glType, data.data, offset);
-          }
-          break;
-
-        default:
-          throw new Error(this.props.dimension);
-      }
-    });
-  }
-
- * Set a texture level from a GPU buffer
- *
-export function setMipLevelFromGPUBuffer(
-  gl: WebGL2RenderingContext,
-  buffer: Buffer,
-  options: WebGLSetTextureOptions
-): void {
-  const {dimension, width, height, depth = 0, level = 0, byteOffset = 0} = options;
-  const {glInternalFormat, glFormat, glType, compressed} = options;
-  const glTarget = getWebGLCubeFaceTarget(options.glTarget, dimension, depth);
-
-  const webglBuffer = buffer as WEBGLBuffer;
-  const imageSize = buffer.byteLength;
-
-  // In WebGL the source buffer is not a parameter. Instead it needs to be bound to a special bind point
-  gl.bindBuffer(GL.PIXEL_UNPACK_BUFFER, webglBuffer.handle);
-
-  switch (dimension) {
-    case '2d-array':
-    case '3d':
-      if (compressed) {
-        // prettier-ignore
-        gl.compressedTexImage3D(glTarget, level, glInternalFormat, width, height, depth, BORDER, imageSize, byteOffset);
-      } else {
-        // prettier-ignore
-        gl.texImage3D(glTarget, level, glInternalFormat, width, height, depth, BORDER, glFormat, glType, byteOffset);
-      }
-      break;
-
-    case '2d':
-      if (compressed) {
-        // prettier-ignore
-        gl.compressedTexImage2D(glTarget, level, glInternalFormat, width, height, BORDER, imageSize, byteOffset);
-      } else {
-        // prettier-ignore
-        gl.texImage2D(glTarget, level, glInternalFormat, width, height, BORDER, glFormat, glType, byteOffset);
-      }
-      break;
-
-    default:
-      throw new Error(dimension);
-  }
-
-  gl.bindBuffer(GL.PIXEL_UNPACK_BUFFER, null);
-}
-*/
 export type ReadPixelsToArrayOptions = {
   sourceX?: number;
   sourceY?: number;
@@ -570,7 +232,8 @@ export function readPixelsToArray(
   target = getPixelArray(target, sourceType, sourceFormat, sourceWidth, sourceHeight, sourceDepth);
 
   // Pixel array available, if necessary, deduce type from it.
-  sourceType = sourceType || getGLTypeFromTypedArray(target);
+  const signedType = getDataType(target);
+  sourceType = sourceType || convertDataTypeToGLDataType(signedType);
 
   // 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 = gl.bindFramebuffer(
@@ -717,7 +380,7 @@ export function copyToTexture(
     texture = destinationTexture;
     width = Number.isFinite(width) ? width : texture.width;
     height = Number.isFinite(height) ? height : texture.height;
-    texture?.bind(0);
+    texture?._bind(0);
     // @ts-ignore
     textureTarget = texture.target;
   } else {
@@ -769,7 +432,7 @@ export function copyToTexture(
     }
   }
   if (texture) {
-    texture.unbind();
+    texture._unbind();
   }
   // @ts-expect-error
   device.gl.bindFramebuffer(GL.FRAMEBUFFER, prevHandle || null);
@@ -817,10 +480,11 @@ function getPixelArray(
   if (pixelArray) {
     return pixelArray;
   }
-  // const formatInfo = decodeTextureFormat(format);
+  // const formatInfo = getTextureFormatInfo(format);
   // Allocate pixel array if not already available, using supplied type
   glType ||= GL.UNSIGNED_BYTE;
-  const ArrayType = getTypedArrayFromGLType(glType, {clamped: false});
+  const shaderType = convertGLDataTypeToDataType(glType);
+  const ArrayType = getTypedArrayConstructor(shaderType);
   const components = glFormatToComponents(glFormat);
   // TODO - check for composite type (components = 1).
   return new ArrayType(width * height * components) as Uint8Array | Uint16Array | Float32Array;

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

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import type {BufferProps} from '@luma.gl/core';
+import type {BufferMapCallback, BufferProps} from '@luma.gl/core';
 import {Buffer} from '@luma.gl/core';
 import {GL} from '@luma.gl/constants';
 import {WebGLDevice} from '../webgl-device';
@@ -21,9 +21,9 @@ export class WEBGLBuffer extends Buffer {
   readonly glIndexType: GL.UNSIGNED_SHORT | GL.UNSIGNED_INT = GL.UNSIGNED_SHORT;
 
   /** Number of bytes allocated on the GPU for this buffer */
-  byteLength: number;
+  byteLength: number = 0;
   /** Number of bytes used */
-  bytesUsed: number;
+  bytesUsed: number = 0;
 
   constructor(device: WebGLDevice, props: BufferProps = {}) {
     super(device, props);
@@ -33,7 +33,9 @@ export class WEBGLBuffer extends Buffer {
 
     const handle = typeof props === 'object' ? props.handle : undefined;
     this.handle = handle || this.gl.createBuffer();
-    device.setSpectorMetadata(this.handle, {...this.props, data: typeof this.props.data});
+    device._setWebGLDebugMetadata(this.handle, this, {
+      spector: {...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
@@ -50,7 +52,16 @@ export class WEBGLBuffer extends Buffer {
     }
   }
 
-  // PRIVATE METHODS
+  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;
+    }
+  }
 
   /** Allocate a new buffer and initialize to contents of typed array */
   _initWithData(
@@ -100,18 +111,8 @@ export class WEBGLBuffer extends Buffer {
     return this;
   }
 
-  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;
-    }
-  }
-
-  override write(data: ArrayBufferView, byteOffset: number = 0): void {
+  write(data: ArrayBufferLike | ArrayBufferView, byteOffset: number = 0): void {
+    const dataView = ArrayBuffer.isView(data) ? data : new Uint8Array(data);
     const srcOffset = 0;
     const byteLength = undefined; // data.byteLength;
 
@@ -121,22 +122,41 @@ export class WEBGLBuffer extends Buffer {
     this.gl.bindBuffer(glTarget, this.handle);
     // WebGL2: subData supports additional srcOffset and length parameters
     if (srcOffset !== 0 || byteLength !== undefined) {
-      this.gl.bufferSubData(glTarget, byteOffset, data, srcOffset, byteLength);
+      this.gl.bufferSubData(glTarget, byteOffset, dataView, srcOffset, byteLength);
     } else {
-      this.gl.bufferSubData(glTarget, byteOffset, data);
+      this.gl.bufferSubData(glTarget, byteOffset, dataView);
     }
     this.gl.bindBuffer(glTarget, null);
 
     this._setDebugData(data, byteOffset, data.byteLength);
   }
 
-  /** Asynchronously read data from the buffer */
-  override async readAsync(byteOffset = 0, byteLength?: number): Promise<Uint8Array> {
+  async mapAndWriteAsync(
+    callback: BufferMapCallback<void>,
+    byteOffset: number = 0,
+    byteLength: number = this.byteLength - byteOffset
+  ): Promise<void> {
+    const arrayBuffer = new ArrayBuffer(byteLength);
+    // eslint-disable-next-line @typescript-eslint/await-thenable
+    await callback(arrayBuffer, 'copied');
+    this.write(arrayBuffer, byteOffset);
+  }
+
+  async readAsync(byteOffset = 0, byteLength?: number): Promise<Uint8Array<ArrayBuffer>> {
     return this.readSyncWebGL(byteOffset, byteLength);
   }
 
-  /** Synchronously read data from the buffer. WebGL only. */
-  override readSyncWebGL(byteOffset = 0, byteLength?: number): Uint8Array {
+  async mapAndReadAsync<T>(
+    callback: BufferMapCallback<T>,
+    byteOffset = 0,
+    byteLength?: number
+  ): Promise<T> {
+    const data = await this.readAsync(byteOffset, byteLength);
+    // eslint-disable-next-line @typescript-eslint/await-thenable
+    return await callback(data.buffer, 'copied');
+  }
+
+  readSyncWebGL(byteOffset = 0, byteLength?: number): Uint8Array<ArrayBuffer> {
     byteLength = byteLength ?? this.byteLength - byteOffset;
     const data = new Uint8Array(byteLength);
     const dstOffset = 0;