@luma.gl/webgl - npm Package Compare versions

Comparing version 9.1.0-alpha.10 to 9.1.0-alpha.12

dist/adapter/device-helpers/webgl-device-features.js

@@ -8,4 +8,3 @@ // luma.gl
 import { getWebGLExtension } from "../../context/helpers/webgl-extensions.js";
-import { isTextureFeature, checkTextureFeature } from "../converters/texture-formats.js";
-import { TEXTURE_FEATURES } from "../converters/texture-formats.js";
+import { isTextureFeature, checkTextureFeature, TEXTURE_FEATURES } from "../converters/texture-formats.js";
 /**
@@ -12,0 +11,0 @@ * Defines luma.gl "feature" names and semantics

dist/adapter/helpers/get-shader-layout.js

@@ -5,3 +5,2 @@ // luma.gl
 import { GL } from '@luma.gl/constants';
-import { Accessor } from "../../classic/accessor.js"; // TODO - should NOT depend on classic API
 import { decodeGLUniformType, decodeGLAttributeType, isSamplerUniform } from "./decode-webgl-types.js";
@@ -118,4 +117,3 @@ /**
         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);
@@ -122,0 +120,0 @@ }

dist/adapter/helpers/webgl-texture-utils.d.ts

 import type { ExternalImage } from '@luma.gl/core';
-import { GL, GLTextureTarget, GLTexelDataFormat, GLPixelType } from '@luma.gl/constants';
+import { Buffer, Texture, Framebuffer, FramebufferProps } from '@luma.gl/core';
+import { GL, GLTextureTarget, GLTextureCubeMapTarget, GLTexelDataFormat, GLPixelType } from '@luma.gl/constants';
 import { TypedArray } from '@math.gl/types';
+import { WEBGLFramebuffer } from "../resources/webgl-framebuffer.js";
+import { WEBGLBuffer } from "../resources/webgl-buffer.js";
+/**
+ * Options for setting data into a texture
+ */
 export type WebGLSetTextureOptions = {
@@ -8,4 +14,4 @@ dimension: '1d' | '2d' | '2d-array' | 'cube' | 'cube-array' | '3d';
     width: number;
-    depth?: number;
-    level?: number;
+    depth: number;
+    mipLevel?: number;
     glTarget: GLTextureTarget;
@@ -20,15 +26,4 @@ glInternalFormat: GL;
 /**
- * @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.
@@ -44,8 +39,15 @@ * @param {GLenum} type
     dimension: '1d' | '2d' | '2d-array' | 'cube' | 'cube-array' | '3d';
-    level?: 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;
-    width: 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;
@@ -75,3 +77,3 @@ glTarget: GLTextureTarget;
  */
-export declare function copyCPUImageToMipLevel(gl: WebGL2RenderingContext, image: ExternalImage, options: WebGLCopyTextureOptions): void;
+export declare function copyExternalImageToMipLevel(gl: WebGL2RenderingContext, handle: WebGLTexture, image: ExternalImage, options: WebGLCopyTextureOptions): void;
 /**
@@ -88,2 +90,8 @@ * Copy a region of data from a CPU memory buffer into this texture.
 /**
+ * In WebGL, cube maps specify faces by overriding target instead of using the depth parameter.
+ * @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'.
+ */
+export declare function getWebGLCubeFaceTarget(glTarget: GLTextureTarget, dimension: '1d' | '2d' | '2d-array' | 'cube' | 'cube-array' | '3d', level: number): GLTextureTarget | GLTextureCubeMapTarget;
+/**
  * Clear a texture mip level.
@@ -305,2 +313,61 @@ * Wrapper for the messy WebGL texture API
 */
+/**
+ * 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 declare function readPixelsToArray(source: Framebuffer | Texture, options?: {
+    sourceX?: number;
+    sourceY?: number;
+    sourceFormat?: number;
+    sourceAttachment?: number;
+    target?: Uint8Array | Uint16Array | Float32Array;
+    sourceWidth?: number;
+    sourceHeight?: number;
+    sourceDepth?: number;
+    sourceType?: number;
+}): Uint8Array | Uint16Array | Float32Array;
+/**
+ * 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 declare function readPixelsToBuffer(source: Framebuffer | Texture, options?: {
+    sourceX?: number;
+    sourceY?: number;
+    sourceFormat?: number;
+    target?: Buffer;
+    targetByteOffset?: number;
+    sourceWidth?: number;
+    sourceHeight?: number;
+    sourceType?: number;
+}): WEBGLBuffer;
+/**
+ * Copy a rectangle from a Framebuffer or Texture object into a texture (at an offset)
+ * @deprecated Use CommandEncoder
+ */
+export declare 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;
+    height?: number;
+}): Texture;
+/**
+ * Wraps a given texture into a framebuffer object, that can be further used
+ * to read data from the texture object.
+ */
+export declare function toFramebuffer(texture: Texture, props?: FramebufferProps): WEBGLFramebuffer;
 //# sourceMappingURL=webgl-texture-utils.d.ts.map

