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

package/src/adapter/helpers/get-bind-group.ts

@@ -1,15 +1,19 @@
 // luma.gl, MIT license
-import type {ShaderLayout, BindingLayout, Binding} from '@luma.gl/api';
-import {Buffer, Sampler, Texture, log, cast} from '@luma.gl/api';
-import type WebGPUBuffer from '../resources/webgpu-buffer';
-import type WebGPUSampler from '../resources/webgpu-sampler';
-import type WebGPUTexture from '../resources/webgpu-texture';
+import type {ShaderLayout, BindingDeclaration, Binding} from '@luma.gl/core';
+import {Buffer, Sampler, Texture, log, cast} from '@luma.gl/core';
+import type {WebGPUBuffer} from '../resources/webgpu-buffer';
+import type {WebGPUSampler} from '../resources/webgpu-sampler';
+import type {WebGPUTexture} from '../resources/webgpu-texture';
 
 /**
  * Create a WebGPU "bind group layout" from an array of luma.gl bindings
  * @note bind groups can be automatically generated by WebGPU.
  */
- export function makeBindGroupLayout(device: GPUDevice, layout: GPUBindGroupLayout, bindings: Binding[]): GPUBindGroupLayout {
+export function makeBindGroupLayout(
+  device: GPUDevice,
+  layout: GPUBindGroupLayout,
+  bindings: Binding[]
+): GPUBindGroupLayout {
   throw new Error('not implemented');
   // return device.createBindGroupLayout({
   //   layout,
@@ -23,18 +27,21 @@ import type WebGPUTexture from '../resources/webgpu-texture';
 export function getBindGroup(
   device: GPUDevice,
   bindGroupLayout: GPUBindGroupLayout,
-  layout: ShaderLayout,
+  shaderLayout: ShaderLayout,
   bindings: Record<string, Binding>
 ): GPUBindGroup {
-  const entries = getBindGroupEntries(bindings, layout);
+  const entries = getBindGroupEntries(bindings, shaderLayout);
   return device.createBindGroup({
     layout: bindGroupLayout,
     entries
   });
 }
 
-export function getShaderLayoutBinding(layout: ShaderLayout, bindingName: string): BindingLayout {
-  const bindingLayout = layout.bindings.find(binding => binding.name === bindingName);
+export function getShaderLayoutBinding(
+  shaderLayout: ShaderLayout,
+  bindingName: string
+): BindingDeclaration {
+  const bindingLayout = shaderLayout.bindings.find(binding => binding.name === bindingName);
   if (!bindingLayout) {
     log.warn(`Binding ${bindingName} not set: Not found in shader layout.`)();
   }
@@ -45,11 +52,14 @@ export function getShaderLayoutBinding(layout: ShaderLayout, bindingName: string
  * @param bindings
  * @returns
  */
-function getBindGroupEntries(bindings: Record<string, Binding>, layout: ShaderLayout): GPUBindGroupEntry[] {
+function getBindGroupEntries(
+  bindings: Record<string, Binding>,
+  shaderLayout: ShaderLayout
+): GPUBindGroupEntry[] {
   const entries: GPUBindGroupEntry[] = [];
 
   for (const [bindingName, value] of Object.entries(bindings)) {
-    const bindingLayout = getShaderLayoutBinding(layout, bindingName);
+    const bindingLayout = getShaderLayoutBinding(shaderLayout, bindingName);
     if (bindingLayout) {
       entries.push(getBindGroupEntry(value, bindingLayout.location));
     }

package/src/adapter/helpers/get-vertex-buffer-layout.ts

@@ -1,51 +1,63 @@
-import type {ShaderLayout, BufferMapping, AttributeLayout} from '@luma.gl/api';
-import {decodeVertexFormat} from '@luma.gl/api';
+// luma.gl, MIT license
+import type {ShaderLayout, BufferLayout, AttributeDeclaration, VertexFormat} from '@luma.gl/core';
+import {decodeVertexFormat} from '@luma.gl/core';
+
+/** Throw error on any WebGL-only vertex formats */
+function getWebGPUVertexFormat(format: VertexFormat): GPUVertexFormat {
+  if (format.endsWith('-webgl')) {
+    throw new Error(`WebGPU does not support vertex format ${format}`);
+  }
+  return format as GPUVertexFormat;
+}
 
 /**
  * Build a WebGPU vertex buffer layout intended for use in a GPURenderPassDescriptor.
  * Converts luma.gl attribute definitions to a WebGPU GPUVertexBufferLayout[] array
  * @param layout
- * @param bufferMap The buffer map is optional
+ * @param bufferLayout The buffer map is optional
  * @returns WebGPU layout intended for a GPURenderPassDescriptor.
  */
-export function getVertexBufferLayout(layout: ShaderLayout, bufferMap: BufferMapping[]): GPUVertexBufferLayout[] {
+export function getVertexBufferLayout(
+  shaderLayout: ShaderLayout,
+  bufferLayout: BufferLayout[]
+): GPUVertexBufferLayout[] {
   const vertexBufferLayouts: GPUVertexBufferLayout[] = [];
   const usedAttributes = new Set<string>();
 
-  // First handle any buffers mentioned in `bufferMapping`
-  for (const mapping of bufferMap) {
+  // First handle any buffers mentioned in `bufferLayout`
+  for (const mapping of bufferLayout) {
     // Build vertex attributes for one buffer
     const vertexAttributes: GPUVertexAttribute[] = [];
 
     // TODO verify that all stepModes for one buffer are the same
     let stepMode: 'vertex' | 'instance' = 'vertex';
     let byteStride = 0;
-    let byteOffset = mapping.byteOffset || 0;
-
     // interleaved mapping {..., attributes: [{...}, ...]}
-    if ('attributes' in mapping) {
-      const arrayStride = mapping.byteStride;
-      for (const interleaved of mapping.attributes) {
-        const attributeLayout = findAttributeLayout(layout, interleaved.name, usedAttributes);
+    if (mapping.attributes) {
+      // const arrayStride = mapping.byteStride; TODO
+      for (const attributeMapping of mapping.attributes) {
+        const attributeName = attributeMapping.attribute;
+        const attributeLayout = findAttributeLayout(shaderLayout, attributeName, usedAttributes);
 
         stepMode = attributeLayout.stepMode || 'vertex';
         vertexAttributes.push({
-          format: attributeLayout.format,
-          offset: byteOffset + byteStride,
+          format: getWebGPUVertexFormat(attributeMapping.format || mapping.format),
+          offset: attributeMapping.byteOffset,
           shaderLocation: attributeLayout.location
         });
 
-        byteStride += decodeVertexFormat(attributeLayout.format).byteLength;
+        byteStride += decodeVertexFormat(mapping.format).byteLength;
       }
       // non-interleaved mapping (just set offset and stride)
     } else {
-      const attributeLayout = findAttributeLayout(layout, mapping.name, usedAttributes);
-      byteStride = decodeVertexFormat(attributeLayout.format).byteLength,
+      const attributeLayout = findAttributeLayout(shaderLayout, mapping.name, usedAttributes);
+      byteStride = decodeVertexFormat(mapping.format).byteLength;
 
       stepMode = attributeLayout.stepMode || 'vertex';
       vertexAttributes.push({
-        format: attributeLayout.format,
-        offset: byteOffset,
+        format: getWebGPUVertexFormat(mapping.format),
+        // We only support 0 offset for non-interleaved buffer layouts
+        offset: 0,
         shaderLocation: attributeLayout.location
       });
     }
@@ -58,17 +70,19 @@ export function getVertexBufferLayout(layout: ShaderLayout, bufferMap: BufferMap
     });
   }
 
-  // Add any non-mapped attributes
-  for (const attribute of layout.attributes) {
+  // Add any non-mapped attributes - TODO - avoid hardcoded types
+  for (const attribute of shaderLayout.attributes) {
     if (!usedAttributes.has(attribute.name)) {
       vertexBufferLayouts.push({
-        arrayStride: decodeVertexFormat(attribute.format).byteLength,
+        arrayStride: decodeVertexFormat('float32x3').byteLength,
         stepMode: attribute.stepMode || 'vertex',
-        attributes: [{
-          format: attribute.format,
-          offset: 0,
-          shaderLocation: attribute.location
-        }]
+        attributes: [
+          {
+            format: getWebGPUVertexFormat('float32x3'),
+            offset: 0,
+            shaderLocation: attribute.location
+          }
+        ]
       });
     }
   }
@@ -76,17 +90,20 @@ export function getVertexBufferLayout(layout: ShaderLayout, bufferMap: BufferMap
   return vertexBufferLayouts;
 }
 
-export function getBufferSlots(layout: ShaderLayout, bufferMap: BufferMapping[]): Record<string, number> {
+export function getBufferSlots(
+  shaderLayout: ShaderLayout,
+  bufferLayout: BufferLayout[]
+): Record<string, number> {
   const usedAttributes = new Set<string>();
   let bufferSlot = 0;
   const bufferSlots: Record<string, number> = {};
 
-  // First handle any buffers mentioned in `bufferMapping`
-  for (const mapping of bufferMap) {
+  // First handle any buffers mentioned in `bufferLayout`
+  for (const mapping of bufferLayout) {
     // interleaved mapping {..., attributes: [{...}, ...]}
     if ('attributes' in mapping) {
       for (const interleaved of mapping.attributes) {
-        usedAttributes.add(interleaved.name);
+        usedAttributes.add(interleaved.attribute);
       }
       // non-interleaved mapping (just set offset and stride)
     } else {
@@ -96,7 +113,7 @@ export function getBufferSlots(layout: ShaderLayout, bufferMap: BufferMapping[])
   }
 
   // Add any non-mapped attributes
-  for (const attribute of layout.attributes) {
+  for (const attribute of shaderLayout.attributes) {
     if (!usedAttributes.has(attribute.name)) {
       bufferSlots[attribute.name] = bufferSlot++;
     }
@@ -110,8 +127,12 @@ export function getBufferSlots(layout: ShaderLayout, bufferMap: BufferMapping[])
  * @throws if name is not in ShaderLayout
  * @throws if name has already been referenced
  */
-function findAttributeLayout(layout: ShaderLayout, name: string, attributeNames: Set<string>): AttributeLayout {
-  const attribute = layout.attributes.find(attribute => attribute.name === name);
+function findAttributeLayout(
+  shaderLayout: ShaderLayout,
+  name: string,
+  attributeNames: Set<string>
+): AttributeDeclaration {
+  const attribute = shaderLayout.attributes.find(attribute => attribute.name === name);
   if (!attribute) {
     throw new Error(`Unknown attribute ${name}`);
   }

package/src/adapter/helpers/webgpu-parameters.ts

@@ -1,12 +1,16 @@
-import {Parameters} from '@luma.gl/api';
+import {Parameters} from '@luma.gl/core';
 
-function addDepthStencil(descriptor: GPURenderPipelineDescriptor): void {
+function addDepthStencil(descriptor: GPURenderPipelineDescriptor): GPUDepthStencilState {
   descriptor.depthStencil = descriptor.depthStencil || {
     // required, set something
     format: 'depth24plus',
     stencilFront: {},
-    stencilBack: {}
+    stencilBack: {},
+    // TODO can this cause trouble? Should we set to WebGPU defaults? Are there defaults?
+    depthWriteEnabled: false,
+    depthCompare: 'less-equal'
   };
+  return descriptor.depthStencil;
 }
 
 /**
@@ -18,79 +22,81 @@ export const PARAMETER_TABLE: Record<keyof Parameters, Function> = {
   // RASTERIZATION PARAMETERS
 
   cullMode: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
+    descriptor.primitive = descriptor.primitive || {};
     descriptor.primitive.cullMode = value;
   },
 
   frontFace: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
+    descriptor.primitive = descriptor.primitive || {};
     descriptor.primitive.frontFace = value;
   },
 
   // DEPTH
 
   depthWriteEnabled: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
-    addDepthStencil(descriptor);
-    descriptor.depthStencil.depthWriteEnabled = value;
+    const depthStencil = addDepthStencil(descriptor);
+    depthStencil.depthWriteEnabled = value;
   },
 
   depthCompare: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
-    addDepthStencil(descriptor);
-    descriptor.depthStencil.depthCompare = value;
+    const depthStencil = addDepthStencil(descriptor);
+    depthStencil.depthCompare = value;
   },
 
   depthFormat: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
-    addDepthStencil(descriptor);
-    descriptor.depthStencil.format = value;
+    const depthStencil = addDepthStencil(descriptor);
+    depthStencil.format = value;
   },
 
   depthBias: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
-    addDepthStencil(descriptor);
-    descriptor.depthStencil.depthBias = value;
+    const depthStencil = addDepthStencil(descriptor);
+    depthStencil.depthBias = value;
   },
 
   depthBiasSlopeScale: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
-    addDepthStencil(descriptor);
-    descriptor.depthStencil.depthBiasSlopeScale = value;
+    const depthStencil = addDepthStencil(descriptor);
+    depthStencil.depthBiasSlopeScale = value;
   },
 
   depthBiasClamp: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
-    addDepthStencil(descriptor);
-    descriptor.depthStencil.depthBiasClamp = value;
+    const depthStencil = addDepthStencil(descriptor);
+    depthStencil.depthBiasClamp = value;
   },
 
   // STENCIL
 
   stencilReadMask: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
-    addDepthStencil(descriptor);
-    descriptor.depthStencil.stencilReadMask = value;
+    const depthStencil = addDepthStencil(descriptor);
+    depthStencil.stencilReadMask = value;
   },
 
   stencilWriteMask: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
-    addDepthStencil(descriptor);
-    descriptor.depthStencil.stencilWriteMask = value;
+    const depthStencil = addDepthStencil(descriptor);
+    depthStencil.stencilWriteMask = value;
   },
 
   stencilCompare: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
-    addDepthStencil(descriptor);
-    descriptor.depthStencil.stencilFront.compare = value;
-    descriptor.depthStencil.stencilBack.compare = value;
+    const depthStencil = addDepthStencil(descriptor);
+    depthStencil.stencilFront.compare = value;
+    depthStencil.stencilBack.compare = value;
   },
 
   stencilPassOperation: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
-    addDepthStencil(descriptor);
-    descriptor.depthStencil.stencilFront.passOp = value;
-    descriptor.depthStencil.stencilBack.passOp = value;
+    const depthStencil = addDepthStencil(descriptor);
+    depthStencil.stencilFront.passOp = value;
+    depthStencil.stencilBack.passOp = value;
   },
 
   stencilFailOperation: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
-    addDepthStencil(descriptor);
-    descriptor.depthStencil.stencilFront.failOp = value;
-    descriptor.depthStencil.stencilBack.failOp = value;
+    const depthStencil = addDepthStencil(descriptor);
+    depthStencil.stencilFront.failOp = value;
+    depthStencil.stencilBack.failOp = value;
   },
 
   stencilDepthFailOperation: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
-    addDepthStencil(descriptor);
-    descriptor.depthStencil.stencilFront.depthFailOp = value;
-    descriptor.depthStencil.stencilBack.depthFailOp = value;
+    const depthStencil = addDepthStencil(descriptor);
+    depthStencil.stencilFront.depthFailOp = value;
+    depthStencil.stencilBack.depthFailOp = value;
   },
 
   // MULTISAMPLE
@@ -113,18 +119,17 @@ export const PARAMETER_TABLE: Record<keyof Parameters, Function> = {
   // COLOR
 
   colorMask: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
-    addColorState(descriptor);
-    const targets = descriptor.fragment.targets as GPUColorTargetState[];
+    const targets = addColorState(descriptor);
     targets[0].writeMask = value;
   },
 
   blendColorOperation: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
     addColorState(descriptor);
-    const targets = descriptor.fragment.targets as GPUColorTargetState[];
-    // @ts-expect-error
-    targets[0].blend = targets[0].blend || {};
-    targets[0].blend.color = targets[0].blend.color || {};
-    targets[0].blend.color.operation = value;
+    // const targets = addColorState(descriptor);
+    // const target = targets[0];
+    // const blend: GPUBlendState = target.blend || {color: {alpha: 0}};
+    // blend.color = blend.color || {};
+    // target.blend.color.operation = value;
   }
 
   /*
@@ -180,17 +185,19 @@ const DEFAULT_PIPELINE_DESCRIPTOR: GPURenderPipelineDescriptor = {
   },
 
   vertex: {
-    module: undefined,
+    module: undefined!,
     entryPoint: 'main'
   },
 
   fragment: {
-    module: undefined,
+    module: undefined!,
     entryPoint: 'main',
     targets: [
       // { format: props.color0Format || 'bgra8unorm' }
     ]
-  }
+  },
+
+  layout: 'auto'
 };
 
 export function applyParametersToRenderPipelineDescriptor(
@@ -216,11 +223,13 @@ function setParameters(
   }
 }
 
-function addColorState(descriptor: GPURenderPipelineDescriptor): void {
-  descriptor.fragment.targets = descriptor.fragment.targets || [];
-  // @ts-expect-error
-  if (descriptor.fragment.targets.length === 0) {
-    // @ts-expect-error
-    descriptor.fragment.targets.push({});
+function addColorState(descriptor: GPURenderPipelineDescriptor): GPUColorTargetState[] {
+  descriptor.fragment.targets = descriptor.fragment?.targets || [];
+  if (!Array.isArray(descriptor.fragment?.targets)) {
+    throw new Error('colorstate');
+  }
+  if (descriptor.fragment?.targets?.length === 0) {
+    descriptor.fragment.targets?.push({});
   }
+  return descriptor.fragment?.targets as GPUColorTargetState[];
 }

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

@@ -1,12 +1,12 @@
 // WEBGPU Buffer implementation
-import {Buffer, BufferProps, assert} from '@luma.gl/api';
-import type WebGPUDevice from '../webgpu-device';
+import {Buffer, BufferProps} from '@luma.gl/core';
+import type {WebGPUDevice} from '../webgpu-device';
 
 function getByteLength(props: BufferProps): number {
   return props.byteLength || props.data?.byteLength || 0;
 }
 
-export default class WebGPUBuffer extends Buffer {
+export class WebGPUBuffer extends Buffer {
   readonly device: WebGPUDevice;
   readonly handle: GPUBuffer;
   readonly byteLength: number;
@@ -18,8 +18,11 @@ export default class WebGPUBuffer extends Buffer {
     this.byteLength = getByteLength(props);
     const mapBuffer = Boolean(props.data);
 
+    // WebGPU buffers must be aligned to 4 bytes
+    const size = Math.ceil(this.byteLength / 4) * 4;
+
     this.handle = this.props.handle || this.device.handle.createBuffer({
-      size: this.byteLength,
+      size,
       // usage defaults to vertex
       usage: this.props.usage || (GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST),
       mappedAtCreation: this.props.mappedAtCreation || mapBuffer,
@@ -36,16 +39,12 @@ export default class WebGPUBuffer extends Buffer {
     }
   }
 
-  protected createHandle(mapBuffer: boolean): GPUBuffer {
-    return
-  }
-
-  destroy(): void {
+  override destroy(): void {
     this.handle.destroy();
   }
 
   // WebGPU provides multiple ways to write a buffer...
-  write(data: ArrayBufferView, byteOffset = 0) {
+  override write(data: ArrayBufferView, byteOffset = 0) {
     this.device.handle.queue.writeBuffer(
       this.handle,
       byteOffset,
@@ -55,7 +54,7 @@ export default class WebGPUBuffer extends Buffer {
     );
   }
 
-  async readAsync(byteOffset: number = 0, byteLength: number = this.byteLength): Promise<ArrayBuffer> {
+  override async readAsync(byteOffset: number = 0, byteLength: number = this.byteLength): Promise<Uint8Array> {
     // We need MAP_READ flag, but only COPY_DST buffers can have MAP_READ flag, so we need to create a temp buffer
     const tempBuffer = new WebGPUBuffer(this.device, {usage: Buffer.MAP_READ | Buffer.COPY_DST, byteLength});
 
@@ -71,7 +70,7 @@ export default class WebGPUBuffer extends Buffer {
     tempBuffer.handle.unmap();
     tempBuffer.destroy();
 
-    return arrayBuffer;
+    return new Uint8Array(arrayBuffer);
   }
 
   _writeMapped<TypedArray>(typedArray: TypedArray): void {

package/src/adapter/resources/webgpu-command-encoder.ts

@@ -1,26 +1,28 @@
-import {CommandEncoder, CommandEncoderProps, RenderPipeline, Buffer, Texture, cast} from '@luma.gl/api';
-import WebGPUDevice from '../webgpu-device';
-import WEBGPUBuffer from './webgpu-buffer';
-import WebGPUTexture from './webgpu-texture';
-
-export default class WebGPUCommandEncoder extends CommandEncoder {
+import {CommandEncoder, CommandEncoderProps, Buffer, Texture, cast, 
+  CopyTextureToTextureOptions, 
+  CopyTextureToBufferOptions
+  // CopyBufferToTextureOptions,
+  // CopyBufferToBufferOptions,
+} from '@luma.gl/core';
+import {WebGPUDevice} from '../webgpu-device';
+import {WebGPUBuffer} from './webgpu-buffer';
+import {WebGPUTexture} from './webgpu-texture';
+
+export class WebGPUCommandEncoder extends CommandEncoder {
   readonly device: WebGPUDevice;
   readonly handle: GPUCommandEncoder;
 
   constructor(device: WebGPUDevice, props: CommandEncoderProps) {
-    super(props);
+    super(device, props);
     this.device = device;
-    this.handle = this.handle || this.createHandle();
-    this.handle.label = this.props.id;
-  }
-
-  protected createHandle(): GPUCommandEncoder {
-    return this.device.handle.createCommandEncoder({
-      measureExecutionTime: this.props.measureExecutionTime
+    this.handle = props.handle || this.device.handle.createCommandEncoder({
+      // TODO was this removed in standard?
+      // measureExecutionTime: this.props.measureExecutionTime
     });
+    this.handle.label = this.props.id;
   }
 
-  destroy() {}
+  override destroy(): void {}
 
   finish(options?: {id?: string}): GPUCommandBuffer {
     return this.finish(options);
@@ -29,23 +31,26 @@ export default class WebGPUCommandEncoder extends CommandEncoder {
   // beginRenderPass(GPURenderPassDescriptor descriptor): GPURenderPassEncoder;
   // beginComputePass(optional GPUComputePassDescriptor descriptor = {}): GPUComputePassEncoder;
 
-  copyBufferToBuffer(options: {
-    source: Buffer,
-    sourceOffset?: number,
-    destination: Buffer,
-    destinationOffset?: number,
-    size?: number
-  }): void {
+  copyBufferToBuffer(options: // CopyBufferToBufferOptions
+    {
+      source: Buffer,
+      sourceOffset?: number,
+      destination: Buffer,
+      destinationOffset?: number,
+      size?: number
+    }
+  ): void {
     this.handle.copyBufferToBuffer(
-      cast<WEBGPUBuffer>(options.source).handle,
+      cast<WebGPUBuffer>(options.source).handle,
       options.sourceOffset ?? 0,
-      cast<WEBGPUBuffer>(options.destination).handle,
+      cast<WebGPUBuffer>(options.destination).handle,
       options.destinationOffset ?? 0,
       options.size ?? 0
     );
   }
 
-  copyBufferToTexture(options: {
+  copyBufferToTexture(options: // CopyBufferToTextureOptions
+    {
     source: Buffer,
     offset?: number,
     bytesPerRow: number,
@@ -57,10 +62,11 @@ export default class WebGPUCommandEncoder extends CommandEncoder {
 
     origin?: number[] | [number, number, number],
     extent?: number[] | [number, number, number]
-  }): void {
+  }
+  ): void {
     this.handle.copyBufferToTexture(
       {
-        buffer: cast<WEBGPUBuffer>(options.source).handle,
+        buffer: cast<WebGPUBuffer>(options.source).handle,
         offset: options.offset ?? 0,
         bytesPerRow: options.bytesPerRow,
         rowsPerImage: options.rowsPerImage,
@@ -71,31 +77,46 @@ export default class WebGPUCommandEncoder extends CommandEncoder {
         origin: options.origin ?? {},
         // aspect: options.aspect
       },
-      options.extent // default depth?
+      {
+        // TODO exclamation mark hack
+        width: options.extent[0],
+        height: options.extent[1],
+        depthOrArrayLayers: options.extent[2]
+      }
     );
   }
 
-  copyTextureToBuffer(options: {
-    source: GPUImageCopyTexture,
-    destination: GPUImageCopyBuffer,
-    copySize: GPUExtent3D
-  }): void {}
+  copyTextureToBuffer(options: CopyTextureToBufferOptions): void {
+    // this.handle.copyTextureToBuffer(
+    //   // source
+    //   {},
+    //   // destination
+    //   {},
+    //   // copySize
+    //   {}
+    // );
+  }
 
-  copyTextureToTexture(options: {
-    source: GPUImageCopyTexture ,
-    destination: GPUImageCopyTexture,
-    copySize: GPUExtent3D
-  }): void {}
+  copyTextureToTexture(options: CopyTextureToTextureOptions): void {
+    // this.handle.copyTextureToTexture(
+    //   // source
+    //   {},
+    //   // destination
+    //   {},
+    //   // copySize
+    //   {}
+    // );
+  }
 
-  pushDebugGroup(groupLabel: string): void {
+  override pushDebugGroup(groupLabel: string): void {
     this.handle.pushDebugGroup(groupLabel);
   }
 
-  popDebugGroup(): void {
+  override popDebugGroup(): void {
     this.handle.popDebugGroup();
   }
 
-  insertDebugMarker(markerLabel: string): void {
+  override insertDebugMarker(markerLabel: string): void {
     this.handle.insertDebugMarker(markerLabel);
   }