@luma.gl/webgpu 9.0.0-alpha.2

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

@@ -0,0 +1,226 @@
+import {Parameters} from '@luma.gl/api';
+
+function addDepthStencil(descriptor: GPURenderPipelineDescriptor): void {
+  descriptor.depthStencil = descriptor.depthStencil || {
+    // required, set something
+    format: 'depth24plus',
+    stencilFront: {},
+    stencilBack: {}
+  };
+}
+
+/**
+ * Supports for luma.gl's flat parameter space
+ * Populates the corresponding sub-objects in a GPURenderPipelineDescriptor
+ */
+// @ts-expect-error
+export const PARAMETER_TABLE: Record<keyof Parameters, Function> = {
+  // RASTERIZATION PARAMETERS
+
+  cullMode: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
+    descriptor.primitive.cullMode = value;
+  },
+
+  frontFace: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
+    descriptor.primitive.frontFace = value;
+  },
+
+  // DEPTH
+
+  depthWriteEnabled: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
+    addDepthStencil(descriptor);
+    descriptor.depthStencil.depthWriteEnabled = value;
+  },
+
+  depthCompare: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
+    addDepthStencil(descriptor);
+    descriptor.depthStencil.depthCompare = value;
+  },
+
+  depthFormat: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
+    addDepthStencil(descriptor);
+    descriptor.depthStencil.format = value;
+  },
+
+  depthBias: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
+    addDepthStencil(descriptor);
+    descriptor.depthStencil.depthBias = value;
+  },
+
+  depthBiasSlopeScale: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
+    addDepthStencil(descriptor);
+    descriptor.depthStencil.depthBiasSlopeScale = value;
+  },
+
+  depthBiasClamp: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
+    addDepthStencil(descriptor);
+    descriptor.depthStencil.depthBiasClamp = value;
+  },
+
+  // STENCIL
+
+  stencilReadMask: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
+    addDepthStencil(descriptor);
+    descriptor.depthStencil.stencilReadMask = value;
+  },
+
+  stencilWriteMask: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
+    addDepthStencil(descriptor);
+    descriptor.depthStencil.stencilWriteMask = value;
+  },
+
+  stencilCompare: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
+    addDepthStencil(descriptor);
+    descriptor.depthStencil.stencilFront.compare = value;
+    descriptor.depthStencil.stencilBack.compare = value;
+  },
+
+  stencilPassOperation: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
+    addDepthStencil(descriptor);
+    descriptor.depthStencil.stencilFront.passOp = value;
+    descriptor.depthStencil.stencilBack.passOp = value;
+  },
+
+  stencilFailOperation: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
+    addDepthStencil(descriptor);
+    descriptor.depthStencil.stencilFront.failOp = value;
+    descriptor.depthStencil.stencilBack.failOp = value;
+  },
+
+  stencilDepthFailOperation: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
+    addDepthStencil(descriptor);
+    descriptor.depthStencil.stencilFront.depthFailOp = value;
+    descriptor.depthStencil.stencilBack.depthFailOp = value;
+  },
+
+  // MULTISAMPLE
+
+  sampleCount: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
+    descriptor.multisample = descriptor.multisample || {};
+    descriptor.multisample.count = value;
+  },
+
+  sampleMask: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
+    descriptor.multisample = descriptor.multisample || {};
+    descriptor.multisample.mask = value;
+  },
+
+  sampleAlphaToCoverageEnabled: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
+    descriptor.multisample = descriptor.multisample || {};
+    descriptor.multisample.alphaToCoverageEnabled = value;
+  },
+
+  // COLOR
+
+  colorMask: (parameter: keyof Parameters, value: any, descriptor: GPURenderPipelineDescriptor) => {
+    addColorState(descriptor);
+    const targets = descriptor.fragment.targets as GPUColorTargetState[];
+    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;
+  }
+
+  /*
+  blendColorSrcTarget: (parameter, value, descriptor: GPURenderPipelineDescriptor) => {
+    addColorState(descriptor);
+    targets[0].blend = targets[0].blend || {};
+    targets[0].blend.color = targets[0].blend.color || {};
+    targets[0].blend.color.srcTarget = value;
+  },
+
+  blendColorDstTarget: (parameter, value, descriptor: GPURenderPipelineDescriptor) => {
+    addColorState(descriptor);
+    targets[0].blend = targets[0].blend || {};
+    targets[0].blend.color = targets[0].blend.color || {};
+    targets[0].blend.color.dstTarget = value;
+  },
+
+  blendAlphaOperation: (parameter, value, descriptor: GPURenderPipelineDescriptor) => {
+    addColorState(descriptor);
+    targets[0].blend = targets[0].blend || {};
+    targets[0].blend.alpha = targets[0].blend.alpha || {};
+    targets[0].blend.alpha.operation = value;
+  },
+
+  blendAlphaSrcTarget: (parameter, value, descriptor: GPURenderPipelineDescriptor) => {
+    addColorState(descriptor);
+    targets[0].blend = targets[0].blend || {};
+    targets[0].blend.alpha = targets[0].blend.alpha || {};
+    targets[0].blend.alpha.srcTarget = value;
+  },
+
+  blendAlphaDstTarget: (parameter, value, descriptor: GPURenderPipelineDescriptor) => {
+    addColorState(descriptor);
+    targets[0].blend = targets[0].blend || {};
+    targets[0].blend.alpha = targets[0].blend.alpha || {};
+    targets[0].blend.alpha.dstTarget = value;
+  },
+  */
+};
+
+const DEFAULT_PIPELINE_DESCRIPTOR: GPURenderPipelineDescriptor = {
+  // depthStencil: {
+  //   stencilFront: {},
+  //   stencilBack: {},
+  //   // depthWriteEnabled: true,
+  //   // depthCompare: 'less',
+  //   // format: 'depth24plus-stencil8',
+  // },
+
+  primitive: {
+    cullMode: 'back',
+    topology: 'triangle-list'
+  },
+
+  vertex: {
+    module: undefined,
+    entryPoint: 'main'
+  },
+
+  fragment: {
+    module: undefined,
+    entryPoint: 'main',
+    targets: [
+      // { format: props.color0Format || 'bgra8unorm' }
+    ]
+  }
+};
+
+export function applyParametersToRenderPipelineDescriptor(
+  pipelineDescriptor: GPURenderPipelineDescriptor,
+  parameters: Parameters = {}
+): void {
+  // Apply defaults
+  Object.assign(pipelineDescriptor, {...DEFAULT_PIPELINE_DESCRIPTOR, ...pipelineDescriptor});
+  setParameters(pipelineDescriptor, parameters);
+}
+
+// Apply any supplied parameters
+function setParameters(
+  pipelineDescriptor: GPURenderPipelineDescriptor,
+  parameters: Parameters
+): void {
+  for (const [key, value] of Object.entries(parameters)) {
+    const setterFunction = PARAMETER_TABLE[key as keyof Parameters];
+    if (!setterFunction) {
+      throw new Error(`Illegal parameter ${key}`);
+    }
+    setterFunction(key, value, pipelineDescriptor);
+  }
+}
+
+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({});
+  }
+}

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

