feat: add storage texture for webgpu #112 (#113)

examples/demos/draw-index.ts

@@ -41,14 +41,14 @@ void main() {
   });
 
   const vertexBuffer = device.createBuffer({
-    viewOrSize: new Float32Array([0, 0.5, -0.5, -0.5, 0.5, -0.5]),
+    viewOrSize: new Float32Array([0, 0.5, -0.5, -0.5, 0.5, -0.5, 1, 0.5]),
     usage: BufferUsage.VERTEX,
     hint: BufferFrequencyHint.DYNAMIC,
   });
   device.setResourceName(vertexBuffer, 'a_Position');
 
   const indexBuffer = device.createBuffer({
-    viewOrSize: new Uint32Array([0, 1, 2]),
+    viewOrSize: new Uint32Array([0, 1, 2, 0, 2, 3]),
     usage: BufferUsage.INDEX,
     hint: BufferFrequencyHint.STATIC,
   });
@@ -114,7 +114,7 @@ void main() {
       },
     );
     renderPass.setViewport(0, 0, $canvas.width, $canvas.height);
-    renderPass.draw(3);
+    renderPass.drawIndexed(6);
 
     device.submitPass(renderPass);
     if (useRAF) {

examples/demos/index.ts

@@ -22,6 +22,7 @@ export { render as ReadPixel } from './read-pixel';
 export { render as FloatTexture } from './float-texture';
 export { render as Add2Vectors } from './add-2-vectors';
 export { render as ComputeBoids } from './compute-boids';
+export { render as Blur } from './blur';
 // export { render as AR } from './ar';
 // export { render as ARThree } from './ar-three';
 // export { render as Test } from './test-wgsl';

src/api/interfaces.ts

@@ -303,6 +303,7 @@ export enum TextureDimension {
 export enum TextureUsage {
   SAMPLED = 0x01,
   RENDER_TARGET = 0x02,
+  STORAGE = 0x04,
 }
 
 export enum ChannelWriteMask {
@@ -433,6 +434,11 @@ export interface RenderTargetDescriptor {
   texture?: Texture;
 }
 
+export interface TextureBinding {
+  binding: number;
+  texture: Texture;
+}
+
 /**
  * @see https://www.w3.org/TR/webgpu/#dictdef-gpubindgroupentry
  */
@@ -481,6 +487,7 @@ export interface BindingsDescriptor {
   uniformBufferBindings?: BufferBinding[];
   samplerBindings?: SamplerBinding[];
   storageBufferBindings?: BufferBinding[];
+  storageTextureBindings?: TextureBinding[];
 }
 
 /**

src/api/utils/hash.ts

@@ -13,6 +13,7 @@ import type {
   SamplerBinding,
   SamplerDescriptor,
   StencilFaceState,
+  TextureBinding,
   VertexAttributeDescriptor,
 } from '../interfaces';
 import { colorEqual } from './color';
@@ -268,6 +269,14 @@ export function bufferBindingCopy(a: Readonly<BufferBinding>): BufferBinding {
   return { binding, buffer, offset, size };
 }
 
+export function textureBindingCopy(
+  a: Readonly<TextureBinding>,
+): TextureBinding {
+  const binding = a.binding;
+  const texture = a.texture;
+  return { binding, texture };
+}
+
 export function bindingsDescriptorCopy(
   a: Readonly<BindingsDescriptor>,
 ): BindingsDescriptor {
@@ -279,10 +288,14 @@ export function bindingsDescriptorCopy(
   const storageBufferBindings =
     a.storageBufferBindings &&
     arrayCopy(a.storageBufferBindings, bufferBindingCopy);
+  const storageTextureBindings =
+    a.storageTextureBindings &&
+    arrayCopy(a.storageTextureBindings, textureBindingCopy);
   return {
     samplerBindings,
     uniformBufferBindings,
     storageBufferBindings,
+    storageTextureBindings,
     pipeline: a.pipeline,
   };
 }

src/webgpu/Bindings.ts

@@ -32,12 +32,16 @@ export class Bindings_WebGPU extends ResourceBase_WebGPU implements Bindings {
     const { pipeline } = descriptor;
     assert(!!pipeline);
 
-    const { uniformBufferBindings, storageBufferBindings, samplerBindings } =
-      descriptor;
+    const {
+      uniformBufferBindings,
+      storageBufferBindings,
+      samplerBindings,
+      storageTextureBindings,
+    } = descriptor;
     this.numUniformBuffers = uniformBufferBindings?.length || 0;
 
     // entries orders: Storage(read-only storage) Uniform Sampler
-    const gpuBindGroupEntries: GPUBindGroupEntry[][] = [[], []];
+    const gpuBindGroupEntries: GPUBindGroupEntry[][] = [[], [], []];
     let numBindings = 0;
 
     if (storageBufferBindings && storageBufferBindings.length) {
@@ -109,6 +113,20 @@ export class Bindings_WebGPU extends ResourceBase_WebGPU implements Bindings {
       }
     }
 
+    if (storageTextureBindings && storageTextureBindings.length) {
+      numBindings = 0;
+      for (let i = 0; i < storageTextureBindings.length; i++) {
+        const binding = descriptor.storageTextureBindings[i];
+        const texture = binding.texture;
+
+        const gpuTextureView = (texture as Texture_WebGPU).gpuTextureView;
+        gpuBindGroupEntries[2].push({
+          binding: numBindings++,
+          resource: gpuTextureView,
+        });
+      }
+    }
+
     this.gpuBindGroup = gpuBindGroupEntries
       .filter((entries) => entries.length > 0)
       .map((gpuBindGroupEntries, i) =>

src/webgpu/ComputePass.ts

@@ -60,6 +60,12 @@ export class ComputePass_WebGPU implements ComputePass {
   setBindings(bindings_: Bindings): void {
     const bindings = bindings_ as Bindings_WebGPU;
     this.gpuComputePassEncoder.setBindGroup(0, bindings.gpuBindGroup[0]);
+    if (bindings.gpuBindGroup[1]) {
+      this.gpuComputePassEncoder.setBindGroup(1, bindings.gpuBindGroup[1]);
+    }
+    if (bindings.gpuBindGroup[2]) {
+      this.gpuComputePassEncoder.setBindGroup(2, bindings.gpuBindGroup[2]);
+    }
   }
 
   pushDebugGroup(name: string): void {

src/webgpu/RenderPass.ts

@@ -272,6 +272,9 @@ export class RenderPass_WebGPU implements RenderPass {
     if (bindings.gpuBindGroup[1]) {
       this.gpuRenderPassEncoder.setBindGroup(1, bindings.gpuBindGroup[1]);
     }
+    if (bindings.gpuBindGroup[2]) {
+      this.gpuRenderPassEncoder.setBindGroup(2, bindings.gpuBindGroup[2]);
+    }
   }
 
   setStencilReference(ref: number): void {

src/webgpu/utils.ts

@@ -46,6 +46,11 @@ export function translateTextureUsage(
 
   if (usage & TextureUsage.SAMPLED)
     gpuUsage |= GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST;
+  if (usage & TextureUsage.STORAGE)
+    gpuUsage |=
+      GPUTextureUsage.TEXTURE_BINDING |
+      GPUTextureUsage.STORAGE_BINDING |
+      GPUTextureUsage.COPY_DST;
   if (usage & TextureUsage.RENDER_TARGET)
     gpuUsage |=
       GPUTextureUsage.RENDER_ATTACHMENT |