@luma.gl/webgpu 9.0.0-alpha.9 → 9.0.0-beta.2

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

@@ -1,69 +1,68 @@
-import type {Binding, RenderPass, Shader} from '@luma.gl/api';
-import {Buffer, RenderPipeline, RenderPipelineProps, cast, log, isObjectEmpty} from '@luma.gl/api';
+// luma.gl MIT license
+
+import type {Binding, UniformValue, RenderPass, VertexArray} from '@luma.gl/core';
+import {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';
-import {getVertexBufferLayout, getBufferSlots} from '../helpers/get-vertex-buffer-layout';
+import {getVertexBufferLayout} from '../helpers/get-vertex-buffer-layout';
 // import {convertAttributesVertexBufferToLayout} from '../helpers/get-vertex-buffer-layout';
 // 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 | null = null;
+  // private _bufferSlots: Record<string, number>;
+  // private _buffers: Buffer[];
   // private _firstIndex: number;
   // private _lastIndex: number;
 
   /** For internal use to create BindGroups */
-  private _bindGroupLayout: GPUBindGroupLayout;
+  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.vs = cast<WebGPUShader>(props.vs);
     this.fs = cast<WebGPUShader>(props.fs);
 
-    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);
-  }
-
-  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.
   }
 
-  setIndexBuffer(indexBuffer: Buffer): void {
-    this._indexBuffer = cast<WebGPUBuffer>(indexBuffer);
-  }
+  // 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];
@@ -82,44 +81,105 @@ export default class WebGPURenderPipeline extends RenderPipeline {
     //   }
     // }
   }
+  */
+
+  // setConstantAttributes(attributes: Record<string, TypedArray>): void {
+  //   throw new Error('not implemented');
+  // }
 
-  /** Set the bindings */
   setBindings(bindings: Record<string, Binding>): void {
-    if (!isObjectEmpty(this.props.bindings)) {
-      Object.assign(this.props.bindings, bindings);
-      // Set up the bindings
-      this._bindGroup = getBindGroup(
-        this.device.handle,
-        this._bindGroupLayout,
-        this.props.layout,
-        this.props.bindings
-      );
-    }
+    // if (isObjectEmpty(bindings)) {
+    //   return;
+    // }
+
+    // Do we want to save things on CPU side?
+    Object.assign(this.props.bindings, bindings);
   }
 