@@ -0,0 +1,96 @@
+// WEBGPU Buffer implementation
+import {Buffer, BufferProps, assert} from '@luma.gl/api';
+import type WebGPUDevice from '../webgpu-device';
+
+function getByteLength(props: BufferProps): number {
+  return props.byteLength || props.data?.byteLength || 0;
+}
+
+export default class WebGPUBuffer extends Buffer {
+  readonly device: WebGPUDevice;
+  readonly handle: GPUBuffer;
+  readonly byteLength: number;
+
+  constructor(device: WebGPUDevice, props: BufferProps) {
+    super(device, props);
+    this.device = device;
+
+    this.byteLength = getByteLength(props);
+    const mapBuffer = Boolean(props.data);
+
+    this.handle = this.props.handle || this.device.handle.createBuffer({
+      size: this.byteLength,
+      // usage defaults to vertex
+      usage: this.props.usage || (GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST),
+      mappedAtCreation: this.props.mappedAtCreation || mapBuffer,
+      label: this.props.id
+    });
+
+    if (props.data) {
+      this._writeMapped(props.data);
+      // this.handle.writeAsync({data: props.data, map: false, unmap: false});
+    }
+
+    if (mapBuffer && !props.mappedAtCreation) {
+      this.handle.unmap();
+    }
+  }
+
+  protected createHandle(mapBuffer: boolean): GPUBuffer {
+    return
+  }
+
+  destroy(): void {
+    this.handle.destroy();
+  }
+
+  // WebGPU provides multiple ways to write a buffer...
+  write(data: ArrayBufferView, byteOffset = 0) {
+    this.device.handle.queue.writeBuffer(
+      this.handle,
+      byteOffset,
+      data.buffer,
+      data.byteOffset,
+      data.byteLength
+    );
+  }
+
+  async readAsync(byteOffset: number = 0, byteLength: number = this.byteLength): Promise<ArrayBuffer> {
+    // 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});
+
+    // Now do a GPU-side copy into the temp buffer we can actually read.
+    // TODO - we are spinning up an independent command queue here, what does this mean
+    const commandEncoder = this.device.handle.createCommandEncoder();
+    commandEncoder.copyBufferToBuffer(this.handle, byteOffset, tempBuffer.handle, 0, byteLength);
+    this.device.handle.queue.submit([commandEncoder.finish()]);
+
+    // Map the temp buffer and read the data.
+    await tempBuffer.handle.mapAsync(GPUMapMode.READ, byteOffset, byteLength);
+    const arrayBuffer = tempBuffer.handle.getMappedRange().slice(0);
+    tempBuffer.handle.unmap();
+    tempBuffer.destroy();
+
+    return arrayBuffer;
+  }
+
+  _writeMapped<TypedArray>(typedArray: TypedArray): void {
+    const arrayBuffer = this.handle.getMappedRange();
+    // @ts-expect-error
+    new typedArray.constructor(arrayBuffer).set(typedArray);
+  }
+
+  // WEBGPU API
+
+  mapAsync(mode: number, offset: number = 0, size?: number): Promise<void> {
+    return this.handle.mapAsync(mode, offset, size);
+  }
+
+  getMappedRange(offset: number = 0, size?: number): ArrayBuffer {
+    return this.handle.getMappedRange(offset, size);
+  }
+
+  unmap(): void {
+    this.handle.unmap();
+  }
+}

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

