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

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

@@ -3,7 +3,6 @@ import {
   type TextureProps,
   type TextureViewProps,
   type CopyExternalImageOptions,
-  type CopyImageDataOptions,
   type TextureReadOptions,
   type TextureWriteOptions,
   type SamplerProps,
@@ -24,11 +23,22 @@ export class WebGPUTexture extends Texture {
   readonly handle: GPUTexture;
   sampler: WebGPUSampler;
   view: WebGPUTextureView;
+  private _allocatedByteLength: number = 0;
 
   constructor(device: WebGPUDevice, props: TextureProps) {
-    super(device, props, {byteAlignment: 256}); // WebGPU requires row width to be a multiple of 256 bytes
+    // WebGPU buffer copies use 256-byte row alignment. queue.writeTexture() can use tightly packed rows.
+    super(device, props, {byteAlignment: 256});
     this.device = device;
 
+    if (props.sampler instanceof WebGPUSampler) {
+      this.sampler = props.sampler;
+    } else if (props.sampler === undefined) {
+      this.sampler = this.device.getDefaultSampler();
+    } else {
+      this.sampler = new WebGPUSampler(this.device, (props.sampler as SamplerProps) || {});
+      this.attachResource(this.sampler);
+    }
+
     this.device.pushErrorScope('out-of-memory');
     this.device.pushErrorScope('validation');
 
@@ -56,8 +66,6 @@ export class WebGPUTexture extends Texture {
       this.device.debug();
     });
 
-    // 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;
       // @ts-expect-error readonly
@@ -66,11 +74,6 @@ export class WebGPUTexture extends Texture {
       this.height = this.handle.height;
     }
 
-    this.sampler =
-      props.sampler instanceof WebGPUSampler
-        ? props.sampler
-        : new WebGPUSampler(this.device, (props.sampler as SamplerProps) || {});
-
     this.view = new WebGPUTextureView(this.device, {
       ...this.props,
       texture: this,
@@ -78,14 +81,34 @@ export class WebGPUTexture extends Texture {
       // Note: arrayLayerCount controls the view of array textures, but does not apply to 3d texture depths
       arrayLayerCount: this.dimension !== '3d' ? this.depth : 1
     });
+    this.attachResource(this.view);
 
     // 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);
+
+    this._allocatedByteLength = this.getAllocatedByteLength();
+
+    if (!this.props.handle) {
+      this.trackAllocatedMemory(this._allocatedByteLength, 'Texture');
+    } else {
+      this.trackReferencedMemory(this._allocatedByteLength, 'Texture');
+    }
   }
 
   override destroy(): void {
-    this.handle?.destroy();
+    if (this.destroyed) {
+      return;
+    }
+
+    if (!this.props.handle && this.handle) {
+      this.trackDeallocatedMemory('Texture');
+      this.handle.destroy();
+    } else if (this.handle) {
+      this.trackDeallocatedReferencedMemory('Texture');
+    }
+
+    this.destroyResource();
     // @ts-expect-error readonly
     this.handle = null;
   }
@@ -126,38 +149,6 @@ export class WebGPUTexture extends Texture {
     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
-      {
-        // 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();
-    });
-  }
-
   override generateMipmapsWebGL(): void {
     log.warn(`${this}: generateMipmaps not supported in WebGPU`)();
   }
@@ -175,18 +166,10 @@ export class WebGPUTexture extends Texture {
   }
 
   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 {x, y, z, width, height, depthOrArrayLayers, mipLevel, aspect} =
+      this._getSupportedColorReadOptions(options);
 
-    const layout = this.computeMemoryLayout(options);
+    const layout = this.computeMemoryLayout({x, y, z, width, height, depthOrArrayLayers, mipLevel});
 
     const {bytesPerRow, rowsPerImage, byteLength} = layout;
 
@@ -197,6 +180,13 @@ export class WebGPUTexture extends Texture {
         byteLength,
         usage: Buffer.COPY_DST | Buffer.MAP_READ
       });
+
+    if (readBuffer.byteLength < byteLength) {
+      throw new Error(
+        `${this} readBuffer target is too small (${readBuffer.byteLength} < ${byteLength})`
+      );
+    }
+
     const gpuReadBuffer = readBuffer.handle as GPUBuffer;
 
     // Record commands to copy from the texture to the buffer.
@@ -248,25 +238,22 @@ export class WebGPUTexture extends Texture {
     return data.buffer as ArrayBuffer;
   }
 
