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

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

@@ -3,7 +3,7 @@
 // Copyright (c) vis.gl contributors
 
 import type {ShaderProps, CompilerMessage} from '@luma.gl/core';
-import {Shader, log} from '@luma.gl/core';
+import {Shader} from '@luma.gl/core';
 import type {WebGPUDevice} from '../webgpu-device';
 
 /**
@@ -22,12 +22,15 @@ export class WebGPUShader extends Shader {
       throw new Error('GLSL shaders are not supported in WebGPU');
     }
 
-    this.device.handle.pushErrorScope('validation');
+    this.device.pushErrorScope('validation');
     this.handle = this.props.handle || this.device.handle.createShaderModule({code: props.source});
-    this.device.handle.popErrorScope().then((error: GPUError | null) => {
-      if (error) {
-        log.error(`${this} creation failed:\n"${error.message}"`, this, this.props.source)();
-      }
+    this.device.popErrorScope((error: GPUError) => {
+      this.device.reportError(
+        new Error(`${this} creation failed:\n"${error.message}"`),
+        this,
+        this.props.source
+      )();
+      this.device.debug();
     });
 
     this.handle.label = this.props.id;
@@ -45,10 +48,10 @@ export class WebGPUShader extends Shader {
     this.debugShader();
 
     if (this.compilationStatus === 'error') {
-      log.error(`Shader compilation error`, shaderLog)();
       // Note: Even though this error is asynchronous and thrown after the constructor completes,
       // it will result in a useful stack trace leading back to the constructor
-      // throw new Error(`Shader compilation error`);
+      this.device.reportError(new Error(`Shader compilation error`), this, shaderLog)();
+      this.device.debug();
     }
   }
 

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

@@ -38,17 +38,23 @@ export class WebGPUTextureView extends TextureView {
     this.device = device;
     this.texture = props.texture;
 
+    this.device.pushErrorScope('validation');
     this.handle =
-      this.handle ||
+      // props.handle ||
       this.texture.handle.createView({
-        format: (props.format || this.texture.format) as GPUTextureFormat,
-        dimension: props.dimension || this.texture.dimension,
-        aspect: props.aspect,
-        baseMipLevel: props.baseMipLevel,
-        mipLevelCount: props.mipLevelCount, // GPUIntegerCoordinate;
-        baseArrayLayer: props.baseArrayLayer, // GPUIntegerCoordinate;
-        arrayLayerCount: props.arrayLayerCount // GPUIntegerCoordinate;
+        format: (this.props.format || this.texture.format) as GPUTextureFormat,
+        dimension: this.props.dimension || this.texture.dimension,
+        aspect: this.props.aspect,
+        baseMipLevel: this.props.baseMipLevel,
+        mipLevelCount: this.props.mipLevelCount,
+        baseArrayLayer: this.props.baseArrayLayer,
+        arrayLayerCount: this.props.arrayLayerCount
       });
+    this.device.popErrorScope((error: GPUError) => {
+      this.device.reportError(new Error(`TextureView constructor: ${error.message}`), this)();
+      this.device.debug();
+    });
+
     this.handle.label = this.props.id;
   }
 

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

@@ -1,42 +1,21 @@
 // luma.gl, MIT license
 import type {
-  // Device,
   TextureProps,
   TextureViewProps,
-  Sampler,
-  SamplerProps,
-  // TextureFormat,
-  // TextureCubeFace,
-  // ExternalImage,
-  // TextureLevelData,
-  Texture1DData,
-  Texture2DData,
-  Texture3DData,
-  TextureCubeData,
-  TextureArrayData,
-  TextureCubeArrayData,
-  ExternalImage
+  CopyExternalImageOptions,
+  CopyImageDataOptions,
+  SamplerProps
 } from '@luma.gl/core';
-import {Texture} 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';
 
-const BASE_DIMENSIONS: Record<string, '1d' | '2d' | '3d'> = {
-  '1d': '1d',
-  '2d': '2d',
-  '2d-array': '2d',
-  cube: '2d',
-  'cube-array': '2d',
-  '3d': '3d'
-};
-
 export class WebGPUTexture extends Texture {
   readonly device: WebGPUDevice;
   readonly handle: GPUTexture;
-
   sampler: WebGPUSampler;
   view: WebGPUTextureView;
 
@@ -44,197 +23,138 @@ export class WebGPUTexture extends Texture {
     super(device, props);
     this.device = device;
 
-    // Texture base class strips out the data prop, so we need to add it back in
-    const propsWithData = {...this.props};
-    if (props.data) {
-      propsWithData.data = props.data;
+    if (this.dimension === 'cube') {
+      this.depth = 6;
     }
 
-    this.initialize(propsWithData);
-  }
-
-  override destroy(): void {
-    this.handle?.destroy();
-    // @ts-expect-error readonly
-    this.handle = null;
-  }
-
-  createView(props: TextureViewProps): WebGPUTextureView {
-    return new WebGPUTextureView(this.device, {...props, texture: this});
-  }
-
-  protected initialize(props: TextureProps): void {
-    // @ts-expect-error
-    this.handle = this.props.handle || this.createHandle();
-    this.handle.label ||= this.id;
+    this.device.pushErrorScope('out-of-memory');
+    this.device.pushErrorScope('validation');
+
+    this.handle =
+      this.props.handle ||
+      this.device.handle.createTexture({
+        label: this.id,
+        size: {
+          width: this.width,
+          height: this.height,
+          depthOrArrayLayers: this.depth
+        },
+        usage: this.props.usage || Texture.TEXTURE | Texture.COPY_DST,
+        dimension: this.baseDimension,
+        format: getWebGPUTextureFormat(this.format),
+        mipLevelCount: this.mipLevels,
+        sampleCount: this.props.samples
+      });
+    this.device.popErrorScope((error: GPUError) => {
+      this.device.reportError(new Error(`${this} constructor: ${error.message}`), this)();
+      this.device.debug();
+    });
+    this.device.popErrorScope((error: GPUError) => {
+      this.device.reportError(new Error(`${this} out of memory: ${error.message}`), this)();
+      this.device.debug();
+    });
 
-    if (this.props.data) {
-      if (Texture.isExternalImage(this.props.data)) {
-        this.copyExternalImage({image: this.props.data});
-      } else {
-        this.setData({data: this.props.data});
-      }
+    // Update props if external handle was supplied - used mainly by CanvasContext.getDefaultFramebuffer()
+    // TODO - Read all properties directly from the supplied handle?
+    if (this.props.handle) {
+      this.handle.label ||= this.id;
+      this.width = this.handle.width;
+      this.height = this.handle.height;
     }
 
-    this.width = this.handle.width;
-    this.height = this.handle.height;
-    // Why not just read all properties directly from the texture
-    // this.depthOrArrayLayers = this.handle.depthOrArrayLayers;
-    // this.mipLevelCount = this.handle.mipLevelCount;
-    // this.sampleCount = this.handle.sampleCount;
-    // this.dimension = this.handle.dimension;
-    // this.format = this.handle.format;
-    // this.usage = this.handle.usage;
-
-    // Create a default sampler. This mimics the WebGL1 API where sampler props are stored on the texture
-    // this.setSampler(props.sampler);
     this.sampler =
       props.sampler instanceof WebGPUSampler
         ? props.sampler
-        : new WebGPUSampler(this.device, props.sampler || {});
-
-    // TODO - To support texture arrays we need to create custom views...
-    // But we are not ready to expose TextureViews to the public API.
-    // @ts-expect-error
+        : new WebGPUSampler(this.device, (props.sampler as SamplerProps) || {});
 
-    this.view = new WebGPUTextureView(this.device, {...this.props, texture: this});
-    // format: this.props.format,
-    // dimension: this.props.dimension,
-    // aspect = "all";
-    // baseMipLevel: 0;
-    // mipLevelCount;
-    // baseArrayLayer = 0;
-    // arrayLayerCount;
-  }
-
-  protected createHandle(): GPUTexture {
-    // Deduce size from data - TODO this is a hack
-    // @ts-expect-error
-    const width = this.props.width || this.props.data?.width || 1;
-    // @ts-expect-error
-    const height = this.props.height || this.props.data?.height || 1;
-
-    return this.device.handle.createTexture({
-      label: this.id,
-      size: {
-        width,
-        height,
-        depthOrArrayLayers: this.depth
-      },
-      usage: this.props.usage || Texture.TEXTURE | Texture.COPY_DST,
-      dimension: BASE_DIMENSIONS[this.dimension],
-      format: getWebGPUTextureFormat(this.format),
+    this.view = new WebGPUTextureView(this.device, {
+      ...this.props,
+      texture: this,
       mipLevelCount: this.mipLevels,
-      sampleCount: this.props.samples
+      // Note: arrayLayerCount controls the view of array textures, but does not apply to 3d texture depths
+      arrayLayerCount: this.dimension !== '3d' ? this.depth : 1
     });
-  }
-
-  /** @deprecated - intention is to use the createView public API */
-  createGPUTextureView(): GPUTextureView {
-    return this.handle.createView({label: this.id});
-  }
-
-  /**
-   * Set default sampler
-   * Accept a sampler instance or set of props;
-   */
-  setSampler(sampler: Sampler | SamplerProps): this {
-    this.sampler =
-      sampler instanceof WebGPUSampler ? sampler : new WebGPUSampler(this.device, sampler);
-    return this;
-  }
-
-  setTexture1DData(data: Texture1DData): void {
-    throw new Error('not implemented');
-  }
-
-  setTexture2DData(lodData: Texture2DData, depth?: number, target?: number): void {
-    throw new Error('not implemented');
-  }
-
-  setTexture3DData(lodData: Texture3DData, depth?: number, target?: number): void {
-    throw new Error('not implemented');
-  }
 