@@ -0,0 +1,111 @@
+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 {
+  readonly device: WebGPUDevice;
+  readonly handle: GPUCommandEncoder;
+
+  constructor(device: WebGPUDevice, props: CommandEncoderProps) {
+    super(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
+    });
+  }
+
+  destroy() {}
+
+  finish(options?: {id?: string}): GPUCommandBuffer {
+    return this.finish(options);
+  }
+
+  // beginRenderPass(GPURenderPassDescriptor descriptor): GPURenderPassEncoder;
+  // beginComputePass(optional GPUComputePassDescriptor descriptor = {}): GPUComputePassEncoder;
+
+  copyBufferToBuffer(options: {
+    source: Buffer,
+    sourceOffset?: number,
+    destination: Buffer,
+    destinationOffset?: number,
+    size?: number
+  }): void {
+    this.handle.copyBufferToBuffer(
+      cast<WEBGPUBuffer>(options.source).handle,
+      options.sourceOffset ?? 0,
+      cast<WEBGPUBuffer>(options.destination).handle,
+      options.destinationOffset ?? 0,
+      options.size ?? 0
+    );
+  }
+
+  copyBufferToTexture(options: {
+    source: Buffer,
+    offset?: number,
+    bytesPerRow: number,
+    rowsPerImage: number,
+
+    destination: Texture,
+    mipLevel?: number;
+    aspect?: 'all' | 'stencil-only' | 'depth-only',
+
+    origin?: number[] | [number, number, number],
+    extent?: number[] | [number, number, number]
+  }): void {
+    this.handle.copyBufferToTexture(
+      {
+        buffer: cast<WEBGPUBuffer>(options.source).handle,
+        offset: options.offset ?? 0,
+        bytesPerRow: options.bytesPerRow,
+        rowsPerImage: options.rowsPerImage,
+      },
+      {
+        texture: cast<WebGPUTexture>(options.destination).handle,
+        mipLevel: options.mipLevel ?? 0,
+        origin: options.origin ?? {},
+        // aspect: options.aspect
+      },
+      options.extent // default depth?
+    );
+  }
+
+  copyTextureToBuffer(options: {
+    source: GPUImageCopyTexture,
+    destination: GPUImageCopyBuffer,
+    copySize: GPUExtent3D
+  }): void {}
+
+  copyTextureToTexture(options: {
+    source: GPUImageCopyTexture ,
+    destination: GPUImageCopyTexture,
+    copySize: GPUExtent3D
+  }): void {}
+
+  pushDebugGroup(groupLabel: string): void {
+    this.handle.pushDebugGroup(groupLabel);
+  }
+
+  popDebugGroup(): void {
+    this.handle.popDebugGroup();
+  }
+
+  insertDebugMarker(markerLabel: string): void {
+    this.handle.insertDebugMarker(markerLabel);
+  }
+
+  // writeTimestamp(querySet: Query, queryIndex: number): void {}
+
+  // resolveQuerySet(options: {
+  //   querySet: GPUQuerySet,
+  //   firstQuery: number,
+  //   queryCount: number,
+  //   destination: Buffer,
+  //   destinationOffset?: number;
+  // }): void;
+}

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

