@luma.gl/webgpu 9.2.5 → 9.3.0-alpha.2

package/dist/index.d.ts

@@ -5,4 +5,6 @@ export { WebGPUBuffer } from "./adapter/resources/webgpu-buffer.js";
 export { WebGPUTexture } from "./adapter/resources/webgpu-texture.js";
 export { WebGPUSampler } from "./adapter/resources/webgpu-sampler.js";
 export { WebGPUShader } from "./adapter/resources/webgpu-shader.js";
+export { WebGPUFence } from "./adapter/resources/webgpu-fence.js";
+export { getShaderLayoutFromWGSL } from "./wgsl/get-shader-layout-wgsl.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA,YAAY,EAAC,aAAa,EAAC,oCAAiC;AAC5D,OAAO,EAAC,aAAa,EAAC,oCAAiC;AAGvD,OAAO,EAAC,YAAY,EAAC,mCAAgC;AACrD,OAAO,EAAC,YAAY,EAAC,6CAA0C;AAC/D,OAAO,EAAC,aAAa,EAAC,8CAA2C;AACjE,OAAO,EAAC,aAAa,EAAC,8CAA2C;AACjE,OAAO,EAAC,YAAY,EAAC,6CAA0C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA,YAAY,EAAC,aAAa,EAAC,oCAAiC;AAC5D,OAAO,EAAC,aAAa,EAAC,oCAAiC;AAGvD,OAAO,EAAC,YAAY,EAAC,mCAAgC;AACrD,OAAO,EAAC,YAAY,EAAC,6CAA0C;AAC/D,OAAO,EAAC,aAAa,EAAC,8CAA2C;AACjE,OAAO,EAAC,aAAa,EAAC,8CAA2C;AACjE,OAAO,EAAC,YAAY,EAAC,6CAA0C;AAC/D,OAAO,EAAC,WAAW,EAAC,4CAAyC;AAE7D,OAAO,EAAC,uBAAuB,EAAC,yCAAsC"}

package/dist/index.js

@@ -8,4 +8,6 @@ export { WebGPUBuffer } from "./adapter/resources/webgpu-buffer.js";
 export { WebGPUTexture } from "./adapter/resources/webgpu-texture.js";
 export { WebGPUSampler } from "./adapter/resources/webgpu-sampler.js";
 export { WebGPUShader } from "./adapter/resources/webgpu-shader.js";
+export { WebGPUFence } from "./adapter/resources/webgpu-fence.js";
+export { getShaderLayoutFromWGSL } from "./wgsl/get-shader-layout-wgsl.js";
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,UAAU;AACV,+BAA+B;AAC/B,oCAAoC;AAIpC,OAAO,EAAC,aAAa,EAAC,oCAAiC;AAEvD,mDAAmD;AACnD,OAAO,EAAC,YAAY,EAAC,mCAAgC;AACrD,OAAO,EAAC,YAAY,EAAC,6CAA0C;AAC/D,OAAO,EAAC,aAAa,EAAC,8CAA2C;AACjE,OAAO,EAAC,aAAa,EAAC,8CAA2C;AACjE,OAAO,EAAC,YAAY,EAAC,6CAA0C"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,UAAU;AACV,+BAA+B;AAC/B,oCAAoC;AAIpC,OAAO,EAAC,aAAa,EAAC,oCAAiC;AAEvD,mDAAmD;AACnD,OAAO,EAAC,YAAY,EAAC,mCAAgC;AACrD,OAAO,EAAC,YAAY,EAAC,6CAA0C;AAC/D,OAAO,EAAC,aAAa,EAAC,8CAA2C;AACjE,OAAO,EAAC,aAAa,EAAC,8CAA2C;AACjE,OAAO,EAAC,YAAY,EAAC,6CAA0C;AAC/D,OAAO,EAAC,WAAW,EAAC,4CAAyC;AAE7D,OAAO,EAAC,uBAAuB,EAAC,yCAAsC"}