dist/adapter/helpers/webgl-texture-utils.js

 // luma.gl
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
-// import {Buffer} from '@luma.gl/core';
+import { Framebuffer } from '@luma.gl/core';
 import { GL } from '@luma.gl/constants';
+import { getGLTypeFromTypedArray, getTypedArrayFromGLType } from "./typed-array-utils.js";
+import { glFormatToComponents, glTypeToBytes } from "./format-utils.js";
+import { WEBGLTexture } from "../resources/webgl-texture.js";
 /** A "border" parameter is required in many WebGL texture APIs, but must always be 0... */
@@ -35,19 +38,22 @@ const BORDER = 0;
  */
-export function copyCPUImageToMipLevel(gl, image, options) {
-    const { dimension, width, height, depth = 0, level = 0 } = options;
+export function copyExternalImageToMipLevel(gl, handle, image, 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
     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;
@@ -62,3 +68,3 @@ default:
 export function copyCPUDataToMipLevel(gl, typedArray, options) {
-    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;
@@ -73,7 +79,7 @@ const { glFormat, glType, compressed } = options;
                 // 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
             }
@@ -85,7 +91,7 @@ break;
                 // 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
             }
@@ -101,3 +107,3 @@ break;
 export function copyGPUBufferToMipLevel(gl, webglBuffer, byteLength, options) {
-    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;
@@ -114,7 +120,7 @@ const { glFormat, glType, compressed } = options;
                 // 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);
             }
@@ -126,7 +132,7 @@ break;
                 // 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);
             }
@@ -157,3 +163,3 @@ break;
  */
