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

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

@@ -5,14 +5,14 @@
 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;
   readonly handle: GPUComputePassEncoder;
-  _bindGroupLayout: GPUBindGroupLayout | null = null;
+
+  _webgpuPipeline: WebGPUComputePipeline | null = null;
 
   constructor(device: WebGPUDevice, props: ComputePassProps) {
     super(device, props);
@@ -49,21 +49,24 @@ export class WebGPUComputePass extends ComputePass {
   setPipeline(pipeline: ComputePipeline): void {
     const wgpuPipeline = pipeline as WebGPUComputePipeline;
     this.handle.setPipeline(wgpuPipeline.handle);
-    this._bindGroupLayout = wgpuPipeline._getBindGroupLayout();
+    this._webgpuPipeline = wgpuPipeline;
+    this.setBindings([]);
   }
 
-  /** Sets an array of bindings (uniform buffers, samplers, textures, ...) */
+  /**
+   * Sets an array of bindings (uniform buffers, samplers, textures, ...)
+   * TODO - still some API confusion - does this method go here or on the pipeline?
+   */
   setBindings(bindings: Binding[]): void {
-    throw new Error('fix me');
-    // const bindGroup = getBindGroup(this.device.handle, this._bindGroupLayout, this.props.bindings);
-    // this.handle.setBindGroup(0, bindGroup);
+    const bindGroup = this._webgpuPipeline._getBindGroup();
+    this.handle.setBindGroup(0, bindGroup);
   }
 
   /**
    * Dispatch work to be performed with the current ComputePipeline.
-   * @param x X dimension of the grid of workgroups to dispatch.
-   * @param y Y dimension of the grid of workgroups to dispatch.
-   * @param z Z dimension of the grid of workgroups to dispatch.
+   * @param x X dimension of the grid of work groups to dispatch.
+   * @param y Y dimension of the grid of work groups to dispatch.
+   * @param z Z dimension of the grid of work groups to dispatch.
    */
   dispatch(x: number, y?: number, z?: number): void {
     this.handle.dispatchWorkgroups(x, y, z);
@@ -71,12 +74,14 @@ export class WebGPUComputePass extends ComputePass {
 
   /**
    * Dispatch work to be performed with the current ComputePipeline.
-   * @param indirectBuffer buffer must be a tightly packed block of three 32-bit unsigned integer values (12 bytes total), given in the same order as the arguments for dispatch()
-   * @param indirectOffset
+   *
+   * Buffer must be a tightly packed block of three 32-bit unsigned integer values (12 bytes total), given in the same order as the arguments for dispatch()
+   * @param indirectBuffer
+   * @param indirectOffset offset in buffer to the beginning of the dispatch data.
    */
-  dispatchIndirect(indirectBuffer: Buffer, indirectOffset: number = 0): void {
+  dispatchIndirect(indirectBuffer: Buffer, indirectByteOffset: number = 0): void {
     const webgpuBuffer = indirectBuffer as WebGPUBuffer;
-    this.handle.dispatchWorkgroupsIndirect(webgpuBuffer.handle, indirectOffset);
+    this.handle.dispatchWorkgroupsIndirect(webgpuBuffer.handle, indirectByteOffset);
   }
 
   pushDebugGroup(groupLabel: string): void {

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

@@ -2,8 +2,8 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {ComputePipeline, ComputePipelineProps} from '@luma.gl/core';
-
+import {ComputePipeline, ComputePipelineProps, Binding} from '@luma.gl/core';
+import {getBindGroup} from '../helpers/get-bind-group';
 import {WebGPUDevice} from '../webgpu-device';
 import {WebGPUShader} from './webgpu-shader';
 
@@ -14,27 +14,54 @@ export class WebGPUComputePipeline extends ComputePipeline {
   device: WebGPUDevice;
   handle: GPUComputePipeline;
 
+  /** For internal use to create BindGroups */
+  private _bindGroupLayout: GPUBindGroupLayout | null = null;
+  private _bindGroup: GPUBindGroup | null = null;
+  /** For internal use to create BindGroups */
+  private _bindings: Record<string, Binding> = {};
+
   constructor(device: WebGPUDevice, props: ComputePipelineProps) {
     super(device, props);
     this.device = device;
 
-    const webgpuShader = this.props.cs as WebGPUShader;
+    const webgpuShader = this.props.shader 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
+          entryPoint: this.props.entryPoint,
+          constants: this.props.constants
         },
         layout: 'auto'
       });
   }
 
-  /** For internal use in render passes */
-  _getBindGroupLayout() {
-    // TODO: Cache?
-    return this.handle.getBindGroupLayout(0);
+  /**
+   * @todo Use renderpass.setBindings() ?
+   * @todo Do we want to expose BindGroups in the API and remove this?
+   */
+  setBindings(bindings: Record<string, Binding>): void {
+    Object.assign(this._bindings, bindings);
+  }
+
+  /** Return a bind group created by setBindings */
+  _getBindGroup() {
+    // Get hold of the bind group layout. We don't want to do this unless we know there is at least one bind group
+    this._bindGroupLayout = this._bindGroupLayout || this.handle.getBindGroupLayout(0);
+
+    // Set up the bindings
+    this._bindGroup =
+      this._bindGroup ||
+      getBindGroup(
+        this.device.handle,
+        this._bindGroupLayout,
+        this.props.shaderLayout,
+        this._bindings
+      );
+
+    return this._bindGroup;
   }
 }

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

@@ -31,6 +31,8 @@ export class WebGPUExternalTexture extends ExternalTexture {
     // External textures are destroyed automatically,
     // as a microtask, instead of manually or upon garbage collection like other resources.
     // this.handle.destroy();
+    // @ts-expect-error readonly
+    this.handle = null;
   }
 
   /** Set default sampler */

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

@@ -30,6 +30,8 @@ export class WebGPUQuerySet extends QuerySet {
   }
 
   override destroy(): void {
-    this.handle.destroy();
+    this.handle?.destroy();
+    // @ts-expect-error readonly
+    this.handle = null;
   }
 }

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

@@ -25,12 +25,8 @@ export class WebGPURenderPipeline extends RenderPipeline {
   vs: WebGPUShader;
   fs: WebGPUShader | null = null;
 
-  // private _bufferSlots: Record<string, number>;
-  // private _buffers: Buffer[];
-  // private _firstIndex: number;
-  // private _lastIndex: number;
-
   /** For internal use to create BindGroups */
+  private _bindings: Record<string, Binding>;
   private _bindGroupLayout: GPUBindGroupLayout | null = null;
   private _bindGroup: GPUBindGroup | null = null;
 
@@ -50,46 +46,23 @@ export class WebGPURenderPipeline extends RenderPipeline {
     this.vs = cast<WebGPUShader>(props.vs);
     this.fs = cast<WebGPUShader>(props.fs);
 
-    // this._bufferSlots = getBufferSlots(this.props.shaderLayout, this.props.bufferLayout);
-    // this._buffers = new Array<Buffer>(Object.keys(this._bufferSlots).length).fill(null);
+    this._bindings = {...this.props.bindings};
   }
 
   override destroy(): void {
     // WebGPURenderPipeline has no destroy method.
+    this.handle = null;
   }
 
-  // setIndexBuffer(indexBuffer: Buffer): void {
-  //   this._indexBuffer = cast<WebGPUBuffer>(indexBuffer);
-  // }
-
-  // setAttributes(attributes: Record<string, Buffer>): void {
-  //   for (const [name, buffer] of Object.entries(attributes)) {
-  //     const bufferIndex = this._bufferSlots[name];
-  //     if (bufferIndex >= 0) {
-  //       this._buffers[bufferIndex] = buffer;
-  //     } else {
-  //       throw new Error(
-  //         `Setting attribute '${name}' not listed in shader layout for program ${this.id}`
-  //       );
-  //     }
-  //   }
-  //   // for (let i = 0; i < this._bufferSlots.length; ++i) {
-  //   //   const bufferName = this._bufferSlots[i];
-  //   //   if (attributes[bufferName]) {
-  //   //     this.handle
-  //   //   }
-  //   // }
-  // }
-
+  /**
+   * @todo Use renderpass.setBindings() ?
+   * @todo Do we want to expose BindGroups in the API and remove this?
+   */
   setBindings(bindings: Record<string, Binding>): void {
-    // if (isObjectEmpty(bindings)) {
-    //   return;
-    // }
-
-    // Do we want to save things on CPU side?
-    Object.assign(this.props.bindings, bindings);
+    Object.assign(this._bindings, bindings);
   }
 
+  /** @todo - should this be moved to renderpass? */
   draw(options: {
     renderPass: RenderPass;
     vertexArray: VertexArray;
@@ -100,9 +73,8 @@ export class WebGPURenderPipeline extends RenderPipeline {
     firstIndex?: number;
     firstInstance?: number;
     baseVertex?: number;
-  }): void {
-    const webgpuRenderPass: WebGPURenderPass =
-      cast<WebGPURenderPass>(options.renderPass) || this.device.getDefaultRenderPass();
+  }): boolean {
+    const webgpuRenderPass = options.renderPass as WebGPURenderPass;
 
     // Set pipeline
     webgpuRenderPass.handle.setPipeline(this.handle);
@@ -136,25 +108,28 @@ export class WebGPURenderPipeline extends RenderPipeline {
 
     // Note: Rebinds constant attributes before each draw call
     options.vertexArray.unbindAfterRender(options.renderPass);
-  }
 
-  // _getBuffers() {
-  //   return this._buffers;
-  // }
+    return true;
+  }
 
   /** Return a bind group created by setBindings */
   _getBindGroup() {
+    if (this.props.shaderLayout.bindings.length === 0) {
+      return null;
+    }
+
     // Get hold of the bind group layout. We don't want to do this unless we know there is at least one bind group
     this._bindGroupLayout = this._bindGroupLayout || this.handle.getBindGroupLayout(0);
 
     // Set up the bindings
+    // TODO what if bindings change? We need to rebuild the bind group!
     this._bindGroup =
       this._bindGroup ||
       getBindGroup(
         this.device.handle,
         this._bindGroupLayout,
         this.props.shaderLayout,
-        this.props.bindings
+        this._bindings
       );
 
     return this._bindGroup;
@@ -167,24 +142,21 @@ export class WebGPURenderPipeline extends RenderPipeline {
     // Set up the vertex stage
     const vertex: GPUVertexState = {
       module: cast<WebGPUShader>(this.props.vs).handle,
-      entryPoint: this.props.vsEntryPoint || 'main',
+      entryPoint: this.props.vertexEntryPoint || 'main',
       buffers: getVertexBufferLayout(this.props.shaderLayout, this.props.bufferLayout)
     };
 
     // Set up the fragment stage
-    let fragment: GPUFragmentState | undefined;
-    if (this.props.fs) {
-      fragment = {
-        module: cast<WebGPUShader>(this.props.fs).handle,
-        entryPoint: this.props.fsEntryPoint || 'main',
-        targets: [
-          {
-            // TODO exclamation mark hack!
-            format: getWebGPUTextureFormat(this.device?.canvasContext?.format)
-          }
-        ]
-      };
-    }
+    const fragment: GPUFragmentState = {
+      module: cast<WebGPUShader>(this.props.fs).handle,
+      entryPoint: this.props.fragmentEntryPoint || 'main',
+      targets: [
+        {
+          // TODO exclamation mark hack!
+          format: getWebGPUTextureFormat(this.device?.canvasContext?.format)
+        }
+      ]
+    };
 
     // WebGPU has more restrictive topology support than WebGL
     switch (this.props.topology) {
@@ -209,47 +181,46 @@ export class WebGPURenderPipeline extends RenderPipeline {
 
     return descriptor;
   }
+}
+/**
+_setAttributeBuffers(webgpuRenderPass: WebGPURenderPass) {
+  if (this._indexBuffer) {
+    webgpuRenderPass.handle.setIndexBuffer(this._indexBuffer.handle, this._indexBuffer.props.indexType);
+  }
 
-  /**
-  _setAttributeBuffers(webgpuRenderPass: WebGPURenderPass) {
-    if (this._indexBuffer) {
-      webgpuRenderPass.handle.setIndexBuffer(this._indexBuffer.handle, this._indexBuffer.props.indexType);
+  const buffers = this._getBuffers();
+  for (let i = 0; i < buffers.length; ++i) {
+    const buffer = cast<WebGPUBuffer>(buffers[i]);
+    if (!buffer) {
+      const attribute = this.props.shaderLayout.attributes.find(
+        (attribute) => attribute.location === i
+      );
+      throw new Error(
+        `No buffer provided for attribute '${attribute?.name || ''}' in Model '${this.props.id}'`
+      );
     }
+    webgpuRenderPass.handle.setVertexBuffer(i, buffer.handle);
+  }
 
-    const buffers = this._getBuffers();
-    for (let i = 0; i < buffers.length; ++i) {
-      const buffer = cast<WebGPUBuffer>(buffers[i]);
-      if (!buffer) {
-        const attribute = this.props.shaderLayout.attributes.find(
-          (attribute) => attribute.location === i
-        );
-        throw new Error(
-          `No buffer provided for attribute '${attribute?.name || ''}' in Model '${this.props.id}'`
-        );
-      }
-      webgpuRenderPass.handle.setVertexBuffer(i, buffer.handle);
+  // TODO - HANDLE buffer maps
+  /*
+  for (const [bufferName, attributeMapping] of Object.entries(this.props.bufferLayout)) {
+    const buffer = cast<WebGPUBuffer>(this.props.attributes[bufferName]);
+    if (!buffer) {
+      log.warn(`Missing buffer for buffer map ${bufferName}`)();
+      continue;
     }
 
-    // TODO - HANDLE buffer maps
-    /*
-    for (const [bufferName, attributeMapping] of Object.entries(this.props.bufferLayout)) {
-      const buffer = cast<WebGPUBuffer>(this.props.attributes[bufferName]);
-      if (!buffer) {
-        log.warn(`Missing buffer for buffer map ${bufferName}`)();
-        continue;
-      }
-
-      if ('location' in attributeMapping) {
+    if ('location' in attributeMapping) {
+      // @ts-expect-error TODO model must not depend on webgpu
+      renderPass.handle.setVertexBuffer(layout.location, buffer.handle);
+    } else {
+      for (const [bufferName, mapping] of Object.entries(attributeMapping)) {
         // @ts-expect-error TODO model must not depend on webgpu
-        renderPass.handle.setVertexBuffer(layout.location, buffer.handle);
-      } else {
-        for (const [bufferName, mapping] of Object.entries(attributeMapping)) {
-          // @ts-expect-error TODO model must not depend on webgpu
-          renderPass.handle.setVertexBuffer(field.location, buffer.handle);
-        }
+        renderPass.handle.setVertexBuffer(field.location, buffer.handle);
       }
     }
-    *
   }
-  */
+  *
 }
+*/

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

@@ -27,6 +27,9 @@ export class WebGPUSampler extends Sampler {
   }
 
   override destroy(): void {
+    // GPUSampler does not have a destroy method
     // this.handle.destroy();
+    // @ts-expect-error readonly
+    this.handle = null;
   }
 }

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

@@ -6,10 +6,6 @@ import type {ShaderProps, CompilerMessage} from '@luma.gl/core';
 import {Shader, log} from '@luma.gl/core';
 import type {WebGPUDevice} from '../webgpu-device';
 
-export type WebGPUShaderProps = ShaderProps & {
-  handle?: GPUShaderModule;
-};
-
 /**
  * Immutable shader
  */
@@ -17,7 +13,7 @@ export class WebGPUShader extends Shader {
   readonly device: WebGPUDevice;
   readonly handle: GPUShaderModule;
 
-  constructor(device: WebGPUDevice, props: WebGPUShaderProps) {
+  constructor(device: WebGPUDevice, props: ShaderProps) {
     super(device, props);
     this.device = device;
 
@@ -46,6 +42,8 @@ export class WebGPUShader extends Shader {
   override destroy(): void {
     // Note: WebGPU does not offer a method to destroy shaders
     // this.handle.destroy();
+    // @ts-expect-error readonly
+    this.handle = null;
   }
 
   /** Returns compilation info for this shader */
@@ -57,26 +55,13 @@ export class WebGPUShader extends Shader {
   // PRIVATE METHODS
 
   protected createHandle(): GPUShaderModule {
-    const {source, stage} = this.props;
+    const {source} = this.props;
 
-    let language = this.props.language;
-    // Compile from src
-    if (language === 'auto') {
-      // wgsl uses C++ "auto" style arrow notation
-      language = source.includes('->') ? 'wgsl' : 'glsl';
+    const isGLSL = source.includes('#version');
+    if (this.props.language === 'glsl' || isGLSL) {
+      throw new Error('GLSL shaders are not supported in WebGPU');
     }
 
-    switch (language) {
-      case 'wgsl':
-        return this.device.handle.createShaderModule({code: source});
-      case 'glsl':
-        return this.device.handle.createShaderModule({
-          code: source,
-          // @ts-expect-error
-          transform: glsl => this.device.glslang.compileGLSL(glsl, stage)
-        });
-      default:
-        throw new Error(language);
-    }
+    return this.device.handle.createShaderModule({code: source});
   }
 }

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

@@ -38,6 +38,9 @@ export class WebGPUTextureView extends TextureView {
   }
 
   override destroy(): void {
+    // GPUTextureView does not have a destroy method
     // this.handle.destroy();
+    // @ts-expect-error readonly
+    this.handle = null;
   }
 }

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

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {Texture, TextureProps, Sampler, SamplerProps} from '@luma.gl/core';
+import {Texture, TextureProps, TextureViewProps, Sampler, SamplerProps} from '@luma.gl/core';
 import {getWebGPUTextureFormat} from '../helpers/convert-texture-format';
 import type {WebGPUDevice} from '../webgpu-device';
 import {WebGPUSampler} from './webgpu-sampler';
@@ -51,6 +51,16 @@ export class WebGPUTexture extends Texture {
     this.initialize(props);
   }
 
+  override destroy(): void {
+    this.handle?.destroy();
+    // @ts-expect-error readonly
+    this.handle = null;
+  }
+
+  createView(props: TextureViewProps): WebGPUTextureView {
+    return new WebGPUTextureView(this.device, {...props, texture: this});
+  }
+
   protected initialize(props: TextureProps): void {
     // @ts-expect-error
     this.handle = this.props.handle || this.createHandle();
@@ -113,10 +123,6 @@ export class WebGPUTexture extends Texture {
     });
   }
 
-  override destroy(): void {
-    this.handle.destroy();
-  }
-
   /**
    * Set default sampler
    * Accept a sampler instance or set of props;
@@ -188,11 +194,6 @@ export class WebGPUTexture extends Texture {
 
   // WebGPU specific
 
-  /** TODO - intention is to expose TextureViews in the public API */
-  createView(): GPUTextureView {
-    return this.handle.createView({label: this.id});
-  }
-
   /*
   async readPixels() {
     const readbackBuffer = device.createBuffer({

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

@@ -112,7 +112,8 @@ export class WebGPUCanvasContext extends CanvasContext {
   getCurrentTexture(): WebGPUTexture {
     return this.device._createTexture({
       id: `${this.id}#color-texture`,
-      handle: this.gpuCanvasContext.getCurrentTexture()
+      handle: this.gpuCanvasContext.getCurrentTexture(),
+      format: this.format
     });
   }
 

package/src/adapter/webgpu-device.ts

@@ -51,6 +51,9 @@ import {WebGPUQuerySet} from './resources/webgpu-query-set';
 export class WebGPUDevice extends Device {
   static type: string = 'webgpu';
 
+  /** type of this device */
+  readonly type = 'webgpu';
+
   /** The underlying WebGPU device */
   readonly handle: GPUDevice;
   /* The underlying WebGPU adapter */
@@ -95,7 +98,7 @@ export class WebGPUDevice extends Device {
     const requiredFeatures: GPUFeatureName[] = [];
     const requiredLimits: Record<string, number> = {};
 
-    if (props.requestMaximalLimits) {
+    if (props.requestMaxLimits) {
       requiredFeatures.push(...(Array.from(adapter.features) as GPUFeatureName[]));
       for (const key in adapter.limits) {
         requiredLimits[key] = adapter.limits[key];
@@ -175,7 +178,11 @@ export class WebGPUDevice extends Device {
 
   /** @todo implement proper check? */
   isTextureFormatFilterable(format: TextureFormat): boolean {
-    return this.isTextureFormatSupported(format);
+    return (
+      this.isTextureFormatSupported(format) &&
+      !format.startsWith('depth') &&
+      !format.startsWith('stencil')
+    );
   }
 
   /** @todo implement proper check? */
@@ -213,7 +220,7 @@ export class WebGPUDevice extends Device {
   }
 
   createFramebuffer(props: FramebufferProps): WebGPUFramebuffer {
-    throw new Error('Not implemented');
+    return new WebGPUFramebuffer(this, props);
   }
 
   createComputePipeline(props: ComputePipelineProps): WebGPUComputePipeline {
@@ -256,22 +263,6 @@ export class WebGPUDevice extends Device {
     return new WebGPUCanvasContext(this, this.adapter, props);
   }
 
-  /**
-   * Gets default renderpass encoder.
-   * Creates a new encoder against default canvasContext if not already created
-   * @note Called internally by Model.
-   * @deprecated Create explicit pass with device.beginRenderPass
-   */
-  getDefaultRenderPass(): WebGPURenderPass {
-    // this.renderPass =
-    //   this.renderPass ||
-    //   this.beginRenderPass({
-    //     framebuffer: this.canvasContext?.getCurrentFramebuffer()
-    //   });
-    // return this.renderPass;
-    throw new Error('a');
-  }
-
   submit(): void {
     // this.renderPass?.end();
     const commandBuffer = this.commandEncoder?.finish();
@@ -341,7 +332,7 @@ export class WebGPUDevice extends Device {
       features.add(feature);
     }
 
-    return new DeviceFeatures(Array.from(features));
+    return new DeviceFeatures(Array.from(features), this.props.disabledFeatures);
   }
 
   copyExternalImageToTexture(options: {

package/dist/adapter/helpers/generate-mipmaps.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="dist" />
-/** WebGPU does not have built-in mipmap creation */
-export declare class WebGPUMipmapGenerator {
-    device: GPUDevice;
-    mipmapSampler: GPUSampler;
-    mipmapPipeline: GPURenderPipeline;
-    constructor(device: GPUDevice, glslang: any);
-    generateMipmappedTexture(imageBitmap: ImageBitmap): GPUTexture;
-}
-//# sourceMappingURL=generate-mipmaps.d.ts.map

package/dist/adapter/helpers/generate-mipmaps.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"generate-mipmaps.d.ts","sourceRoot":"","sources":["../../../src/adapter/helpers/generate-mipmaps.ts"],"names":[],"mappings":";AA0BA,oDAAoD;AACpD,qBAAa,qBAAqB;IAChC,MAAM,EAAE,SAAS,CAAC;IAClB,aAAa,EAAE,UAAU,CAAC;IAC1B,cAAc,EAAE,iBAAiB,CAAC;gBAEtB,MAAM,EAAE,SAAS,EAAE,OAAO,KAAA;IA2BtC,wBAAwB,CAAC,WAAW,EAAE,WAAW;CA0DlD"}