package/dist/wgsl/get-shader-layout-wgsl.d.ts

@@ -0,0 +1,8 @@
+import { ShaderLayout } from '@luma.gl/core';
+/**
+ * Parse a ShaderLayout from WGSL shader source code.
+ * @param source WGSL source code (can contain both @vertex and @fragment entry points)
+ * @returns
+ */
+export declare function getShaderLayoutFromWGSL(source: string): ShaderLayout;
+//# sourceMappingURL=get-shader-layout-wgsl.d.ts.map

package/dist/wgsl/get-shader-layout-wgsl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-shader-layout-wgsl.d.ts","sourceRoot":"","sources":["../../src/wgsl/get-shader-layout-wgsl.ts"],"names":[],"mappings":"AAIA,OAAO,EAAsB,YAAY,EAA4B,MAAM,eAAe,CAAC;AAG3F;;;;GAIG;AACH,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,MAAM,GAAG,YAAY,CAuEpE"}

package/dist/wgsl/get-shader-layout-wgsl.js

@@ -0,0 +1,136 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import { log } from '@luma.gl/core';
+import { WgslReflect, ResourceType } from 'wgsl_reflect';
+/**
+ * Parse a ShaderLayout from WGSL shader source code.
+ * @param source WGSL source code (can contain both @vertex and @fragment entry points)
+ * @returns
+ */
+export function getShaderLayoutFromWGSL(source) {
+    const shaderLayout = { attributes: [], bindings: [] };
+    let parsedWGSL;
+    try {
+        parsedWGSL = parseWGSL(source);
+    }
+    catch (error) {
+        log.error(error.message)();
+        return shaderLayout;
+    }
+    for (const uniform of parsedWGSL.uniforms) {
+        const members = [];
+        // @ts-expect-error
+        for (const attribute of uniform.type?.members || []) {
+            members.push({
+                name: attribute.name,
+                type: getType(attribute.type)
+            });
+        }
+        shaderLayout.bindings.push({
+            type: 'uniform',
+            name: uniform.name,
+            group: uniform.group,
+            location: uniform.binding,
+            // @ts-expect-error TODO - unused for now but needs fixing
+            members
+        });
+    }
+    for (const texture of parsedWGSL.textures) {
+        const bindingDeclaration = {
+            type: 'texture',
+            name: texture.name,
+            group: texture.group,
+            location: texture.binding,
+            ...getTextureBindingFromReflect(texture)
+        };
+        shaderLayout.bindings.push(bindingDeclaration);
+    }
+    for (const sampler of parsedWGSL.samplers) {
+        shaderLayout.bindings.push({
+            type: 'sampler',
+            name: sampler.name,
+            group: sampler.group,
+            location: sampler.binding
+        });
+    }
+    const vertex = parsedWGSL.entry.vertex[0]; // "main"
+    // Vertex shader inputs
+    const attributeCount = vertex?.inputs.length || 0; // inputs to "main"
+    for (let i = 0; i < attributeCount; i++) {
+        const wgslAttribute = vertex.inputs[i];
+        // locationType can be "builtin"
+        if (wgslAttribute.locationType === 'location') {
+            const type = getType(wgslAttribute.type);
+            shaderLayout.attributes.push({
+                name: wgslAttribute.name,
+                location: Number(wgslAttribute.location),
+                type
+            });
+        }
+    }
+    return shaderLayout;
+}
+/** Get a valid shader attribute type string from a wgsl-reflect type */
+function getType(type) {
+    // @ts-expect-error WgslReflect type checks needed
+    return type?.format ? `${type.name}<${type.format.name}>` : type.name;
+}
+function parseWGSL(source) {
+    try {
+        return new WgslReflect(source);
+    }
+    catch (error) {
+        if (error instanceof Error) {
+            throw error;
+        }
+        let message = 'WGSL parse error';
+        if (typeof error === 'object' && error?.message) {
+            message += `: ${error.message} `;
+        }
+        if (typeof error === 'object' && error?.token) {
+            message += error.token.line || '';
+        }
+        throw new Error(message, { cause: error });
+    }
+}
+function getTextureBindingFromReflect(v, // VariableInfo for a texture
+opts // optional: if you know the runtime format
+) {
+    if (v.resourceType !== ResourceType.Texture) {
+        throw new Error('Not a texture binding');
+    }
+    const typeName = v.type.name; // e.g. "texture_2d", "texture_cube_array", "texture_multisampled_2d"
+    // @ts-expect-error v.type.format is not always defined
+    const component = v.type.format?.name;
+    // viewDimension
+    const viewDimension = typeName.includes('cube_array')
+        ? 'cube-array'
+        : typeName.includes('cube')
+            ? 'cube'
+            : typeName.includes('2d_array')
+                ? '2d-array'
+                : typeName.includes('3d')
+                    ? '3d'
+                    : typeName.includes('1d')
+                        ? '1d'
+                        : '2d';
+    // multisampled
+    const multisampled = typeName === 'texture_multisampled_2d';
+    // sampleType
+    let sampleType;
+    if (typeName.startsWith('texture_depth')) {
+        sampleType = 'depth';
+    }
+    else if (component === 'i32') {
+        sampleType = 'sint';
+    }
+    else if (component === 'u32') {
+        sampleType = 'uint';
+    }
+    else {
+        sampleType = 'float'; // default to float
+    }
+    return { viewDimension, sampleType, multisampled };
+}
+//# sourceMappingURL=get-shader-layout-wgsl.js.map