-function getWebGLCubeFaceTarget(glTarget, dimension, level) {
+export function getWebGLCubeFaceTarget(glTarget, dimension, level) {
     return dimension === 'cube' ? 34069 + level : glTarget;
@@ -379,1 +385,187 @@ }
 */
+/**
+ * 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, options) {
+    const { sourceX = 0, sourceY = 0, sourceAttachment = 36064 // 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 - 36064;
+    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 || 6408;
+    // Deduce the type from color attachment if not provided.
+    sourceType ||= framebuffer.colorAttachments[attachment]?.texture?.glType || 5121;
+    // 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(36160, handle);
+    gl.readPixels(sourceX, sourceY, sourceWidth, sourceHeight, sourceFormat, sourceType, target);
+    // @ts-expect-error
+    gl.bindFramebuffer(36160, 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, options) {
+    const { target, sourceX = 0, sourceY = 0, sourceFormat = 6408, 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 || 5121;
+    let webglBufferTarget = target;
+    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,
+        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, target, options) {
+    const { sourceX = 0, sourceY = 0, 
+    // attachment = GL.COLOR_ATTACHMENT0, // TODO - support gl.readBuffer
+    targetMipmaplevel = 0, targetInternalFormat = 6408 } = 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(36160, handle);
+    // TODO - support gl.readBuffer (WebGL2 only)
+    // const prevBuffer = gl.readBuffer(attachment);
+    // assert(target);
+    let texture = null;
+    let textureTarget;
+    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 3553:
+            case 34067:
+                device.gl.copyTexSubImage2D(textureTarget, targetMipmaplevel, targetX, targetY, sourceX, sourceY, width, height);
+                break;
+            case 35866:
+            case 32879:
+                device.gl.copyTexSubImage3D(textureTarget, targetMipmaplevel, targetX, targetY, targetZ, sourceX, sourceY, width, height);
+                break;
+            default:
+        }
+    }
+    if (texture) {
+        texture.unbind();
+    }
+    // @ts-expect-error
+    device.gl.bindFramebuffer(36160, prevHandle || null);
+    if (deleteFramebuffer) {
+        framebuffer.destroy();
+    }
+    return texture;
+}
+function getFramebuffer(source) {
+    if (!(source instanceof Framebuffer)) {
+        return { framebuffer: toFramebuffer(source), deleteFramebuffer: true };
+    }
+    return { framebuffer: source, 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, props) {
+    const { device, width, height, id } = texture;
+    const framebuffer = device.createFramebuffer({
+        ...props,
+        id: `framebuffer-for-${id}`,
+        width,
+        height,
+        colorAttachments: [texture]
+    });
+    return framebuffer;
+}
+// eslint-disable-next-line max-params
+function getPixelArray(pixelArray, type, format, width, height, depth) {
+    if (pixelArray) {
+        return pixelArray;
+    }
+    // Allocate pixel array if not already available, using supplied type
+    type = type || 5121;
+    const ArrayType = getTypedArrayFromGLType(type, { clamped: false });
+    const components = glFormatToComponents(format);
+    // TODO - check for composite type (components = 1).
+    return new ArrayType(width * height * components);
+}

dist/adapter/resources/webgl-render-pipeline.d.ts

@@ -1,4 +0,2 @@
-import type { RenderPipelineProps, RenderPipelineParameters, PrimitiveTopology } from '@luma.gl/core';
-import type { ShaderLayout, UniformValue, Binding } from '@luma.gl/core';
-import type { RenderPass, VertexArray } from '@luma.gl/core';
+import type { RenderPipelineProps, RenderPipelineParameters, PrimitiveTopology, ShaderLayout, UniformValue, Binding, RenderPass, VertexArray } from '@luma.gl/core';
 import { RenderPipeline } from '@luma.gl/core';
@@ -5,0 +3,0 @@ import { WebGLDevice } from "../webgl-device.js";

dist/adapter/resources/webgl-texture.d.ts

@@ -110,3 +110,3 @@ import type { Device, TextureProps, TextureViewProps, Sampler, SamplerProps, TextureCubeFace, ExternalImage, Texture1DData, Texture2DData, Texture3DData, TextureCubeData, TextureArrayData, TextureCubeArrayData } from '@luma.gl/core';
      */
-    protected _setMipLevel(depth: number, level: number, textureData: Texture2DData, glTarget?: GL): void;
+    protected _setMipLevel(depth: number, mipLevel: number, textureData: Texture2DData, glTarget?: GL): void;
     getActiveUnit(): number;
@@ -113,0 +113,0 @@ bind(textureUnit?: number): number;

dist/adapter/resources/webgl-texture.js

@@ -19,3 +19,3 @@ // luma.gl
 // clearMipLevel,
-copyCPUImageToMipLevel, copyCPUDataToMipLevel, 
+copyExternalImageToMipLevel, copyCPUDataToMipLevel, 
 // copyGPUBufferToMipLevel,
@@ -270,6 +270,26 @@ getWebGLTextureTarget } from "../helpers/webgl-texture-utils.js";
         const opts = { ...Texture.defaultCopyExternalImageOptions, ...size, ...options };
-        const { depth, mipLevel: lodLevel, image } = opts;
-        this.bind();
-        this._setMipLevel(depth, lodLevel, image);
-        this.unbind();
+        const { image, depth, mipLevel, x, y, z } = opts;
+        let { width, height } = opts;
+        const { dimension, glTarget, glFormat, glInternalFormat, glType } = this;
+        // WebGL will error if we try to copy outside the bounds of the texture
+        width = Math.min(width, size.width - x);
+        height = Math.min(height, size.height - y);
+        // WebGL does not yet support sourceX/sourceY in copyExternalImage; requires copyTexSubImage2D from a framebuffer'
+        if (options.sourceX || options.sourceY) {
+            throw new Error('WebGL does not yet support sourceX/sourceY in copyExternalImage; requires copyTexSubImage2D from a framebuffer');
+        }
+        copyExternalImageToMipLevel(this.device.gl, this.handle, image, {
+            dimension,
+            mipLevel,
+            x,
+            y,
+            z,
+            width,
+            height,
+            depth,
+            glFormat,
+            glInternalFormat,
+            glType,
+            glTarget
+        });
         return { width: opts.width, height: opts.height };
@@ -480,3 +500,3 @@ }
      */
