@luma.gl/webgpu 9.0.0-alpha.21 → 9.0.0-alpha.23

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 type {FramebufferProps} from '@luma.gl/api';
+import {Framebuffer} from '@luma.gl/api';
 import {WebGPUDevice} from '../webgpu-device';
-// import {WebGPUCanvasContext} from '../webgpu-canvas-context';
-import {WebGPUTexture} from './webgpu-texture';
-
-// const DEFAULT_DEPTH_STENCIL_FORMAT: DepthStencilTextureFormat = 'depth24plus';
-
-// const MAX_COLOR_ATTACHMENTS = 8;
 
 /**
- * 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 class WebGPUFramebuffer extends Framebuffer {
   readonly device: WebGPUDevice;
 
-  colorAttachments: WebGPUTexture[] = [];
-  depthStencilAttachment: WebGPUTexture | null = null;
-
-  /** 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
-        depthClearValue: 1.0,
-        depthStoreOp: 'store',
-        stencilClearValue: 0,
-        stencilStoreOp: 'store',
-      }
-    }
-
-    if (this.colorAttachments.length > 0) {
-      this.renderPassDescriptor.colorAttachments = this.colorAttachments.map(colorAttachment => ({
-        view: colorAttachment.handle.createView(),
-        loadOp: 'clear',
-        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-render-pass.ts

@@ -1,7 +1,8 @@
-import type {RenderPassProps, RenderPassParameters, Binding} from '@luma.gl/api';
+import type {RenderPassProps, RenderPassParameters, Binding, Framebuffer} from '@luma.gl/api';
 import {Buffer, RenderPass, RenderPipeline, cast} from '@luma.gl/api';
 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';
 
@@ -15,9 +16,8 @@ export 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);
     this.handle = this.props.handle || device.commandEncoder.beginRenderPass(renderPassDescriptor);
     this.handle.label = this.props.id;
   }
@@ -128,4 +128,34 @@ export 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: 'clear',
+      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 = {
+        ...this.props,
+        view: (framebuffer.depthStencilAttachment as WebGPUTexture).handle.createView()
+      };
+    }
+
+    return renderPassDescriptor;
+  }
 }

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

@@ -43,7 +43,7 @@ export class WebGPUShader extends Shader {
   }
 
   protected createHandle(): GPUShaderModule {
-    const {source} = this.props;
+    const {source, stage} = this.props;
 
     let language = this.props.language;
     // Compile from src
@@ -59,7 +59,7 @@ export 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);

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

@@ -19,6 +19,9 @@ export class WebGPUTexture extends Texture {
   readonly view: GPUTextureView;
   sampler: WebGPUSampler;
 
+  override height: number;
+  override width: number;
+
   // static async createFromImageURL(src, usage = 0) {
   //   const img = document.createElement('img');
   //   img.src = src;
@@ -40,6 +43,9 @@ export class WebGPUTexture extends Texture {
       this.setData({data: this.props.data}  );
     }
 
+    this.width = this.handle.width;
+    this.height = this.handle.height;
+
     // 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);
@@ -116,7 +122,7 @@ export 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,7 +163,7 @@ export class WebGPUTexture extends Texture {
         depth
       ]
     );
-    return this;
+    return {width, height};
   }
 
   /*

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

@@ -24,7 +24,8 @@ export class WebGPUCanvasContext extends CanvasContext {
     this.height = -1;
   
     this._setAutoCreatedCanvasId(`${this.device.id}-canvas`);
-    this.gpuCanvasContext = this.canvas.getContext('webgpu') as GPUCanvasContext;
+    // @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);
   }

package/src/adapter/webgpu-device.ts

@@ -10,6 +10,7 @@ import type {
   BufferProps,
   SamplerProps,
   ShaderProps,
+  Texture,
   TextureProps,
   TextureFormat,
   ExternalTextureProps,
@@ -17,7 +18,8 @@ import type {
   RenderPipelineProps,
   ComputePipelineProps,
   RenderPassProps,
-  ComputePassProps
+  ComputePassProps,
+  // CommandEncoderProps
 } from '@luma.gl/api';
 import {Device, CanvasContext, log, uid} from '@luma.gl/api';
 import {WebGPUBuffer} from './resources/webgpu-buffer';
@@ -30,6 +32,7 @@ import {WebGPUFramebuffer} from './resources/webgpu-framebuffer';
 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 {WebGPUCanvasContext} from './webgpu-canvas-context';
 // import {loadGlslangModule} from '../glsl/glslang';
@@ -162,8 +165,9 @@ export class WebGPUDevice extends Device {
     return this._isLost;
   }
 
-  _createBuffer(props: BufferProps): WebGPUBuffer {
-    return new WebGPUBuffer(this, props);
+  createBuffer(props: BufferProps | ArrayBuffer | ArrayBufferView): WebGPUBuffer {
+    const newProps = this._getBufferProps(props);
+    return new WebGPUBuffer(this, newProps);
   }
 
   _createTexture(props: TextureProps): WebGPUTexture {
@@ -210,6 +214,10 @@ export class WebGPUDevice extends Device {
     return new WebGPUComputePass(this, props);
   }
 
+  // createCommandEncoder(props: CommandEncoderProps): WebGPUCommandEncoder {
+  //   return new WebGPUCommandEncoder(this, props);
+  // }
+
   createCanvasContext(props: CanvasContextProps): WebGPUCanvasContext {
     return new WebGPUCanvasContext(this, this.adapter, props);
   }
@@ -292,4 +300,64 @@ export class WebGPUDevice extends Device {
 
     return features;
   }
+
+  copyExternalImageToTexture(options: {
+    texture: Texture;
+    mipLevel?: number;
+    aspect?: 'all' | 'stencil-only' | 'depth-only';
+    colorSpace?: 'display-p3' | 'srgb';
+    premultipliedAlpha?: boolean;
+
+    source:  ImageBitmap | HTMLVideoElement | HTMLCanvasElement | OffscreenCanvas;
+    sourceX?: number;
+    sourceY?: number;
+
+    width?: number;
+    height?: number;
+    depth?: number;
+  }): void {
+    const {
+      source,
+      sourceX = 0,
+      sourceY = 0,
+
+      texture,
+      mipLevel = 0,
+      aspect = 'all',
+      colorSpace = 'display-p3',
+      premultipliedAlpha = false,
+      // destinationX,
+      // destinationY,
+      // desitnationZ,
+
+      width = texture.width,
+      height = texture.height,
+      depth = 1
+    } = options;
+
+    const webGpuTexture = texture as WebGPUTexture;
+
+    this.handle?.queue.copyExternalImageToTexture(
+      // source: GPUImageCopyExternalImage
+      {
+        source,
+        origin: [sourceX, sourceY]
+      },
+      // destination: GPUImageCopyTextureTagged
+      {
+        texture: webGpuTexture.handle,
+        origin: [0, 0, 0], // [x, y, z],
+        mipLevel,
+        aspect,
+        colorSpace,
+        premultipliedAlpha
+      },
+      // copySize: GPUExtent3D
+      [
+        width,
+        height,
+        depth
+      ]
+    )
+  }
 }