package/dist/wgsl/get-shader-layout-wgsl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-shader-layout-wgsl.js","sourceRoot":"","sources":["../../src/wgsl/get-shader-layout-wgsl.ts"],"names":[],"mappings":"AAAA,UAAU;AACV,+BAA+B;AAC/B,oCAAoC;AAEpC,OAAO,EAA0D,GAAG,EAAC,MAAM,eAAe,CAAC;AAC3F,OAAO,EAAyB,WAAW,EAAE,YAAY,EAAC,MAAM,cAAc,CAAC;AAE/E;;;;GAIG;AACH,MAAM,UAAU,uBAAuB,CAAC,MAAc;IACpD,MAAM,YAAY,GAAiB,EAAC,UAAU,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAC,CAAC;IAElE,IAAI,UAAuB,CAAC;IAC5B,IAAI,CAAC;QACH,UAAU,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC;IACjC,CAAC;IAAC,OAAO,KAAU,EAAE,CAAC;QACpB,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC;QAC3B,OAAO,YAAY,CAAC;IACtB,CAAC;IAED,KAAK,MAAM,OAAO,IAAI,UAAU,CAAC,QAAQ,EAAE,CAAC;QAC1C,MAAM,OAAO,GAAG,EAAE,CAAC;QACnB,mBAAmB;QACnB,KAAK,MAAM,SAAS,IAAI,OAAO,CAAC,IAAI,EAAE,OAAO,IAAI,EAAE,EAAE,CAAC;YACpD,OAAO,CAAC,IAAI,CAAC;gBACX,IAAI,EAAE,SAAS,CAAC,IAAI;gBACpB,IAAI,EAAE,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC;aAC9B,CAAC,CAAC;QACL,CAAC;QAED,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC;YACzB,IAAI,EAAE,SAAS;YACf,IAAI,EAAE,OAAO,CAAC,IAAI;YAClB,KAAK,EAAE,OAAO,CAAC,KAAK;YACpB,QAAQ,EAAE,OAAO,CAAC,OAAO;YACzB,0DAA0D;YAC1D,OAAO;SACR,CAAC,CAAC;IACL,CAAC;IAED,KAAK,MAAM,OAAO,IAAI,UAAU,CAAC,QAAQ,EAAE,CAAC;QAC1C,MAAM,kBAAkB,GAAyB;YAC/C,IAAI,EAAE,SAAS;YACf,IAAI,EAAE,OAAO,CAAC,IAAI;YAClB,KAAK,EAAE,OAAO,CAAC,KAAK;YACpB,QAAQ,EAAE,OAAO,CAAC,OAAO;YACzB,GAAG,4BAA4B,CAAC,OAAO,CAAC;SACzC,CAAC;QAEF,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;IACjD,CAAC;IAED,KAAK,MAAM,OAAO,IAAI,UAAU,CAAC,QAAQ,EAAE,CAAC;QAC1C,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC;YACzB,IAAI,EAAE,SAAS;YACf,IAAI,EAAE,OAAO,CAAC,IAAI;YAClB,KAAK,EAAE,OAAO,CAAC,KAAK;YACpB,QAAQ,EAAE,OAAO,CAAC,OAAO;SAC1B,CAAC,CAAC;IACL,CAAC;IAED,MAAM,MAAM,GAAG,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS;IAEpD,uBAAuB;IACvB,MAAM,cAAc,GAAG,MAAM,EAAE,MAAM,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,mBAAmB;IACtE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,cAAc,EAAE,CAAC,EAAE,EAAE,CAAC;QACxC,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QAEvC,gCAAgC;QAChC,IAAI,aAAa,CAAC,YAAY,KAAK,UAAU,EAAE,CAAC;YAC9C,MAAM,IAAI,GAAG,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;YAEzC,YAAY,CAAC,UAAU,CAAC,IAAI,CAAC;gBAC3B,IAAI,EAAE,aAAa,CAAC,IAAI;gBACxB,QAAQ,EAAE,MAAM,CAAC,aAAa,CAAC,QAAQ,CAAC;gBACxC,IAAI;aACL,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IACD,OAAO,YAAY,CAAC;AACtB,CAAC;AAED,wEAAwE;AACxE,SAAS,OAAO,CAAC,IAAqB;IACpC,kDAAkD;IAClD,OAAO,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;AACxE,CAAC;AAED,SAAS,SAAS,CAAC,MAAc;IAC/B,IAAI,CAAC;QACH,OAAO,IAAI,WAAW,CAAC,MAAM,CAAC,CAAC;IACjC,CAAC;IAAC,OAAO,KAAU,EAAE,CAAC;QACpB,IAAI,KAAK,YAAY,KAAK,EAAE,CAAC;YAC3B,MAAM,KAAK,CAAC;QACd,CAAC;QACD,IAAI,OAAO,GAAG,kBAAkB,CAAC;QACjC,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,EAAE,OAAO,EAAE,CAAC;YAChD,OAAO,IAAI,KAAK,KAAK,CAAC,OAAO,GAAG,CAAC;QACnC,CAAC;QACD,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,EAAE,KAAK,EAAE,CAAC;YAC9C,OAAO,IAAI,KAAK,CAAC,KAAK,CAAC,IAAI,IAAI,EAAE,CAAC;QACpC,CAAC;QACD,MAAM,IAAI,KAAK,CAAC,OAAO,EAAE,EAAC,KAAK,EAAE,KAAK,EAAC,CAAC,CAAC;IAC3C,CAAC;AACH,CAAC;AAED,SAAS,4BAA4B,CACnC,CAAe,EAAE,6BAA6B;AAC9C,IAAkC,CAAC,2CAA2C;;IAO9E,IAAI,CAAC,CAAC,YAAY,KAAK,YAAY,CAAC,OAAO,EAAE,CAAC;QAC5C,MAAM,IAAI,KAAK,CAAC,uBAAuB,CAAC,CAAC;IAC3C,CAAC;IAED,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,qEAAqE;IACnG,uDAAuD;IACvD,MAAM,SAAS,GAAG,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,IAAyC,CAAC;IAE3E,gBAAgB;IAChB,MAAM,aAAa,GAA4B,QAAQ,CAAC,QAAQ,CAAC,YAAY,CAAC;QAC5E,CAAC,CAAC,YAAY;QACd,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,MAAM,CAAC;YACzB,CAAC,CAAC,MAAM;YACR,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,UAAU,CAAC;gBAC7B,CAAC,CAAC,UAAU;gBACZ,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC;oBACvB,CAAC,CAAC,IAAI;oBACN,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC;wBACvB,CAAC,CAAC,IAAI;wBACN,CAAC,CAAC,IAAI,CAAC;IAEjB,eAAe;IACf,MAAM,YAAY,GAAG,QAAQ,KAAK,yBAAyB,CAAC;IAE5D,aAAa;IACb,IAAI,UAAgC,CAAC;IACrC,IAAI,QAAQ,CAAC,UAAU,CAAC,eAAe,CAAC,EAAE,CAAC;QACzC,UAAU,GAAG,OAAO,CAAC;IACvB,CAAC;SAAM,IAAI,SAAS,KAAK,KAAK,EAAE,CAAC;QAC/B,UAAU,GAAG,MAAM,CAAC;IACtB,CAAC;SAAM,IAAI,SAAS,KAAK,KAAK,EAAE,CAAC;QAC/B,UAAU,GAAG,MAAM,CAAC;IACtB,CAAC;SAAM,CAAC;QACN,UAAU,GAAG,OAAO,CAAC,CAAC,mBAAmB;IAC3C,CAAC;IAED,OAAO,EAAC,aAAa,EAAE,UAAU,EAAE,YAAY,EAAC,CAAC;AACnD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luma.gl/webgpu",
-  "version": "9.2.5",
+  "version": "9.3.0-alpha.2",
   "description": "WebGPU adapter for the luma.gl core API",
   "type": "module",
   "license": "MIT",
