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

package/src/adapter/webgpu-device.ts

@@ -12,10 +12,13 @@ import type {
   DeviceTextureFormatCapabilities,
   VertexFormat,
   CanvasContextProps,
+  PresentationContextProps,
+  PresentationContext,
   BufferProps,
   SamplerProps,
   ShaderProps,
   TextureProps,
+  Texture,
   ExternalTextureProps,
   FramebufferProps,
   RenderPipelineProps,
@@ -41,6 +44,7 @@ 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';
@@ -48,6 +52,12 @@ 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 {
+  getCpuHotspotProfiler as getWebGPUCpuHotspotProfiler,
+  getCpuHotspotSubmitReason as getWebGPUCpuHotspotSubmitReason,
+  getTimestamp
+} from './helpers/cpu-hotspot-profiler';
 
 /** WebGPU Device implementation */
 export class WebGPUDevice extends Device {
@@ -75,6 +85,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 {
@@ -132,6 +143,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();
   }
 
@@ -169,6 +183,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);
   }
@@ -207,37 +228,126 @@ export class WebGPUDevice extends Device {
     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);
+  }
+
   submit(commandBuffer?: WebGPUCommandBuffer): void {
+    let submittedCommandEncoder: WebGPUCommandEncoder | null = null;
     if (!commandBuffer) {
-      commandBuffer = this.commandEncoder.finish();
+      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()
+        });
+      }
+      commandBuffer = submittedCommandEncoder.finish();
       this.commandEncoder.destroy();
-      this.commandEncoder = this.createCommandEncoder({id: `${this.id}-default-encoder`});
+      this.commandEncoder = this.createCommandEncoder({
+        id: submittedCommandEncoder.props.id,
+        timeProfilingQuerySet: submittedCommandEncoder.getTimeProfilingQuerySet()
+      });
     }
 
-    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);
+      }
+    }
   }
 
   // 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 {
+    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);
       }
     });
+    if (profiler) {
+      profiler.errorScopePopCount = (profiler.errorScopePopCount || 0) + 1;
+      profiler.errorScopeTimeMs = (profiler.errorScopeTimeMs || 0) + (getTimestamp() - startTime);
+    }
   }
 
   // PRIVATE METHODS
@@ -294,7 +404,6 @@ export class WebGPUDevice extends Device {
     }
 
     const WEBGPU_ALWAYS_FEATURES: DeviceFeature[] = [
-      'timer-query-webgl',
       'compilation-status-async-webgl',
       'float32-renderable-webgl',
       'float16-renderable-webgl',
@@ -320,3 +429,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(() => {});
+}

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

@@ -0,0 +1,180 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+// prettier-ignore
+// / <reference types="@webgpu/types" />
+
+import type {PresentationContextProps, TextureFormatDepthStencil} from '@luma.gl/core';
+import {PresentationContext, Texture, log} from '@luma.gl/core';
+import type {WebGPUDevice} from './webgpu-device';
+import {WebGPUFramebuffer} from './resources/webgpu-framebuffer';
+import {WebGPUTexture} from './resources/webgpu-texture';
+import {getCpuHotspotProfiler, getTimestamp} from './helpers/cpu-hotspot-profiler';
+
+/**
+ * A WebGPU PresentationContext renders directly into its destination canvas.
+ */
+export class WebGPUPresentationContext extends PresentationContext {
+  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 'WebGPUPresentationContext';
+  }
+
+  constructor(device: WebGPUDevice, props: PresentationContextProps = {}) {
+    super(props);
+    const contextLabel = `${this[Symbol.toStringTag]}(${this.id})`;
+
+    const context = this.canvas.getContext('webgpu');
+    if (!context) {
+      throw new Error(`${contextLabel}: Failed to create WebGPU presentation context`);
+    }
+    this.device = device;
+    this.handle = context;
+
+    this._setAutoCreatedCanvasId(`${this.device.id}-presentation-canvas`);
+    this._configureDevice();
+    this._startObservers();
+  }
+
+  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();
+  }
+
+  present(): void {
+    this.device.submit();
+  }
+
+  protected override _configureDevice(): void {
+    if (this.depthStencilAttachment) {
+      this.depthStencilAttachment.destroy();
+      this.depthStencilAttachment = null;
+    }
+
+    this.handle.configure({
+      device: this.device.handle,
+      format: this.device.preferredColorFormat,
+      colorSpace: this.props.colorSpace,
+      alphaMode: this.props.alphaMode
+    });
+
+    this._createDepthStencilAttachment(this.device.preferredDepthFormat);
+  }
+
+  protected override _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;
+    }
+
+    try {
+      const currentColorAttachment = this._getCurrentTexture();
+      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[Symbol.toStringTag]}(${this.id}): Resized to compensate for initial canvas size mismatch ${oldWidth}x${oldHeight} => ${this.drawingBufferWidth}x${this.drawingBufferHeight}px`
+        )();
+      }
+
+      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.framebufferAcquireTimeMs =
+          (profiler.framebufferAcquireTimeMs || 0) + (getTimestamp() - startTime);
+      }
+    }
+  }
+
+  private _getCurrentTexture(): WebGPUTexture {
+    const profiler = getCpuHotspotProfiler(this.device);
+    const currentTextureStartTime = profiler ? getTimestamp() : 0;
+    const handle = this.handle.getCurrentTexture();
+    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;
+  }
+
+  private _createDepthStencilAttachment(
+    depthStencilFormat: TextureFormatDepthStencil
+  ): WebGPUTexture {
+    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,
+        format: depthStencilFormat,
+        width: this.drawingBufferWidth,
+        height: this.drawingBufferHeight
+      });
+    }
+    return this.depthStencilAttachment!;
+  }
+}