-    _setMipLevel(depth, level, textureData, glTarget = this.glTarget) {
+    _setMipLevel(depth, mipLevel, textureData, glTarget = this.glTarget) {
         // if (!textureData) {
@@ -487,3 +507,8 @@ //   clearMipLevel(this.device.gl, {...this, depth, level});
         if (Texture.isExternalImage(textureData)) {
-            copyCPUImageToMipLevel(this.device.gl, textureData, { ...this, depth, level, glTarget });
+            copyExternalImageToMipLevel(this.device.gl, this.handle, textureData, {
+                ...this,
+                depth,
+                mipLevel,
+                glTarget
+            });
             return;
@@ -496,3 +521,3 @@ }
                 depth,
-                level,
+                mipLevel,
                 glTarget
@@ -499,0 +524,0 @@ });

dist/adapter/webgl-device.d.ts

 import type { TypedArray } from '@math.gl/types';
-import type { DeviceProps, DeviceInfo, CanvasContextProps, TextureFormat } from '@luma.gl/core';
-import type { Buffer, Texture, Framebuffer, VertexArray, VertexArrayProps } from '@luma.gl/core';
+import type { DeviceProps, DeviceInfo, CanvasContextProps, TextureFormat, Buffer, Texture, Framebuffer, VertexArray, VertexArrayProps } from '@luma.gl/core';
 import { Device, CanvasContext } from '@luma.gl/core';
@@ -5,0 +4,0 @@ import type { GLExtensions } from '@luma.gl/constants';

dist/adapter/webgl-device.js

@@ -26,6 +26,6 @@ // luma.gl
 import { WEBGLQuerySet } from "./resources/webgl-query-set.js";
-import { readPixelsToArray, readPixelsToBuffer } from "../classic/copy-and-blit.js";
+import { readPixelsToArray, readPixelsToBuffer } from "./helpers/webgl-texture-utils.js";
 import { setGLParameters, getGLParameters, resetGLParameters } from "../context/parameters/unified-parameter-api.js";
 import { withGLParameters } from "../context/state-tracker/with-parameters.js";
-import { clear } from "../classic/clear.js";
+import { clear } from "../deprecated/clear.js";
 import { getWebGLExtension } from "../context/helpers/webgl-extensions.js";
@@ -32,0 +32,0 @@ /** WebGPU style Device API for a WebGL context */

dist/index.d.ts

@@ -16,3 +16,3 @@ export type { WebGLDeviceLimits } from "./adapter/device-helpers/webgl-device-limits.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";
@@ -19,0 +19,0 @@ export { setDeviceParameters, withDeviceParameters } from "./adapter/converters/device-parameters.js";

dist/index.js

@@ -25,3 +25,3 @@ // luma.gl
 // WebGL adapter classes
-export { Accessor } from "./classic/accessor.js";
+export { Accessor } from "./deprecated/accessor.js";
 // Unified parameter API
@@ -28,0 +28,0 @@ export { setDeviceParameters, withDeviceParameters } from "./adapter/converters/device-parameters.js";

dist/utils/fill-array.d.ts

@@ -1,8 +0,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.json

 {
   "name": "@luma.gl/webgl",
-  "version": "9.1.0-alpha.10",
+  "version": "9.1.0-alpha.12",
   "description": "WebGL2 adapter for the luma.gl core API",
@@ -43,10 +43,10 @@ "type": "module",
   "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.12",
+    "@math.gl/types": "4.1.0-alpha.3",
     "@probe.gl/env": "^4.0.8"
   },
-  "gitHead": "f419cdc284e87b553df60af49d2888ac7dbbf288"
+  "gitHead": "61b0080d5beb5284b8bdcec5cf59e13cda65295a"
 }

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

@@ -11,4 +11,7 @@ // luma.gl
 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';
 