@@ -37,11 +37,12 @@
     "prepublishOnly": "npm run build-minified-bundle && npm run build-dev-bundle"
   },
   "peerDependencies": {
-    "@luma.gl/core": "~9.2.0"
+    "@luma.gl/core": "9.2.0-alpha.6"
   },
   "dependencies": {
     "@probe.gl/env": "^4.0.8",
-    "@webgpu/types": "^0.1.34"
+    "@webgpu/types": "^0.1.34",
+    "wgsl_reflect": "^1.2.1"
   },
-  "gitHead": "a8efd26edd0c61c7bb29ea700c6c38f544f60326"
+  "gitHead": "7fedf8d8902f58490a4ffca9a873daee3c732f24"
 }

package/src/adapter/resources/webgpu-fence.ts

@@ -0,0 +1,30 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {Fence, type FenceProps} from '@luma.gl/core';
+import {WebGPUDevice} from '../webgpu-device';
+
+/** WebGPU fence implemented by waiting for submitted work */
+export class WebGPUFence extends Fence {
+  readonly device: WebGPUDevice;
+  readonly handle: null = null;
+  readonly signaled: Promise<void>;
+  private _signaled = false;
+
+  constructor(device: WebGPUDevice, props: FenceProps = {}) {
+    super(device, {});
+    this.device = device;
+    this.signaled = device.handle.queue.onSubmittedWorkDone().then(() => {
+      this._signaled = true;
+    });
+  }
+
+  isSignaled(): boolean {
+    return this._signaled;
+  }
+
+  override destroy(): void {
+    // Nothing to release for WebGPU fence
+  }
+}

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

