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

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';
@@ -38,58 +41,38 @@ 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();
+    this._startObservers();
   }
 
   /** Destroy any textures produced while configured and remove the context configuration. */
   override destroy(): void {
-    this.handle.unconfigure();
-    super.destroy();
-  }
-
-  /** Update framebuffer with properly resized "swap chain" texture views */
-  getCurrentFramebuffer(
-    options: {depthStencilFormat?: TextureFormatDepthStencil | false} = {
-      depthStencilFormat: 'depth24plus'
+    if (this.framebuffer) {
+      this.framebuffer.destroy();
+      this.framebuffer = null;
     }
-  ): 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`
-      )();
+    if (this.colorAttachment) {
+      this.colorAttachment.destroy();
+      this.colorAttachment = null;
     }
-
-    // Resize the depth stencil attachment
-    if (options?.depthStencilFormat) {
-      this._createDepthStencilAttachment(options?.depthStencilFormat);
+    if (this.depthStencilAttachment) {
+      this.depthStencilAttachment.destroy();
+      this.depthStencilAttachment = null;
     }
-
-    return new WebGPUFramebuffer(this.device, {
-      colorAttachments: [currentColorAttachment],
-      depthStencilAttachment: this.depthStencilAttachment
-    });
+    this.handle.unconfigure();
+    super.destroy();
   }
 
   // IMPLEMENTATION OF ABSTRACT METHODS
 
-  _updateDevice(): void {
+  /** @see https://www.w3.org/TR/webgpu/#canvas-configuration */
+  _configureDevice(): 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,
@@ -98,23 +81,107 @@ 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 */
+  _getCurrentFramebuffer(
+    options: {depthStencilFormat?: TextureFormatDepthStencil | false} = {
+      depthStencilFormat: 'depth24plus'
+    }
+  ): WebGPUFramebuffer {
+    const profiler = getCpuHotspotProfiler(this.device);
+    const startTime = profiler ? getTimestamp() : 0;
+    if (profiler) {
+      profiler.framebufferAcquireCount = (profiler.framebufferAcquireCount || 0) + 1;
+      profiler.activeDefaultFramebufferAcquireDepth =
+        (profiler.activeDefaultFramebufferAcquireDepth || 0) + 1;
+    }
+
+    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);
+      }
+    }
+  }
+
+  // PRIMARY METHODS
+
   /** Wrap the current canvas context texture in a luma.gl texture */
-  getCurrentTexture(): WebGPUTexture {
+  _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,
@@ -123,6 +190,6 @@ export class WebGPUCanvasContext extends CanvasContext {
         height: this.drawingBufferHeight
       });
     }
-    return this.depthStencilAttachment;
+    return this.depthStencilAttachment!;
   }
 }

package/src/adapter/webgpu-device.ts

@@ -6,16 +6,22 @@
 // / <reference types="@webgpu/types" />
 
 import type {
+  Bindings,
+  ComputePipeline,
+  ComputeShaderLayout,
   DeviceInfo,
   DeviceLimits,
   DeviceFeature,
   DeviceTextureFormatCapabilities,
   VertexFormat,
   CanvasContextProps,
+  PresentationContextProps,
+  PresentationContext,
   BufferProps,
   SamplerProps,
   ShaderProps,
   TextureProps,
+  Texture,
   ExternalTextureProps,
   FramebufferProps,
   RenderPipelineProps,
@@ -28,6 +34,8 @@ import type {
   DeviceProps,
   CommandEncoderProps,
   PipelineLayoutProps,
+  RenderPipeline,
+  ShaderLayout
 } from '@luma.gl/core';
 import {Device, DeviceFeatures} from '@luma.gl/core';
 import {WebGPUBuffer} from './resources/webgpu-buffer';
@@ -41,10 +49,21 @@ import {WebGPUComputePipeline} from './resources/webgpu-compute-pipeline';
 import {WebGPUVertexArray} from './resources/webgpu-vertex-array';
 
 import {WebGPUCanvasContext} from './webgpu-canvas-context';
+import {WebGPUPresentationContext} from './webgpu-presentation-context';
 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';
+import {generateMipmapsWebGPU} from './helpers/generate-mipmaps-webgpu';
+import {getBindGroup} from './helpers/get-bind-group';
+import {
+  getCpuHotspotProfiler as getWebGPUCpuHotspotProfiler,
+  getCpuHotspotSubmitReason as getWebGPUCpuHotspotSubmitReason,
+  getTimestamp
+} from './helpers/cpu-hotspot-profiler';
 
 /** WebGPU Device implementation */
 export class WebGPUDevice extends Device {
@@ -72,6 +91,7 @@ export class WebGPUDevice extends Device {
   override canvasContext: WebGPUCanvasContext | null = null;
 
   private _isLost: boolean = false;
+  private _defaultSampler: WebGPUSampler | null = null;
   commandEncoder: WebGPUCommandEncoder;
 
   override get [Symbol.toStringTag](): string {
@@ -129,6 +149,9 @@ export class WebGPUDevice extends Device {
   // this.glslang = glsl && await loadGlslangModule();
 
   destroy(): void {
+    this.commandEncoder?.destroy();
+    this._defaultSampler?.destroy();
+    this._defaultSampler = null;
     this.handle.destroy();
   }
 
@@ -136,15 +159,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);
@@ -166,6 +189,13 @@ export class WebGPUDevice extends Device {
     return new WebGPUSampler(this, props);
   }
 
+  getDefaultSampler(): WebGPUSampler {
+    this._defaultSampler ||= new WebGPUSampler(this, {
+      id: `${this.id}-default-sampler`
+    });
+    return this._defaultSampler;
+  }
+
   createRenderPipeline(props: RenderPipelineProps): WebGPURenderPipeline {
     return new WebGPURenderPipeline(this, props);
   }
@@ -196,41 +226,180 @@ 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);
   }
 
+  createPresentationContext(props?: PresentationContextProps): PresentationContext {
+    return new WebGPUPresentationContext(this, props);
+  }
+
   createPipelineLayout(props: PipelineLayoutProps): WebGPUPipelineLayout {
     return new WebGPUPipelineLayout(this, props);
   }
 
+  override generateMipmapsWebGPU(texture: Texture): void {
+    generateMipmapsWebGPU(this, texture);
+  }
+
+  override _createBindGroupLayoutWebGPU(
+    pipeline: RenderPipeline | ComputePipeline,
+    group: number
+  ): GPUBindGroupLayout {
+    return (pipeline as WebGPURenderPipeline | WebGPUComputePipeline).handle.getBindGroupLayout(
+      group
+    );
+  }
+
+  override _createBindGroupWebGPU(
+    bindGroupLayout: unknown,
+    shaderLayout: ShaderLayout | ComputeShaderLayout,
+    bindings: Bindings,
+    group: number
+  ): GPUBindGroup | null {
+    if (Object.keys(bindings).length === 0) {
+      return this.handle.createBindGroup({
+        layout: bindGroupLayout as GPUBindGroupLayout,
+        entries: []
+      });
+    }
+
+    return getBindGroup(this, bindGroupLayout as GPUBindGroupLayout, shaderLayout, bindings, group);
+  }
+
   submit(commandBuffer?: WebGPUCommandBuffer): void {
+    let submittedCommandEncoder: WebGPUCommandEncoder | null = null;
     if (!commandBuffer) {
-      commandBuffer = this.commandEncoder.finish();
-      this.commandEncoder.destroy();
-      this.commandEncoder = this.createCommandEncoder({id: `${this.id}-default-encoder`});
+      ({submittedCommandEncoder, commandBuffer} = this._finalizeDefaultCommandEncoderForSubmit());
     }
 
-    this.pushErrorScope('validation');
-    this.handle.queue.submit([commandBuffer.handle]);
-    this.popErrorScope((error: GPUError) => {
-      this.reportError(new Error(`${this} command submission: ${error.message}`), this)();
-      this.debug();
+    const profiler = getWebGPUCpuHotspotProfiler(this);
+    const startTime = profiler ? getTimestamp() : 0;
+    const submitReason = getWebGPUCpuHotspotSubmitReason(this);
+    try {
+      this.pushErrorScope('validation');
+      const queueSubmitStartTime = profiler ? getTimestamp() : 0;
+      this.handle.queue.submit([commandBuffer.handle]);
+      if (profiler) {
+        profiler.queueSubmitCount = (profiler.queueSubmitCount || 0) + 1;
+        profiler.queueSubmitTimeMs =
+          (profiler.queueSubmitTimeMs || 0) + (getTimestamp() - queueSubmitStartTime);
+      }
+      this.popErrorScope((error: GPUError) => {
+        this.reportError(new Error(`${this} command submission: ${error.message}`), this)();
+        this.debug();
+      });
+
+      if (submittedCommandEncoder) {
+        const submitResolveKickoffStartTime = profiler ? getTimestamp() : 0;
+        scheduleMicrotask(() => {
+          submittedCommandEncoder
+            .resolveTimeProfilingQuerySet()
+            .then(() => {
+              this.commandEncoder._gpuTimeMs = submittedCommandEncoder._gpuTimeMs;
+            })
+            .catch(() => {});
+        });
+        if (profiler) {
+          profiler.submitResolveKickoffCount = (profiler.submitResolveKickoffCount || 0) + 1;
+          profiler.submitResolveKickoffTimeMs =
+            (profiler.submitResolveKickoffTimeMs || 0) +
+            (getTimestamp() - submitResolveKickoffStartTime);
+        }
+      }
+    } finally {
+      if (profiler) {
+        profiler.submitCount = (profiler.submitCount || 0) + 1;
+        profiler.submitTimeMs = (profiler.submitTimeMs || 0) + (getTimestamp() - startTime);
+        const reasonCountKey =
+          submitReason === 'query-readback' ? 'queryReadbackSubmitCount' : 'defaultSubmitCount';
+        const reasonTimeKey =
+          submitReason === 'query-readback' ? 'queryReadbackSubmitTimeMs' : 'defaultSubmitTimeMs';
+        profiler[reasonCountKey] = (profiler[reasonCountKey] || 0) + 1;
+        profiler[reasonTimeKey] = (profiler[reasonTimeKey] || 0) + (getTimestamp() - startTime);
+      }
+      const commandBufferDestroyStartTime = profiler ? getTimestamp() : 0;
+      commandBuffer.destroy();
+      if (profiler) {
+        profiler.commandBufferDestroyCount = (profiler.commandBufferDestroyCount || 0) + 1;
+        profiler.commandBufferDestroyTimeMs =
+          (profiler.commandBufferDestroyTimeMs || 0) +
+          (getTimestamp() - commandBufferDestroyStartTime);
+      }
+    }
+  }
+
+  private _finalizeDefaultCommandEncoderForSubmit(): {
+    submittedCommandEncoder: WebGPUCommandEncoder;
+    commandBuffer: WebGPUCommandBuffer;
+  } {
+    const submittedCommandEncoder = this.commandEncoder;
+    if (
+      submittedCommandEncoder.getTimeProfilingSlotCount() > 0 &&
+      submittedCommandEncoder.getTimeProfilingQuerySet() instanceof WebGPUQuerySet
+    ) {
+      const querySet = submittedCommandEncoder.getTimeProfilingQuerySet() as WebGPUQuerySet;
+      querySet._encodeResolveToReadBuffer(submittedCommandEncoder, {
+        firstQuery: 0,
+        queryCount: submittedCommandEncoder.getTimeProfilingSlotCount()
+      });
+    }
+
+    const commandBuffer = submittedCommandEncoder.finish();
+    this.commandEncoder.destroy();
+    this.commandEncoder = this.createCommandEncoder({
+      id: submittedCommandEncoder.props.id,
+      timeProfilingQuerySet: submittedCommandEncoder.getTimeProfilingQuerySet()
     });
+
+    return {submittedCommandEncoder, commandBuffer};
   }
 
   // WebGPU specific
 
   pushErrorScope(scope: 'validation' | 'out-of-memory'): void {
+    if (!this.props.debug) {
+      return;
+    }
+    const profiler = getWebGPUCpuHotspotProfiler(this);
+    const startTime = profiler ? getTimestamp() : 0;
     this.handle.pushErrorScope(scope);
+    if (profiler) {
+      profiler.errorScopePushCount = (profiler.errorScopePushCount || 0) + 1;
+      profiler.errorScopeTimeMs = (profiler.errorScopeTimeMs || 0) + (getTimestamp() - startTime);
+    }
   }
 
   popErrorScope(handler: (error: GPUError) => void): void {
-    this.handle.popErrorScope().then((error: GPUError | null) => {
-      if (error) {
-        handler(error);
-      }
-    });
+    if (!this.props.debug) {
+      return;
+    }
+    const profiler = getWebGPUCpuHotspotProfiler(this);
+    const startTime = profiler ? getTimestamp() : 0;
+    this.handle
+      .popErrorScope()
+      .then((error: GPUError | null) => {
+        if (error) {
+          handler(error);
+        }
+      })
+      .catch((error: unknown) => {
+        if (this.shouldIgnoreDroppedInstanceError(error, 'popErrorScope')) {
+          return;
+        }
+
+        const errorMessage = error instanceof Error ? error.message : String(error);
+        this.reportError(new Error(`${this} popErrorScope failed: ${errorMessage}`), this)();
+        this.debug();
+      });
+    if (profiler) {
+      profiler.errorScopePopCount = (profiler.errorScopePopCount || 0) + 1;
+      profiler.errorScopeTimeMs = (profiler.errorScopeTimeMs || 0) + (getTimestamp() - startTime);
+    }
   }
 
   // PRIVATE METHODS
@@ -242,11 +411,22 @@ export class WebGPUDevice extends Device {
     const vendor = this.adapterInfo.vendor || this.adapter.__brand || 'unknown';
     const renderer = driver || '';
     const version = driverVersion || '';
-
-    const gpu = vendor === 'apple' ? 'apple' : 'unknown'; // 'nvidia' | 'amd' | 'intel' | 'apple' | 'unknown',
+    const fallback = Boolean(
+      (this.adapterInfo as any).isFallbackAdapter ??
+        (this.adapter as any).isFallbackAdapter ??
+        false
+    );
+    const softwareRenderer = /SwiftShader/i.test(
+      `${vendor} ${renderer} ${this.adapterInfo.architecture || ''}`
+    );
+
+    const gpu =
+      vendor === 'apple' ? 'apple' : softwareRenderer || fallback ? 'software' : 'unknown'; // 'nvidia' | 'amd' | 'intel' | 'apple' | 'unknown',
     const gpuArchitecture = this.adapterInfo.architecture || 'unknown';
     const gpuBackend = (this.adapterInfo as any).backend || 'unknown';
-    const gpuType = ((this.adapterInfo as any).type || '').split(' ')[0].toLowerCase() || 'unknown';
+    const gpuType =
+      ((this.adapterInfo as any).type || '').split(' ')[0].toLowerCase() ||
+      (softwareRenderer || fallback ? 'cpu' : 'unknown');
 
     return {
       type: 'webgpu',
@@ -257,11 +437,24 @@ export class WebGPUDevice extends Device {
       gpuType,
       gpuBackend,
       gpuArchitecture,
+      fallback,
       shadingLanguage: 'wgsl',
       shadingLanguageVersion: 100
     };
   }
 
+  shouldIgnoreDroppedInstanceError(error: unknown, operation?: string): boolean {
+    const errorMessage = error instanceof Error ? error.message : String(error);
+    return (
+      errorMessage.includes('Instance dropped') &&
+      (!operation || errorMessage.includes(operation)) &&
+      (this._isLost ||
+        this.info.gpu === 'software' ||
+        this.info.gpuType === 'cpu' ||
+        Boolean(this.info.fallback))
+    );
+  }
+
   protected _getFeatures(): DeviceFeatures {
     // Initialize with actual WebGPU Features (note that unknown features may not be in DeviceFeature type)
     const features = new Set<DeviceFeature>(this.handle.features as Set<DeviceFeature>);
@@ -278,8 +471,15 @@ 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',
       'float32-renderable-webgl',
       'float16-renderable-webgl',
@@ -305,3 +505,13 @@ export class WebGPUDevice extends Device {
     return capabilities;
   }
 }
+
+function scheduleMicrotask(callback: () => void): void {
+  if (globalThis.queueMicrotask) {
+    globalThis.queueMicrotask(callback);
+    return;
+  }
+  Promise.resolve()
+    .then(callback)
+    .catch(() => {});
+}