@luma.gl/webgpu 9.0.0-alpha.5 → 9.0.0-alpha.50

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

@@ -1,29 +1,29 @@
-import {ComputePass, ComputePassProps, ComputePipeline, Buffer, Binding, cast} from '@luma.gl/api';
-import WebGPUDevice from '../webgpu-device';
-import WebGPUBuffer from './webgpu-buffer';
-// import WebGPUCommandEncoder from './webgpu-command-encoder';
-import WebGPUComputePipeline from './webgpu-compute-pipeline';
+import {ComputePass, ComputePassProps, ComputePipeline, Buffer, Binding, cast} 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';
 
-export default class WebGPUComputePass extends ComputePass {
+export class WebGPUComputePass extends ComputePass {
   readonly device: WebGPUDevice;
   readonly handle: GPUComputePassEncoder;
-  _bindGroupLayout: GPUBindGroupLayout;
+  _bindGroupLayout: GPUBindGroupLayout | null = null;
 
   constructor(device: WebGPUDevice, props: ComputePassProps) {
     super(device, props);
     this.device = device;
 
-    this.handle = this.props.handle || device.commandEncoder.beginComputePass({
+    this.handle = this.props.handle || device.commandEncoder?.beginComputePass({
       label: this.props.id,
       // timestampWrites?: GPUComputePassTimestampWrites;
     });
   }
 
   /** @note no WebGPU destroy method, just gc */
-  destroy() {}
+  override destroy(): void {}
 
-  endPass(): void {
-    this.handle.endPass();
+  end(): void {
+    this.handle.end();
   }
 
   setPipeline(pipeline: ComputePipeline): void {
@@ -46,7 +46,7 @@ export default class WebGPUComputePass extends ComputePass {
    * @param z Z dimension of the grid of workgroups to dispatch.
    */
   dispatch(x: number, y?: number, z?: number): void {
-    this.handle.dispatch(x, y, z);
+    this.handle.dispatchWorkgroups(x, y, z);
   }
 
   /**
@@ -55,7 +55,7 @@ export default class WebGPUComputePass extends ComputePass {
    * @param indirectOffset
    */
   dispatchIndirect(indirectBuffer: Buffer, indirectOffset: number = 0): void {
-    this.handle.dispatchIndirect(cast<WebGPUBuffer>(indirectBuffer).handle, indirectOffset);
+    this.handle.dispatchWorkgroupsIndirect(cast<WebGPUBuffer>(indirectBuffer).handle, indirectOffset);
   }
 
   pushDebugGroup(groupLabel: string): void {

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

@@ -1,13 +1,13 @@
 // prettier-ignore
-import {ComputePipeline, ComputePipelineProps, cast} from '@luma.gl/api';
+import {ComputePipeline, ComputePipelineProps, cast} from '@luma.gl/core';
 
-import WebGPUDevice from '../webgpu-device';
-import WebGPUShader from './webgpu-shader';
+import {WebGPUDevice} from '../webgpu-device';
+import {WebGPUShader} from './webgpu-shader';
 
 // COMPUTE PIPELINE
 
 /** Creates a new compute pipeline when parameters change */
-export default class WebGPUComputePipeline extends ComputePipeline {
+export class WebGPUComputePipeline extends ComputePipeline {
   device: WebGPUDevice;
   handle: GPUComputePipeline;
 
@@ -22,7 +22,8 @@ export default class WebGPUComputePipeline extends ComputePipeline {
         module,
         entryPoint: this.props.csEntryPoint,
         // constants: this.props.csConstants
-      }
+      },
+      layout: 'auto'
     });
   }
 

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

@@ -1,13 +1,13 @@
 // luma.gl, MIT license
-import {ExternalTexture, ExternalTextureProps, Sampler, SamplerProps} from '@luma.gl/api';
-import type WebGPUDevice from '../webgpu-device';
-import WebGPUSampler from './webgpu-sampler';
+import {ExternalTexture, ExternalTextureProps, Sampler, SamplerProps} from '@luma.gl/core';
+import type {WebGPUDevice} from '../webgpu-device';
+import {WebGPUSampler} from './webgpu-sampler';
 
 /**
  * Cheap, temporary texture view for videos
  * Only valid within same callback, destroyed automatically as a microtask.
  */
-export default class WebGPUExternalTexture extends ExternalTexture {
+export class WebGPUExternalTexture extends ExternalTexture {
   readonly device: WebGPUDevice;
   readonly handle: GPUExternalTexture;
   sampler: WebGPUSampler;
@@ -22,7 +22,7 @@ export default class WebGPUExternalTexture extends ExternalTexture {
     this.sampler = null;
   }
 
-  destroy(): void {
+  override destroy(): void {
     // External textures are destroyed automatically,
     // as a microtask, instead of manually or upon garbage collection like other resources.
     // this.handle.destroy();

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

@@ -1,120 +1,19 @@
-import type {FramebufferProps, ColorTextureFormat} from '@luma.gl/api';
-import {Framebuffer, Texture} from '@luma.gl/api';
-import WebGPUDevice from '../webgpu-device';
-// import WebGPUCanvasContext from '../webgpu-canvas-context';
-import WEBGPUTexture from './webgpu-texture';
-import WebGPUTexture from './webgpu-texture';
-
-// const DEFAULT_DEPTH_STENCIL_FORMAT: DepthStencilTextureFormat = 'depth24plus';
-
-const MAX_COLOR_ATTACHMENTS = 8;
+import type {FramebufferProps} from '@luma.gl/core';
+import {Framebuffer} from '@luma.gl/core';
+import {WebGPUDevice} from '../webgpu-device';
 
 /**
- * Create new textures with correct size for all attachments. 
- * @note resize() destroys existing textures (if size has changed). 
+ * Create new textures with correct size for all attachments.
+ * @note resize() destroys existing textures (if size has changed).
  */
-export default class WebGPUFramebuffer extends Framebuffer {
+export class WebGPUFramebuffer extends Framebuffer {
   readonly device: WebGPUDevice;
 
-  colorAttachments: WebGPUTexture[] = [];
-  depthStencilAttachment: WebGPUTexture;
-
-  /** Partial render pass descriptor. Used by WebGPURenderPass */
-  renderPassDescriptor: {
-    colorAttachments: GPURenderPassColorAttachment[];
-    depthStencilAttachment?: GPURenderPassDepthStencilAttachment;
-  } = {
-    colorAttachments: []
-  };
-
   constructor(device: WebGPUDevice, props: FramebufferProps) {
     super(device, props);
     this.device = device;
 
-    if (props.depthStencilAttachment) {
-      this.depthStencilAttachment = this.createDepthStencilTexture(props);
-    }
-
-    if (props.colorAttachments) {
-      this.colorAttachments = props.colorAttachments.map(colorAttachment => this.createColorTexture(this.props, colorAttachment));
-    }
-
-    if (this.depthStencilAttachment) {
-      this.renderPassDescriptor.depthStencilAttachment = {
-        view: this.depthStencilAttachment.handle.createView(),
-        // Add default clear values
-        depthLoadValue: 1.0,
-        depthStoreOp: 'store',
-        stencilLoadValue: 0,
-        stencilStoreOp: 'store',
-      }
-    }
-
-    if (this.colorAttachments.length > 0) {
-      this.renderPassDescriptor.colorAttachments = this.colorAttachments.map(colorAttachment => ({
-        view: colorAttachment.handle.createView(),
-        loadValue: [0.0, 0.0, 0.0, 0.0],
-        storeOp: 'store'
-      }));
-    }
-  }
-
-  /** Create depth stencil texture */
-  private createDepthStencilTexture(props: FramebufferProps): WEBGPUTexture {
-    if (props.depthStencilAttachment instanceof WEBGPUTexture) {
-      return props.depthStencilAttachment;
-    }
-
-    if (typeof props.depthStencilAttachment === 'string') {
-      return this.device._createTexture({
-        id: 'depth-stencil-attachment',
-        format: props.depthStencilAttachment,
-        width: props.width,
-        height: props.height,
-        usage: Texture.RENDER_ATTACHMENT
-      });
-    }
-
-    throw new Error('type');
-  }
-
-  private createColorTexture(props: FramebufferProps, texture: Texture | ColorTextureFormat): WEBGPUTexture {
-    if (texture instanceof WEBGPUTexture) {
-      return texture;
-    }
-
-    if (typeof texture === 'string') {
-      return this.device._createTexture({
-        id: 'color-attachment',
-        format: texture,
-        width: props.width,
-        height: props.height,
-        usage: Texture.RENDER_ATTACHMENT
-      });
-    }
-
-    throw new Error('type');
-  }
-
-  /**
-   * Create new textures with correct size for all attachments.
-   * @note destroys existing textures.
-   */
-   protected _resizeAttachments(width: number, height: number): void {
-    for (let i = 0; i < this.colorAttachments.length; ++i) {
-      if (this.colorAttachments[i]) {
-        const resizedTexture = this.device._createTexture({...this.colorAttachments[i].props, width, height})
-        this.colorAttachments[i].destroy();
-        this.colorAttachments[i] = resizedTexture;
-        this.renderPassDescriptor.colorAttachments[i].view = resizedTexture.handle.createView();
-      }
-    }
-
-    if (this.depthStencilAttachment) {
-       const resizedTexture = this.device._createTexture({...this.depthStencilAttachment.props, width, height})
-       this.depthStencilAttachment.destroy();
-       this.depthStencilAttachment = resizedTexture;
-       this.renderPassDescriptor.depthStencilAttachment.view = resizedTexture.handle.createView();
-    }
+    // Auto create textures for attachments if needed
+    this.autoCreateAttachmentTextures();
   }
 }

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

@@ -1,6 +1,6 @@
 /*
-import {Resource, Query, QueryProps} from '@luma.gl/api';
-import WebGPUDevice from '../webgpu-device';
+import {Resource, Query, QueryProps} from '@luma.gl/core';
+import {WebGPUDevice} from '../webgpu-device';
 
 export type WebGPUQueryProps = QueryProps & {
   handle?: any;
@@ -36,7 +36,7 @@ class WebGPUQuery extends Resource<WebGPUQueryProps> implements Query {
     });
   }
 
-  destroy() {
+  override destroy(): void {
     this.handle.destroy();
   }
 }

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

@@ -1,11 +1,12 @@
-import type {RenderPassProps, RenderPassParameters, Binding} from '@luma.gl/api';
-import {Buffer, RenderPass, RenderPipeline, cast, log} from '@luma.gl/api';
-import WebGPUDevice from '../webgpu-device';
-import WebGPUBuffer from './webgpu-buffer';
-// import WebGPUCommandEncoder from './webgpu-command-encoder';
-import WebGPURenderPipeline from './webgpu-render-pipeline';
-
-export default class WebGPURenderPass extends RenderPass {
+import type {RenderPassProps, RenderPassParameters, Binding, Framebuffer} from '@luma.gl/core';
+import {Buffer, RenderPass, RenderPipeline, cast, log} from '@luma.gl/core';
+import {WebGPUDevice} from '../webgpu-device';
+import {WebGPUBuffer} from './webgpu-buffer';
+import {WebGPUTexture} from './webgpu-texture';
+// import {WebGPUCommandEncoder} from './webgpu-command-encoder';
+import {WebGPURenderPipeline} from './webgpu-render-pipeline';
+
+export class WebGPURenderPass extends RenderPass {
   readonly device: WebGPUDevice;
   readonly handle: GPURenderPassEncoder;
 
@@ -15,17 +16,19 @@ export default class WebGPURenderPass extends RenderPass {
   constructor(device: WebGPUDevice, props: RenderPassProps = {}) {
     super(device, props);
     this.device = device;
-    const framebuffer = props.framebuffer || device.canvasContext.getCurrentFramebuffer();
-    // @ts-expect-error
-    const renderPassDescriptor = framebuffer.renderPassDescriptor;
+    const framebuffer = props.framebuffer || device.canvasContext.getCurrentFramebuffer() ;
+    const renderPassDescriptor = this.getRenderPassDescriptor(framebuffer);
+    log.groupCollapsed(1, `new WebGPURenderPass(${this.id})`)();
+    log.probe(1, JSON.stringify(renderPassDescriptor, null, 2))();
+    log.groupEnd(1)();
     this.handle = this.props.handle || device.commandEncoder.beginRenderPass(renderPassDescriptor);
     this.handle.label = this.props.id;
   }
 
-  destroy() {}
+  override destroy(): void {}
 
-  endPass(): void {
-    this.handle.endPass();
+  end(): void {
+    this.handle.end();
   }
 
   setPipeline(pipeline: RenderPipeline): void {
@@ -35,8 +38,11 @@ export default class WebGPURenderPass extends RenderPass {
 
   /** Sets an array of bindings (uniform buffers, samplers, textures, ...) */
   setBindings(bindings: Record<string, Binding>): void {
-    this.pipeline.setBindings(bindings);
-    this.handle.setBindGroup(0, this.pipeline._getBindGroup());
+    this.pipeline?.setBindings(bindings);
+    const bindGroup = this.pipeline?._getBindGroup();
+    if (bindGroup) {
+      this.handle.setBindGroup(0, bindGroup);
+    }
   }
 
   setIndexBuffer(
@@ -71,8 +77,8 @@ export default class WebGPURenderPass extends RenderPass {
       );
     } else {
       this.handle.draw(
-        options.vertexCount,
-        options.instanceCount,
+        options.vertexCount || 0,
+        options.instanceCount || 1,
         options.firstIndex,
         options.firstInstance
       );
@@ -125,4 +131,54 @@ export default class WebGPURenderPass extends RenderPass {
   // endPipelineStatisticsQuery(querySet: GPUQuerySet, queryIndex: number): void;
 
   // executeBundles(bundles: Iterable<GPURenderBundle>): void;
+
+  // INTERNAL
+
+  /** 
+   * Partial render pass descriptor. Used by WebGPURenderPass.
+   * @returns attachments fields of a renderpass descriptor. 
+   */
+  protected getRenderPassDescriptor(framebuffer: Framebuffer): GPURenderPassDescriptor {
+    const renderPassDescriptor: GPURenderPassDescriptor = {
+      colorAttachments: []
+    };
+
+    renderPassDescriptor.colorAttachments = framebuffer.colorAttachments.map(colorAttachment => ({
+      // clear values
+      loadOp: this.props.clearColor !== false ? 'clear' : 'load',
+      colorClearValue: this.props.clearColor || [0, 0, 0, 0],
+      storeOp: this.props.discard? 'discard': 'store',
+      // ...colorAttachment,
+      view: (colorAttachment as WebGPUTexture).handle.createView()
+    }));
+
+    if (framebuffer.depthStencilAttachment) {
+      renderPassDescriptor.depthStencilAttachment = {
+        view: (framebuffer.depthStencilAttachment as WebGPUTexture).handle.createView()
+      };
+      const {depthStencilAttachment} = renderPassDescriptor;
+
+      // DEPTH
+      if (this.props.depthReadOnly) {
+        depthStencilAttachment.depthReadOnly = true;
+      }
+      depthStencilAttachment.depthClearValue = this.props.clearDepth || 0;
+
+      // WebGPU only wants us to set these parameters if the texture format actually has a depth aspect
+      const hasDepthAspect = true;
+      if (hasDepthAspect) {
+        depthStencilAttachment.depthLoadOp = this.props.clearDepth !== false ? 'clear' : 'load';
+        depthStencilAttachment.depthStoreOp = 'store'; // TODO - support 'discard'?
+      }
+
+      // WebGPU only wants us to set these parameters if the texture format actually has a stencil aspect
+      const hasStencilAspect = false;
+      if (hasStencilAspect) {
+        depthStencilAttachment.stencilLoadOp = this.props.clearStencil !== false ? 'clear' : 'load';
+        depthStencilAttachment.stencilStoreOp = 'store'; // TODO - support 'discard'?
+      }
+    }
+
+    return renderPassDescriptor;
+  }
 }

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

@@ -1,5 +1,7 @@
-import type {Binding, RenderPass} from '@luma.gl/api';
-import {Buffer, RenderPipeline, RenderPipelineProps, cast, log, isObjectEmpty} from '@luma.gl/api';
+// luma.gl MIT license
+
+import type {TypedArray, Binding, UniformValue, RenderPass} from '@luma.gl/core';
+import {Buffer, RenderPipeline, RenderPipelineProps, cast, log, isObjectEmpty} from '@luma.gl/core';
 import {applyParametersToRenderPipelineDescriptor} from '../helpers/webgpu-parameters';
 import {getWebGPUTextureFormat} from '../helpers/convert-texture-format';
 import {getBindGroup} from '../helpers/get-bind-group';
@@ -8,49 +10,52 @@ import {getVertexBufferLayout, getBufferSlots} from '../helpers/get-vertex-buffe
 // import {mapAccessorToWebGPUFormat} from './helpers/accessor-to-format';
 // import type {BufferAccessors} from './webgpu-pipeline';
 
-import type WebGPUDevice from '../webgpu-device';
-import type WebGPUBuffer from './webgpu-buffer';
-import type WebGPUShader from './webgpu-shader';
-import type WebGPURenderPass from './webgpu-render-pass';
+import type {WebGPUDevice} from '../webgpu-device';
+import type {WebGPUBuffer} from './webgpu-buffer';
+import type {WebGPUShader} from './webgpu-shader';
+import type {WebGPURenderPass} from './webgpu-render-pass';
 
 // RENDER PIPELINE
 
 /** Creates a new render pipeline when parameters change */
-export default class WebGPURenderPipeline extends RenderPipeline {
+export class WebGPURenderPipeline extends RenderPipeline {
   device: WebGPUDevice;
   handle: GPURenderPipeline;
 
+  vs: WebGPUShader;
+  fs: WebGPUShader | null = null;
+
   private _bufferSlots: Record<string, number>;
   private _buffers: Buffer[];
-  private _indexBuffer: WebGPUBuffer;
+  private _indexBuffer: WebGPUBuffer | null = null;
   // private _firstIndex: number;
   // private _lastIndex: number;
 
   /** For internal use to create BindGroups */
-  private _bindGroupLayout: GPUBindGroupLayout;
-  private _bindGroup: GPUBindGroup = null;
+  private _bindGroupLayout: GPUBindGroupLayout | null = null;
+  private _bindGroup: GPUBindGroup | null = null;
 
   constructor(device: WebGPUDevice, props: RenderPipelineProps) {
     super(device, props);
     this.device = device;
-    this.handle = (this.props.handle as GPURenderPipeline) || this.createHandle();
+    this.handle = this.props.handle as GPURenderPipeline;
+    if (!this.handle) {
+      const descriptor = this._getRenderPipelineDescriptor();
+      log.groupCollapsed(1, `new WebGPURenderPipeline(${this.id})`)();
+      log.probe(1, JSON.stringify(descriptor, null, 2))();
+      log.groupEnd(1)();
+      this.handle = this.device.handle.createRenderPipeline(descriptor);  
+    }
     this.handle.label = this.props.id;
 
-    this._bufferSlots = getBufferSlots(this.props.layout, this.props.bufferMap);
-    this._buffers = new Array<Buffer>(Object.keys(this._bufferSlots).length).fill(null);
-    this._bindGroupLayout = this.handle.getBindGroupLayout(0);
-  }
+    this.vs = cast<WebGPUShader>(props.vs);
+    this.fs = cast<WebGPUShader>(props.fs);
 
-  protected createHandle(): GPURenderPipeline {
-    const descriptor = this._getRenderPipelineDescriptor();
-    const renderPipeline = this.device.handle.createRenderPipeline(descriptor);
-    log.groupCollapsed(1, `new WebGPRenderPipeline(${this.id})`)();
-    log.log(1, JSON.stringify(descriptor, null, 2))();
-    log.groupEnd(1)();
-    return renderPipeline;
+    this._bufferSlots = getBufferSlots(this.props.shaderLayout, this.props.bufferLayout);
+    this._buffers = new Array<Buffer>(Object.keys(this._bufferSlots).length).fill(null);
   }
 
-  destroy() {
+  override destroy(): void {
     // WebGPURenderPipeline has no destroy method.
   }
 
@@ -77,21 +82,29 @@ export default class WebGPURenderPipeline extends RenderPipeline {
     // }
   }
 
-  /** Set the bindings */
+  setConstantAttributes(attributes: Record<string, TypedArray>): void {
+    throw new Error('not implemented');
+  }
+
   setBindings(bindings: Record<string, Binding>): void {
     if (!isObjectEmpty(this.props.bindings)) {
+      // Do we want to save things on CPU side?
       Object.assign(this.props.bindings, bindings);
+
+      // 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 = getBindGroup(
         this.device.handle,
         this._bindGroupLayout,
-        this.props.layout,
+        this.props.shaderLayout,
         this.props.bindings
       );
     }
   }
 
-  setUniforms(uniforms: Record<string, any>): void {
+  setUniforms(uniforms: Record<string, UniformValue>): void {
     if (!isObjectEmpty(uniforms)) {
       throw new Error('WebGPU does not support uniforms');
     }
@@ -107,13 +120,15 @@ export default class WebGPURenderPipeline extends RenderPipeline {
     return this._bindGroup;
   }
 
-  /** Populate the complex WebGPU GPURenderPipelineDescriptor */
+  /** 
+   * Populate the complex WebGPU GPURenderPipelineDescriptor 
+   */
   protected _getRenderPipelineDescriptor() {
     // Set up the vertex stage
     const vertex: GPUVertexState = {
       module: cast<WebGPUShader>(this.props.vs).handle,
       entryPoint: this.props.vsEntryPoint || 'main',
-      buffers: getVertexBufferLayout(this.props.layout, this.props.bufferMap)
+      buffers: getVertexBufferLayout(this.props.shaderLayout, this.props.bufferLayout)
     };
 
     // Set up the fragment stage
@@ -124,19 +139,29 @@ export default class WebGPURenderPipeline extends RenderPipeline {
         entryPoint: this.props.fsEntryPoint || 'main',
         targets: [
           {
-            format: getWebGPUTextureFormat(this.device.canvasContext.format)
+            // TODO exclamation mark hack!
+            format: getWebGPUTextureFormat(this.device?.canvasContext?.format)
           }
         ]
       };
     }
 
+    // WebGPU has more restrictive topology support than WebGL
+    switch (this.props.topology) {
+      case 'triangle-fan-webgl':
+      case 'line-loop-webgl':
+        throw new Error(`WebGPU does not support primitive topology ${this.props.topology}`);
+      default:
+    }
+
     // Create a partially populated descriptor
-    let descriptor: GPURenderPipelineDescriptor = {
+    const descriptor: GPURenderPipelineDescriptor = {
       vertex,
       fragment,
       primitive: {
         topology: this.props.topology
-      }
+      },
+      layout: 'auto'
     };
 
     // Set parameters on the descriptor
@@ -155,15 +180,16 @@ export default class WebGPURenderPipeline extends RenderPipeline {
     firstInstance?: number;
     baseVertex?: number;
   }): void {
-    const webgpuRenderPass =
+    const webgpuRenderPass: WebGPURenderPass =
       cast<WebGPURenderPass>(options.renderPass) || this.device.getDefaultRenderPass();
 
     // Set pipeline
     webgpuRenderPass.handle.setPipeline(this.handle);
 
     // Set bindings (uniform buffers, textures etc)
-    if (this._getBindGroup()) {
-      webgpuRenderPass.handle.setBindGroup(0, this._getBindGroup());
+    const bindGroup = this._getBindGroup();
+    if (bindGroup) {
+      webgpuRenderPass.handle.setBindGroup(0, bindGroup);
     }
 
     // Set attributes
@@ -180,9 +206,8 @@ export default class WebGPURenderPipeline extends RenderPipeline {
       );
     } else {
       webgpuRenderPass.handle.draw(
-        options.vertexCount,
-        options.instanceCount,
-        options.firstIndex,
+        options.vertexCount || 0,
+        options.instanceCount || 1, // If 0, nothing will be drawn
         options.firstInstance
       );
     }
@@ -197,7 +222,7 @@ export default class WebGPURenderPipeline extends RenderPipeline {
     for (let i = 0; i < buffers.length; ++i) {
       const buffer = cast<WebGPUBuffer>(buffers[i]);
       if (!buffer) {
-        const attribute = this.props.layout.attributes.find(
+        const attribute = this.props.shaderLayout.attributes.find(
           (attribute) => attribute.location === i
         );
         throw new Error(
@@ -209,7 +234,7 @@ export default class WebGPURenderPipeline extends RenderPipeline {
 
     // TODO - HANDLE buffer maps
     /*
-    for (const [bufferName, attributeMapping] of Object.entries(this.props.bufferMap)) {
+    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}`)();

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

@@ -1,5 +1,5 @@
-import {Sampler, SamplerProps} from '@luma.gl/api';
-import type WebGPUDevice from '../webgpu-device';
+import {Sampler, SamplerProps} from '@luma.gl/core';
+import type {WebGPUDevice} from '../webgpu-device';
 
 export type WebGPUSamplerProps = SamplerProps & {
   handle?: GPUSampler;
@@ -8,18 +8,25 @@ export type WebGPUSamplerProps = SamplerProps & {
 /**
  *
  */
-export default class WebGPUSampler extends Sampler {
+export class WebGPUSampler extends Sampler {
   readonly device: WebGPUDevice;
   readonly handle: GPUSampler;
 
   constructor(device: WebGPUDevice, props: WebGPUSamplerProps) {
     super(device, props);
     this.device = device;
-    this.handle = this.handle || this.device.handle.createSampler(this.props);
+
+    // Prepare sampler props
+    const samplerProps: Partial<WebGPUSamplerProps> = {...this.props};
+    if (samplerProps.type !== 'comparison-sampler') {
+      delete samplerProps.compare;
+    }
+
+    this.handle = this.handle || this.device.handle.createSampler(samplerProps);
     this.handle.label = this.props.id;
   }
 
-  destroy(): void {
+  override destroy(): void {
     // this.handle.destroy();
   }
 }