-  setUniforms(uniforms: Record<string, any>): void {
+  setUniforms(uniforms: Record<string, UniformValue>): void {
     if (!isObjectEmpty(uniforms)) {
       throw new Error('WebGPU does not support uniforms');
     }
   }
 
-  _getBuffers() {
-    return this._buffers;
+  draw(options: {
+    renderPass: RenderPass;
+    vertexArray: VertexArray;
+    vertexCount?: number;
+    indexCount?: number;
+    instanceCount?: number;
+    firstVertex?: number;
+    firstIndex?: number;
+    firstInstance?: number;
+    baseVertex?: number;
+  }): void {
+    const webgpuRenderPass: WebGPURenderPass =
+      cast<WebGPURenderPass>(options.renderPass) || this.device.getDefaultRenderPass();
+
+    // Set pipeline
+    webgpuRenderPass.handle.setPipeline(this.handle);
+
+    // Set bindings (uniform buffers, textures etc)
+    const bindGroup = this._getBindGroup();
+    if (bindGroup) {
+      webgpuRenderPass.handle.setBindGroup(0, bindGroup);
+    }
+
+
+    // Set attributes
+    // Note: Rebinds constant attributes before each draw call
+    options.vertexArray.bindBeforeRender(options.renderPass);
+
+    // Draw
+    if (options.indexCount) {
+      webgpuRenderPass.handle.drawIndexed(
+        options.indexCount,
+        options.instanceCount,
+        options.firstIndex,
+        options.baseVertex,
+        options.firstInstance
+      );
+    } else {
+      webgpuRenderPass.handle.draw(
+        options.vertexCount || 0,
+        options.instanceCount || 1, // If 0, nothing will be drawn
+        options.firstInstance
+      );
+    }
+
+    // Note: Rebinds constant attributes before each draw call
+    options.vertexArray.unbindAfterRender(options.renderPass);
   }
 
+  // _getBuffers() {
+  //   return this._buffers;
+  // }
+
   /** Return a bind group created by setBindings */
   _getBindGroup() {
-    // assert(this._bindGroup);
+    // 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.props.bindings
+    );
+
     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
@@ -131,7 +191,7 @@ export default class WebGPURenderPipeline extends RenderPipeline {
         targets: [
           {
             // TODO exclamation mark hack!
-            format: getWebGPUTextureFormat(this.device?.canvasContext?.format!)
+            format: getWebGPUTextureFormat(this.device?.canvasContext?.format)
           }
         ]
       };
@@ -139,19 +199,20 @@ export default class WebGPURenderPipeline extends RenderPipeline {
 
     // WebGPU has more restrictive topology support than WebGL
     switch (this.props.topology) {
-      case 'triangle-fan':
-      case 'line-loop':
+      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
@@ -160,49 +221,7 @@ export default class WebGPURenderPipeline extends RenderPipeline {
     return descriptor;
   }
 
-  draw(options: {
-    renderPass?: RenderPass;
-    vertexCount?: number;
-    indexCount?: number;
-    instanceCount?: number;
-    firstVertex?: number;
-    firstIndex?: number;
-    firstInstance?: number;
-    baseVertex?: number;
-  }): void {
-    const 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());
-    }
-
-    // Set attributes
-    this._setAttributeBuffers(webgpuRenderPass);
-
-    // Draw
-    if (options.indexCount) {
-      webgpuRenderPass.handle.drawIndexed(
-        options.indexCount,
-        options.instanceCount,
-        options.firstIndex,
-        options.baseVertex,
-        options.firstInstance
-      );
-    } else {
-      webgpuRenderPass.handle.draw(
-        options.vertexCount || 0,
-        options.instanceCount,
-        options.firstIndex,
-        options.firstInstance
-      );
-    }
-  }
-
+  /**
   _setAttributeBuffers(webgpuRenderPass: WebGPURenderPass) {
     if (this._indexBuffer) {
       webgpuRenderPass.handle.setIndexBuffer(this._indexBuffer.handle, this._indexBuffer.props.indexType);
@@ -212,7 +231,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(
@@ -224,7 +243,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}`)();
@@ -241,6 +260,7 @@ export default class WebGPURenderPipeline extends RenderPipeline {
         }
       }
     }
-    */
+    *
   }
+  */
 }

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,7 +8,7 @@ export type WebGPUSamplerProps = SamplerProps & {
 /**
  *
  */
-export default class WebGPUSampler extends Sampler {
+export class WebGPUSampler extends Sampler {
   readonly device: WebGPUDevice;
   readonly handle: GPUSampler;
 
@@ -17,16 +17,16 @@ export default class WebGPUSampler extends Sampler {
     this.device = device;
 
     // Prepare sampler props
-    const samplerProps = this.props;
+    const samplerProps: Partial<WebGPUSamplerProps> = {...this.props};
     if (samplerProps.type !== 'comparison-sampler') {
       delete samplerProps.compare;
     }
 
-    this.handle = this.handle || this.device.handle.createSampler(this.props);
+    this.handle = this.handle || this.device.handle.createSampler(samplerProps);
     this.handle.label = this.props.id;
   }
 
-  destroy(): void {
+  override destroy(): void {
     // this.handle.destroy();
   }
 }

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

@@ -1,6 +1,9 @@
-import type {ShaderProps, CompilerMessage} from '@luma.gl/api';
-import {Shader, log} from '@luma.gl/api';
-import type WebGPUDevice from '../webgpu-device';
+// luma.gl, MIT license
+// Copyright (c) vis.gl contributors
+
+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;
@@ -9,7 +12,7 @@ export type WebGPUShaderProps = ShaderProps & {
 /**
  * Immutable shader
  */
-export default class WebGPUShader extends Shader {
+export class WebGPUShader extends Shader {
   readonly device: WebGPUDevice;
   readonly handle: GPUShaderModule;
 
@@ -25,10 +28,13 @@ export default class WebGPUShader extends Shader {
     this._checkCompilationError(this.device.handle.popErrorScope());
   }
 
-  async _checkCompilationError(errorScope: Promise<GPUError>): Promise<void> {
+  async _checkCompilationError(errorScope: Promise<GPUError | null>): Promise<void> {
     const error = await errorScope as GPUValidationError;
     if (error) {
-      const shaderLog = await this.compilationInfo();
+      // The `Shader` base class will determine if debug window should be opened based on props
+      this.debugShader();
+
+      const shaderLog = await this.getCompilationInfo();
       log.error(`Shader compilation error: ${error.message}`, shaderLog)();
       // Note: Even though this error is asynchronous and thrown after the constructor completes,
       // it will result in a useful stack trace leading back to the constructor
@@ -36,16 +42,25 @@ export default class WebGPUShader extends Shader {
     }
   }
 
-  destroy() {
+  override destroy(): void {
+    // Note: WebGPU does not offer a method to destroy shaders
     // this.handle.destroy();
   }
 
+  /** Returns compilation info for this shader */
+  async getCompilationInfo(): Promise<readonly CompilerMessage[]> {
+    const compilationInfo = await this.handle.getCompilationInfo();
+    return compilationInfo.messages;
+  }
+
+  // PRIVATE METHODS
+
   protected createHandle(): GPUShaderModule {
-    const {source} = this.props;
+    const {source, stage} = this.props;
 
     let language = this.props.language;
     // Compile from src
-    if (!language) {
+    if (language === 'auto') {
       // wgsl uses C++ "auto" style arrow notation
       language = source.includes('->') ? 'wgsl' : 'glsl';
     }
@@ -57,16 +72,10 @@ export default class WebGPUShader extends Shader {
         return this.device.handle.createShaderModule({
           code: source,
           // @ts-expect-error
-          transform: (glsl) => this.device.glslang.compileGLSL(glsl, type)
+          transform: (glsl) => this.device.glslang.compileGLSL(glsl, stage)
         });
       default:
         throw new Error(language);
     }
   }
-
-  /** Returns compilation info for this shader */
-  async compilationInfo(): Promise<readonly CompilerMessage[]> {
-    const compilationInfo = await this.handle.compilationInfo();
-    return compilationInfo.messages;
-  }
 }

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

@@ -1,8 +1,8 @@
 // luma.gl, MIT license
-import {Texture, TextureProps, Sampler, SamplerProps, assert} from '@luma.gl/api';
+import {Texture, TextureProps, Sampler, SamplerProps} from '@luma.gl/core';
 import {getWebGPUTextureFormat} from '../helpers/convert-texture-format';
-import type WebGPUDevice from '../webgpu-device';
-import WebGPUSampler from './webgpu-sampler';
+import type {WebGPUDevice} from '../webgpu-device';
+import {WebGPUSampler} from './webgpu-sampler';
 
 const BASE_DIMENSIONS: Record<string, '1d' | '2d' | '3d'> = {
   '1d': '1d',
@@ -13,11 +13,14 @@ const BASE_DIMENSIONS: Record<string, '1d' | '2d' | '3d'> = {
   '3d': '3d'
 };
 
-export default class WebGPUTexture extends Texture {
+export class WebGPUTexture extends Texture {
   readonly device: WebGPUDevice;
   readonly handle: GPUTexture;
   readonly view: GPUTextureView;
-  sampler: WebGPUSampler = null;
+  sampler: WebGPUSampler;
+
+  override height: number = 1;
+  override width: number = 1;
 
   // static async createFromImageURL(src, usage = 0) {
   //   const img = document.createElement('img');
@@ -29,39 +32,57 @@ export default class WebGPUTexture extends Texture {
   constructor(device: WebGPUDevice, props: TextureProps) {
     super(device, props);
 
-    if (typeof this.props.format === 'number') {
-      throw new Error('number format');
+    this.device = device;
+
+    if (props.data instanceof Promise) {
+      props.data.then(resolvedImageData => {
+        // @ts-expect-error
+        this.props = {...props, data: resolvedImageData};
+        this.initialize(this.props);
+      });
+      return;
     }
 
-    this.device = device;
+    this.initialize(props);
+  }
+
+  protected initialize(props: TextureProps): void {
+    // @ts-expect-error
     this.handle = this.props.handle || this.createHandle();
+    this.handle.label ||= this.id;
 
     if (this.props.data) {
-      this.setData({data: this.props.data}  );
+      this.setData({data: this.props.data});
     }
 
+    this.width = this.handle.width;
+    this.height = this.handle.height;
+    // Why not just read all properties directly from the texture
+    // this.depthOrArrayLayers = this.handle.depthOrArrayLayers;
+    // this.mipLevelCount = this.handle.mipLevelCount;
+    // this.sampleCount = this.handle.sampleCount;
+    // this.dimension = this.handle.dimension;
+    // this.format = this.handle.format;
+    // this.usage = this.handle.usage;
+
     // Create a default sampler. This mimics the WebGL1 API where sampler props are stored on the texture
     // this.setSampler(props.sampler);
     this.sampler = props.sampler instanceof WebGPUSampler ? props.sampler : new WebGPUSampler(this.device, props.sampler);
 
     // TODO - To support texture arrays we need to create custom views...
     // But we are not ready to expose TextureViews to the public API.
-    this.view = this.handle.createView({
-      // format: this.props.format,
-      // dimension: this.props.dimension,
-      // aspect = "all";
-      // baseMipLevel: 0;
-      // mipLevelCount;
-      // baseArrayLayer = 0;
-      // arrayLayerCount;
-    });
+    // @ts-expect-error
+    this.view = this.createView();
+    // format: this.props.format,
+    // dimension: this.props.dimension,
+    // aspect = "all";
+    // baseMipLevel: 0;
+    // mipLevelCount;
+    // baseArrayLayer = 0;
+    // arrayLayerCount;
   }
 
   protected createHandle(): GPUTexture {
-    if (typeof this.props.format === 'number') {
-      throw new Error('number format');
-    }
-
     // Deduce size from data - TODO this is a hack
     // @ts-expect-error
     const width = this.props.width || this.props.data?.width || 1;
@@ -69,6 +90,7 @@ export default class WebGPUTexture extends Texture {
     const height = this.props.height || this.props.data?.height || 1;
 
     return this.device.handle.createTexture({
+      label: this.id,
       size: {
         width,
         height,
@@ -82,7 +104,7 @@ export default class WebGPUTexture extends Texture {
     });
   }
 
-  destroy(): void {
+  override destroy(): void {
     this.handle.destroy();
   }
 
@@ -116,7 +138,7 @@ export default class WebGPUTexture extends Texture {
     aspect?: 'all' | 'stencil-only' | 'depth-only';
     colorSpace?: 'srgb';
     premultipliedAlpha?: boolean;
-  }): this {
+  }): {width: number, height: number} {
     const {
       source,
       width = options.source.width,
@@ -157,9 +179,16 @@ export default class WebGPUTexture extends Texture {
         depth
       ]
     );
-    return this;
+    return {width, height};
   }
 
+  // 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/resources/webgpu-vertex-array.ts

@@ -0,0 +1,83 @@
+// luma.gl, MIT license
+// Copyright (c) vis.gl contributors
+
+import type {Device, Buffer, VertexArrayProps, RenderPass, TypedArray} from '@luma.gl/core';
+import {VertexArray, log} from '@luma.gl/core';
+import {getBrowser} from '@probe.gl/env';
+
+import {WebGPUDevice} from '../webgpu-device';
+import {WebGPUBuffer} from '../resources/webgpu-buffer';
+
+import {WebGPURenderPass} from './webgpu-render-pass';
+
+/** VertexArrayObject wrapper */
+export class WebGPUVertexArray extends VertexArray {
+  override get [Symbol.toStringTag](): string {
+    return 'WebGPUVertexArray';
+  }
+
+  readonly device: WebGPUDevice;
+  /** Vertex Array is a helper class under WebGPU */
+  readonly handle: never;
+
+  /** * Attribute 0 can not be disable on most desktop OpenGL based browsers */
+  static isConstantAttributeZeroSupported(device: Device): boolean {
+    return device.info.type === 'webgl2' || getBrowser() === 'Chrome';
+  }
+
+  // Create a VertexArray
+  constructor(device: WebGPUDevice, props?: VertexArrayProps) {
+    super(device, props);
+    this.device = device;
+  }
+
+  override destroy(): void {}
+
+  /**
+   * Set an elements buffer, for indexed rendering.
+   * Must be a Buffer bound to buffer with usage bit Buffer.INDEX set. 
+   */
+  setIndexBuffer(buffer: Buffer | null): void {
+    // assert(!elementBuffer || elementBuffer.glTarget === GL.ELEMENT_ARRAY_BUFFER, ERR_ELEMENTS);
+    this.indexBuffer = buffer;
+  }
+
+  /** Set a bufferSlot in vertex attributes array to a buffer, enables the bufferSlot, sets divisor */
+  setBuffer(bufferSlot: number, buffer: Buffer): void {
+    // Sanity check target
+    // if (buffer.glUsage === GL.ELEMENT_ARRAY_BUFFER) {
+    //   throw new Error('Use setIndexBuffer');
+    // }
+
+    this.attributes[bufferSlot] = buffer;
+  }
+
+  /** Set a location in vertex attributes array to a constant value, disables the location */
+  override setConstant(location: number, value: TypedArray): void {
+    log.warn(`${this.id} constant attributes not supported on WebGPU`)
+  }
+
+  override bindBeforeRender(renderPass: RenderPass, firstIndex?: number, indexCount?: number): void {
+    const webgpuRenderPass = renderPass as WebGPURenderPass;
+    const webgpuIndexBuffer = this.indexBuffer as WebGPUBuffer;
+    if (webgpuIndexBuffer?.handle) {
+      // Note we can't unset an index buffer
+      log.warn('setting index buffer', webgpuIndexBuffer?.handle, webgpuIndexBuffer?.indexType)();
+      webgpuRenderPass.handle.setIndexBuffer(webgpuIndexBuffer?.handle, webgpuIndexBuffer?.indexType);
+    }
+    for (let location = 0; location < this.maxVertexAttributes; location++) {
+      const webgpuBuffer = this.attributes[location] as WebGPUBuffer;
+      if (webgpuBuffer?.handle) {
+        log.warn(`setting vertex buffer ${location}`,webgpuBuffer?.handle)();
+        webgpuRenderPass.handle.setVertexBuffer(location, webgpuBuffer?.handle);
+      }
+    }
+    // TODO - emit warnings/errors/throw if constants have been set on this vertex array
+  }
+
+  override unbindAfterRender(renderPass: RenderPass): void {
+    // On WebGPU we don't need to unbind. 
+    // In fact we can't easily do it. setIndexBuffer/setVertexBuffer don't accept null.
+    // Unbinding presumably happens automatically when the render pass is ended.
+  }
+}