@luma.gl/webgpu 9.0.0-alpha.34 → 9.0.0-alpha.36

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

@@ -32,13 +32,20 @@ export class WebGPURenderPipeline extends RenderPipeline {
   // 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);
@@ -46,16 +53,6 @@ export class WebGPURenderPipeline extends RenderPipeline {
 
     this._bufferSlots = getBufferSlots(this.props.shaderLayout, this.props.bufferLayout);
     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;
   }
 
   override destroy(): void {
@@ -91,7 +88,12 @@ export class WebGPURenderPipeline extends RenderPipeline {
 
   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,
@@ -118,7 +120,9 @@ export 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 = {
@@ -203,8 +207,7 @@ export class WebGPURenderPipeline extends RenderPipeline {
     } else {
       webgpuRenderPass.handle.draw(
         options.vertexCount || 0,
-        options.instanceCount,
-        options.firstIndex,
+        options.instanceCount || 1, // If 0, nothing will be drawn
         options.firstInstance
       );
     }

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

@@ -47,7 +47,7 @@ export class WebGPUShader extends Shader {
 
     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';
     }

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

@@ -45,6 +45,13 @@ export class WebGPUTexture extends Texture {
 
     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);

package/src/adapter/resources/webgpu-vertex-array.ts

@@ -0,0 +1,73 @@
+// luma.gl, MIT license
+
+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 location in vertex attributes array to a buffer, enables the location, sets divisor */
+  setBuffer(location: number, buffer: Buffer): void {
+    // Sanity check target
+    // if (buffer.glUsage === GL.ELEMENT_ARRAY_BUFFER) {
+    //   throw new Error('Use setIndexBuffer');
+    // }
+
+    this.attributes[location] = 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;
+    webgpuRenderPass.handle.setIndexBuffer(webgpuIndexBuffer?.handle, webgpuIndexBuffer?.indexType);
+    for (let location = 0; location < this.maxVertexAttributes; location++) {
+      const webgpuBuffer = this.attributes[location] as WebGPUBuffer;
+      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 unbind
+  }
+}

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

@@ -1,18 +1,23 @@
+// / <reference types="@webgpu/types" />
 import type {Texture, TextureFormat, CanvasContextProps} from '@luma.gl/core';
 import {CanvasContext, log} from '@luma.gl/core';
 import {getWebGPUTextureFormat} from './helpers/convert-texture-format';
 import {WebGPUDevice} from './webgpu-device';
 import {WebGPUFramebuffer} from './resources/webgpu-framebuffer';
+import {WebGPUTexture} from './resources/webgpu-texture';
 
 /** 
- * Holds a WebGPU Canvas Context which handles resizing etc 
+ * Holds a WebGPU Canvas Context
+ * The primary job of the CanvasContext is to generate textures for rendering into the current canvas
+ * It also manages canvas sizing calculations and resizing.
  */
 export class WebGPUCanvasContext extends CanvasContext {
   readonly device: WebGPUDevice;
   readonly gpuCanvasContext: GPUCanvasContext;
-  readonly format: TextureFormat;
+  /** Format of returned textures: "bgra8unorm", "rgba8unorm", "rgba16float". */
+  readonly format: TextureFormat = navigator.gpu.getPreferredCanvasFormat();
+  /** Default stencil format for depth textures */
   depthStencilFormat: TextureFormat = 'depth24plus';
-  sampleCount: number = 1;
 
   private depthStencilAttachment: Texture | null = null;
 
@@ -22,31 +27,46 @@ export class WebGPUCanvasContext extends CanvasContext {
     // TODO - hack to trigger resize?
     this.width = -1;
     this.height = -1;
-  
+
     this._setAutoCreatedCanvasId(`${this.device.id}-canvas`);
     // @ts-ignore TODO - we don't handle OffscreenRenderingContext.
-    this.gpuCanvasContext = this.canvas.getContext('webgpu') ;
-    // @ts-expect-error TODO this has been replaced
-    this.format = this.gpuCanvasContext.getPreferredFormat(adapter);
+    this.gpuCanvasContext = this.canvas.getContext('webgpu');
+    // TODO this has been replaced
+    // this.format = this.gpuCanvasContext.getPreferredFormat(adapter);
+    this.format = 'bgra8unorm';
   }
 
+  /** Destroy any textures produced while configured and remove the context configuration. */
   destroy(): void {
     this.gpuCanvasContext.unconfigure();
   }
 
+  getCurrentTexture(): WebGPUTexture {
+    // Wrap the current canvas context texture in a luma.gl texture 
+    return this.device._createTexture({
+      id: 'default-render-target',
+      handle: this.gpuCanvasContext.getCurrentTexture()
+    });
+  }
+
   /** Update framebuffer with properly resized "swap chain" texture views */
   getCurrentFramebuffer(): WebGPUFramebuffer {
     // Ensure the canvas context size is updated
     this.update();
 
+    // Wrap the current canvas context texture in a luma.gl texture
+    // const currentColorAttachment = this.device.createTexture({
+    //   id: 'default-render-target',
+    //   handle: this.gpuCanvasContext.getCurrentTexture(),
+    //   format: this.format,
+    //   width: this.width,
+    //   height: this.height
+    // });
+
     // Wrap the current canvas context texture in a luma.gl texture 
-    const currentColorAttachment = this.device.createTexture({
-      id: 'default-render-target',
-      handle: this.gpuCanvasContext.getCurrentTexture(),
-      format: this.format,
-      width: this.width,
-      height: this.height
-    });
+    const currentColorAttachment = this.getCurrentTexture();
+    this.width = currentColorAttachment.width;
+    this.height = currentColorAttachment.height;
 
     // Resize the depth stencil attachment
     this._createDepthStencilAttachment();
@@ -77,14 +97,14 @@ export class WebGPUCanvasContext extends CanvasContext {
       this.gpuCanvasContext.configure({
         device: this.device.handle,
         format: getWebGPUTextureFormat(this.format),
-        // size: [this.width, this.height],
+        // Can be used to define e.g. -srgb views
+        // viewFormats: [...]
         colorSpace: this.props.colorSpace,
         alphaMode: this.props.alphaMode
       });
 
       log.log(1, `Resized to ${this.width}x${this.height}px`)();
     }
-
   }
 
   resize(options?: {width?: number; height?: number; useDevicePixels?: boolean | number}): void {

package/src/adapter/webgpu-device.ts

@@ -19,7 +19,8 @@ import type {
   ComputePipelineProps,
   RenderPassProps,
   ComputePassProps,
-  // CommandEncoderProps
+  // CommandEncoderProps,
+  VertexArrayProps
 } from '@luma.gl/core';
 import {Device, CanvasContext, log, uid} from '@luma.gl/core';
 import {WebGPUBuffer} from './resources/webgpu-buffer';
@@ -33,6 +34,7 @@ import {WebGPUComputePipeline} from './resources/webgpu-compute-pipeline';
 import {WebGPURenderPass} from './resources/webgpu-render-pass';
 import {WebGPUComputePass} from './resources/webgpu-compute-pass';
 // import {WebGPUCommandEncoder} from './resources/webgpu-command-encoder';
+import {WebGPUVertexArray} from './resources/webgpu-vertex-array';
 
 import {WebGPUCanvasContext} from './webgpu-canvas-context';
 // import {loadGlslangModule} from '../glsl/glslang';
@@ -105,7 +107,7 @@ export class WebGPUDevice extends Device {
       renderer: '',
       version: '',
       gpu: 'unknown', // 'nvidia' | 'amd' | 'intel' | 'apple' | 'unknown',
-      shadingLanguages: ['glsl', 'wgsl'],
+      shadingLanguages: ['wgsl'],
       shadingLanguageVersions: {
         glsl: '450',
         wgsl: '100'
@@ -122,9 +124,9 @@ export class WebGPUDevice extends Device {
     });
 
     // Note: WebGPU devices can be created without a canvas, for compute shader purposes
-    if (props.canvas) {
-      this.canvasContext = new WebGPUCanvasContext(this, this.adapter, {canvas: props.canvas});
-    }
+    // if (props.canvas) {
+    this.canvasContext = new WebGPUCanvasContext(this, this.adapter, {canvas: props.canvas});
+    // }
 
     this.features = this._getFeatures();
   }
@@ -199,6 +201,10 @@ export class WebGPUDevice extends Device {
     return new WebGPUComputePipeline(this, props);
   }
 
+  createVertexArray(props: VertexArrayProps): WebGPUVertexArray {
+    return new WebGPUVertexArray(this, props);
+  }
+
   // WebGPU specifics
 
   /**
@@ -227,24 +233,26 @@ export class WebGPUDevice extends Device {
    * 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;
+    // this.renderPass =
+    //   this.renderPass ||
+    //   this.beginRenderPass({
+    //     framebuffer: this.canvasContext?.getCurrentFramebuffer()
+    //   });
+    // return this.renderPass;
+    throw new Error('a');
   }
 
   submit(): void {
-    this.renderPass?.end();
+    // this.renderPass?.end();
     const commandBuffer = this.commandEncoder?.finish();
     if (commandBuffer) {
       this.handle.queue.submit([commandBuffer]);
     }
     this.commandEncoder = null;
-    this.renderPass = null;
+    // this.renderPass = null;
   }
 
   _getFeatures() {