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

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,7 +28,7 @@ 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();
@@ -36,16 +39,16 @@ export default class WebGPUShader extends Shader {
     }
   }
 
-  destroy() {
+  override destroy(): void {
     // this.handle.destroy();
   }
 
   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,7 +60,7 @@ 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);
@@ -66,7 +69,7 @@ export default class WebGPUShader extends Shader {
 
   /** Returns compilation info for this shader */
   async compilationInfo(): Promise<readonly CompilerMessage[]> {
-    const compilationInfo = await this.handle.compilationInfo();
+    const compilationInfo = await this.handle.getCompilationInfo();
     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,12 +13,15 @@ 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;
 
+  override height: number = 1;
+  override width: number = 1;
+
   // static async createFromImageURL(src, usage = 0) {
   //   const img = document.createElement('img');
   //   img.src = src;
@@ -40,8 +43,19 @@ export default class WebGPUTexture extends Texture {
       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.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.
@@ -81,7 +95,7 @@ export default class WebGPUTexture extends Texture {
     });
   }
 
-  destroy(): void {
+  override destroy(): void {
     this.handle.destroy();
   }
 
@@ -115,7 +129,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,
@@ -156,7 +170,7 @@ export default class WebGPUTexture extends Texture {
         depth
       ]
     );
-    return this;
+    return {width, height};
   }
 
   /*

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

@@ -0,0 +1,74 @@
+// 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 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,52 +1,77 @@
-import type {Texture, TextureFormat, CanvasContextProps} from '@luma.gl/api';
-import {CanvasContext, log} from '@luma.gl/api';
+// / <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 {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 default class WebGPUCanvasContext extends CanvasContext {
+export class WebGPUCanvasContext extends CanvasContext {
   readonly device: WebGPUDevice;
   readonly gpuCanvasContext: GPUCanvasContext;
-  readonly format: TextureFormat;
-  width: number = -1;
-  height: number = -1;
+  /** 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;
+  private depthStencilAttachment: Texture | null = null;
 
   constructor(device: WebGPUDevice, adapter: GPUAdapter, props: CanvasContextProps) {
     super(props);
     this.device = device;
-    this.gpuCanvasContext = this.canvas.getContext('webgpu') as GPUCanvasContext;
-    this.format = this.gpuCanvasContext.getPreferredFormat(adapter);
+    // 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');
+    // TODO this has been replaced
+    // this.format = this.gpuCanvasContext.getPreferredFormat(adapter);
+    this.format = 'bgra8unorm';
   }
 
-  destroy() {
+  /** 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 {
+  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();
 
-    return new WEBGPUFramebuffer(this.device, {
+    return new WebGPUFramebuffer(this.device, {
       colorAttachments: [currentColorAttachment],
       depthStencilAttachment: this.depthStencilAttachment
     });
@@ -64,7 +89,7 @@ export default class WebGPUCanvasContext extends CanvasContext {
 
       if (this.depthStencilAttachment) {
         this.depthStencilAttachment.destroy();
-        this.depthStencilAttachment = undefined;
+        this.depthStencilAttachment = null;
       }
 
       // Reconfigure the canvas size.
@@ -72,14 +97,14 @@ export default 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,
-        compositingAlphaMode: this.props.compositingAlphaMode
+        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 {