@luma.gl/webgl 9.1.0-alpha.10 → 9.1.0-alpha.13

package/dist/index.d.ts

@@ -13,7 +13,7 @@ export { WEBGLCommandEncoder } from "./adapter/resources/webgl-command-encoder.j
 export { WEBGLRenderPass } from "./adapter/resources/webgl-render-pass.js";
 export { WEBGLVertexArray } from "./adapter/resources/webgl-vertex-array.js";
 export { WEBGLTransformFeedback } from "./adapter/resources/webgl-transform-feedback.js";
-export { Accessor } from "./classic/accessor.js";
+export { Accessor } from "./deprecated/accessor.js";
 export type { AccessorObject } from "./types.js";
 export { setDeviceParameters, withDeviceParameters } from "./adapter/converters/device-parameters.js";
 export { getShaderLayout } from "./adapter/helpers/get-shader-layout.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;AAGpF,OAAO,EAAC,QAAQ,EAAC,8BAA2B;AAC5C,YAAY,EAAC,cAAc,EAAC,mBAAgB;AAI5C,OAAO,EAAC,mBAAmB,EAAE,oBAAoB,EAAC,kDAA+C;AAGjG,OAAO,EAAC,eAAe,EAAC,+CAA4C;AACpE,OAAO,EAAC,iBAAiB,EAAC,uDAAoD;AAG9E,OAAO,EAAC,eAAe,IAAI,gBAAgB,EAAC,gDAA6C;AAGzF,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;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;AAGpF,OAAO,EAAC,QAAQ,EAAC,iCAA8B;AAC/C,YAAY,EAAC,cAAc,EAAC,mBAAgB;AAI5C,OAAO,EAAC,mBAAmB,EAAE,oBAAoB,EAAC,kDAA+C;AAGjG,OAAO,EAAC,eAAe,EAAC,+CAA4C;AACpE,OAAO,EAAC,iBAAiB,EAAC,uDAAoD;AAG9E,OAAO,EAAC,eAAe,IAAI,gBAAgB,EAAC,gDAA6C;AAGzF,OAAO,EACL,iBAAiB,EACjB,eAAe,EACf,eAAe,EAChB,sDAAmD;AAEpD,OAAO,EAAC,gBAAgB,EAAC,mDAAgD"}

package/dist/index.js

@@ -22,7 +22,7 @@ export { WEBGLVertexArray } from "./adapter/resources/webgl-vertex-array.js";
 // WebGL adapter classes
 export { WEBGLTransformFeedback } from "./adapter/resources/webgl-transform-feedback.js";
 // WebGL adapter classes
-export { Accessor } from "./classic/accessor.js";
+export { Accessor } from "./deprecated/accessor.js";
 // Unified parameter API
 export { setDeviceParameters, withDeviceParameters } from "./adapter/converters/device-parameters.js";
 // HELPERS - EXPERIMENTAL

package/dist/utils/fill-array.d.ts

@@ -1,8 +1,8 @@
-import type { NumberArray } from '@math.gl/types';
+import type { NumericArray } from '@math.gl/types';
 export declare function fillArray(options: {
-    target: NumberArray;
-    source: NumberArray;
+    target: NumericArray;
+    source: NumericArray;
     start?: number;
     count?: number;
-}): NumberArray;
+}): NumericArray;
 //# sourceMappingURL=fill-array.d.ts.map

package/dist/utils/fill-array.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fill-array.d.ts","sourceRoot":"","sources":["../../src/utils/fill-array.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAGhD,wBAAgB,SAAS,CAAC,OAAO,EAAE;IACjC,MAAM,EAAE,WAAW,CAAC;IACpB,MAAM,EAAE,WAAW,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,WAAW,CAsBd"}
+{"version":3,"file":"fill-array.d.ts","sourceRoot":"","sources":["../../src/utils/fill-array.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAGjD,wBAAgB,SAAS,CAAC,OAAO,EAAE;IACjC,MAAM,EAAE,YAAY,CAAC;IACrB,MAAM,EAAE,YAAY,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,YAAY,CAsBf"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luma.gl/webgl",
-  "version": "9.1.0-alpha.10",
+  "version": "9.1.0-alpha.13",
   "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.0.0-beta"
+    "@luma.gl/core": "9.1.0-alpha.10"
   },
   "dependencies": {
-    "@luma.gl/constants": "9.1.0-alpha.10",
-    "@math.gl/types": "^4.0.0",
+    "@luma.gl/constants": "9.1.0-alpha.13",
+    "@math.gl/types": "4.1.0-alpha.3",
     "@probe.gl/env": "^4.0.8"
   },
-  "gitHead": "f419cdc284e87b553df60af49d2888ac7dbbf288"
+  "gitHead": "c2c641d67a5aec97467de13b0e3d8f9307ba03c2"
 }

package/src/adapter/device-helpers/webgl-device-features.ts

@@ -8,8 +8,11 @@
 import {DeviceFeature, DeviceFeatures} from '@luma.gl/core';
 import {GLExtensions} from '@luma.gl/constants';
 import {getWebGLExtension} from '../../context/helpers/webgl-extensions';
-import {isTextureFeature, checkTextureFeature} from '../converters/texture-formats';
-import {TEXTURE_FEATURES} from '../converters/texture-formats';
+import {
+  isTextureFeature,
+  checkTextureFeature,
+  TEXTURE_FEATURES
+} from '../converters/texture-formats';
 
 /**
  * Defines luma.gl "feature" names and semantics

package/src/adapter/helpers/get-shader-layout.ts

@@ -11,7 +11,6 @@ import type {
 } from '@luma.gl/core';
 
 import {GL} from '@luma.gl/constants';
-import {Accessor} from '../../classic/accessor'; // TODO - should NOT depend on classic API
 import {decodeGLUniformType, decodeGLAttributeType, isSamplerUniform} from './decode-webgl-types';
 
 /**
@@ -143,8 +142,7 @@ function readVaryings(gl: WebGL2RenderingContext, program: WebGLProgram): Varyin
     }
     const {name, type: compositeType, size} = activeInfo;
     const {glType, components} = decodeGLUniformType(compositeType);
-    const accessor = new Accessor({type: glType, size: size * components});
-    const varying = {location, name, accessor}; // Base values
+    const varying = {location, name, type: glType, size: size * components}; // Base values
     varyings.push(varying);
   }
 

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

@@ -7,7 +7,8 @@
 //
 
 import type {ExternalImage} from '@luma.gl/core';
-// import {Buffer} from '@luma.gl/core';
+import {Buffer, Texture, Framebuffer, FramebufferProps} from '@luma.gl/core';
+
 import {
   GL,
   GLTextureTarget,
@@ -18,39 +19,36 @@ import {
 
 import {TypedArray} from '@math.gl/types';
 
+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';
+
 /** A "border" parameter is required in many WebGL texture APIs, but must always be 0... */
 const BORDER = 0;
 