-  setTextureCubeData(data: TextureCubeData, depth?: number): void {
-    throw new Error('not implemented');
+    // Set initial data
+    // Texture base class strips out the data prop from this.props, so we need to handle it here
+    this._initializeData(props.data);
   }
 
-  setTextureArrayData(data: TextureArrayData): void {
-    throw new Error('not implemented');
+  override destroy(): void {
+    this.handle?.destroy();
+    // @ts-expect-error readonly
+    this.handle = null;
   }
 
-  setTextureCubeArrayData(data: TextureCubeArrayData): void {
-    throw new Error('not implemented');
+  createView(props: TextureViewProps): WebGPUTextureView {
+    return new WebGPUTextureView(this.device, {...props, texture: this});
   }
 
-  setData(options: {data: any}): {width: number; height: number} {
-    if (ArrayBuffer.isView(options.data)) {
-      const clampedArray = new Uint8ClampedArray(options.data.buffer);
-      // TODO - pass through src data color space as ImageData Options?
-      const image = new ImageData(clampedArray, this.width, this.height);
-      return this.copyExternalImage({image});
-    }
-
-    throw new Error('Texture.setData: Use CommandEncoder to upload data to texture in WebGPU');
+  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
+      {
+        // texture subresource
+        texture: this.handle,
+        mipLevel: options.mipLevel,
+        aspect: options.aspect,
+        // origin to write to
+        origin: [options.x, options.y, options.z]
+      },
+      // data
+      options.data,
+      // dataLayout: GPUImageDataLayout
+      {
+        offset: options.byteOffset,
+        bytesPerRow: options.bytesPerRow,
+        rowsPerImage: options.rowsPerImage
+      },
+      // size: GPUExtent3D - extents of the content to write
+      [width, height, depth]
+    );
+    this.device.popErrorScope((error: GPUError) => {
+      this.device.reportError(new Error(`copyImageData: ${error.message}`), this)();
+      this.device.debug();
+    });
   }
 
-  copyExternalImage(options: {
-    image: ExternalImage;
-    width?: number;
-    height?: number;
-    depth?: number;
-    sourceX?: number;
-    sourceY?: number;
-    mipLevel?: number;
-    x?: number;
-    y?: number;
-    z?: number;
-    aspect?: 'all' | 'stencil-only' | 'depth-only';
-    colorSpace?: 'srgb';
-    premultipliedAlpha?: boolean;
-  }): {width: number; height: number} {
-    const size = Texture.getExternalImageSize(options.image);
-    const opts = {...Texture.defaultCopyExternalImageOptions, ...size, ...options};
-    const {
-      image,
-      sourceX,
-      sourceY,
-      width,
-      height,
-      depth,
-      mipLevel,
-      x,
-      y,
-      z,
-      aspect,
-      colorSpace,
-      premultipliedAlpha,
-      flipY
-    } = opts;
-
-    // TODO - max out width
+  copyExternalImage(options_: CopyExternalImageOptions): {width: number; height: number} {
+    const options = this._normalizeCopyExternalImageOptions(options_);
 
+    this.device.pushErrorScope('validation');
     this.device.handle.queue.copyExternalImageToTexture(
       // source: GPUImageCopyExternalImage
       {
-        source: image,
-        origin: [sourceX, sourceY],
-        flipY
+        source: options.image,
+        origin: [options.sourceX, options.sourceY],
+        flipY: options.flipY
       },
       // destination: GPUImageCopyTextureTagged
       {
         texture: this.handle,
-        origin: [x, y, z],
-        mipLevel,
-        aspect,
-        colorSpace,
-        premultipliedAlpha
+        origin: [options.x, options.y, 0], // options.depth],
+        mipLevel: options.mipLevel,
+        aspect: options.aspect,
+        colorSpace: options.colorSpace,
+        premultipliedAlpha: options.premultipliedAlpha
       },
       // copySize: GPUExtent3D
-      [width, height, depth]
+      [options.width, options.height, 1]
     );
-    return {width, height};
+    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};
+  }
+
+  override generateMipmapsWebGL(): void {
+    log.warn(`${this}: generateMipmaps not supported in WebGPU`)();
   }
 
   // WebGPU specific
@@ -256,7 +176,7 @@ export class WebGPUTexture extends Texture {
     device.submit([encoder.finish()]);
 
     // Get the data on the CPU.
-    await buffer.mapAsync(GPUMapMode.READ);
+    await buffer.mapAndReadAsync(GPUMapMode.READ);
     saveScreenshot(buffer.getMappedRange());
     buffer.unmap();
   }

package/src/adapter/resources/webgpu-vertex-array.ts

@@ -18,8 +18,8 @@ export class WebGPUVertexArray extends VertexArray {
   }
 
   readonly device: WebGPUDevice;
-  /** Vertex Array is a helper class under WebGPU */
-  readonly handle: never;
+  /** Vertex Array is just a helper class under WebGPU */
+  readonly handle = null;
 
   // Create a VertexArray
   constructor(device: WebGPUDevice, props: VertexArrayProps) {

package/src/adapter/webgpu-adapter.ts

@@ -2,85 +2,99 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {Adapter, DeviceProps, log} from '@luma.gl/core';
-import {WebGPUDevice} from './webgpu-device';
-
+// prettier-ignore
 // / <reference types="@webgpu/types" />
 
+import {Adapter, DeviceProps, log} from '@luma.gl/core';
+import type {WebGPUDevice} from './webgpu-device';
+
 export class WebGPUAdapter extends Adapter {
   /** type of device's created by this adapter */
   readonly type: WebGPUDevice['type'] = 'webgpu';
 
-  constructor() {
-    super();
-    // @ts-ignore For backwards compatibility luma.registerDevices
-    WebGPUDevice.adapter = this;
-  }
-
-  /** Check if WebGPU is available */
   isSupported(): boolean {
+    // Check if WebGPU is available
     return Boolean(typeof navigator !== 'undefined' && navigator.gpu);
   }
 
+  isDeviceHandle(handle: unknown): boolean {
+    if (typeof GPUDevice !== 'undefined' && handle instanceof GPUDevice) {
+      return true;
+    }
+
+    // TODO - WebGPU does not yet seem to have a stable in-browser API, so we "sniff" for members instead
+    if ((handle as any)?.queue) {
+      return true;
+    }
+
+    return false;
+  }
+
   async create(props: DeviceProps): Promise<WebGPUDevice> {
     if (!navigator.gpu) {
-      throw new Error(
-        'WebGPU not available. Open in Chrome Canary and turn on chrome://flags/#enable-unsafe-webgpu'
-      );
+      throw new Error('WebGPU not available. Recent Chrome browsers should work.');
     }
-    log.groupCollapsed(1, 'WebGPUDevice created')();
-    const adapter = await navigator.gpu.requestAdapter({
-      powerPreference: 'high-performance'
-      // forceSoftware: false
-    });
 
-    if (!adapter) {
-      throw new Error('Failed to request WebGPU adapter');
-    }
+    log.groupCollapsed(1, 'WebGPUDevice created')();
+    try {
+      const adapter = await navigator.gpu.requestAdapter({
+        powerPreference: 'high-performance'
+        // forceSoftware: false
+      });
+
+      if (!adapter) {
+        throw new Error('Failed to request WebGPU adapter');
+      }
 
-    const adapterInfo =
-      adapter.info ||
-      // @ts-ignore Chrome has removed this function
-      (await adapter.requestAdapterInfo?.());
-    log.probe(2, 'Adapter available', adapterInfo)();
-
-    const requiredFeatures: GPUFeatureName[] = [];
-    const requiredLimits: Record<string, number> = {};
-
-    if (props._requestMaxLimits) {
-      // Require all features
-      requiredFeatures.push(...(Array.from(adapter.features) as GPUFeatureName[]));
-
-      // Require all limits
-      // Filter out chrome specific keys (avoid crash)
-      const limits = Object.keys(adapter.limits).filter(
-        key => !['minSubgroupSize', 'maxSubgroupSize'].includes(key)
-      );
-      for (const key of limits) {
-        const limit = key as keyof GPUSupportedLimits;
-        const value = adapter.limits[limit];
-        if (typeof value === 'number') {
-          requiredLimits[limit] = value;
+      //  Note: adapter.requestAdapterInfo() has been replaced with adapter.info. Fall back in case adapter.info is not available
+      const adapterInfo =
+        adapter.info ||
+        // @ts-ignore
+        (await adapter.requestAdapterInfo?.());
+      log.probe(2, 'Adapter available', adapterInfo)();
+
+      const requiredFeatures: GPUFeatureName[] = [];
+      const requiredLimits: Record<string, number> = {};
+
+      if (props._requestMaxLimits) {
+        // Require all features
+        requiredFeatures.push(...(Array.from(adapter.features) as GPUFeatureName[]));
+
+        // Require all limits
+        // Filter out chrome specific keys (avoid crash)
+        const limits = Object.keys(adapter.limits).filter(
+          key => !['minSubgroupSize', 'maxSubgroupSize'].includes(key)
+        );
+        for (const key of limits) {
+          const limit = key as keyof GPUSupportedLimits;
+          const value = adapter.limits[limit];
+          if (typeof value === 'number') {
+            requiredLimits[limit] = value;
+          }
         }
       }
-    }
 
-    const gpuDevice = await adapter.requestDevice({
-      requiredFeatures,
-      requiredLimits
-    });
+      const gpuDevice = await adapter.requestDevice({
+        requiredFeatures,
+        requiredLimits
+      });
+
+      log.probe(1, 'GPUDevice available')();
 
-    log.probe(1, 'GPUDevice available')();
+      const {WebGPUDevice} = await import('./webgpu-device');
 
-    const device = new WebGPUDevice(props, gpuDevice, adapter, adapterInfo);
+      const device = new WebGPUDevice(props, gpuDevice, adapter, adapterInfo);
 
-    log.probe(
-      1,
-      'Device created. For more info, set chrome://flags/#enable-webgpu-developer-features'
-    )();
-    log.table(1, device.info)();
-    log.groupEnd(1)();
-    return device;
+      log.probe(
+        1,
+        'Device created. For more info, set chrome://flags/#enable-webgpu-developer-features'
+      )();
+      log.table(1, device.info)();
+
+      return device;
+    } finally {
+      log.groupEnd(1)();
+    }
   }
 
   async attach(handle: GPUDevice): Promise<WebGPUDevice> {