@@ -1,18 +1,24 @@
 // luma.gl, MIT license
-import type {
-  TextureProps,
-  TextureViewProps,
-  CopyExternalImageOptions,
-  CopyImageDataOptions,
-  SamplerProps
+import {
+  type TextureProps,
+  type TextureViewProps,
+  type CopyExternalImageOptions,
+  type CopyImageDataOptions,
+  type TextureReadOptions,
+  type TextureWriteOptions,
+  type SamplerProps,
+  Buffer,
+  Texture,
+  log,
+  textureFormatDecoder
 } from '@luma.gl/core';
-import {Texture, log} from '@luma.gl/core';
 
 import {getWebGPUTextureFormat} from '../helpers/convert-texture-format';
 import type {WebGPUDevice} from '../webgpu-device';
 import {WebGPUSampler} from './webgpu-sampler';
 import {WebGPUTextureView} from './webgpu-texture-view';
 
+/** WebGPU implementation of the luma.gl core Texture resource */
 export class WebGPUTexture extends Texture {
   readonly device: WebGPUDevice;
   readonly handle: GPUTexture;
@@ -20,13 +26,9 @@ export class WebGPUTexture extends Texture {
   view: WebGPUTextureView;
 
   constructor(device: WebGPUDevice, props: TextureProps) {
-    super(device, props);
+    super(device, props, {byteAlignment: 256}); // WebGPU requires row width to be a multiple of 256 bytes
     this.device = device;
 
-    if (this.dimension === 'cube') {
-      this.depth = 6;
-    }
-
     this.device.pushErrorScope('out-of-memory');
     this.device.pushErrorScope('validation');
 
@@ -58,7 +60,9 @@ export class WebGPUTexture extends Texture {
     // TODO - Read all properties directly from the supplied handle?
     if (this.props.handle) {
       this.handle.label ||= this.id;
+      // @ts-expect-error readonly
       this.width = this.handle.width;
+      // @ts-expect-error readonly
       this.height = this.handle.height;
     }
 
@@ -90,10 +94,43 @@ export class WebGPUTexture extends Texture {
     return new WebGPUTextureView(this.device, {...props, texture: this});
   }
 
+  copyExternalImage(options_: CopyExternalImageOptions): {width: number; height: number} {
+    const options = this._normalizeCopyExternalImageOptions(options_);
+
+    this.device.pushErrorScope('validation');
+    this.device.handle.queue.copyExternalImageToTexture(
+      // source: GPUImageCopyExternalImage
+      {
+        source: options.image,
+        origin: [options.sourceX, options.sourceY],
+        flipY: false // options.flipY
+      },
+      // destination: GPUImageCopyTextureTagged
+      {
+        texture: this.handle,
+        origin: [options.x, options.y, options.z],
+        mipLevel: options.mipLevel,
+        aspect: options.aspect,
+        colorSpace: options.colorSpace,
+        premultipliedAlpha: options.premultipliedAlpha
+      },
+      // copySize: GPUExtent3D
+      [options.width, options.height, options.depth] // depth is always 1 for 2D textures
+    );
+    this.device.popErrorScope((error: GPUError) => {
+      this.device.reportError(new Error(`copyExternalImage: ${error.message}`), this)();
+      this.device.debug();
+    });
+
+    // TODO - should these be clipped to the texture size minus x,y,z?
+    return {width: options.width, height: options.height};
+  }
+
   copyImageData(options_: CopyImageDataOptions): void {
     const {width, height, depth} = this;
     const options = this._normalizeCopyImageDataOptions(options_);
     this.device.pushErrorScope('validation');
+
     this.device.handle.queue.writeTexture(
       // destination: GPUImageCopyTexture
       {
@@ -121,108 +158,185 @@ export class WebGPUTexture extends Texture {
     });
   }
 
-  copyExternalImage(options_: CopyExternalImageOptions): {width: number; height: number} {
-    const options = this._normalizeCopyExternalImageOptions(options_);
+  override generateMipmapsWebGL(): void {
+    log.warn(`${this}: generateMipmaps not supported in WebGPU`)();
+  }
+
+  getImageDataLayout(options: TextureReadOptions): {
+    byteLength: number;
+    bytesPerRow: number;
+    rowsPerImage: number;
+  } {
+    return {
+      byteLength: 0,
+      bytesPerRow: 0,
+      rowsPerImage: 0
+    };
+  }
+
+  override readBuffer(options: TextureReadOptions = {}, buffer?: Buffer): Buffer {
+    const {
+      x = 0,
+      y = 0,
+      z = 0,
+      width = this.width,
+      height = this.height,
+      depthOrArrayLayers = this.depth,
+      mipLevel = 0,
+      aspect = 'all'
+    } = options;
+
+    const layout = this.computeMemoryLayout(options);
+
+    const {bytesPerRow, rowsPerImage, byteLength} = layout;
+
+    // Create a GPUBuffer to hold the copied pixel data.
+    const readBuffer =
+      buffer ||
+      this.device.createBuffer({
+        byteLength,
+        usage: Buffer.COPY_DST | Buffer.MAP_READ
+      });
+    const gpuReadBuffer = readBuffer.handle as GPUBuffer;
+
+    // Record commands to copy from the texture to the buffer.
+    const gpuDevice = this.device.handle;
 
     this.device.pushErrorScope('validation');
-    this.device.handle.queue.copyExternalImageToTexture(
-      // source: GPUImageCopyExternalImage
+    const commandEncoder = gpuDevice.createCommandEncoder();
+    commandEncoder.copyTextureToBuffer(
+      // source
       {
-        source: options.image,
-        origin: [options.sourceX, options.sourceY],
-        flipY: options.flipY
+        texture: this.handle,
+        origin: {x, y, z},
+        // origin: [options.x, options.y, 0], // options.depth],
+        mipLevel,
+        aspect
+        // colorSpace: options.colorSpace,
+        // premultipliedAlpha: options.premultipliedAlpha
       },
-      // destination: GPUImageCopyTextureTagged
+      // destination
       {
-        texture: this.handle,
-        origin: [options.x, options.y, 0], // options.depth],
-        mipLevel: options.mipLevel,
-        aspect: options.aspect,
-        colorSpace: options.colorSpace,
-        premultipliedAlpha: options.premultipliedAlpha
+        buffer: gpuReadBuffer,
+        offset: 0,
+        bytesPerRow,
+        rowsPerImage
       },
-      // copySize: GPUExtent3D
-      [options.width, options.height, 1]
+      // copy size
+      {
+        width,
+        height,
+        depthOrArrayLayers
+      }
     );
+
+    // Submit the command.
+    const commandBuffer = commandEncoder.finish();
+    this.device.handle.queue.submit([commandBuffer]);
     this.device.popErrorScope((error: GPUError) => {
-      this.device.reportError(new Error(`copyExternalImage: ${error.message}`), this)();
+      this.device.reportError(new Error(`${this} readBuffer: ${error.message}`), this)();
       this.device.debug();
     });
 
-    // TODO - should these be clipped to the texture size minus x,y,z?
-    return {width: options.width, height: options.height};
+    return readBuffer;
   }
 
-  override generateMipmapsWebGL(): void {
-    log.warn(`${this}: generateMipmaps not supported in WebGPU`)();
+  override async readDataAsync(options: TextureReadOptions = {}): Promise<ArrayBuffer> {
+    const buffer = this.readBuffer(options);
+    const data = await buffer.readAsync();
+    buffer.destroy();
+    return data.buffer as ArrayBuffer;
   }
 
-  // WebGPU specific
-
-  /*
-  async readPixels() {
-    const readbackBuffer = device.createBuffer({
-        usage: Buffer.COPY_DST | Buffer.MAP_READ,
-        size: 4 * textureWidth * textureHeight,
-    });
+  override writeBuffer(buffer: Buffer, options: TextureWriteOptions = {}) {
+    const {
+      x = 0,
+      y = 0,
+      z = 0,
+      width = this.width,
+      height = this.height,
+      depthOrArrayLayers = this.depth,
+      mipLevel = 0,
+      aspect = 'all'
+    } = options;
 
-    // Copy data from the texture to the buffer.
-    const encoder = device.createCommandEncoder();
-    encoder.copyTextureToBuffer(
-        { texture },
-        { buffer, rowPitch: textureWidth * 4 },
-        [textureWidth, textureHeight],
-    );
-    device.submit([encoder.finish()]);
+    const layout = this.computeMemoryLayout(options);
 
     // Get the data on the CPU.
-    await buffer.mapAndReadAsync(GPUMapMode.READ);
-    saveScreenshot(buffer.getMappedRange());
-    buffer.unmap();
-  }
+    // await buffer.mapAndReadAsync();
 
-  setImageData(imageData, usage): this {
-    let data = null;
-
-    const bytesPerRow = Math.ceil((img.width * 4) / 256) * 256;
-    if (bytesPerRow == img.width * 4) {
-      data = imageData.data;
-    } else {
-      data = new Uint8Array(bytesPerRow * img.height);
-      let imagePixelIndex = 0;
-      for (let y = 0; y < img.height; ++y) {
-        for (let x = 0; x < img.width; ++x) {
-          const i = x * 4 + y * bytesPerRow;
-          data[i] = imageData.data[imagePixelIndex];
-          data[i + 1] = imageData.data[imagePixelIndex + 1];
-          data[i + 2] = imageData.data[imagePixelIndex + 2];
-          data[i + 3] = imageData.data[imagePixelIndex + 3];
-          imagePixelIndex += 4;
-        }
-      }
-    }
-    return this;
-  }
+    const {bytesPerRow, rowsPerImage} = layout;
+
+    const gpuDevice = this.device.handle;
 
-  setBuffer(textureDataBuffer, {bytesPerRow}): this {
-    const commandEncoder = this.device.handle.createCommandEncoder();
+    this.device.pushErrorScope('validation');
+    const commandEncoder = gpuDevice.createCommandEncoder();
     commandEncoder.copyBufferToTexture(
       {
-        buffer: textureDataBuffer,
-        bytesPerRow
+        buffer: buffer.handle as GPUBuffer,
+        offset: 0,
+        bytesPerRow,
+        rowsPerImage
       },
       {
-        texture: this.handle
+        texture: this.handle,
+        origin: {x, y, z},
+        mipLevel,
+        aspect
       },
-      {
-        width,
-        height,
-        depth
-      }
+      {width, height, depthOrArrayLayers}
     );
+    const commandBuffer = commandEncoder.finish();
+    this.device.handle.queue.submit([commandBuffer]);
+    this.device.popErrorScope((error: GPUError) => {
+      this.device.reportError(new Error(`${this} writeBuffer: ${error.message}`), this)();
+      this.device.debug();
+    });
+  }
 
-    this.device.handle.defaultQueue.submit([commandEncoder.finish()]);
-    return this;
+  override writeData(data: ArrayBuffer | ArrayBufferView, options: TextureWriteOptions = {}): void {
+    const device = this.device;
+
+    const {
+      x = 0,
+      y = 0,
+      z = 0,
+      width = this.width,
+      height = this.height,
+      depthOrArrayLayers = this.depth,
+      mipLevel = 0,
+      aspect = 'all'
+    } = options;
+
+    const layout = textureFormatDecoder.computeMemoryLayout({
+      format: this.format,
+      width: this.width,
+      height: this.height,
+      depth: this.depth,
+      byteAlignment: this.byteAlignment
+    });
+
+    const {bytesPerRow, rowsPerImage} = layout;
+
+    this.device.pushErrorScope('validation');
+    device.handle.queue.writeTexture(
+      {
+        texture: this.handle,
+        mipLevel,
+        aspect,
+        origin: {x, y, z}
+      },
+      data,
+      {
+        offset: 0,
+        bytesPerRow,
+        rowsPerImage
+      },
+      {width, height, depthOrArrayLayers}
+    );
+    this.device.popErrorScope((error: GPUError) => {
+      this.device.reportError(new Error(`${this} writeData: ${error.message}`), this)();
+      this.device.debug();
+    });
   }
-  */
 }