+/**
+ * Options for setting data into a texture
+ */
 export type WebGLSetTextureOptions = {
   dimension: '1d' | '2d' | '2d-array' | 'cube' | 'cube-array' | '3d';
   height: number;
   width: number;
-  depth?: number;
-  level?: number;
+  depth: number;
+  mipLevel?: number;
   glTarget: GLTextureTarget;
   glInternalFormat: GL;
   glFormat: GLTexelDataFormat;
   glType: GLPixelType;
   compressed?: boolean;
-
   byteOffset?: number;
   byteLength?: number;
 };
 
 /**
- * @param {*} pixels, data -
- *  null - create empty texture of specified format
- *  Typed array - init from image data in typed array
- *  Buffer|WebGLBuffer - (WEBGL2) init from image data in WebGLBuffer
- *  HTMLImageElement|Image - Inits with content of image. Auto width/height
- *  HTMLCanvasElement - Inits with contents of canvas. Auto width/height
- *  HTMLVideoElement - Creates video texture. Auto width/height
+ * Options for copying an image or data into a texture
  *
- * @param  x - xOffset from where texture to be updated
- * @param  y - yOffset from where texture to be updated
- * @param  width - width of the sub image to be updated
- * @param  height - height of the sub image to be updated
- * @param  level - mip level to be updated
  * @param {GLenum} format - internal format of image data.
  * @param {GLenum} type
  *  - format of array (autodetect from type) or
@@ -61,12 +59,19 @@ export type WebGLSetTextureOptions = {
  */
 export type WebGLCopyTextureOptions = {
   dimension: '1d' | '2d' | '2d-array' | 'cube' | 'cube-array' | '3d';
-  level?: number;
-  height: number;
+  /** mip level to be updated */
+  mipLevel?: number;
+  /** width of the sub image to be updated */
   width: number;
+  /** height of the sub image to be updated */
+  height: number;
+  /** depth of texture to be updated */
   depth?: number;
+  /** xOffset from where texture to be updated */
   x?: number;
+  /** yOffset from where texture to be updated */
   y?: number;
+  /** yOffset from where texture to be updated */
   z?: number;
 
   glTarget: GLTextureTarget;
@@ -74,7 +79,6 @@ export type WebGLCopyTextureOptions = {
   glFormat: GL;
   glType: GL;
   compressed?: boolean;
-
   byteOffset?: number;
   byteLength?: number;
 };
@@ -112,30 +116,34 @@ export function initializeTextureStorage(
 /**
  * Copy a region of compressed data from a GPU memory buffer into this texture.
  */
-export function copyCPUImageToMipLevel(
+export function copyExternalImageToMipLevel(
   gl: WebGL2RenderingContext,
+  handle: WebGLTexture,
   image: ExternalImage,
   options: WebGLCopyTextureOptions
 ): void {
-  const {dimension, width, height, depth = 0, level = 0} = options;
+  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);
 
-  // width = size.width,
-  // height = size.height
+  const glTarget = getWebGLCubeFaceTarget(options.glTarget, dimension, depth);
 
   switch (dimension) {
     case '2d-array':
     case '3d':
+      gl.bindTexture(glTarget, handle);
       // prettier-ignore
-      gl.texSubImage3D(glTarget, level, x, y, z, width, height, depth, glFormat, glType, image);
+      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, level, x, y, width, height, glFormat, glType, image);
+      gl.texSubImage2D(glTarget, mipLevel, x, y, width, height, glFormat, glType, image);
+      gl.bindTexture(glTarget, null);
       break;
 
     default:
@@ -151,7 +159,7 @@ export function copyCPUDataToMipLevel(
   typedArray: TypedArray,
   options: WebGLCopyTextureOptions
 ): void {
-  const {dimension, width, height, depth = 0, level = 0, byteOffset = 0} = options;
+  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);
@@ -163,10 +171,10 @@ export function copyCPUDataToMipLevel(
     case '3d':
       if (compressed) {
         // prettier-ignore
-        gl.compressedTexSubImage3D(glTarget, level, x, y, z, width, height, depth, glFormat, typedArray, byteOffset); // , byteLength
+        gl.compressedTexSubImage3D(glTarget, mipLevel, x, y, z, width, height, depth, glFormat, typedArray, byteOffset); // , byteLength
       } else {
         // prettier-ignore
-        gl.texSubImage3D(glTarget, level, x, y, z, width, height, depth, glFormat, glType, typedArray, byteOffset); // , byteLength
+        gl.texSubImage3D(glTarget, mipLevel, x, y, z, width, height, depth, glFormat, glType, typedArray, byteOffset); // , byteLength
       }
       break;
 
@@ -174,10 +182,10 @@ export function copyCPUDataToMipLevel(
     case 'cube':
       if (compressed) {
         // prettier-ignore
-        gl.compressedTexSubImage2D(glTarget, level, x, y, width, height, glFormat, typedArray, byteOffset); // , byteLength
+        gl.compressedTexSubImage2D(glTarget, mipLevel, x, y, width, height, glFormat, typedArray, byteOffset); // , byteLength
       } else {
         // prettier-ignore
-        gl.texSubImage2D(glTarget, level, x, y, width, height, glFormat, glType, typedArray, byteOffset); // , byteLength
+        gl.texSubImage2D(glTarget, mipLevel, x, y, width, height, glFormat, glType, typedArray, byteOffset); // , byteLength
       }
       break;
 
@@ -195,7 +203,7 @@ export function copyGPUBufferToMipLevel(
   byteLength: number,
   options: WebGLCopyTextureOptions
 ): void {
-  const {dimension, width, height, depth = 0, level = 0, byteOffset = 0} = options;
+  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);
@@ -209,10 +217,10 @@ export function copyGPUBufferToMipLevel(
       if (compressed) {
         // TODO enable extension?
         // prettier-ignore
-        gl.compressedTexSubImage3D(glTarget, level, x, y, z, width, height, depth, glFormat, byteLength, byteOffset);
+        gl.compressedTexSubImage3D(glTarget, mipLevel, x, y, z, width, height, depth, glFormat, byteLength, byteOffset);
       } else {
         // prettier-ignore
-        gl.texSubImage3D(glTarget, level, x, y, z, width, height, depth, glFormat, glType, byteOffset);
+        gl.texSubImage3D(glTarget, mipLevel, x, y, z, width, height, depth, glFormat, glType, byteOffset);
       }
       break;
 
@@ -220,10 +228,10 @@ export function copyGPUBufferToMipLevel(
     case 'cube':
       if (compressed) {
         // prettier-ignore
-        gl.compressedTexSubImage2D(glTarget, level, x, y, width, height, glFormat, byteLength, byteOffset);
+        gl.compressedTexSubImage2D(glTarget, mipLevel, x, y, width, height, glFormat, byteLength, byteOffset);
       } else {
         // prettier-ignore
-        gl.texSubImage2D(glTarget, level, x, y, width, height, BORDER, glFormat, byteOffset);
+        gl.texSubImage2D(glTarget, mipLevel, x, y, width, height, BORDER, glFormat, byteOffset);
       }
       break;
 
@@ -255,7 +263,7 @@ export function getWebGLTextureTarget(
  * @note We still bind the texture using GL.TEXTURE_CUBE_MAP, but we need to use the face-specific target when setting mip levels.
  * @returns glTarget unchanged, if dimension !== 'cube'.
  */
-function getWebGLCubeFaceTarget(
+export function getWebGLCubeFaceTarget(
   glTarget: GLTextureTarget,
   dimension: '1d' | '2d' | '2d-array' | 'cube' | 'cube-array' | '3d',
   level: number
@@ -482,3 +490,314 @@ export function setMipLevelFromGPUBuffer(
   gl.bindBuffer(GL.PIXEL_UNPACK_BUFFER, null);
 }
 */
+
+/**
+ * Copies data from a type  or a Texture object into ArrayBuffer object.
+ * App can provide targetPixelArray or have it auto allocated by this method
+ *  newly allocated by this method unless provided by app.
+ * @deprecated Use CommandEncoder.copyTextureToBuffer and Buffer.read
+ * @note Slow requires roundtrip to GPU
+ *
+ * @param source
+ * @param options
+ * @returns pixel array,
+ */
+export function readPixelsToArray(
+  source: Framebuffer | Texture,
+  options?: {
+    sourceX?: number;
+    sourceY?: number;
+    sourceFormat?: number;
+    sourceAttachment?: number;
+    target?: Uint8Array | Uint16Array | Float32Array;
+    // following parameters are auto deduced if not provided
+    sourceWidth?: number;
+    sourceHeight?: number;
+    sourceDepth?: number;
+    sourceType?: number;
+  }
+): Uint8Array | Uint16Array | Float32Array {
+  const {
+    sourceX = 0,
+    sourceY = 0,
+    sourceAttachment = GL.COLOR_ATTACHMENT0 // TODO - support gl.readBuffer
+  } = options || {};
+  let {
+    target = null,
+    // following parameters are auto deduced if not provided
+    sourceWidth,
+    sourceHeight,
+    sourceDepth,
+    sourceFormat,
+    sourceType
+  } = options || {};
+
+  const {framebuffer, deleteFramebuffer} = getFramebuffer(source);
+  // assert(framebuffer);
+  const {gl, handle} = framebuffer;
+  const attachment = sourceAttachment - GL.COLOR_ATTACHMENT0;
+
+  sourceWidth ||= framebuffer.width;
+  sourceHeight ||= framebuffer.height;
+
+  // TODO - Set and unset gl.readBuffer
+  // if (sourceAttachment === GL.COLOR_ATTACHMENT0 && handle === null) {
+  //   sourceAttachment = GL.FRONT;
+  // }
+
+  sourceDepth = framebuffer.colorAttachments[attachment]?.texture?.depth || 1;
+
+  sourceFormat ||= framebuffer.colorAttachments[attachment]?.texture?.glFormat || GL.RGBA;
+  // Deduce the type from color attachment if not provided.
+  sourceType ||= framebuffer.colorAttachments[attachment]?.texture?.glType || GL.UNSIGNED_BYTE;
+
+  // Deduce type and allocated pixelArray if needed
+  target = getPixelArray(target, sourceType, sourceFormat, sourceWidth, sourceHeight, sourceDepth);
+
+  // Pixel array available, if necessary, deduce type from it.
+  sourceType = sourceType || getGLTypeFromTypedArray(target);
+
+  const prevHandle = gl.bindFramebuffer(GL.FRAMEBUFFER, handle);
+  gl.readPixels(sourceX, sourceY, sourceWidth, sourceHeight, sourceFormat, sourceType, target);
+  // @ts-expect-error
+  gl.bindFramebuffer(GL.FRAMEBUFFER, prevHandle || null);
+  if (deleteFramebuffer) {
+    framebuffer.destroy();
+  }
+  return target;
+}
+
+/**
+ * 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 transffer.
+ * @deprecated Use CommandEncoder
+ * @param source
+ * @param options
+ */
+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;
+  }
+): WEBGLBuffer {
+  const {
+    target,
+    sourceX = 0,
+    sourceY = 0,
+    sourceFormat = GL.RGBA,
+    targetByteOffset = 0
+  } = options || {};
+  // following parameters are auto deduced if not provided
+  let {sourceWidth, sourceHeight, sourceType} = options || {};
+  const {framebuffer, deleteFramebuffer} = getFramebuffer(source);
+  // assert(framebuffer);
+  sourceWidth = sourceWidth || framebuffer.width;
+  sourceHeight = sourceHeight || framebuffer.height;
+
+  // Asynchronous read (PIXEL_PACK_BUFFER) is WebGL2 only feature
+  const webglFramebuffer = framebuffer;
+
+  // deduce type if not available.
+  sourceType = sourceType || GL.UNSIGNED_BYTE;
+
+  let webglBufferTarget = target as unknown as WEBGLBuffer | undefined;
+  if (!webglBufferTarget) {
+    // Create new buffer with enough size
+    const components = glFormatToComponents(sourceFormat);
+    const byteCount = glTypeToBytes(sourceType);
+    const byteLength = targetByteOffset + sourceWidth * sourceHeight * components * byteCount;
+    webglBufferTarget = webglFramebuffer.device.createBuffer({byteLength});
+  }
+
+  // TODO(donmccurdy): Do we have tests to confirm this is working?
+  const commandEncoder = source.device.createCommandEncoder();
+  commandEncoder.copyTextureToBuffer({
+    source: source as Texture,
+    width: sourceWidth,
+    height: sourceHeight,
+    origin: [sourceX, sourceY],
+    destination: webglBufferTarget,
+    byteOffset: targetByteOffset
+  });
+  commandEncoder.destroy();
+
+  if (deleteFramebuffer) {
+    framebuffer.destroy();
+  }
+
+  return webglBufferTarget;
+}
+
+/**
+ * Copy a rectangle from a Framebuffer or Texture object into a texture (at an offset)
+ * @deprecated Use CommandEncoder
+ */
+// eslint-disable-next-line complexity, max-statements
+export function copyToTexture(
+  source: Framebuffer | Texture,
+  target: Texture | GL,
+  options?: {
+    sourceX?: number;
+    sourceY?: number;
+
+    targetX?: number;
+    targetY?: number;
+    targetZ?: number;
+    targetMipmaplevel?: number;
+    targetInternalFormat?: number;
+
+    width?: number; // defaults to target width
+    height?: number; // defaults to target height
+  }
+): Texture {
+  const {
+    sourceX = 0,
+    sourceY = 0,
+    // attachment = GL.COLOR_ATTACHMENT0, // TODO - support gl.readBuffer
+    targetMipmaplevel = 0,
+    targetInternalFormat = GL.RGBA
+  } = options || {};
+  let {
+    targetX,
+    targetY,
+    targetZ,
+    width, // defaults to target width
+    height // defaults to target height
+  } = options || {};
+
+  const {framebuffer, deleteFramebuffer} = getFramebuffer(source);
+  // assert(framebuffer);
+  const webglFramebuffer = framebuffer;
+  const {device, handle} = webglFramebuffer;
+  const isSubCopy =
+    typeof targetX !== 'undefined' ||
+    typeof targetY !== 'undefined' ||
+    typeof targetZ !== 'undefined';
+  targetX = targetX || 0;
+  targetY = targetY || 0;
+  targetZ = targetZ || 0;
+  const prevHandle = device.gl.bindFramebuffer(GL.FRAMEBUFFER, handle);
+  // TODO - support gl.readBuffer (WebGL2 only)
+  // const prevBuffer = gl.readBuffer(attachment);
+  // assert(target);
+  let texture: WEBGLTexture | null = null;
+  let textureTarget: GL;
+  if (target instanceof WEBGLTexture) {
+    texture = target;
+    width = Number.isFinite(width) ? width : texture.width;
+    height = Number.isFinite(height) ? height : texture.height;
+    texture?.bind(0);
+    // @ts-ignore
+    textureTarget = texture.target;
+  } else {
+    // @ts-ignore
+    textureTarget = target;
+  }
+
+  if (!isSubCopy) {
+    device.gl.copyTexImage2D(
+      textureTarget,
+      targetMipmaplevel,
+      targetInternalFormat,
+      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,
+          targetMipmaplevel,
+          targetX,
+          targetY,
+          sourceX,
+          sourceY,
+          width,
+          height
+        );
+        break;
+      case GL.TEXTURE_2D_ARRAY:
+      case GL.TEXTURE_3D:
+        device.gl.copyTexSubImage3D(
+          textureTarget,
+          targetMipmaplevel,
+          targetX,
+          targetY,
+          targetZ,
+          sourceX,
+          sourceY,
+          width,
+          height
+        );
+        break;
+      default:
+    }
+  }
+  if (texture) {
+    texture.unbind();
+  }
+  // @ts-expect-error
+  device.gl.bindFramebuffer(GL.FRAMEBUFFER, prevHandle || null);
+  if (deleteFramebuffer) {
+    framebuffer.destroy();
+  }
+  return texture;
+}
+
+function getFramebuffer(source: Texture | Framebuffer): {
+  framebuffer: WEBGLFramebuffer;
+  deleteFramebuffer: boolean;
+} {
+  if (!(source instanceof Framebuffer)) {
+    return {framebuffer: toFramebuffer(source), deleteFramebuffer: true};
+  }
+  return {framebuffer: source as WEBGLFramebuffer, deleteFramebuffer: false};
+}
+
+/**
+ * Wraps a given texture into a framebuffer object, that can be further used
+ * to read data from the texture object.
+ */
+export function toFramebuffer(texture: Texture, props?: FramebufferProps): WEBGLFramebuffer {
+  const {device, width, height, id} = texture;
+  const framebuffer = device.createFramebuffer({
+    ...props,
+    id: `framebuffer-for-${id}`,
+    width,
+    height,
+    colorAttachments: [texture]
+  });
+  return framebuffer as WEBGLFramebuffer;
+}
+
+// eslint-disable-next-line max-params
+function getPixelArray(
+  pixelArray,
+  type,
+  format,
+  width: number,
+  height: number,
+  depth?: number
+): Uint8Array | Uint16Array | Float32Array {
+  if (pixelArray) {
+    return pixelArray;
+  }
+  // Allocate pixel array if not already available, using supplied type
+  type = type || GL.UNSIGNED_BYTE;
+  const ArrayType = getTypedArrayFromGLType(type, {clamped: false});
+  const components = glFormatToComponents(format);
+  // TODO - check for composite type (components = 1).
+  return new ArrayType(width * height * components) as Uint8Array | Uint16Array | Float32Array;
+}