@@ -15,0 +18,0 @@ /**

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

@@ -14,3 +14,2 @@ // luma.gl
 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';
@@ -147,4 +146,3 @@
     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);
@@ -151,0 +149,0 @@ }

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

@@ -10,3 +10,4 @@ // luma.gl
 import type {ExternalImage} from '@luma.gl/core';
-// import {Buffer} from '@luma.gl/core';
+import {Buffer, Texture, Framebuffer, FramebufferProps} from '@luma.gl/core';
+
 import {
@@ -22,5 +23,14 @@ GL,
 
+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 = {
@@ -30,4 +40,4 @@ dimension: '1d' | '2d' | '2d-array' | 'cube' | 'cube-array' | '3d';
   width: number;
-  depth?: number;
-  level?: number;
+  depth: number;
+  mipLevel?: number;
   glTarget: GLTextureTarget;
@@ -38,3 +48,2 @@ glInternalFormat: GL;
   compressed?: boolean;
-
   byteOffset?: number;
@@ -45,15 +54,4 @@ 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.
@@ -69,8 +67,15 @@ * @param {GLenum} type
   dimension: '1d' | '2d' | '2d-array' | 'cube' | 'cube-array' | '3d';
-  level?: 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;
-  width: 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;
@@ -83,3 +88,2 @@
   compressed?: boolean;
-
   byteOffset?: number;
@@ -122,20 +126,22 @@ byteLength?: number;
  */
-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
-
   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;
@@ -145,4 +151,6 @@
     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;
@@ -163,3 +171,3 @@
 ): 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;
@@ -176,6 +184,6 @@ const {glFormat, glType, compressed} = options;
         // 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
       }
@@ -188,6 +196,6 @@ break;
         // 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
       }
@@ -210,3 +218,3 @@ break;
 ): 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;
@@ -225,6 +233,6 @@ const {glFormat, glType, compressed} = options;
         // 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);
       }
@@ -237,6 +245,6 @@ break;
         // 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);
       }
@@ -273,3 +281,3 @@ break;
  */
