@luma.gl/webgpu 9.0.0-beta.4 → 9.0.0-beta.6

package/src/adapter/helpers/generate-mipmaps.ts

@@ -1,4 +1,7 @@
-// luma.gl, MIT license
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 // Forked from Kangz/mipmapper.js under MIT license Copyright 2020 Brandon Jones
 // https://gist.github.com/Kangz/782d5f1ae502daf53910a13f55db2f83
 
@@ -30,7 +33,7 @@ export class WebGPUMipmapGenerator {
   constructor(device: GPUDevice, glslang) {
     this.device = device;
 
-    this.mipmapSampler = device.createSampler({ minFilter: 'linear' });
+    this.mipmapSampler = device.createSampler({minFilter: 'linear'});
 
     this.mipmapPipeline = device.createRenderPipeline({
       vertexStage: {
@@ -46,9 +49,11 @@ export class WebGPUMipmapGenerator {
         entryPoint: 'main'
       },
       primitiveTopology: 'triangle-strip',
-      colorStates: [{
-        format: 'rgba8unorm',
-      }]
+      colorStates: [
+        {
+          format: 'rgba8unorm'
+        }
+      ]
     });
   }
 
@@ -56,9 +61,10 @@ export class WebGPUMipmapGenerator {
     const textureSize = {
       width: imageBitmap.width,
       height: imageBitmap.height,
-      depth: 1,
-    }
-    const mipLevelCount = Math.floor(Math.log2(Math.max(imageBitmap.width, imageBitmap.height))) + 1;
+      depth: 1
+    };
+    const mipLevelCount =
+      Math.floor(Math.log2(Math.max(imageBitmap.width, imageBitmap.height))) + 1;
 
     // Populate the top level of the srcTexture with the imageBitmap.
     const texture = this.device.createTexture({
@@ -67,32 +73,37 @@ export class WebGPUMipmapGenerator {
       usage: GPUTextureUsage.COPY_DST | GPUTextureUsage.SAMPLED | GPUTextureUsage.OUTPUT_ATTACHMENT,
       mipLevelCount
     });
-    this.device.queue.copyImageBitmapToTexture({ imageBitmap }, { texture }, textureSize);
+    this.device.queue.copyImageBitmapToTexture({imageBitmap}, {texture}, textureSize);
 
     const commandEncoder = this.device.createCommandEncoder({});
     for (let i = 1; i < mipLevelCount; ++i) {
       const passEncoder = commandEncoder.beginRenderPass({
-        colorAttachments: [{
-          attachment: texture.createView({
-            baseMipLevel: i,
-            mipLevelCount: 1
-          }),
-          loadValue: { r: 1.0, g: 0.0, b: 0.0, a: 0.0 },
-        }],
+        colorAttachments: [
+          {
+            attachment: texture.createView({
+              baseMipLevel: i,
+              mipLevelCount: 1
+            }),
+            loadValue: {r: 1.0, g: 0.0, b: 0.0, a: 0.0}
+          }
+        ]
       });
 
       const bindGroup = this.device.createBindGroup({
         layout: this.mipmapPipeline.getBindGroupLayout(0),
-        bindings: [{
-          binding: 0,
-          resource: this.mipmapSampler,
-        }, {
-          binding: 1,
-          resource: texture.createView({
-            baseMipLevel: i - 1,
-            mipLevelCount: 1
-          }),
-        }],
+        bindings: [
+          {
+            binding: 0,
+            resource: this.mipmapSampler
+          },
+          {
+            binding: 1,
+            resource: texture.createView({
+              baseMipLevel: i - 1,
+              mipLevelCount: 1
+            })
+          }
+        ]
       });
 
       passEncoder.setPipeline(this.mipmapPipeline);

package/src/adapter/helpers/get-bind-group.ts

@@ -1,4 +1,7 @@
-// luma.gl, MIT license
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import type {ShaderLayout, BindingDeclaration, Binding} from '@luma.gl/core';
 import {Buffer, Sampler, Texture, log, cast} from '@luma.gl/core';
 import type {WebGPUBuffer} from '../resources/webgpu-buffer';
@@ -41,7 +44,10 @@ export function getShaderLayoutBinding(
   shaderLayout: ShaderLayout,
   bindingName: string
 ): BindingDeclaration {
-  const bindingLayout = shaderLayout.bindings.find(binding => binding.name === bindingName || `${binding.name}uniforms` === bindingName.toLocaleLowerCase());
+  const bindingLayout = shaderLayout.bindings.find(
+    binding =>
+      binding.name === bindingName || `${binding.name}uniforms` === bindingName.toLocaleLowerCase()
+  );
   if (!bindingLayout) {
     log.warn(`Binding ${bindingName} not set: Not found in shader layout.`)();
   }

package/src/adapter/helpers/get-vertex-buffer-layout.ts

@@ -1,4 +1,7 @@
-// luma.gl, MIT license
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import type {ShaderLayout, BufferLayout, AttributeDeclaration, VertexFormat} from '@luma.gl/core';
 import {log, decodeVertexFormat} from '@luma.gl/core';
 // import {getAttributeInfosFromLayouts} from '@luma.gl/core';
@@ -40,7 +43,9 @@ export function getVertexBufferLayout(
         const attributeName = attributeMapping.attribute;
         const attributeLayout = findAttributeLayout(shaderLayout, attributeName, usedAttributes);
 
-        stepMode = attributeLayout.stepMode || (attributeLayout.name.startsWith('instance') ? 'instance' : 'vertex');
+        stepMode =
+          attributeLayout.stepMode ||
+          (attributeLayout.name.startsWith('instance') ? 'instance' : 'vertex');
         vertexAttributes.push({
           format: getWebGPUVertexFormat(attributeMapping.format || mapping.format),
           offset: attributeMapping.byteOffset,
@@ -57,7 +62,9 @@ export function getVertexBufferLayout(
       }
       byteStride = decodeVertexFormat(mapping.format).byteLength;
 
-      stepMode = attributeLayout.stepMode || (attributeLayout.name.startsWith('instance') ? 'instance' : 'vertex');
+      stepMode =
+        attributeLayout.stepMode ||
+        (attributeLayout.name.startsWith('instance') ? 'instance' : 'vertex');
       vertexAttributes.push({
         format: getWebGPUVertexFormat(mapping.format),
         // We only support 0 offset for non-interleaved buffer layouts
@@ -79,7 +86,8 @@ export function getVertexBufferLayout(
     if (!usedAttributes.has(attribute.name)) {
       vertexBufferLayouts.push({
         arrayStride: decodeVertexFormat('float32x3').byteLength,
-        stepMode: attribute.stepMode || (attribute.name.startsWith('instance') ? 'instance' : 'vertex'),
+        stepMode:
+          attribute.stepMode || (attribute.name.startsWith('instance') ? 'instance' : 'vertex'),
         attributes: [
           {
             format: getWebGPUVertexFormat('float32x3'),

package/src/adapter/helpers/webgpu-parameters.ts

@@ -1,3 +1,7 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import {Parameters} from '@luma.gl/core';
 
 function addDepthStencil(descriptor: GPURenderPipelineDescriptor): GPUDepthStencilState {
@@ -33,17 +37,29 @@ export const PARAMETER_TABLE: Record<keyof Parameters, Function> = {
 
   // DEPTH
 
-  depthWriteEnabled: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
+  depthWriteEnabled: (
+    parameter: keyof Parameters,
+    value: any,
+    descriptor: GPURenderPipelineDescriptor
+  ) => {
     const depthStencil = addDepthStencil(descriptor);
     depthStencil.depthWriteEnabled = value;
   },
 
-  depthCompare: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
+  depthCompare: (
+    parameter: keyof Parameters,
+    value: any,
+    descriptor: GPURenderPipelineDescriptor
+  ) => {
     const depthStencil = addDepthStencil(descriptor);
     depthStencil.depthCompare = value;
   },
 
-  depthFormat: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
+  depthFormat: (
+    parameter: keyof Parameters,
+    value: any,
+    descriptor: GPURenderPipelineDescriptor
+  ) => {
     const depthStencil = addDepthStencil(descriptor);
     depthStencil.format = value;
   },
@@ -53,47 +69,79 @@ export const PARAMETER_TABLE: Record<keyof Parameters, Function> = {
     depthStencil.depthBias = value;
   },
 
-  depthBiasSlopeScale: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
+  depthBiasSlopeScale: (
+    parameter: keyof Parameters,
+    value: any,
+    descriptor: GPURenderPipelineDescriptor
+  ) => {
     const depthStencil = addDepthStencil(descriptor);
     depthStencil.depthBiasSlopeScale = value;
   },
 
-  depthBiasClamp: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
+  depthBiasClamp: (
+    parameter: keyof Parameters,
+    value: any,
+    descriptor: GPURenderPipelineDescriptor
+  ) => {
     const depthStencil = addDepthStencil(descriptor);
     depthStencil.depthBiasClamp = value;
   },
 
   // STENCIL
 
-  stencilReadMask: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
+  stencilReadMask: (
+    parameter: keyof Parameters,
+    value: any,
+    descriptor: GPURenderPipelineDescriptor
+  ) => {
     const depthStencil = addDepthStencil(descriptor);
     depthStencil.stencilReadMask = value;
   },
 
-  stencilWriteMask: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
+  stencilWriteMask: (
+    parameter: keyof Parameters,
+    value: any,
+    descriptor: GPURenderPipelineDescriptor
+  ) => {
     const depthStencil = addDepthStencil(descriptor);
     depthStencil.stencilWriteMask = value;
   },
 
-  stencilCompare: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
+  stencilCompare: (
+    parameter: keyof Parameters,
+    value: any,
+    descriptor: GPURenderPipelineDescriptor
+  ) => {
     const depthStencil = addDepthStencil(descriptor);
     depthStencil.stencilFront.compare = value;
     depthStencil.stencilBack.compare = value;
   },
 
-  stencilPassOperation: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
+  stencilPassOperation: (
+    parameter: keyof Parameters,
+    value: any,
+    descriptor: GPURenderPipelineDescriptor
+  ) => {
     const depthStencil = addDepthStencil(descriptor);
     depthStencil.stencilFront.passOp = value;
     depthStencil.stencilBack.passOp = value;
   },
 
-  stencilFailOperation: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
+  stencilFailOperation: (
+    parameter: keyof Parameters,
+    value: any,
+    descriptor: GPURenderPipelineDescriptor
+  ) => {
     const depthStencil = addDepthStencil(descriptor);
     depthStencil.stencilFront.failOp = value;
     depthStencil.stencilBack.failOp = value;
   },
 
-  stencilDepthFailOperation: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
+  stencilDepthFailOperation: (
+    parameter: keyof Parameters,
+    value: any,
+    descriptor: GPURenderPipelineDescriptor
+  ) => {
     const depthStencil = addDepthStencil(descriptor);
     depthStencil.stencilFront.depthFailOp = value;
     depthStencil.stencilBack.depthFailOp = value;
@@ -101,17 +149,29 @@ export const PARAMETER_TABLE: Record<keyof Parameters, Function> = {
 
   // MULTISAMPLE
 
-  sampleCount: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
+  sampleCount: (
+    parameter: keyof Parameters,
+    value: any,
+    descriptor: GPURenderPipelineDescriptor
+  ) => {
     descriptor.multisample = descriptor.multisample || {};
     descriptor.multisample.count = value;
   },
 
-  sampleMask: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
+  sampleMask: (
+    parameter: keyof Parameters,
+    value: any,
+    descriptor: GPURenderPipelineDescriptor
+  ) => {
     descriptor.multisample = descriptor.multisample || {};
     descriptor.multisample.mask = value;
   },
 
-  sampleAlphaToCoverageEnabled: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
+  sampleAlphaToCoverageEnabled: (
+    parameter: keyof Parameters,
+    value: any,
+    descriptor: GPURenderPipelineDescriptor
+  ) => {
     descriptor.multisample = descriptor.multisample || {};
     descriptor.multisample.alphaToCoverageEnabled = value;
   },
@@ -123,7 +183,11 @@ export const PARAMETER_TABLE: Record<keyof Parameters, Function> = {
     targets[0].writeMask = value;
   },
 
-  blendColorOperation: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
+  blendColorOperation: (
+    parameter: keyof Parameters,
+    value: any,
+    descriptor: GPURenderPipelineDescriptor
+  ) => {
     addColorState(descriptor);
     // const targets = addColorState(descriptor);
     // const target = targets[0];

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

@@ -1,4 +1,7 @@
-// WEBGPU Buffer implementation
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import {Buffer, BufferProps} from '@luma.gl/core';
 import type {WebGPUDevice} from '../webgpu-device';
 
@@ -21,13 +24,15 @@ export class WebGPUBuffer extends Buffer {
     // WebGPU buffers must be aligned to 4 bytes
     const size = Math.ceil(this.byteLength / 4) * 4;
 
-    this.handle = this.props.handle || this.device.handle.createBuffer({
-      size,
-      // usage defaults to vertex
-      usage: this.props.usage || (GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST),
-      mappedAtCreation: this.props.mappedAtCreation || mapBuffer,
-      label: this.props.id
-    });
+    this.handle =
+      this.props.handle ||
+      this.device.handle.createBuffer({
+        size,
+        // usage defaults to vertex
+        usage: this.props.usage || GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+        mappedAtCreation: this.props.mappedAtCreation || mapBuffer,
+        label: this.props.id
+      });
 
     if (props.data) {
       this._writeMapped(props.data);
@@ -54,9 +59,15 @@ export class WebGPUBuffer extends Buffer {
     );
   }
 
-  override async readAsync(byteOffset: number = 0, byteLength: number = this.byteLength): Promise<Uint8Array> {
+  override async readAsync(
+    byteOffset: number = 0,
+    byteLength: number = this.byteLength
+  ): Promise<Uint8Array> {
     // We need MAP_READ flag, but only COPY_DST buffers can have MAP_READ flag, so we need to create a temp buffer
-    const tempBuffer = new WebGPUBuffer(this.device, {usage: Buffer.MAP_READ | Buffer.COPY_DST, byteLength});
+    const tempBuffer = new WebGPUBuffer(this.device, {
+      usage: Buffer.MAP_READ | Buffer.COPY_DST,
+      byteLength
+    });
 
     // Now do a GPU-side copy into the temp buffer we can actually read.
     // TODO - we are spinning up an independent command queue here, what does this mean

package/src/adapter/resources/webgpu-command-encoder.ts

@@ -1,8 +1,13 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import {CommandEncoder, CommandEncoderProps, Buffer, Texture} from '@luma.gl/core';
 import type {CopyTextureToTextureOptions, CopyTextureToBufferOptions} from '@luma.gl/core';
 import {WebGPUDevice} from '../webgpu-device';
 import {WebGPUBuffer} from './webgpu-buffer';
 import {WebGPUTexture} from './webgpu-texture';
+import {WebGPUQuerySet} from './webgpu-query-set';
 
 export class WebGPUCommandEncoder extends CommandEncoder {
   readonly device: WebGPUDevice;
@@ -120,13 +125,23 @@ export class WebGPUCommandEncoder extends CommandEncoder {
     this.handle.insertDebugMarker(markerLabel);
   }
 
-  // writeTimestamp(querySet: Query, queryIndex: number): void {}
-
-  // resolveQuerySet(options: {
-  //   querySet: GPUQuerySet,
-  //   firstQuery: number,
-  //   queryCount: number,
-  //   destination: Buffer,
-  //   destinationOffset?: number;
-  // }): void;
+  override resolveQuerySet(
+    querySet: WebGPUQuerySet,
+    destination: Buffer,
+    options?: {
+      firstQuery?: number;
+      queryCount?: number;
+      destinationOffset?: number;
+    }
+  ): void {
+    const webgpuQuerySet = querySet;
+    const webgpuBuffer = destination as WebGPUBuffer;
+    this.handle.resolveQuerySet(
+      webgpuQuerySet.handle,
+      options.firstQuery || 0,
+      options.queryCount || querySet.props.count - (options.firstQuery || 0),
+      webgpuBuffer.handle,
+      options.destinationOffset || 0
+    );
+  }
 }

package/src/adapter/resources/webgpu-compute-pass.ts

@@ -1,8 +1,13 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import {ComputePass, ComputePassProps, ComputePipeline, Buffer, Binding} from '@luma.gl/core';
 import {WebGPUDevice} from '../webgpu-device';
 import {WebGPUBuffer} from './webgpu-buffer';
 // import {WebGPUCommandEncoder} from './webgpu-command-encoder';
 import {WebGPUComputePipeline} from './webgpu-compute-pipeline';
+import {WebGPUQuerySet} from './webgpu-query-set';
 
 export class WebGPUComputePass extends ComputePass {
   readonly device: WebGPUDevice;
@@ -13,10 +18,25 @@ export class WebGPUComputePass extends ComputePass {
     super(device, props);
     this.device = device;
 
-    this.handle = this.props.handle || device.commandEncoder?.beginComputePass({
-      label: this.props.id,
-      // timestampWrites?: GPUComputePassTimestampWrites;
-    });
+    // Set up queries
+    let timestampWrites: GPUComputePassTimestampWrites | undefined;
+    if (device.features.has('timestamp-query')) {
+      const webgpuQuerySet = props.timestampQuerySet as WebGPUQuerySet;
+      if (webgpuQuerySet) {
+        timestampWrites = {
+          querySet: webgpuQuerySet.handle,
+          beginningOfPassWriteIndex: props.beginTimestampIndex,
+          endOfPassWriteIndex: props.endTimestampIndex
+        };
+      }
+    }
+
+    this.handle =
+      this.props.handle ||
+      device.commandEncoder?.beginComputePass({
+        label: this.props.id,
+        timestampWrites
+      });
   }
 
   /** @note no WebGPU destroy method, just gc */
@@ -62,14 +82,12 @@ export class WebGPUComputePass extends ComputePass {
   pushDebugGroup(groupLabel: string): void {
     this.handle.pushDebugGroup(groupLabel);
   }
+
   popDebugGroup(): void {
     this.handle.popDebugGroup();
   }
+
   insertDebugMarker(markerLabel: string): void {
     this.handle.insertDebugMarker(markerLabel);
   }
-
-  // writeTimestamp(querySet: GPUQuerySet, queryIndex: number): void;
-  // beginPipelineStatisticsQuery(querySet: GPUQuerySet, queryIndex: number): void;
-  // endPipelineStatisticsQuery(querySet: GPUQuerySet, queryIndex: number): void;
 }

package/src/adapter/resources/webgpu-compute-pipeline.ts

@@ -1,4 +1,7 @@
-// prettier-ignore
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import {ComputePipeline, ComputePipelineProps} from '@luma.gl/core';
 
 import {WebGPUDevice} from '../webgpu-device';
@@ -16,15 +19,17 @@ export class WebGPUComputePipeline extends ComputePipeline {
     this.device = device;
 
     const webgpuShader = this.props.cs as WebGPUShader;
-    this.handle = this.props.handle || this.device.handle.createComputePipeline({
-      label: this.props.id,
-      compute: {
-        module: webgpuShader.handle,
-        entryPoint: this.props.csEntryPoint,
-        // constants: this.props.csConstants
-      },
-      layout: 'auto'
-    });
+    this.handle =
+      this.props.handle ||
+      this.device.handle.createComputePipeline({
+        label: this.props.id,
+        compute: {
+          module: webgpuShader.handle,
+          entryPoint: this.props.csEntryPoint
+          // constants: this.props.csConstants
+        },
+        layout: 'auto'
+      });
   }
 
   /** For internal use in render passes */

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

@@ -1,4 +1,7 @@
-// luma.gl, MIT license
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import {ExternalTexture, ExternalTextureProps, Sampler, SamplerProps} from '@luma.gl/core';
 import type {WebGPUDevice} from '../webgpu-device';
 import {WebGPUSampler} from './webgpu-sampler';
@@ -15,10 +18,12 @@ export class WebGPUExternalTexture extends ExternalTexture {
   constructor(device: WebGPUDevice, props: ExternalTextureProps) {
     super(device, props);
     this.device = device;
-    this.handle = this.props.handle || this.device.handle.importExternalTexture({
-      source: props.source,
-      colorSpace: props.colorSpace
-    });
+    this.handle =
+      this.props.handle ||
+      this.device.handle.importExternalTexture({
+        source: props.source,
+        colorSpace: props.colorSpace
+      });
     this.sampler = null;
   }
 
@@ -31,7 +36,8 @@ export class WebGPUExternalTexture extends ExternalTexture {
   /** Set default sampler */
   setSampler(sampler: Sampler | SamplerProps): this {
     // We can accept a sampler instance or set of props;
-    this.sampler = sampler instanceof WebGPUSampler ? sampler : new WebGPUSampler(this.device, sampler);
+    this.sampler =
+      sampler instanceof WebGPUSampler ? sampler : new WebGPUSampler(this.device, sampler);
     return this;
   }
 }

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

@@ -1,3 +1,7 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import type {FramebufferProps} from '@luma.gl/core';
 import {Framebuffer} from '@luma.gl/core';
 import {WebGPUDevice} from '../webgpu-device';

package/src/adapter/resources/webgpu-query-set.ts

@@ -0,0 +1,35 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {QuerySet, QuerySetProps} from '@luma.gl/core';
+import {WebGPUDevice} from '../webgpu-device';
+
+export type QuerySetProps2 = {
+  type: 'occlusion' | 'timestamp';
+  count: number;
+};
+
+/**
+ * Immutable
+ */
+export class WebGPUQuerySet extends QuerySet {
+  readonly device: WebGPUDevice;
+  readonly handle: GPUQuerySet;
+
+  constructor(device: WebGPUDevice, props: QuerySetProps) {
+    super(device, props);
+    this.device = device;
+    this.handle =
+      this.props.handle ||
+      this.device.handle.createQuerySet({
+        type: this.props.type,
+        count: this.props.count
+      });
+    this.handle.label = this.props.id;
+  }
+
+  override destroy(): void {
+    this.handle.destroy();
+  }
+}