@@ -0,0 +1,74 @@
+import {ComputePass, ComputePassProps, ComputePipeline, Buffer, Binding, cast} from '@luma.gl/api';
+import WebGPUDevice from '../webgpu-device';
+import WebGPUBuffer from './webgpu-buffer';
+// import WebGPUCommandEncoder from './webgpu-command-encoder';
+import WebGPUComputePipeline from './webgpu-compute-pipeline';
+
+export default class WebGPUComputePass extends ComputePass {
+  readonly device: WebGPUDevice;
+  readonly handle: GPUComputePassEncoder;
+  _bindGroupLayout: GPUBindGroupLayout;
+
+  constructor(device: WebGPUDevice, props: ComputePassProps) {
+    super(device, props);
+    this.device = device;
+
+    this.handle = this.props.handle || device.commandEncoder.beginComputePass({
+      label: this.props.id,
+      // timestampWrites?: GPUComputePassTimestampWrites;
+    });
+  }
+
+  /** @note no WebGPU destroy method, just gc */
+  destroy() {}
+
+  endPass(): void {
+    this.handle.endPass();
+  }
+
+  setPipeline(pipeline: ComputePipeline): void {
+    const wgpuPipeline = cast<WebGPUComputePipeline>(pipeline);
+    this.handle.setPipeline(wgpuPipeline.handle);
+    this._bindGroupLayout = wgpuPipeline._getBindGroupLayout();
+  }
+
+  /** Sets an array of bindings (uniform buffers, samplers, textures, ...) */
+  setBindings(bindings: Binding[]): void {
+    throw new Error('fix me');
+    // const bindGroup = getBindGroup(this.device.handle, this._bindGroupLayout, this.props.bindings);
+    // this.handle.setBindGroup(0, bindGroup);
+  }
+
+  /**
+   * Dispatch work to be performed with the current ComputePipeline.
+   * @param x X dimension of the grid of workgroups to dispatch.
+   * @param y Y dimension of the grid of workgroups to dispatch.
+   * @param z Z dimension of the grid of workgroups to dispatch.
+   */
+  dispatch(x: number, y?: number, z?: number): void {
+    this.handle.dispatch(x, y, z);
+  }
+
+  /**
+   * Dispatch work to be performed with the current ComputePipeline.
+   * @param indirectBuffer buffer must be a tightly packed block of three 32-bit unsigned integer values (12 bytes total), given in the same order as the arguments for dispatch()
+   * @param indirectOffset
+   */
+  dispatchIndirect(indirectBuffer: Buffer, indirectOffset: number = 0): void {
+    this.handle.dispatchIndirect(cast<WebGPUBuffer>(indirectBuffer).handle, indirectOffset);
+  }
+
+  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;
+  // beginPipelineStatisticsQuery(querySet: GPUQuerySet, queryIndex: number): void;
+  // endPipelineStatisticsQuery(querySet: GPUQuerySet, queryIndex: number): void;
+}

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