-  override writeBuffer(buffer: Buffer, options: TextureWriteOptions = {}) {
+  override writeBuffer(buffer: Buffer, options_: TextureWriteOptions = {}) {
+    const options = this._normalizeTextureWriteOptions(options_);
     const {
-      x = 0,
-      y = 0,
-      z = 0,
-      width = this.width,
-      height = this.height,
-      depthOrArrayLayers = this.depth,
-      mipLevel = 0,
-      aspect = 'all'
+      x,
+      y,
+      z,
+      width,
+      height,
+      depthOrArrayLayers,
+      mipLevel,
+      aspect,
+      byteOffset,
+      bytesPerRow,
+      rowsPerImage
     } = options;
 
-    const layout = this.computeMemoryLayout(options);
-
-    // Get the data on the CPU.
-    // await buffer.mapAndReadAsync();
-
-    const {bytesPerRow, rowsPerImage} = layout;
-
     const gpuDevice = this.device.handle;
 
     this.device.pushErrorScope('validation');
@@ -274,7 +261,7 @@ export class WebGPUTexture extends Texture {
     commandEncoder.copyBufferToTexture(
       {
         buffer: buffer.handle as GPUBuffer,
-        offset: 0,
+        offset: byteOffset,
         bytesPerRow,
         rowsPerImage
       },
@@ -294,29 +281,34 @@ export class WebGPUTexture extends Texture {
     });
   }
 
-  override writeData(data: ArrayBuffer | ArrayBufferView, options: TextureWriteOptions = {}): void {
+  override writeData(
+    data: ArrayBuffer | SharedArrayBuffer | 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({
+    const options = this._normalizeTextureWriteOptions(options_);
+    const {x, y, z, width, height, depthOrArrayLayers, mipLevel, aspect, byteOffset} = options;
+    const source = data as GPUAllowSharedBufferSource;
+    const formatInfo = this.device.getTextureFormatInfo(this.format);
+    // queue.writeTexture() defaults to tightly packed rows, unlike WebGPU buffer copy paths.
+    const packedSourceLayout = textureFormatDecoder.computeMemoryLayout({
       format: this.format,
-      width: this.width,
-      height: this.height,
-      depth: this.depth,
-      byteAlignment: this.byteAlignment
+      width,
+      height,
+      depth: depthOrArrayLayers,
+      byteAlignment: 1
     });
-
-    const {bytesPerRow, rowsPerImage} = layout;
+    const bytesPerRow = options_.bytesPerRow ?? packedSourceLayout.bytesPerRow;
+    const rowsPerImage = options_.rowsPerImage ?? packedSourceLayout.rowsPerImage;
+    let copyWidth = width;
+    let copyHeight = height;
+
+    if (formatInfo.compressed) {
+      const blockWidth = formatInfo.blockWidth || 1;
+      const blockHeight = formatInfo.blockHeight || 1;
+      copyWidth = Math.ceil(width / blockWidth) * blockWidth;
+      copyHeight = Math.ceil(height / blockHeight) * blockHeight;
+    }
 
     this.device.pushErrorScope('validation');
     device.handle.queue.writeTexture(
@@ -326,17 +318,74 @@ export class WebGPUTexture extends Texture {
         aspect,
         origin: {x, y, z}
       },
-      data,
+      source,
       {
-        offset: 0,
+        offset: byteOffset,
         bytesPerRow,
         rowsPerImage
       },
-      {width, height, depthOrArrayLayers}
+      {width: copyWidth, height: copyHeight, depthOrArrayLayers}
     );
     this.device.popErrorScope((error: GPUError) => {
       this.device.reportError(new Error(`${this} writeData: ${error.message}`), this)();
       this.device.debug();
     });
   }
+
+  /**
+   * Internal-only hook for the cached CanvasContext/PresentationContext swapchain path.
+   * Rebinds this handle-backed texture wrapper to the current per-frame canvas texture
+   * without allocating a new luma.gl Texture or TextureView wrapper.
+   */
+  _reinitialize(handle: GPUTexture, props?: Partial<TextureProps>): void {
+    const nextWidth = props?.width ?? handle.width ?? this.width;
+    const nextHeight = props?.height ?? handle.height ?? this.height;
+    const nextDepth = props?.depth ?? this.depth;
+    const nextFormat = props?.format ?? this.format;
+    const allocationMayHaveChanged =
+      nextWidth !== this.width ||
+      nextHeight !== this.height ||
+      nextDepth !== this.depth ||
+      nextFormat !== this.format;
+    handle.label ||= this.id;
+
+    // @ts-expect-error readonly
+    this.handle = handle;
+    // @ts-expect-error readonly
+    this.width = nextWidth;
+    // @ts-expect-error readonly
+    this.height = nextHeight;
+
+    if (props?.depth !== undefined) {
+      // @ts-expect-error readonly
+      this.depth = nextDepth;
+    }
+    if (props?.format !== undefined) {
+      // @ts-expect-error readonly
+      this.format = nextFormat;
+    }
+
+    this.props.handle = handle;
+    if (props?.width !== undefined) {
+      this.props.width = props.width;
+    }
+    if (props?.height !== undefined) {
+      this.props.height = props.height;
+    }
+    if (props?.depth !== undefined) {
+      this.props.depth = props.depth;
+    }
+    if (props?.format !== undefined) {
+      this.props.format = props.format;
+    }
+
+    if (allocationMayHaveChanged) {
+      const nextAllocation = this.getAllocatedByteLength();
+      if (nextAllocation !== this._allocatedByteLength) {
+        this._allocatedByteLength = nextAllocation;
+        this.trackReferencedMemory(nextAllocation, 'Texture');
+      }
+    }
+    this.view._reinitialize(this);
+  }
 }

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

@@ -14,7 +14,7 @@ import {WebGPURenderPass} from './webgpu-render-pass';
 /** VertexArrayObject wrapper */
 export class WebGPUVertexArray extends VertexArray {
   override get [Symbol.toStringTag](): string {
-    return 'WebGPUVertexArray';
+    return 'VertexArray';
   }
 
   readonly device: WebGPUDevice;

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

@@ -10,6 +10,7 @@ import {CanvasContext, Texture, log} from '@luma.gl/core';
 import {WebGPUDevice} from './webgpu-device';
 import {WebGPUFramebuffer} from './resources/webgpu-framebuffer';
 import {WebGPUTexture} from './resources/webgpu-texture';
+import {getCpuHotspotProfiler, getTimestamp} from './helpers/cpu-hotspot-profiler';
 
 /**
  * Holds a WebGPU Canvas Context
@@ -20,7 +21,9 @@ export class WebGPUCanvasContext extends CanvasContext {
   readonly device: WebGPUDevice;
   readonly handle: GPUCanvasContext;
 
+  private colorAttachment: WebGPUTexture | null = null;
   private depthStencilAttachment: WebGPUTexture | null = null;
+  private framebuffer: WebGPUFramebuffer | null = null;
 
   get [Symbol.toStringTag](): string {
     return 'WebGPUCanvasContext';
@@ -39,10 +42,23 @@ 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._configureDevice();
+    this._startObservers();
   }
 
   /** Destroy any textures produced while configured and remove the context configuration. */
   override destroy(): void {
+    if (this.framebuffer) {
+      this.framebuffer.destroy();
+      this.framebuffer = null;
+    }
+    if (this.colorAttachment) {
+      this.colorAttachment.destroy();
+      this.colorAttachment = null;
+    }
+    if (this.depthStencilAttachment) {
+      this.depthStencilAttachment.destroy();
+      this.depthStencilAttachment = null;
+    }
     this.handle.unconfigure();
     super.destroy();
   }
@@ -65,6 +81,8 @@ export class WebGPUCanvasContext extends CanvasContext {
       colorSpace: this.props.colorSpace,
       alphaMode: this.props.alphaMode
     });
+
+    this._createDepthStencilAttachment(this.device.preferredDepthFormat);
   }
 
   /** Update framebuffer with properly resized "swap chain" texture views */
@@ -73,50 +91,97 @@ export class WebGPUCanvasContext extends CanvasContext {
       depthStencilFormat: 'depth24plus'
     }
   ): WebGPUFramebuffer {
-    // Wrap the current canvas context texture in a luma.gl texture
-    const currentColorAttachment = this._getCurrentTexture();
-    // TODO - temporary debug code
-    if (
-      currentColorAttachment.width !== this.drawingBufferWidth ||
-      currentColorAttachment.height !== this.drawingBufferHeight
-    ) {
-      const [oldWidth, oldHeight] = this.getDrawingBufferSize();
-      this.drawingBufferWidth = currentColorAttachment.width;
-      this.drawingBufferHeight = currentColorAttachment.height;
-      log.log(
-        1,
-        `${this}: Resized to compensate for initial canvas size mismatch ${oldWidth}x${oldHeight} => ${this.drawingBufferWidth}x${this.drawingBufferHeight}px`
-      )();
+    const profiler = getCpuHotspotProfiler(this.device);
+    const startTime = profiler ? getTimestamp() : 0;
+    if (profiler) {
+      profiler.framebufferAcquireCount = (profiler.framebufferAcquireCount || 0) + 1;
+      profiler.activeDefaultFramebufferAcquireDepth =
+        (profiler.activeDefaultFramebufferAcquireDepth || 0) + 1;
     }
 
-    // Resize the depth stencil attachment
-    if (options?.depthStencilFormat) {
-      this._createDepthStencilAttachment(options?.depthStencilFormat);
+    try {
+      // Wrap the current canvas context texture in a luma.gl texture
+      const currentColorAttachment = this._getCurrentTexture();
+      // TODO - temporary debug code
+      if (
+        currentColorAttachment.width !== this.drawingBufferWidth ||
+        currentColorAttachment.height !== this.drawingBufferHeight
+      ) {
+        const [oldWidth, oldHeight] = this.getDrawingBufferSize();
+        this.drawingBufferWidth = currentColorAttachment.width;
+        this.drawingBufferHeight = currentColorAttachment.height;
+        log.log(
+          1,
+          `${this}: Resized to compensate for initial canvas size mismatch ${oldWidth}x${oldHeight} => ${this.drawingBufferWidth}x${this.drawingBufferHeight}px`
+        )();
+      }
+
+      // Resize the depth stencil attachment
+      if (options?.depthStencilFormat) {
+        this._createDepthStencilAttachment(options?.depthStencilFormat);
+      }
+
+      this.framebuffer ||= new WebGPUFramebuffer(this.device, {
+        id: `${this.id}#framebuffer`,
+        colorAttachments: [currentColorAttachment],
+        depthStencilAttachment: null
+      });
+      this.framebuffer._reinitialize(
+        currentColorAttachment.view,
+        options?.depthStencilFormat ? this.depthStencilAttachment?.view || null : null
+      );
+      return this.framebuffer;
+    } finally {
+      if (profiler) {
+        profiler.activeDefaultFramebufferAcquireDepth =
+          (profiler.activeDefaultFramebufferAcquireDepth || 1) - 1;
+        profiler.framebufferAcquireTimeMs =
+          (profiler.framebufferAcquireTimeMs || 0) + (getTimestamp() - startTime);
+      }
     }
-
-    return new WebGPUFramebuffer(this.device, {
-      colorAttachments: [currentColorAttachment],
-      depthStencilAttachment: this.depthStencilAttachment
-    });
   }
 
   // PRIMARY METHODS
 
   /** Wrap the current canvas context texture in a luma.gl texture */
   _getCurrentTexture(): WebGPUTexture {
+    const profiler = getCpuHotspotProfiler(this.device);
+    const currentTextureStartTime = profiler ? getTimestamp() : 0;
     const handle = this.handle.getCurrentTexture();
-    return this.device.createTexture({
-      id: `${this.id}#color-texture`,
+    if (profiler) {
+      profiler.currentTextureAcquireCount = (profiler.currentTextureAcquireCount || 0) + 1;
+      profiler.currentTextureAcquireTimeMs =
+        (profiler.currentTextureAcquireTimeMs || 0) + (getTimestamp() - currentTextureStartTime);
+    }
+    if (!this.colorAttachment) {
+      this.colorAttachment = this.device.createTexture({
+        id: `${this.id}#color-texture`,
+        handle,
+        format: this.device.preferredColorFormat,
+        width: handle.width,
+        height: handle.height
+      });
+      return this.colorAttachment;
+    }
+
+    this.colorAttachment._reinitialize(handle, {
       handle,
       format: this.device.preferredColorFormat,
       width: handle.width,
       height: handle.height
     });
+    return this.colorAttachment;
   }
 
   /** We build render targets on demand (i.e. not when size changes but when about to render) */
   _createDepthStencilAttachment(depthStencilFormat: TextureFormatDepthStencil): WebGPUTexture {
-    if (!this.depthStencilAttachment) {
+    const needsNewDepthStencilAttachment =
+      !this.depthStencilAttachment ||
+      this.depthStencilAttachment.width !== this.drawingBufferWidth ||
+      this.depthStencilAttachment.height !== this.drawingBufferHeight ||
+      this.depthStencilAttachment.format !== depthStencilFormat;
+    if (needsNewDepthStencilAttachment) {
+      this.depthStencilAttachment?.destroy();
       this.depthStencilAttachment = this.device.createTexture({
         id: `${this.id}#depth-stencil-texture`,
         usage: Texture.RENDER_ATTACHMENT,
@@ -125,6 +190,6 @@ export class WebGPUCanvasContext extends CanvasContext {
         height: this.drawingBufferHeight
       });
     }
-    return this.depthStencilAttachment;
+    return this.depthStencilAttachment!;
   }
 }