@luma.gl/webgpu 9.0.0-alpha.10

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

@@ -0,0 +1,43 @@
+/*
+import {Resource, Query, QueryProps} from '@luma.gl/api';
+import WebGPUDevice from '../webgpu-device';
+
+export type WebGPUQueryProps = QueryProps & {
+  handle?: any;
+};
+
+const DEFAULT_QUERY_PROPS: Required<WebGPUQueryProps> = {
+  id: undefined,
+  handle: undefined,
+  userData: undefined,
+  type: 'timestamp',
+  count: 1,
+  pipelineStatistics: []
+};
+
+/**
+ * Immutable
+ *
+class WebGPUQuery extends Resource<WebGPUQueryProps> implements Query {
+  readonly device: WebGPUDevice;
+  readonly handle: GPUQuerySet;
+
+  constructor(device: WebGPUDevice, props: WebGPUQueryProps) {
+    super(device, props, DEFAULT_QUERY_PROPS);
+    this.handle = this.props.handle as GPUQuerySet || this.createHandle();
+    this.handle.label = this.props.id;
+  }
+
+  protected createHandle() {
+    return this.device.handle.createQuerySet({
+      type: this.props.type,
+      count: this.props.count,
+      pipelineStatistics: this.props.pipelineStatistics
+    });
+  }
+
+  destroy() {
+    this.handle.destroy();
+  }
+}
+*/

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

@@ -0,0 +1,131 @@
+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 {
+  readonly device: WebGPUDevice;
+  readonly handle: GPURenderPassEncoder;
+
+  /** Active pipeline */
+  pipeline: WebGPURenderPipeline | null = null;
+
+  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;
+    this.handle = this.props.handle || device.commandEncoder.beginRenderPass(renderPassDescriptor);
+    this.handle.label = this.props.id;
+  }
+
+  destroy() {}
+
+  endPass(): void {
+    this.handle.endPass();
+  }
+
+  setPipeline(pipeline: RenderPipeline): void {
+    this.pipeline = cast<WebGPURenderPipeline>(pipeline);
+    this.handle.setPipeline(this.pipeline.handle);
+  }
+
+  /** Sets an array of bindings (uniform buffers, samplers, textures, ...) */
+  setBindings(bindings: Record<string, Binding>): void {
+    this.pipeline?.setBindings(bindings);
+    const bindGroup = this.pipeline?._getBindGroup();
+    if (bindGroup) {
+      this.handle.setBindGroup(0, bindGroup);
+    }
+  }
+
+  setIndexBuffer(
+    buffer: Buffer,
+    indexFormat: GPUIndexFormat,
+    offset: number = 0,
+    size?: number
+  ): void {
+    this.handle.setIndexBuffer(cast<WebGPUBuffer>(buffer).handle, indexFormat, offset, size);
+  }
+
+  setVertexBuffer(slot: number, buffer: Buffer, offset: number = 0): void {
+    this.handle.setVertexBuffer(slot, cast<WebGPUBuffer>(buffer).handle, offset);
+  }
+
+  draw(options: {
+    vertexCount?: number;
+    indexCount?: number;
+    instanceCount?: number;
+    firstVertex?: number;
+    firstIndex?: number;
+    firstInstance?: number;
+    baseVertex?: number;
+  }): void {
+    if (options.indexCount) {
+      this.handle.drawIndexed(
+        options.indexCount,
+        options.instanceCount,
+        options.firstIndex,
+        options.baseVertex,
+        options.firstInstance
+      );
+    } else {
+      this.handle.draw(
+        options.vertexCount || 0,
+        options.instanceCount,
+        options.firstIndex,
+        options.firstInstance
+      );
+    }
+  }
+
+  drawIndirect(): void {
+    // drawIndirect(indirectBuffer: GPUBuffer, indirectOffset: number): void;
+    // drawIndexedIndirect(indirectBuffer: GPUBuffer, indirectOffset: number): void;
+  }
+
+  setParameters(parameters: RenderPassParameters): void {
+    const {blendConstant, stencilReference, scissorRect, viewport} = parameters;
+    if (blendConstant) {
+      this.handle.setBlendConstant(blendConstant);
+    }
+    if (stencilReference) {
+      this.handle.setStencilReference(stencilReference);
+    }
+    if (scissorRect) {
+      this.handle.setScissorRect(scissorRect[0], scissorRect[1], scissorRect[2], scissorRect[3]);
+    }
+    // TODO - explain how 3 dimensions vs 2 in WebGL works.
+    if (viewport) {
+      this.handle.setViewport(
+        viewport[0],
+        viewport[1],
+        viewport[2],
+        viewport[3],
+        viewport[4],
+        viewport[5]
+      );
+    }
+  }
+
+  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;
+  // beginOcclusionQuery(queryIndex: number): void;
+  // endOcclusionQuery(): void;
+  // beginPipelineStatisticsQuery(querySet: GPUQuerySet, queryIndex: number): void;
+  // endPipelineStatisticsQuery(querySet: GPUQuerySet, queryIndex: number): void;
+
+  // executeBundles(bundles: Iterable<GPURenderBundle>): void;
+}

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