@@ -0,0 +1,34 @@
+// prettier-ignore
+import {ComputePipeline, ComputePipelineProps, cast} from '@luma.gl/api';
+
+import WebGPUDevice from '../webgpu-device';
+import WebGPUShader from './webgpu-shader';
+
+// COMPUTE PIPELINE
+
+/** Creates a new compute pipeline when parameters change */
+export default class WebGPUComputePipeline extends ComputePipeline {
+  device: WebGPUDevice;
+  handle: GPUComputePipeline;
+
+  constructor(device: WebGPUDevice, props: ComputePipelineProps) {
+    super(device, props);
+    this.device = device;
+
+    const module = cast<WebGPUShader>(this.props.cs).handle;
+    this.handle = this.props.handle || this.device.handle.createComputePipeline({
+      label: this.props.id,
+      compute: {
+        module,
+        entryPoint: this.props.csEntryPoint,
+        // constants: this.props.csConstants
+      }
+    });
+  }
+
+  /** For internal use in render passes */
+  _getBindGroupLayout() {
+    // TODO: Cache?
+    return this.handle.getBindGroupLayout(0);
+  }
+}

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

@@ -0,0 +1,37 @@
+// luma.gl, MIT license
+import {ExternalTexture, ExternalTextureProps, Sampler, SamplerProps} from '@luma.gl/api';
+import type WebGPUDevice from '../webgpu-device';
+import WebGPUSampler from './webgpu-sampler';
+
+/**
+ * Cheap, temporary texture view for videos
+ * Only valid within same callback, destroyed automatically as a microtask.
+ */
+export default class WebGPUExternalTexture extends ExternalTexture {
+  readonly device: WebGPUDevice;
+  readonly handle: GPUExternalTexture;
+  sampler: WebGPUSampler;
+
+  constructor(device: WebGPUDevice, props: ExternalTextureProps) {
+    super(device, props);
+    this.device = device;
+    this.handle = this.props.handle || this.device.handle.importExternalTexture({
+      source: props.source,
+      colorSpace: props.colorSpace
+    });
+    this.sampler = null;
+  }
+
+  destroy(): void {
+    // External textures are destroyed automatically,
+    // as a microtask, instead of manually or upon garbage collection like other resources.
+    // this.handle.destroy();
+  }
+
+  /** Set default sampler */
+  setSampler(sampler: Sampler | SamplerProps): this {
+    // We can accept a sampler instance or set of props;
+    this.sampler = sampler instanceof WebGPUSampler ? sampler : new WebGPUSampler(this.device, sampler);
+    return this;
+  }
+}

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

@@ -0,0 +1,120 @@
+import type {FramebufferProps, ColorTextureFormat} from '@luma.gl/api';
+import {Framebuffer, Texture} from '@luma.gl/api';
+import WebGPUDevice from '../webgpu-device';
+// import WebGPUCanvasContext from '../webgpu-canvas-context';
+import WEBGPUTexture from './webgpu-texture';
+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). 
+ */
+export default class WebGPUFramebuffer extends Framebuffer {
+  readonly device: WebGPUDevice;
+
+  colorAttachments: WebGPUTexture[] = [];
+  depthStencilAttachment: WebGPUTexture;
+
+  /** 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
+        depthLoadValue: 1.0,
+        depthStoreOp: 'store',
+        stencilLoadValue: 0,
+        stencilStoreOp: 'store',
+      }
+    }
+
+    if (this.colorAttachments.length > 0) {
+      this.renderPassDescriptor.colorAttachments = this.colorAttachments.map(colorAttachment => ({
+        view: colorAttachment.handle.createView(),
+        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();
+    }
+  }
+}