-function getWebGLCubeFaceTarget(
+export function getWebGLCubeFaceTarget(
   glTarget: GLTextureTarget,
@@ -501,1 +509,312 @@ dimension: '1d' | '2d' | '2d-array' | 'cube' | 'cube-array' | '3d',
 */
+
+/**
+ * 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;
+}

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

@@ -5,3 +5,3 @@ // luma.gl
 
-import {NumericArray} from '@math.gl/types';
+import {NumericArray, NumberArray4} from '@math.gl/types';
 import {RenderPass, RenderPassProps, RenderPassParameters} from '@luma.gl/core';
@@ -89,7 +89,7 @@ import {WebGLDevice} from '../webgl-device';
       if (parameters.viewport.length >= 6) {
-        glParameters.viewport = parameters.viewport.slice(0, 4);
+        glParameters.viewport = parameters.viewport.slice(0, 4) as NumberArray4;
         glParameters.depthRange = [parameters.viewport[4], parameters.viewport[5]];
       } else {
         // WebGL viewports are 4 coordinates (X, Y)
-        glParameters.viewport = parameters.viewport;
+        glParameters.viewport = parameters.viewport as NumberArray4;
       }
@@ -96,0 +96,0 @@ }

src/adapter/resources/webgl-render-pipeline.ts

@@ -5,5 +5,12 @@ // luma.gl
 
-import type {RenderPipelineProps, RenderPipelineParameters, PrimitiveTopology} from '@luma.gl/core';
-import type {ShaderLayout, UniformValue, Binding} from '@luma.gl/core';
-import type {RenderPass, VertexArray} from '@luma.gl/core';
+import type {
+  RenderPipelineProps,
+  RenderPipelineParameters,
+  PrimitiveTopology,
+  ShaderLayout,
+  UniformValue,
+  Binding,
+  RenderPass,
+  VertexArray
+} from '@luma.gl/core';
 import {RenderPipeline, log} from '@luma.gl/core';
@@ -10,0 +17,0 @@ // import {getAttributeInfosFromLayouts} from '@luma.gl/core';

src/adapter/resources/webgl-texture.ts

@@ -55,3 +55,3 @@ // luma.gl
   // clearMipLevel,
-  copyCPUImageToMipLevel,
+  copyExternalImageToMipLevel,
   copyCPUDataToMipLevel,
@@ -354,6 +354,34 @@ // copyGPUBufferToMipLevel,
     const opts = {...Texture.defaultCopyExternalImageOptions, ...size, ...options};
-    const {depth, mipLevel: lodLevel, image} = opts;
-    this.bind();
-    this._setMipLevel(depth, lodLevel, image);
-    this.unbind();
+
+    const {image, depth, mipLevel, x, y, z} = opts;
+    let {width, height} = opts;
+    const {dimension, glTarget, glFormat, glInternalFormat, glType} = this;
+
+    // WebGL will error if we try to copy outside the bounds of the texture
+    width = Math.min(width, size.width - x);
+    height = Math.min(height, size.height - y);
+
+    // WebGL does not yet support sourceX/sourceY in copyExternalImage; requires copyTexSubImage2D from a framebuffer'
+
+    if (options.sourceX || options.sourceY) {
+      throw new Error(
+        'WebGL does not yet support sourceX/sourceY in copyExternalImage; requires copyTexSubImage2D from a framebuffer'
+      );
+    }
+
+    copyExternalImageToMipLevel(this.device.gl, this.handle, image, {
+      dimension,
+      mipLevel,
+      x,
+      y,
+      z,
+      width,
+      height,
+      depth,
+      glFormat,
+      glInternalFormat,
+      glType,
+      glTarget
+    });
+
     return {width: opts.width, height: opts.height};
@@ -606,3 +634,3 @@ }
     depth: number,
-    level: number,
+    mipLevel: number,
     textureData: Texture2DData,
@@ -617,3 +645,8 @@ glTarget: GL = this.glTarget
     if (Texture.isExternalImage(textureData)) {
-      copyCPUImageToMipLevel(this.device.gl, textureData, {...this, depth, level, glTarget});
+      copyExternalImageToMipLevel(this.device.gl, this.handle, textureData, {
+        ...this,
+        depth,
+        mipLevel,
+        glTarget
+      });
       return;
@@ -627,3 +660,3 @@ }
         depth,
-        level,
+        mipLevel,
         glTarget
@@ -630,0 +663,0 @@ });

src/adapter/webgl-device.ts

@@ -6,4 +6,13 @@ // luma.gl
 import type {TypedArray} from '@math.gl/types';
-import type {DeviceProps, DeviceInfo, CanvasContextProps, TextureFormat} from '@luma.gl/core';
-import type {Buffer, Texture, Framebuffer, VertexArray, VertexArrayProps} from '@luma.gl/core';
+import type {
+  DeviceProps,
+  DeviceInfo,
+  CanvasContextProps,
+  TextureFormat,
+  Buffer,
+  Texture,
+  Framebuffer,
+  VertexArray,
+  VertexArrayProps
+} from '@luma.gl/core';
 import {Device, CanvasContext, log} from '@luma.gl/core';
@@ -63,3 +72,3 @@ import type {GLExtensions} from '@luma.gl/constants';
 
-import {readPixelsToArray, readPixelsToBuffer} from '../classic/copy-and-blit';
+import {readPixelsToArray, readPixelsToBuffer} from './helpers/webgl-texture-utils';
 import {
@@ -71,3 +80,3 @@ setGLParameters,
 import {withGLParameters} from '../context/state-tracker/with-parameters';
-import {clear} from '../classic/clear';
+import {clear} from '../deprecated/clear';
 import {getWebGLExtension} from '../context/helpers/webgl-extensions';
@@ -74,0 +83,0 @@

src/index.ts

@@ -41,3 +41,3 @@ // luma.gl
 // WebGL adapter classes
-export {Accessor} from './classic/accessor';
+export {Accessor} from './deprecated/accessor';
 export type {AccessorObject} from './types';
@@ -44,0 +44,0 @@

src/utils/fill-array.ts

@@ -5,11 +5,11 @@ // luma.gl
 
-import type {NumberArray} from '@math.gl/types';
+import type {NumericArray} from '@math.gl/types';
 
 // Uses copyWithin to significantly speed up typed array value filling
 export function fillArray(options: {
-  target: NumberArray;
-  source: NumberArray;
+  target: NumericArray;
+  source: NumericArray;
   start?: number;
   count?: number;
-}): NumberArray {
+}): NumericArray {
   const {target, source, start = 0, count = 1} = options;
@@ -16,0 +16,0 @@ const length = source.length;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1877738

increased by0.6%

Lines of code

32816

increased by0.79%

Worsened metrics

Number of package files

219

decreased by-1.79%

Dependency changes

• + [e-mail]/constants@9.1.0-alpha.12(transitive)

• + [e-mail]/core@9.1.0-alpha.10(transitive)

• + [e-mail]/types@4.1.0-alpha.3(transitive)

• - [e-mail]/constants@9.1.0-alpha.10(transitive)

• - [e-mail]/core@9.0.27(transitive)

• [e-mail]/constants@9.1.0-alpha.12

• [e-mail]/types@4.1.0-alpha.3