@@ -0,0 +1,246 @@
+import type {Binding, RenderPass, Shader} from '@luma.gl/api';
+import {Buffer, RenderPipeline, RenderPipelineProps, cast, log, isObjectEmpty} from '@luma.gl/api';
+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 {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';
+
+// RENDER PIPELINE
+
+/** Creates a new render pipeline when parameters change */
+export default 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 _firstIndex: number;
+  // private _lastIndex: number;
+
+  /** For internal use to create BindGroups */
+  private _bindGroupLayout: GPUBindGroupLayout;
+  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.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;
+  }
+
+  destroy() {
+    // WebGPURenderPipeline has no destroy method.
+  }
+
+  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
+    //   }
+    // }
+  }
+
+  /** 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
+      );
+    }
+  }
+
+  setUniforms(uniforms: Record<string, any>): void {
+    if (!isObjectEmpty(uniforms)) {
+      throw new Error('WebGPU does not support uniforms');
+    }
+  }
+
+  _getBuffers() {
+    return this._buffers;
+  }
+
+  /** Return a bind group created by setBindings */
+  _getBindGroup() {
+    // assert(this._bindGroup);
+    return this._bindGroup;
+  }
+
+  /** 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)
+    };
+
+    // 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!)
+          }
+        ]
+      };
+    }
+
+    // WebGPU has more restrictive topology support than WebGL
+    switch (this.props.topology) {
+      case 'triangle-fan':
+      case 'line-loop':
+        throw new Error(`WebGPU does not support primitive topology ${this.props.topology}`);
+      default:
+    }
+
+    // Create a partially populated descriptor
+    let descriptor: GPURenderPipelineDescriptor = {
+      vertex,
+      fragment,
+      primitive: {
+        topology: this.props.topology
+      }
+    };
+
+    // Set parameters on the descriptor
+    applyParametersToRenderPipelineDescriptor(descriptor, this.props.parameters);
+
+    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);
+    }
+
+    const buffers = this._getBuffers();
+    for (let i = 0; i < buffers.length; ++i) {
+      const buffer = cast<WebGPUBuffer>(buffers[i]);
+      if (!buffer) {
+        const attribute = this.props.layout.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.bufferMap)) {
+      const buffer = cast<WebGPUBuffer>(this.props.attributes[bufferName]);
+      if (!buffer) {
+        log.warn(`Missing buffer for buffer map ${bufferName}`)();
+        continue;
+      }
+
+      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(field.location, buffer.handle);
+        }
+      }
+    }
+    */
+  }
+}

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

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

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

@@ -0,0 +1,72 @@
+import type {ShaderProps, CompilerMessage} from '@luma.gl/api';
+import {Shader, log} from '@luma.gl/api';
+import type WebGPUDevice from '../webgpu-device';
+
+export type WebGPUShaderProps = ShaderProps & {
+  handle?: GPUShaderModule;
+};
+
+/**
+ * Immutable shader
+ */
+export default class WebGPUShader extends Shader {
+  readonly device: WebGPUDevice;
+  readonly handle: GPUShaderModule;
+
+  constructor(device: WebGPUDevice, props: WebGPUShaderProps) {
+    super(device, props);
+    this.device = device;
+
+    this.device.handle.pushErrorScope('validation');
+
+    this.handle = this.props.handle || this.createHandle();
+    this.handle.label = this.props.id;
+
+    this._checkCompilationError(this.device.handle.popErrorScope());
+  }
+
+  async _checkCompilationError(errorScope: Promise<GPUError>): Promise<void> {
+    const error = await errorScope as GPUValidationError;
+    if (error) {
+      const shaderLog = await this.compilationInfo();
+      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
+      throw new Error(`Shader compilation error: ${error.message}`);
+    }
+  }
+
+  destroy() {
+    // this.handle.destroy();
+  }
+
+  protected createHandle(): GPUShaderModule {
+    const {source} = this.props;
+
+    let language = this.props.language;
+    // Compile from src
+    if (!language) {
+      // wgsl uses C++ "auto" style arrow notation
+      language = source.includes('->') ? 'wgsl' : 'glsl';
+    }
+
+    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, type)
+        });
+      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;
+  }
+}