26142483529

Committed 20 May 2026 05:03AM UTC coverage: 74.926% (+0.06%) from 74.867%

Build # 26142483529

Build Type

Pull #2630

github

Committed by

web-flow

Commit Message

Merge 964199b85 into 99deb55ba

Pull Request Pull Request #2630: feat(gpgpu): Consolidate arithmetic operations

Coverage Stats

7492 of 11282 branches covered (66.41%)

Branch coverage included in aggregate %.

287 of 354 new or added lines in 31 files covered. (81.07%)

29 existing lines in 6 files now uncovered.

16163 of 20289 relevant lines covered (79.66%)

1206.12 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

77.23

/modules/webgpu/src/adapter/webgpu-device.ts

// luma.gl
// SPDX-License-Identifier: MIT
// Copyright (c) vis.gl contributors

// biome-ignore format: preserve layout
// / <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,
  ComputePipelineProps,
  VertexArrayProps,
  TransformFeedback,
  TransformFeedbackProps,
  QuerySet,
  QuerySetProps,
  DeviceProps,
  CommandEncoderProps,
  CommandEncoder,
  PipelineLayoutProps,
  RenderPipeline,
  ShaderLayout
} from '@luma.gl/core';
import {Buffer, Device, DeviceFeatures} from '@luma.gl/core';
import {WebGPUBuffer} from './resources/webgpu-buffer';
import {WebGPUTexture} from './resources/webgpu-texture';
import {WebGPUExternalTexture} from './resources/webgpu-external-texture';
import {WebGPUSampler} from './resources/webgpu-sampler';
import {WebGPUShader} from './resources/webgpu-shader';
import {WebGPURenderPipeline} from './resources/webgpu-render-pipeline';
import {WebGPUFramebuffer} from './resources/webgpu-framebuffer';
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 {
  /** The underlying WebGPU device */
  readonly handle: GPUDevice;
  /* The underlying WebGPU adapter */
  readonly adapter: GPUAdapter;
  /* The underlying WebGPU adapter's info */
  readonly adapterInfo: GPUAdapterInfo;

  /** type of this device */
  readonly type = 'webgpu';

  readonly preferredColorFormat = navigator.gpu.getPreferredCanvasFormat() as
    | 'rgba8unorm'
    | 'bgra8unorm';
  readonly preferredDepthFormat = 'depth24plus';

  readonly features: DeviceFeatures;
  readonly info: DeviceInfo;
  readonly limits: DeviceLimits;

  readonly lost: Promise<{reason: 'destroyed'; message: string}>;

  override canvasContext: WebGPUCanvasContext | null = null;

  private _isLost: boolean = false;
  private _defaultSampler: WebGPUSampler | null = null;
  commandEncoder: WebGPUCommandEncoder;

  override get [Symbol.toStringTag](): string {
    return 'WebGPUDevice';
  }

  override toString(): string {
    return `WebGPUDevice(${this.id})`;
  }

  constructor(
    props: DeviceProps,
    device: GPUDevice,
    adapter: GPUAdapter,
    adapterInfo: GPUAdapterInfo
  ) {
    super({...props, id: props.id || 'webgpu-device'});
    this.handle = device;
    this.adapter = adapter;
    this.adapterInfo = adapterInfo;

    this.info = this._getInfo();
    this.features = this._getFeatures();
    this.limits = this.handle.limits;

    // Listen for uncaptured WebGPU errors
    device.addEventListener('uncapturederror', (event: Event) => {
      event.preventDefault();
      // TODO is this the right way to make sure the error is an Error instance?
      const errorMessage =
        event instanceof GPUUncapturedErrorEvent ? event.error.message : 'Unknown WebGPU error';
      this.reportError(new Error(errorMessage), this)();
      this.debug();
    });

    // "Context" loss handling
    this.lost = this.handle.lost.then(lostInfo => {
      this._isLost = true;
      return {reason: 'destroyed', message: lostInfo.message};
    });

    // Note: WebGPU devices can be created without a canvas, for compute shader purposes
    const canvasContextProps = Device._getCanvasContextProps(props);
    if (canvasContextProps) {
      this.canvasContext = new WebGPUCanvasContext(this, this.adapter, canvasContextProps);
    }

    this.commandEncoder = this.createCommandEncoder({});
  }

  // TODO
  // Load the glslang module now so that it is available synchronously when compiling shaders
  // const {glsl = true} = props;
  // this.glslang = glsl && await loadGlslangModule();

  destroy(): void {
    this.commandEncoder?.destroy();
    this._defaultSampler?.destroy();
    this._defaultSampler = null;
    this.handle.destroy();
  }

  get isLost(): boolean {
    return this._isLost;
  }

  getShaderLayout(source: string) {
    return getShaderLayoutFromWGSL(source);
  }

  override isVertexFormatSupported(format: VertexFormat): boolean {
    const info = this.getVertexFormatInfo(format);
    return !info.webglOnly;
  }

  createBuffer(props: BufferProps | ArrayBuffer | ArrayBufferView): WebGPUBuffer {
    const newProps = this._normalizeBufferProps(props);
    return new WebGPUBuffer(this, newProps);
  }

  createTexture(props: TextureProps): WebGPUTexture {
    return new WebGPUTexture(this, props);
  }

  createExternalTexture(props: ExternalTextureProps): WebGPUExternalTexture {
    return new WebGPUExternalTexture(this, props);
  }

  createShader(props: ShaderProps): WebGPUShader {
    return new WebGPUShader(this, props);
  }

  createSampler(props: SamplerProps): WebGPUSampler {
    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);
  }

  createFramebuffer(props: FramebufferProps): WebGPUFramebuffer {
    return new WebGPUFramebuffer(this, props);
  }

  createComputePipeline(props: ComputePipelineProps): WebGPUComputePipeline {
    return new WebGPUComputePipeline(this, props);
  }

  createVertexArray(props: VertexArrayProps): WebGPUVertexArray {
    return new WebGPUVertexArray(this, props);
  }

  override createCommandEncoder(props?: CommandEncoderProps): WebGPUCommandEncoder {
    return new WebGPUCommandEncoder(this, props);
  }

  override writeBufferViaCommandEncoder(
    commandEncoder: CommandEncoder,
    destinationBuffer: Buffer,
    data: ArrayBufferLike | ArrayBufferView | SharedArrayBuffer,
    byteOffset: number = 0
  ): void {
    const webgpuCommandEncoder = commandEncoder as WebGPUCommandEncoder;
    const uploadData = ArrayBuffer.isView(data)
      ? new Uint8Array(data.buffer, data.byteOffset, data.byteLength)
      : new Uint8Array(data);
    // WebGPU cannot encode CPU writes directly on a command encoder. Record the
    // upload as a staging-buffer copy so it stays ordered with the draw/dispatch
    // commands that will consume the destination buffer.
    const uploadBuffer = this.createBuffer({
      usage: Buffer.COPY_SRC,
      data: uploadData
    });

    webgpuCommandEncoder.trackTransientUploadBuffer(uploadBuffer);
    webgpuCommandEncoder.copyBufferToBuffer({
      sourceBuffer: uploadBuffer,
      destinationBuffer,
      destinationOffset: byteOffset,
      size: uploadData.byteLength
    });
  }

  // WebGPU specifics

  createTransformFeedback(props: TransformFeedbackProps): TransformFeedback {
    throw new Error('Transform feedback not supported in WebGPU');
  }

  override createQuerySet(props: QuerySetProps): QuerySet {
    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,
    label?: string
  ): GPUBindGroup | null {
    if (Object.keys(bindings).length === 0) {
      return this.handle.createBindGroup({
        label,
        layout: bindGroupLayout as GPUBindGroupLayout,
        entries: []
      });
    }

    return getBindGroup(
      this,
      bindGroupLayout as GPUBindGroupLayout,
      shaderLayout,
      bindings,
      group,
      label
    );
  }

  submit(commandBuffer?: WebGPUCommandBuffer): void {
    let submittedCommandEncoder: WebGPUCommandEncoder | null = null;
    if (!commandBuffer) {
      ({submittedCommandEncoder, commandBuffer} = this._finalizeDefaultCommandEncoderForSubmit());
    }

    const profiler = getWebGPUCpuHotspotProfiler(this);
    const startTime = profiler ? getTimestamp() : 0;
    const submitReason = getWebGPUCpuHotspotSubmitReason(this);
    const transientUploadBuffers = commandBuffer.transientUploadBuffers;
    let didSubmit = false;
    try {
      this.pushErrorScope('validation');
      const queueSubmitStartTime = profiler ? getTimestamp() : 0;
      this.handle.queue.submit([commandBuffer.handle]);
      didSubmit = true;
      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 (transientUploadBuffers.length) {
        if (didSubmit) {
          // The GPU may still be reading from the staging buffers after
          // queue.submit() returns, so defer destruction until the submitted
          // work has fully completed.
          this.handle.queue
            .onSubmittedWorkDone()
            .then(() => {
              for (const uploadBuffer of transientUploadBuffers) {
                uploadBuffer.destroy();
              }
            })
            .catch(() => {
              for (const uploadBuffer of transientUploadBuffers) {
                uploadBuffer.destroy();
              }
            });
        } else {
          for (const uploadBuffer of transientUploadBuffers) {
            uploadBuffer.destroy();
          }
        }
      }
      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 {
    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

  protected _getInfo(): DeviceInfo {
    const [driver, driverVersion] = ((this.adapterInfo as any).driver || '').split(' Version ');

    // See https://developer.chrome.com/blog/new-in-webgpu-120#adapter_information_updates
    const vendor = this.adapterInfo.vendor || this.adapter.__brand || 'unknown';
    const renderer = driver || '';
    const version = driverVersion || '';
    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 gpuArchitecture = this.adapterInfo.architecture || 'unknown';
    const gpu =
      identifyGPUVendor(vendor, renderer) ??
      (softwareRenderer || fallback ? 'software' : 'unknown');
    const gpuBackend = (this.adapterInfo as any).backend || 'unknown';
    const gpuType =
      ((this.adapterInfo as any).type || '').split(' ')[0].toLowerCase() ||
      (softwareRenderer || fallback ? 'cpu' : 'unknown');

    return {
      type: 'webgpu',
      vendor,
      renderer,
      version,
      gpu,
      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>);
    // Fixups for pre-standard names: https://github.com/webgpu-native/webgpu-headers/issues/133
    // @ts-expect-error Chrome Canary v99
    if (features.has('depth-clamping')) {
      // @ts-expect-error Chrome Canary v99
      features.delete('depth-clamping');
      features.add('depth-clip-control');
    }

    // Some subsets of WebGPU extensions correspond to WebGL extensions
    if (features.has('texture-compression-bc')) {
      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[] = [
      'compilation-status-async-webgl',
      'float32-renderable-webgl',
      'float16-renderable-webgl',
      'norm16-renderable-webgl',
      'texture-filterable-anisotropic-webgl',
      'shader-noperspective-interpolation-webgl'
    ];

    for (const feature of WEBGPU_ALWAYS_FEATURES) {
      features.add(feature);
    }

    return new DeviceFeatures(Array.from(features), this.props._disabledFeatures);
  }

  override _getDeviceSpecificTextureFormatCapabilities(
    capabilities: DeviceTextureFormatCapabilities
  ): DeviceTextureFormatCapabilities {
    const {format} = capabilities;
    if (format.includes('webgl')) {
      return {format, create: false, render: false, filter: false, blend: false, store: false};
    }
    return capabilities;
  }
}

function identifyGPUVendor(
  vendor: string,
  renderer: string
): 'nvidia' | 'intel' | 'apple' | 'amd' | null {
  if (/NVIDIA/i.exec(vendor) || /NVIDIA/i.exec(renderer)) {
    return 'nvidia';
  }
  if (/INTEL/i.exec(vendor) || /INTEL/i.exec(renderer)) {
    return 'intel';
  }
  if (/Apple/i.exec(vendor) || /Apple/i.exec(renderer)) {
    return 'apple';
  }
  if (
    /AMD/i.exec(vendor) ||
    /AMD/i.exec(renderer) ||
    /ATI/i.exec(vendor) ||
    /ATI/i.exec(renderer)
  ) {
    return 'amd';
  }
  return null;
}

function scheduleMicrotask(callback: () => void): void {
  if (globalThis.queueMicrotask) {
    globalThis.queueMicrotask(callback);
    return;
  }
  Promise.resolve()
    .then(callback)
    .catch(() => {});
}

1	// luma.gl
2	// SPDX-License-Identifier: MIT
3	// Copyright (c) vis.gl contributors
4
5	// biome-ignore format: preserve layout
6	// / <reference types="@webgpu/types" />
7
8	import type {
9	Bindings,
10	ComputePipeline,
11	ComputeShaderLayout,
12	DeviceInfo,
13	DeviceLimits,
14	DeviceFeature,
15	DeviceTextureFormatCapabilities,
16	VertexFormat,
17	CanvasContextProps,
18	PresentationContextProps,
19	PresentationContext,
20	BufferProps,
21	SamplerProps,
22	ShaderProps,
23	TextureProps,
24	Texture,
25	ExternalTextureProps,
26	FramebufferProps,
27	RenderPipelineProps,
28	ComputePipelineProps,
29	VertexArrayProps,
30	TransformFeedback,
31	TransformFeedbackProps,
32	QuerySet,
33	QuerySetProps,
34	DeviceProps,
35	CommandEncoderProps,
36	CommandEncoder,
37	PipelineLayoutProps,
38	RenderPipeline,
39	ShaderLayout
40	} from '@luma.gl/core';
41	import {Buffer, Device, DeviceFeatures} from '@luma.gl/core';
42	import {WebGPUBuffer} from './resources/webgpu-buffer';
43	import {WebGPUTexture} from './resources/webgpu-texture';
44	import {WebGPUExternalTexture} from './resources/webgpu-external-texture';
45	import {WebGPUSampler} from './resources/webgpu-sampler';
46	import {WebGPUShader} from './resources/webgpu-shader';
47	import {WebGPURenderPipeline} from './resources/webgpu-render-pipeline';
48	import {WebGPUFramebuffer} from './resources/webgpu-framebuffer';
49	import {WebGPUComputePipeline} from './resources/webgpu-compute-pipeline';
50	import {WebGPUVertexArray} from './resources/webgpu-vertex-array';
51
52	import {WebGPUCanvasContext} from './webgpu-canvas-context';
53	import {WebGPUPresentationContext} from './webgpu-presentation-context';
54	import {WebGPUCommandEncoder} from './resources/webgpu-command-encoder';
55	import {WebGPUCommandBuffer} from './resources/webgpu-command-buffer';
56	import {WebGPUQuerySet} from './resources/webgpu-query-set';
57	import {WebGPUPipelineLayout} from './resources/webgpu-pipeline-layout';
58	import {WebGPUFence} from './resources/webgpu-fence';
59
60	import {getShaderLayoutFromWGSL} from '../wgsl/get-shader-layout-wgsl';
61	import {generateMipmapsWebGPU} from './helpers/generate-mipmaps-webgpu';
62	import {getBindGroup} from './helpers/get-bind-group';
63	import {
64	getCpuHotspotProfiler as getWebGPUCpuHotspotProfiler,
65	getCpuHotspotSubmitReason as getWebGPUCpuHotspotSubmitReason,
66	getTimestamp
67	} from './helpers/cpu-hotspot-profiler';
68
69	/** WebGPU Device implementation */
70	export class WebGPUDevice extends Device {
71	/** The underlying WebGPU device */
72	readonly handle: GPUDevice;
73	/* The underlying WebGPU adapter */
74	readonly adapter: GPUAdapter;
75	/* The underlying WebGPU adapter's info */
76	readonly adapterInfo: GPUAdapterInfo;
77
78	/** type of this device */
79	readonly type = 'webgpu';	40✔
80
81	readonly preferredColorFormat = navigator.gpu.getPreferredCanvasFormat() as	40✔
82	\| 'rgba8unorm'
83	\| 'bgra8unorm';
84	readonly preferredDepthFormat = 'depth24plus';	40✔
85
86	readonly features: DeviceFeatures;
87	readonly info: DeviceInfo;
88	readonly limits: DeviceLimits;
89
90	readonly lost: Promise<{reason: 'destroyed'; message: string}>;
91
92	override canvasContext: WebGPUCanvasContext \| null = null;	40✔
93
94	private _isLost: boolean = false;	40✔
95	private _defaultSampler: WebGPUSampler \| null = null;	40✔
96	commandEncoder: WebGPUCommandEncoder;
97
98	override get [Symbol.toStringTag](): string {
99	return 'WebGPUDevice';	×
100	}
101
102	override toString(): string {
103	return `WebGPUDevice(${this.id})`;	×
104	}
105
106	constructor(
107	props: DeviceProps,
108	device: GPUDevice,
109	adapter: GPUAdapter,
110	adapterInfo: GPUAdapterInfo
111	) {
112	super({...props, id: props.id \|\| 'webgpu-device'});	40!
113	this.handle = device;	40✔
114	this.adapter = adapter;	40✔
115	this.adapterInfo = adapterInfo;	40✔
116
117	this.info = this._getInfo();	40✔
118	this.features = this._getFeatures();	40✔
119	this.limits = this.handle.limits;	40✔
120
121	// Listen for uncaptured WebGPU errors
122	device.addEventListener('uncapturederror', (event: Event) => {	40✔
123	event.preventDefault();	×
124	// TODO is this the right way to make sure the error is an Error instance?
125	const errorMessage =
126	event instanceof GPUUncapturedErrorEvent ? event.error.message : 'Unknown WebGPU error';	×
127	this.reportError(new Error(errorMessage), this)();	×
128	this.debug();	×
129	});
130
131	// "Context" loss handling
132	this.lost = this.handle.lost.then(lostInfo => {	40✔
133	this._isLost = true;	7✔
134	return {reason: 'destroyed', message: lostInfo.message};	7✔
135	});
136
137	// Note: WebGPU devices can be created without a canvas, for compute shader purposes
138	const canvasContextProps = Device._getCanvasContextProps(props);	40✔
139	if (canvasContextProps) {	40!
140	this.canvasContext = new WebGPUCanvasContext(this, this.adapter, canvasContextProps);	40✔
141	}
142
143	this.commandEncoder = this.createCommandEncoder({});	40✔
144	}
145
146	// TODO
147	// Load the glslang module now so that it is available synchronously when compiling shaders
148	// const {glsl = true} = props;
149	// this.glslang = glsl && await loadGlslangModule();
150
151	destroy(): void {
152	this.commandEncoder?.destroy();	×
153	this._defaultSampler?.destroy();	×
154	this._defaultSampler = null;	×
155	this.handle.destroy();	×
156	}
157
158	get isLost(): boolean {
159	return this._isLost;	175✔
160	}
161
162	getShaderLayout(source: string) {
163	return getShaderLayoutFromWGSL(source);	71✔
164	}
165
166	override isVertexFormatSupported(format: VertexFormat): boolean {
167	const info = this.getVertexFormatInfo(format);	×
168	return !info.webglOnly;	×
169	}
170
171	createBuffer(props: BufferProps \| ArrayBuffer \| ArrayBufferView): WebGPUBuffer {
172	const newProps = this._normalizeBufferProps(props);	322✔
173	return new WebGPUBuffer(this, newProps);	322✔
174	}
175
176	createTexture(props: TextureProps): WebGPUTexture {
177	return new WebGPUTexture(this, props);	142✔
178	}
179
180	createExternalTexture(props: ExternalTextureProps): WebGPUExternalTexture {
181	return new WebGPUExternalTexture(this, props);	×
182	}
183
184	createShader(props: ShaderProps): WebGPUShader {
185	return new WebGPUShader(this, props);	95✔
186	}
187
188	createSampler(props: SamplerProps): WebGPUSampler {
189	return new WebGPUSampler(this, props);	7✔
190	}
191
192	getDefaultSampler(): WebGPUSampler {
193	this._defaultSampler \|\|= new WebGPUSampler(this, {	112✔
194	id: `${this.id}-default-sampler`
195	});
196	return this._defaultSampler;	112✔
197	}
198
199	createRenderPipeline(props: RenderPipelineProps): WebGPURenderPipeline {
200	return new WebGPURenderPipeline(this, props);	24✔
201	}
202
203	createFramebuffer(props: FramebufferProps): WebGPUFramebuffer {
204	return new WebGPUFramebuffer(this, props);	37✔
205	}
206
207	createComputePipeline(props: ComputePipelineProps): WebGPUComputePipeline {
208	return new WebGPUComputePipeline(this, props);	43✔
209	}
210
211	createVertexArray(props: VertexArrayProps): WebGPUVertexArray {
212	return new WebGPUVertexArray(this, props);	20✔
213	}
214
215	override createCommandEncoder(props?: CommandEncoderProps): WebGPUCommandEncoder {
216	return new WebGPUCommandEncoder(this, props);	177✔
217	}
218
219	override writeBufferViaCommandEncoder(
220	commandEncoder: CommandEncoder,
221	destinationBuffer: Buffer,
222	data: ArrayBufferLike \| ArrayBufferView \| SharedArrayBuffer,
223	byteOffset: number = 0	1✔
224	): void {
225	const webgpuCommandEncoder = commandEncoder as WebGPUCommandEncoder;	1✔
226	const uploadData = ArrayBuffer.isView(data)	1!
227	? new Uint8Array(data.buffer, data.byteOffset, data.byteLength)
228	: new Uint8Array(data);
229	// WebGPU cannot encode CPU writes directly on a command encoder. Record the
230	// upload as a staging-buffer copy so it stays ordered with the draw/dispatch
231	// commands that will consume the destination buffer.
232	const uploadBuffer = this.createBuffer({	1✔
233	usage: Buffer.COPY_SRC,
234	data: uploadData
235	});
236
237	webgpuCommandEncoder.trackTransientUploadBuffer(uploadBuffer);	1✔
238	webgpuCommandEncoder.copyBufferToBuffer({	1✔
239	sourceBuffer: uploadBuffer,
240	destinationBuffer,
241	destinationOffset: byteOffset,
242	size: uploadData.byteLength
243	});
244	}
245
246	// WebGPU specifics
247
248	createTransformFeedback(props: TransformFeedbackProps): TransformFeedback {
249	throw new Error('Transform feedback not supported in WebGPU');	×
250	}
251
252	override createQuerySet(props: QuerySetProps): QuerySet {
253	return new WebGPUQuerySet(this, props);	6✔
254	}
255
256	override createFence(): WebGPUFence {
257	return new WebGPUFence(this);	1✔
258	}
259
260	createCanvasContext(props: CanvasContextProps): WebGPUCanvasContext {
261	return new WebGPUCanvasContext(this, this.adapter, props);	×
262	}
263
264	createPresentationContext(props?: PresentationContextProps): PresentationContext {
265	return new WebGPUPresentationContext(this, props);	2✔
266	}
267
268	createPipelineLayout(props: PipelineLayoutProps): WebGPUPipelineLayout {
269	return new WebGPUPipelineLayout(this, props);	24✔
270	}
271
272	override generateMipmapsWebGPU(texture: Texture): void {
273	generateMipmapsWebGPU(this, texture);	12✔
274	}
275
276	override _createBindGroupLayoutWebGPU(
277	pipeline: RenderPipeline \| ComputePipeline,
278	group: number
279	): GPUBindGroupLayout {
280	return (pipeline as WebGPURenderPipeline \| WebGPUComputePipeline).handle.getBindGroupLayout(	55✔
281	group
282	);
283	}
284
285	override _createBindGroupWebGPU(
286	bindGroupLayout: unknown,
287	shaderLayout: ShaderLayout \| ComputeShaderLayout,
288	bindings: Bindings,
289	group: number,
290	label?: string
291	): GPUBindGroup \| null {
292	if (Object.keys(bindings).length === 0) {	91✔
293	return this.handle.createBindGroup({	7✔
294	label,
295	layout: bindGroupLayout as GPUBindGroupLayout,
296	entries: []
297	});
298	}
299
300	return getBindGroup(	84✔
301	this,
302	bindGroupLayout as GPUBindGroupLayout,
303	shaderLayout,
304	bindings,
305	group,
306	label
307	);
308	}
309
310	submit(commandBuffer?: WebGPUCommandBuffer): void {
311	let submittedCommandEncoder: WebGPUCommandEncoder \| null = null;	132✔
312	if (!commandBuffer) {	132✔
313	({submittedCommandEncoder, commandBuffer} = this._finalizeDefaultCommandEncoderForSubmit());	127✔
314	}
315
316	const profiler = getWebGPUCpuHotspotProfiler(this);	132✔
317	const startTime = profiler ? getTimestamp() : 0;	132✔
318	const submitReason = getWebGPUCpuHotspotSubmitReason(this);	132✔
319	const transientUploadBuffers = commandBuffer.transientUploadBuffers;	132✔
320	let didSubmit = false;	132✔
321	try {	132✔
322	this.pushErrorScope('validation');	132✔
323	const queueSubmitStartTime = profiler ? getTimestamp() : 0;	132✔
324	this.handle.queue.submit([commandBuffer.handle]);	132✔
325	didSubmit = true;	132✔
326	if (profiler) {	132✔
327	profiler.queueSubmitCount = (profiler.queueSubmitCount \|\| 0) + 1;	42✔
328	profiler.queueSubmitTimeMs =	42✔
329	(profiler.queueSubmitTimeMs \|\| 0) + (getTimestamp() - queueSubmitStartTime);	51✔
330	}
331	this.popErrorScope((error: GPUError) => {	132✔
332	this.reportError(new Error(`${this} command submission: ${error.message}`), this)();	×
333	this.debug();	×
334	});
335
336	if (submittedCommandEncoder) {	132✔
337	const submitResolveKickoffStartTime = profiler ? getTimestamp() : 0;	127✔
338	scheduleMicrotask(() => {	127✔
339	submittedCommandEncoder	127✔
340	.resolveTimeProfilingQuerySet()
341	.then(() => {
342	this.commandEncoder._gpuTimeMs = submittedCommandEncoder._gpuTimeMs;	127✔
343	})
344	.catch(() => {});
345	});
346	if (profiler) {	127✔
347	profiler.submitResolveKickoffCount = (profiler.submitResolveKickoffCount \|\| 0) + 1;	42✔
348	profiler.submitResolveKickoffTimeMs =	42✔
349	(profiler.submitResolveKickoffTimeMs \|\| 0) +	66✔
350	(getTimestamp() - submitResolveKickoffStartTime);
351	}
352	}
353	} finally {
354	if (transientUploadBuffers.length) {	132!
355	if (didSubmit) {	×
356	// The GPU may still be reading from the staging buffers after
357	// queue.submit() returns, so defer destruction until the submitted
358	// work has fully completed.
359	this.handle.queue	×
360	.onSubmittedWorkDone()
361	.then(() => {
362	for (const uploadBuffer of transientUploadBuffers) {	×
363	uploadBuffer.destroy();	×
364	}
365	})
366	.catch(() => {
367	for (const uploadBuffer of transientUploadBuffers) {	×
368	uploadBuffer.destroy();	×
369	}
370	});
371	} else {
372	for (const uploadBuffer of transientUploadBuffers) {	×
373	uploadBuffer.destroy();	×
374	}
375	}
376	}
377	if (profiler) {	132✔
378	profiler.submitCount = (profiler.submitCount \|\| 0) + 1;	42✔
379	profiler.submitTimeMs = (profiler.submitTimeMs \|\| 0) + (getTimestamp() - startTime);	42✔
380	const reasonCountKey =
381	submitReason === 'query-readback' ? 'queryReadbackSubmitCount' : 'defaultSubmitCount';	42!
382	const reasonTimeKey =
383	submitReason === 'query-readback' ? 'queryReadbackSubmitTimeMs' : 'defaultSubmitTimeMs';	42!
384	profiler[reasonCountKey] = (profiler[reasonCountKey] \|\| 0) + 1;	42✔
385	profiler[reasonTimeKey] = (profiler[reasonTimeKey] \|\| 0) + (getTimestamp() - startTime);	42✔
386	}
387	const commandBufferDestroyStartTime = profiler ? getTimestamp() : 0;	132✔
388	commandBuffer.destroy();	132✔
389	if (profiler) {	132✔
390	profiler.commandBufferDestroyCount = (profiler.commandBufferDestroyCount \|\| 0) + 1;	42✔
391	profiler.commandBufferDestroyTimeMs =	42✔
392	(profiler.commandBufferDestroyTimeMs \|\| 0) +	51✔
393	(getTimestamp() - commandBufferDestroyStartTime);
394	}
395	}
396	}
397
398	private _finalizeDefaultCommandEncoderForSubmit(): {
399	submittedCommandEncoder: WebGPUCommandEncoder;
400	commandBuffer: WebGPUCommandBuffer;
401	} {
402	const submittedCommandEncoder = this.commandEncoder;	127✔
403	if (	127!
404	submittedCommandEncoder.getTimeProfilingSlotCount() > 0 &&	127!
405	submittedCommandEncoder.getTimeProfilingQuerySet() instanceof WebGPUQuerySet
406	) {
407	const querySet = submittedCommandEncoder.getTimeProfilingQuerySet() as WebGPUQuerySet;	×
408	querySet._encodeResolveToReadBuffer(submittedCommandEncoder, {	×
409	firstQuery: 0,
410	queryCount: submittedCommandEncoder.getTimeProfilingSlotCount()
411	});
412	}
413
414	const commandBuffer = submittedCommandEncoder.finish();	127✔
415	this.commandEncoder.destroy();	127✔
416	this.commandEncoder = this.createCommandEncoder({	127✔
417	id: submittedCommandEncoder.props.id,
418	timeProfilingQuerySet: submittedCommandEncoder.getTimeProfilingQuerySet()
419	});
420
421	return {submittedCommandEncoder, commandBuffer};	127✔
422	}
423
424	// WebGPU specific
425
426	pushErrorScope(scope: 'validation' \| 'out-of-memory'): void {
427	if (!this.props.debug) {	2,599!
428	return;	×
429	}
430	const profiler = getWebGPUCpuHotspotProfiler(this);	2,599✔
431	const startTime = profiler ? getTimestamp() : 0;	2,599✔
432	this.handle.pushErrorScope(scope);	2,599✔
433	if (profiler) {	2,599✔
434	profiler.errorScopePushCount = (profiler.errorScopePushCount \|\| 0) + 1;	149✔
435	profiler.errorScopeTimeMs = (profiler.errorScopeTimeMs \|\| 0) + (getTimestamp() - startTime);	149✔
436	}
437	}
438
439	popErrorScope(handler: (error: GPUError) => void): void {
440	if (!this.props.debug) {	2,599!
441	return;	×
442	}
443	const profiler = getWebGPUCpuHotspotProfiler(this);	2,599✔
444	const startTime = profiler ? getTimestamp() : 0;	2,599✔
445	this.handle	2,599✔
446	.popErrorScope()
447	.then((error: GPUError \| null) => {
448	if (error) {	2,209✔
449	handler(error);	11✔
450	}
451	})
452	.catch((error: unknown) => {
453	if (this.shouldIgnoreDroppedInstanceError(error, 'popErrorScope')) {	390!
454	return;	390✔
455	}
456
457	const errorMessage = error instanceof Error ? error.message : String(error);	×
458	this.reportError(new Error(`${this} popErrorScope failed: ${errorMessage}`), this)();	390✔
459	this.debug();	390✔
460	});
461	if (profiler) {	2,599✔
462	profiler.errorScopePopCount = (profiler.errorScopePopCount \|\| 0) + 1;	149✔
463	profiler.errorScopeTimeMs = (profiler.errorScopeTimeMs \|\| 0) + (getTimestamp() - startTime);	149✔
464	}
465	}
466
467	// PRIVATE METHODS
468
469	protected _getInfo(): DeviceInfo {
470	const [driver, driverVersion] = ((this.adapterInfo as any).driver \|\| '').split(' Version ');	40✔
471
472	// See https://developer.chrome.com/blog/new-in-webgpu-120#adapter_information_updates
473	const vendor = this.adapterInfo.vendor \|\| this.adapter.__brand \|\| 'unknown';	40!
474	const renderer = driver \|\| '';	40✔
475	const version = driverVersion \|\| '';	40✔
476	const fallback = Boolean(	40✔
477	(this.adapterInfo as any).isFallbackAdapter ??	40!
478	(this.adapter as any).isFallbackAdapter ??
479	false
480	);
481	const softwareRenderer = /SwiftShader/i.test(	40✔
482	`${vendor} ${renderer} ${this.adapterInfo.architecture \|\| ''}`	40!
483	);
484
485	const gpuArchitecture = this.adapterInfo.architecture \|\| 'unknown';	40!
486	const gpu =
487	identifyGPUVendor(vendor, renderer) ??	40✔
488	(softwareRenderer \|\| fallback ? 'software' : 'unknown');	80!
489	const gpuBackend = (this.adapterInfo as any).backend \|\| 'unknown';	40✔
490	const gpuType =	40✔
491	((this.adapterInfo as any).type \|\| '').split(' ')[0].toLowerCase() \|\|	80✔
492	(softwareRenderer \|\| fallback ? 'cpu' : 'unknown');	80!
493
494	return {	40✔
495	type: 'webgpu',
496	vendor,
497	renderer,
498	version,
499	gpu,
500	gpuType,
501	gpuBackend,
502	gpuArchitecture,
503	fallback,
504	shadingLanguage: 'wgsl',
505	shadingLanguageVersion: 100
506	};
507	}
508
509	shouldIgnoreDroppedInstanceError(error: unknown, operation?: string): boolean {
510	const errorMessage = error instanceof Error ? error.message : String(error);	394!
511	return (	394✔
512	errorMessage.includes('Instance dropped') &&	1,576!
513	(!operation \|\| errorMessage.includes(operation)) &&
514	(this._isLost \|\|
515	this.info.gpu === 'software' \|\|
516	this.info.gpuType === 'cpu' \|\|
517	Boolean(this.info.fallback))
518	);
519	}
520
521	protected _getFeatures(): DeviceFeatures {
522	// Initialize with actual WebGPU Features (note that unknown features may not be in DeviceFeature type)
523	const features = new Set<DeviceFeature>(this.handle.features as Set<DeviceFeature>);	40✔
524	// Fixups for pre-standard names: https://github.com/webgpu-native/webgpu-headers/issues/133
525	// @ts-expect-error Chrome Canary v99
526	if (features.has('depth-clamping')) {	40!
527	// @ts-expect-error Chrome Canary v99
528	features.delete('depth-clamping');	×
529	features.add('depth-clip-control');	×
530	}
531
532	// Some subsets of WebGPU extensions correspond to WebGL extensions
533	if (features.has('texture-compression-bc')) {	40!
534	features.add('texture-compression-bc5-webgl');	40✔
535	}
536
537	if (this.handle.features.has('chromium-experimental-norm16-texture-formats')) {	40!
538	features.add('norm16-renderable-webgl');	×
539	}
540
541	if (this.handle.features.has('chromium-experimental-snorm16-texture-formats')) {	40!
542	features.add('snorm16-renderable-webgl');	×
543	}
544
545	const WEBGPU_ALWAYS_FEATURES: DeviceFeature[] = [	40✔
546	'compilation-status-async-webgl',
547	'float32-renderable-webgl',
548	'float16-renderable-webgl',
549	'norm16-renderable-webgl',
550	'texture-filterable-anisotropic-webgl',
551	'shader-noperspective-interpolation-webgl'
552	];
553
554	for (const feature of WEBGPU_ALWAYS_FEATURES) {	40✔
555	features.add(feature);	240✔
556	}
557
558	return new DeviceFeatures(Array.from(features), this.props._disabledFeatures);	40✔
559	}
560
561	override _getDeviceSpecificTextureFormatCapabilities(
562	capabilities: DeviceTextureFormatCapabilities
563	): DeviceTextureFormatCapabilities {
564	const {format} = capabilities;	72✔
565	if (format.includes('webgl')) {	72✔
566	return {format, create: false, render: false, filter: false, blend: false, store: false};	11✔
567	}
568	return capabilities;	61✔
569	}
570	}
571
572	function identifyGPUVendor(
573	vendor: string,
574	renderer: string
575	): 'nvidia' \| 'intel' \| 'apple' \| 'amd' \| null {
576	if (/NVIDIA/i.exec(vendor) \|\| /NVIDIA/i.exec(renderer)) {	40!
NEW 577	return 'nvidia';	×
578	}
579	if (/INTEL/i.exec(vendor) \|\| /INTEL/i.exec(renderer)) {	40!
NEW 580	return 'intel';	×
581	}
582	if (/Apple/i.exec(vendor) \|\| /Apple/i.exec(renderer)) {	40!
NEW 583	return 'apple';	×
584	}
585	if (	40!
586	/AMD/i.exec(vendor) \|\|	160✔
587	/AMD/i.exec(renderer) \|\|
588	/ATI/i.exec(vendor) \|\|
589	/ATI/i.exec(renderer)
590	) {
NEW 591	return 'amd';	×
592	}
593	return null;	40✔
594	}
595
596	function scheduleMicrotask(callback: () => void): void {
597	if (globalThis.queueMicrotask) {	127!
598	globalThis.queueMicrotask(callback);	127✔
599	return;	127✔
600	}
601	Promise.resolve()	×
602	.then(callback)
603	.catch(() => {});
604	}

visgl / luma.gl / 26142483529

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous