@luma.gl/webgpu 9.2.6 → 9.3.0-alpha.4

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();
+    });
   }
-  */
 }

package/src/adapter/webgpu-adapter.ts

@@ -35,62 +35,60 @@ export class WebGPUAdapter extends Adapter {
       throw new Error('WebGPU not available. Recent Chrome browsers should work.');
     }
 
-    log.groupCollapsed(1, 'WebGPUDevice created')();
-    try {
-      const adapter = await navigator.gpu.requestAdapter({
-        powerPreference: 'high-performance'
-        // forceSoftware: false
-      });
+    const adapter = await navigator.gpu.requestAdapter({
+      powerPreference: 'high-performance'
+      // forceSoftware: false
+    });
 
-      if (!adapter) {
-        throw new Error('Failed to request WebGPU adapter');
-      }
+    if (!adapter) {
+      throw new Error('Failed to request WebGPU adapter');
+    }
 
-      //  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;
-          }
+    //  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 {WebGPUDevice} = await import('./webgpu-device');
 
+    log.groupCollapsed(1, 'WebGPUDevice created')();
+    try {
       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)();
-
       return device;
     } finally {
       log.groupEnd(1)();

package/src/adapter/webgpu-canvas-context.ts

@@ -38,7 +38,7 @@ export class WebGPUCanvasContext extends CanvasContext {
 
     // Base class constructor cannot access derived methods/fields, so we need to call these functions in the subclass constructor
     this._setAutoCreatedCanvasId(`${this.device.id}-canvas`);
-    this._updateDevice();
+    this._configureDevice();
   }
 
   /** Destroy any textures produced while configured and remove the context configuration. */
@@ -47,14 +47,34 @@ export class WebGPUCanvasContext extends CanvasContext {
     super.destroy();
   }
 
+  // IMPLEMENTATION OF ABSTRACT METHODS
+
+  /** @see https://www.w3.org/TR/webgpu/#canvas-configuration */
+  _configureDevice(): void {
+    if (this.depthStencilAttachment) {
+      this.depthStencilAttachment.destroy();
+      this.depthStencilAttachment = null;
+    }
+
+    // Reconfigure the canvas size.
+    this.handle.configure({
+      device: this.device.handle,
+      format: this.device.preferredColorFormat,
+      // Can be used to define e.g. -srgb views
+      // viewFormats: [...]
+      colorSpace: this.props.colorSpace,
+      alphaMode: this.props.alphaMode
+    });
+  }
+
   /** Update framebuffer with properly resized "swap chain" texture views */
-  getCurrentFramebuffer(
+  _getCurrentFramebuffer(
     options: {depthStencilFormat?: TextureFormatDepthStencil | false} = {
       depthStencilFormat: 'depth24plus'
     }
   ): WebGPUFramebuffer {
     // Wrap the current canvas context texture in a luma.gl texture
-    const currentColorAttachment = this.getCurrentTexture();
+    const currentColorAttachment = this._getCurrentTexture();
     // TODO - temporary debug code
     if (
       currentColorAttachment.width !== this.drawingBufferWidth ||
@@ -80,28 +100,10 @@ export class WebGPUCanvasContext extends CanvasContext {
     });
   }
 
-  // IMPLEMENTATION OF ABSTRACT METHODS
-
-  _updateDevice(): void {
-    if (this.depthStencilAttachment) {
-      this.depthStencilAttachment.destroy();
-      this.depthStencilAttachment = null;
-    }
-
-    // Reconfigure the canvas size.
-    // https://www.w3.org/TR/webgpu/#canvas-configuration
-    this.handle.configure({
-      device: this.device.handle,
-      format: this.device.preferredColorFormat,
-      // Can be used to define e.g. -srgb views
-      // viewFormats: [...]
-      colorSpace: this.props.colorSpace,
-      alphaMode: this.props.alphaMode
-    });
-  }
+  // PRIMARY METHODS
 
   /** Wrap the current canvas context texture in a luma.gl texture */
-  getCurrentTexture(): WebGPUTexture {
+  _getCurrentTexture(): WebGPUTexture {
     const handle = this.handle.getCurrentTexture();
     return this.device.createTexture({
       id: `${this.id}#color-texture`,

package/src/adapter/webgpu-device.ts

@@ -45,6 +45,9 @@ import {WebGPUCommandEncoder} from './resources/webgpu-command-encoder';
 import {WebGPUCommandBuffer} from './resources/webgpu-command-buffer';
 import {WebGPUQuerySet} from './resources/webgpu-query-set';
 import {WebGPUPipelineLayout} from './resources/webgpu-pipeline-layout';
+import {WebGPUFence} from './resources/webgpu-fence';
+
+import {getShaderLayoutFromWGSL} from '../wgsl/get-shader-layout-wgsl';
 
 /** WebGPU Device implementation */
 export class WebGPUDevice extends Device {
@@ -136,15 +139,15 @@ export class WebGPUDevice extends Device {
     return this._isLost;
   }
 
+  getShaderLayout(source: string) {
+    return getShaderLayoutFromWGSL(source);
+  }
+
   override isVertexFormatSupported(format: VertexFormat): boolean {
     const info = this.getVertexFormatInfo(format);
     return !info.webglOnly;
   }
 
-  getTextureByteAlignment(): number {
-    return 1;
-  }
-
   createBuffer(props: BufferProps | ArrayBuffer | ArrayBufferView): WebGPUBuffer {
     const newProps = this._normalizeBufferProps(props);
     return new WebGPUBuffer(this, newProps);
@@ -196,6 +199,10 @@ export class WebGPUDevice extends Device {
     return new WebGPUQuerySet(this, props);
   }
 
+  override createFence(): WebGPUFence {
+    return new WebGPUFence(this);
+  }
+
   createCanvasContext(props: CanvasContextProps): WebGPUCanvasContext {
     return new WebGPUCanvasContext(this, this.adapter, props);
   }
@@ -278,6 +285,14 @@ export class WebGPUDevice extends Device {
       features.add('texture-compression-bc5-webgl');
     }
 
+    if (this.handle.features.has('chromium-experimental-norm16-texture-formats')) {
+      features.add('norm16-renderable-webgl');
+    }
+
+    if (this.handle.features.has('chromium-experimental-snorm16-texture-formats')) {
+      features.add('snorm16-renderable-webgl');
+    }
+
     const WEBGPU_ALWAYS_FEATURES: DeviceFeature[] = [
       'timer-query-webgl',
       'compilation-status-async-webgl',

package/src/index.ts

@@ -12,3 +12,6 @@ export {WebGPUBuffer} from './adapter/resources/webgpu-buffer';
 export {WebGPUTexture} from './adapter/resources/webgpu-texture';
 export {WebGPUSampler} from './adapter/resources/webgpu-sampler';
 export {WebGPUShader} from './adapter/resources/webgpu-shader';
+export {WebGPUFence} from './adapter/resources/webgpu-fence';
+
+export {getShaderLayoutFromWGSL} from './wgsl/get-shader-layout-wgsl';