wgsl-renderer 0.5.0 → 0.6.0

package/README.md

@@ -8,6 +8,7 @@ A multi-pass renderer based on WebGPU and WGSL.
 
 - 🖼️ **Multi-Pass Rendering** - Support for texture rendering, post-processing effects, and other multi-pass rendering
 - ⚡ **High-Performance Rendering Loop** - Support for single-frame rendering and loop rendering modes
+- 🧮 **Compute Pass Support** - Mix compute and render passes in one pipeline
 - 🛠️ **TypeScript Support** - Complete type definitions and clear API separation
 - 🎮 **Uniform System** - Built-in uniform buffer management with dynamic parameter support
 
@@ -16,7 +17,7 @@ A multi-pass renderer based on WebGPU and WGSL.
 ### Installation
 
 ```bash
-npm i wgls-renderer
+npm i wgsl-renderer
 ```
 
 ### Add Pass
@@ -211,10 +212,100 @@ interface RenderPassOptions {
 }
 ```
 
+### renderer.addComputePass(passOptions)
+
+Add a compute pass. Compute and render passes are executed in sequence based on insertion order.
+
+```ts
+interface ComputePassOptions {
+    name: string;
+    shaderCode: string;
+    entryPoint?: string; // Default is 'cs_main'
+    resources?: GPUBindingResource[];
+    bindGroupSets?: { [setName: string]: GPUBindingResource[] };
+    dispatch:
+        | { x: number; y?: number; z?: number }
+        | ((context: { width: number; height: number; passName: string }) => { x: number; y?: number; z?: number });
+}
+```
+
+```ts
+const uniforms = renderer.createUniforms(4)
+const output = renderer.getPassTexture('sim', {
+    format: 'rgba8unorm',
+    usage: GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST,
+})
+
+renderer.addComputePass({
+    name: 'sim',
+    shaderCode: computeWGSL,
+    resources: [output, uniforms.getBuffer()],
+    dispatch: ({ width, height }) => ({
+        x: Math.ceil(width / 8),
+        y: Math.ceil(height / 8),
+        z: 1,
+    }),
+})
+```
+
+### renderer.createStorageTexture(options?)
+
+Create a storage-capable texture for compute workflows.
+
+```ts
+interface StorageTextureOptions {
+    width?: number;
+    height?: number;
+    format?: GPUTextureFormat; // default: 'rgba8unorm'
+    usage?: GPUTextureUsageFlags;
+    label?: string;
+}
+```
+
+```ts
+const simTex = renderer.createStorageTexture({
+    width: canvas.width,
+    height: canvas.height,
+    format: 'rgba16float',
+    usage: GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST,
+})
+```
+
+### renderer.createPingPongTextures(options?)
+
+Create A/B textures for iterative simulation.
+
+```ts
+const pingpong = renderer.createPingPongTextures({
+    format: 'rgba16float',
+    usage: GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST,
+})
+
+// per frame
+const readView = pingpong.getReadView()
+const writeView = pingpong.getWriteView()
+pingpong.swap()
+```
+
 ### renderer.getPassTexture(passName)
 
 Get the output texture of the specified pass. The return value is not a real texture but a placeholder that automatically binds the output texture to the shader during actual rendering.
 
+```ts
+renderer.getPassTexture(
+  passName: string,
+  options?: {
+    format?: GPUTextureFormat;
+    mipmaps?: boolean;
+    mipLevelCount?: number;
+    usage?: GPUTextureUsageFlags;
+  },
+)
+```
+
+When a pass output is used as a compute storage texture, pass `usage` with `GPUTextureUsage.STORAGE_BINDING`.
+For storage textures, use storage-compatible formats such as `rgba8unorm` or `rgba16float` (avoid `bgra8unorm`).
+
 ```typescript
 // Get output texture of my_pass
 const passOutputTexture = renderer.getPassTexture('my_pass')
@@ -588,4 +679,4 @@ MIT License
 
 ## 🤝 Contributing
 
-Issues and Pull Requests are welcome!
+Issues and Pull Requests are welcome!

package/README.zh-CN.md

@@ -6,6 +6,7 @@
 
 - 🖼️ **多Pass渲染** - 支持纹理渲染、后处理效果等自定义多通道渲染
 - ⚡ **高性能渲染循环** - 支持单帧渲染和循环渲染模式
+- 🧮 **Compute 通道支持** - 可在同一管线里混合执行 compute 与 render pass
 - 🛠️ **TypeScript支持** - 完整的类型定义和清晰的API分离
 - 🎮 **Uniform系统** - 内置uniform buffer管理，支持动态参数
 
@@ -14,7 +15,7 @@
 ### 安装
 
 ```bash
-npm i wgls-renderer
+npm i wgsl-renderer
 ```
 
 ### 添加渲染通道
@@ -227,10 +228,100 @@ interface RenderPassOptions {
 }
 ```
 
+### renderer.addComputePass(passOptions)
+
+添加计算通道。Compute 和 Render 会按照添加顺序依次执行。
+
+```ts
+interface ComputePassOptions {
+    name: string;
+    shaderCode: string;
+    entryPoint?: string; // 默认是 'cs_main'
+    resources?: GPUBindingResource[];
+    bindGroupSets?: { [setName: string]: GPUBindingResource[] };
+    dispatch:
+        | { x: number; y?: number; z?: number }
+        | ((context: { width: number; height: number; passName: string }) => { x: number; y?: number; z?: number });
+}
+```
+
+```ts
+const uniforms = renderer.createUniforms(4)
+const output = renderer.getPassTexture('sim', {
+    format: 'rgba8unorm',
+    usage: GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST,
+})
+
+renderer.addComputePass({
+    name: 'sim',
+    shaderCode: computeWGSL,
+    resources: [output, uniforms.getBuffer()],
+    dispatch: ({ width, height }) => ({
+        x: Math.ceil(width / 8),
+        y: Math.ceil(height / 8),
+        z: 1,
+    }),
+})
+```
+
+### renderer.createStorageTexture(options?)
+
+创建可用于 compute 的 storage 纹理。
+
+```ts
+interface StorageTextureOptions {
+    width?: number;
+    height?: number;
+    format?: GPUTextureFormat; // 默认: 'rgba8unorm'
+    usage?: GPUTextureUsageFlags;
+    label?: string;
+}
+```
+
+```ts
+const simTex = renderer.createStorageTexture({
+    width: canvas.width,
+    height: canvas.height,
+    format: 'rgba16float',
+    usage: GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST,
+})
+```
+
+### renderer.createPingPongTextures(options?)
+
+创建 A/B 双纹理，用于迭代模拟（ping-pong）。
+
+```ts
+const pingpong = renderer.createPingPongTextures({
+    format: 'rgba16float',
+    usage: GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST,
+})
+
+// 每帧
+const readView = pingpong.getReadView()
+const writeView = pingpong.getWriteView()
+pingpong.swap()
+```
+
 ### renderer.getPassTexture(passName)
 
 获取指定通道的输出纹理，返回值并不是真正的纹理，而是一个占位符，只在实际渲染时自动将输出纹理绑定到着色器。
 
+```ts
+renderer.getPassTexture(
+  passName: string,
+  options?: {
+    format?: GPUTextureFormat;
+    mipmaps?: boolean;
+    mipLevelCount?: number;
+    usage?: GPUTextureUsageFlags;
+  },
+)
+```
+
+如果要把输出纹理用于 compute 的 storage texture，需要在 `usage` 里包含 `GPUTextureUsage.STORAGE_BINDING`。
+storage texture 请使用支持的格式（如 `rgba8unorm`、`rgba16float`），不要使用 `bgra8unorm`。
+
 ```typescript
 // 获取my_pass通道的输出纹理
 const passOutputTexture = renderer.getPassTexture('my_pass')
@@ -621,4 +712,4 @@ MIT License
 
 ## 🤝 贡献
 
-欢迎提交Issue和Pull Request！
+欢迎提交Issue和Pull Request！

package/dist/cjs/index.js

@@ -1,6 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 //#region src/RenderPass.ts
 var RenderPass = class {
+	passType = "render";
 	name;
 	pipeline;
 	bindGroup;
@@ -112,7 +113,8 @@ var RenderPass = class {
 		if (this.bindGroups[setName]) {
 			this.activeBindGroupSet = setName;
 			this.bindGroup = this.bindGroups[setName];
-		} else throw new Error(`Bind group set '${setName}' not found. Available sets: ${Object.keys(this.bindGroups).join(", ")}`);
+		} else if (this.descriptor.bindGroupSets?.[setName]) this.activeBindGroupSet = setName;
+		else throw new Error(`Bind group set '${setName}' not found. Available sets: ${Object.keys(this.bindGroups).join(", ")}`);
 	}
 	/**
 	* Get the current active bind group
@@ -309,6 +311,78 @@ var RenderPass = class {
 	}
 };
 //#endregion
+//#region src/ComputePass.ts
+var ComputePass = class {
+	passType = "compute";
+	name;
+	pipeline;
+	bindGroup;
+	passResources = [];
+	bindGroups = {};
+	activeBindGroupSet = "default";
+	enabled = true;
+	descriptor;
+	compilationInfo;
+	dispatch;
+	device;
+	constructor(descriptor, device, layout = "auto") {
+		this.device = device;
+		this.descriptor = descriptor;
+		this.name = descriptor.name;
+		this.dispatch = descriptor.dispatch;
+		const module = this.device.createShaderModule({
+			code: descriptor.shaderCode,
+			label: `Compute shader for ${descriptor.name}`
+		});
+		this.compilationInfo = module.getCompilationInfo();
+		const entryPoint = descriptor.entryPoint || "cs_main";
+		this.pipeline = this.device.createComputePipeline({
+			layout,
+			compute: {
+				module,
+				entryPoint
+			}
+		});
+		this.bindGroup = null;
+	}
+	updateBindGroup(newEntries) {
+		const bindGroupLayout = this.pipeline.getBindGroupLayout(0);
+		this.bindGroup = this.device.createBindGroup({
+			layout: bindGroupLayout,
+			entries: newEntries
+		});
+		this.bindGroups.default = this.bindGroup;
+	}
+	switchBindGroupSet(setName) {
+		if (this.bindGroups[setName]) {
+			this.activeBindGroupSet = setName;
+			this.bindGroup = this.bindGroups[setName];
+		} else if (this.descriptor.bindGroupSets?.[setName]) this.activeBindGroupSet = setName;
+		else throw new Error(`Bind group set '${setName}' not found. Available sets: ${Object.keys(this.bindGroups).join(", ")}`);
+	}
+	getActiveBindGroup() {
+		return this.bindGroups[this.activeBindGroupSet] || this.bindGroup;
+	}
+	getBindGroupSets() {
+		return Object.keys(this.bindGroups);
+	}
+	updateBindGroupSetResources(setName, resources) {
+		const entries = [];
+		resources.forEach((resource, index) => {
+			if (resource) entries.push({
+				binding: index,
+				resource
+			});
+		});
+		const bindGroupLayout = this.pipeline.getBindGroupLayout(0);
+		this.bindGroups[setName] = this.device.createBindGroup({
+			layout: bindGroupLayout,
+			entries
+		});
+		if (this.activeBindGroupSet === setName) this.bindGroup = this.bindGroups[setName];
+	}
+};
+//#endregion
 //#region src/TextureManager.ts
 var TextureManager = class {
 	textures = /* @__PURE__ */ new Map();
@@ -322,12 +396,12 @@ var TextureManager = class {
 		this.width = width;
 		this.height = height;
 	}
-	createTexture(name, format, mipLevelCount) {
+	createTexture(name, format, mipLevelCount, usage) {
 		if (this.textures.has(name)) this.textures.get(name).destroy();
 		const texture = this.device.createTexture({
 			size: [this.width, this.height],
 			format: format || "bgra8unorm",
-			usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST,
+			usage: usage ?? GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST,
 			mipLevelCount: mipLevelCount || 1
 		});
 		this.textures.set(name, texture);
@@ -470,6 +544,9 @@ var WGSLRenderer = class {
 	renderMode = "normal";
 	readBuffer = null;
 	hasClearedCanvasThisFrame = false;
+	getPassOutputTextureName(passName) {
+		return `pass_${passName}_output`;
+	}
 	constructor(canvas, options) {
 		this.canvas = canvas;
 		this.options = options;
@@ -542,12 +619,14 @@ var WGSLRenderer = class {
 	resolveTextureRef(ref) {
 		const targetPass = this.passes.find((pass) => pass.name === ref.passName);
 		if (!targetPass) throw new Error(`Cannot find pass named '${ref.passName}'. Available passes: [${this.passes.map((p) => p.name).join(", ")}]`);
-		if (targetPass.view) return targetPass.view;
-		const textureName = `pass_${this.passes.indexOf(targetPass)}_output`;
+		if (targetPass.passType === "render" && targetPass.view) return targetPass.view;
+		const textureName = this.getPassOutputTextureName(targetPass.name);
 		let texture = this.textureManager.getTexture(textureName);
 		if (!texture) {
-			const format = this.passes.find((pass) => pass.name === ref.passName)?.format || this.format;
-			texture = this.textureManager.createTexture(textureName, format, ref.options?.mipLevelCount);
+			const targetPass = this.passes.find((pass) => pass.name === ref.passName);
+			const format = ref.options?.format ?? (targetPass?.passType === "render" ? targetPass.format || this.format : this.format);
+			const usage = ref.options?.usage ?? GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST;
+			texture = this.textureManager.createTexture(textureName, format, ref.options?.mipLevelCount, usage);
 		}
 		return texture.createView({
 			baseMipLevel: 0,
@@ -568,7 +647,7 @@ var WGSLRenderer = class {
 	getPassTextureRaw(passName) {
 		const targetPass = this.passes.find((pass) => pass.name === passName);
 		if (!targetPass) throw new Error(`Cannot find pass named '${passName}'. Available passes: [${this.passes.map((p) => p.name).join(", ")}]`);
-		const textureName = `pass_${this.passes.indexOf(targetPass)}_output`;
+		const textureName = this.getPassOutputTextureName(targetPass.name);
 		const texture = this.textureManager.getTexture(textureName);
 		if (texture) return texture;
 		return null;
@@ -675,6 +754,28 @@ var WGSLRenderer = class {
 		const pipelineFormat = descriptor.format || this.format;
 		return new RenderPass(internalDescriptor, this.device, pipelineFormat);
 	}
+	createComputePass(descriptor) {
+		const finalBindGroupEntries = [];
+		descriptor.resources?.forEach((resource, index) => {
+			finalBindGroupEntries.push({
+				binding: index,
+				resource
+			});
+		});
+		let bindGroupSetsCopy = void 0;
+		if (descriptor.bindGroupSets) {
+			bindGroupSetsCopy = {};
+			for (const [setName, resources] of Object.entries(descriptor.bindGroupSets)) bindGroupSetsCopy[setName] = [...resources];
+		}
+		return new ComputePass({
+			name: descriptor.name,
+			shaderCode: descriptor.shaderCode,
+			entryPoint: descriptor.entryPoint,
+			bindGroupEntries: finalBindGroupEntries,
+			bindGroupSets: bindGroupSetsCopy,
+			dispatch: descriptor.dispatch
+		}, this.device);
+	}
 	/**
 	* Add a render pass to the multi-pass pipeline
 	*/
@@ -683,6 +784,11 @@ var WGSLRenderer = class {
 		pass.passResources = descriptor.resources ?? [];
 		this.passes.push(pass);
 	}
+	addComputePass(descriptor) {
+		const pass = this.createComputePass(descriptor);
+		pass.passResources = descriptor.resources ?? [];
+		this.passes.push(pass);
+	}
 	/**
 	* Validate all shader compilations
 	* Call this after adding all passes to check for shader errors
@@ -695,7 +801,8 @@ var WGSLRenderer = class {
 				for (const msg of info.messages) errMsg += `[WGSL ${msg.type}] Shader compilation failed for pass ${pass.name} (${msg.lineNum}:${msg.linePos}): ${msg.message}\n`;
 				return Promise.reject({
 					messages: info.messages,
-					cause: errMsg
+					cause: errMsg,
+					pass: pass.name
 				});
 			}
 		}));
@@ -721,6 +828,16 @@ var WGSLRenderer = class {
 		});
 		this.passes.splice(i, 0, ...newPasses);
 	}
+	insertComputePassesTo(passName, descriptors) {
+		const i = this.passes.findIndex((p) => p.name === passName);
+		if (i === -1) throw new Error(`Cannot find pass named '${passName}'. Available passes: [${this.passes.map((p) => p.name).join(", ")}]`);
+		const newPasses = descriptors.map((desc) => {
+			const pass = this.createComputePass(desc);
+			pass.passResources = desc.resources ?? [];
+			return pass;
+		});
+		this.passes.splice(i, 0, ...newPasses);
+	}
 	/**
 	* Resolve resource to actual GPU binding resource
 	* Handles PassTextureRef by getting the current texture view with validation
@@ -743,6 +860,14 @@ var WGSLRenderer = class {
 				});
 			});
 			pass.updateBindGroup(finalBindGroupEntries);
+			const bindGroupSets = pass.descriptor.bindGroupSets;
+			if (bindGroupSets) for (const [setName, resources] of Object.entries(bindGroupSets)) {
+				const resolvedResources = resources.map((resource) => {
+					if (resource) return this.resolveResource(resource);
+					return resource;
+				});
+				pass.updateBindGroupSetResources(setName, resolvedResources);
+			}
 		});
 	}
 	/**
@@ -819,16 +944,36 @@ var WGSLRenderer = class {
 		if (this.passes.length === 0) return;
 		const enabledPasses = this.getEnabledPasses();
 		if (enabledPasses.length === 0) return;
+		const enabledRenderPasses = enabledPasses.filter((pass) => pass.passType === "render");
+		if (enabledRenderPasses.length === 0) return;
 		this.hasClearedCanvasThisFrame = false;
 		this.updateBindGroups();
 		const commandEncoder = this.device.createCommandEncoder();
 		const canvasWidth = this.canvas.width || this.canvas.clientWidth;
 		const canvasHeight = this.canvas.height || this.canvas.clientHeight;
+		const lastRenderPass = enabledRenderPasses[enabledRenderPasses.length - 1];
 		for (let i = 0; i < enabledPasses.length; i++) {
 			const pass = enabledPasses[i];
+			if (pass.passType === "compute") {
+				const computePass = commandEncoder.beginComputePass();
+				computePass.setPipeline(pass.pipeline);
+				const activeBindGroup = pass.getActiveBindGroup();
+				if (activeBindGroup) computePass.setBindGroup(0, activeBindGroup);
+				const dispatch = typeof pass.dispatch === "function" ? pass.dispatch({
+					width: canvasWidth,
+					height: canvasHeight,
+					passName: pass.name
+				}) : pass.dispatch;
+				const x = Math.max(1, Math.floor(dispatch.x));
+				const y = Math.max(1, Math.floor(dispatch.y ?? 1));
+				const z = Math.max(1, Math.floor(dispatch.z ?? 1));
+				computePass.dispatchWorkgroups(x, y, z);
+				computePass.end();
+				continue;
+			}
 			let loadOp = "load";
 			const isFirst = i === 0;
-			const isLastPass = i === enabledPasses.length - 1;
+			const isLastPass = pass.name === lastRenderPass.name;
 			if (isFirst) loadOp = "clear";
 			let renderTargetView;
 			let isRenderingToCanvas = false;
@@ -845,7 +990,7 @@ var WGSLRenderer = class {
 				renderTargetView = this.ctx.getCurrentTexture().createView();
 				isRenderingToCanvas = true;
 			} else {
-				const textureName = `pass_${i}_output`;
+				const textureName = this.getPassOutputTextureName(pass.name);
 				let texture = this.textureManager.getTexture(textureName);
 				if (!texture) texture = this.textureManager.createTexture(textureName, pass.format || this.format);
 				renderTargetView = texture.createView();
@@ -927,6 +1072,55 @@ var WGSLRenderer = class {
 		}
 		return pixelData;
 	}
+	/**
+	* Create a storage-capable texture (useful for compute passes)
+	*/
+	createStorageTexture(options) {
+		const width = options?.width ?? (this.canvas.width || this.canvas.clientWidth);
+		const height = options?.height ?? (this.canvas.height || this.canvas.clientHeight);
+		const format = options?.format ?? "rgba8unorm";
+		const usage = options?.usage ?? GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.COPY_SRC;
+		return this.device.createTexture({
+			label: options?.label,
+			size: [
+				width,
+				height,
+				1
+			],
+			format,
+			usage
+		});
+	}
+	/**
+	* Create ping-pong textures and a swap helper for iterative compute simulation
+	*/
+	createPingPongTextures(options) {
+		const textureA = this.createStorageTexture({
+			...options,
+			label: options?.label ? `${options.label}_A` : "pingpong_A"
+		});
+		const textureB = this.createStorageTexture({
+			...options,
+			label: options?.label ? `${options.label}_B` : "pingpong_B"
+		});
+		let read = textureA;
+		let write = textureB;
+		return {
+			get read() {
+				return read;
+			},
+			get write() {
+				return write;
+			},
+			getReadView: () => read.createView(),
+			getWriteView: () => write.createView(),
+			swap: () => {
+				const nextRead = write;
+				write = read;
+				read = nextRead;
+			}
+		};
+	}
 };
 async function createWGSLRenderer(cvs, options) {
 	const renderer = new WGSLRenderer(cvs, options);

package/dist/esm/index.d.ts

@@ -1,28 +1,19 @@
 //#region src/PassTextureRef.d.ts
 declare const PASS_TEXTURE_REF_SYMBOL: unique symbol;
+interface PassTextureOptions {
+  format?: GPUTextureFormat;
+  mipmaps?: boolean;
+  usage?: GPUTextureUsageFlags;
+  mipLevelCount?: number;
+}
 declare class PassTextureRef {
   readonly [PASS_TEXTURE_REF_SYMBOL] = true;
   readonly passName: string;
-  readonly options?: {
-    format?: GPUTextureFormat;
-    mipmaps?: boolean;
-    usage?: GPUTextureUsageFlags;
-    mipLevelCount?: number;
-  };
-  constructor(passName: string, options?: {
-    format?: GPUTextureFormat;
-    mipmaps?: boolean;
-    usage?: GPUTextureUsageFlags;
-    mipLevelCount?: number;
-  });
+  readonly options?: PassTextureOptions;
+  constructor(passName: string, options?: PassTextureOptions);
   static is(obj: any): obj is PassTextureRef;
   static fromGPUBindingResource(resource: GPUBindingResource): PassTextureRef | null;
-  static create(passName: string, options?: {
-    format?: GPUTextureFormat;
-    mipmaps?: boolean;
-    usage?: GPUTextureUsageFlags;
-    mipLevelCount?: number;
-  }): PassTextureRef;
+  static create(passName: string, options?: PassTextureOptions): PassTextureRef;
 }
 /**
  * Create a texture view suitable for sampling (not for render attachments)
@@ -82,6 +73,7 @@ interface InternalRenderPassDescriptor {
   renderToCanvas?: boolean;
 }
 declare class RenderPass {
+  readonly passType = "render";
   name: string;
   pipeline: GPURenderPipeline;
   bindGroup: GPUBindGroup | null;
@@ -140,6 +132,66 @@ declare class RenderPass {
   private getBlendState;
 }
 //#endregion
+//#region src/ComputePass.d.ts
+interface ComputeDispatchSize {
+  x: number;
+  y?: number;
+  z?: number;
+}
+type ComputeDispatchResolver = (context: {
+  width: number;
+  height: number;
+  passName: string;
+}) => ComputeDispatchSize;
+interface ComputePassOptions {
+  name: string;
+  shaderCode: string;
+  entryPoint?: string;
+  resources?: BindingResource[];
+  bindGroupSets?: {
+    [setName: string]: BindingResource[];
+  };
+  dispatch: ComputeDispatchResolver | ComputeDispatchSize;
+}
+interface InternalComputePassDescriptor {
+  name: string;
+  shaderCode: string;
+  entryPoint?: string;
+  bindGroupEntries: {
+    binding: number;
+    resource: BindingResource;
+  }[];
+  bindGroupSets?: {
+    [setName: string]: BindingResource[];
+  };
+  dispatch: ComputePassOptions['dispatch'];
+}
+declare class ComputePass {
+  readonly passType = "compute";
+  name: string;
+  pipeline: GPUComputePipeline;
+  bindGroup: GPUBindGroup | null;
+  passResources: BindingResource[];
+  bindGroups: {
+    [setName: string]: GPUBindGroup;
+  };
+  activeBindGroupSet: string;
+  enabled: boolean;
+  descriptor: InternalComputePassDescriptor;
+  compilationInfo: Promise<GPUCompilationInfo>;
+  dispatch: ComputePassOptions['dispatch'];
+  private device;
+  constructor(descriptor: InternalComputePassDescriptor, device: GPUDevice, layout?: GPUPipelineLayout | 'auto');
+  updateBindGroup(newEntries: {
+    binding: number;
+    resource: GPUBindingResource;
+  }[]): void;
+  switchBindGroupSet(setName: string): void;
+  getActiveBindGroup(): GPUBindGroup | null;
+  getBindGroupSets(): string[];
+  updateBindGroupSetResources(setName: string, resources: BindingResource[]): void;
+}
+//#endregion
 //#region src/index.d.ts
 declare enum RenderMode {
   NORMAL = "normal",
@@ -158,6 +210,20 @@ interface Uniforms {
     (): GPUBuffer;
   };
 }
+interface StorageTextureOptions {
+  width?: number;
+  height?: number;
+  format?: GPUTextureFormat;
+  usage?: GPUTextureUsageFlags;
+  label?: string;
+}
+interface PingPongTextureSet {
+  read: GPUTexture;
+  write: GPUTexture;
+  getReadView: () => GPUTextureView;
+  getWriteView: () => GPUTextureView;
+  swap: () => void;
+}
 declare class WGSLRenderer {
   canvas: HTMLCanvasElement;
   options?: WGSLRendererOptions | undefined;
@@ -171,6 +237,7 @@ declare class WGSLRenderer {
   private renderMode;
   private readBuffer;
   private hasClearedCanvasThisFrame;
+  private getPassOutputTextureName;
   constructor(canvas: HTMLCanvasElement, options?: WGSLRendererOptions | undefined);
   init(): Promise<void>;
   resize(width: number, height: number): Promise<void>;
@@ -192,12 +259,7 @@ declare class WGSLRenderer {
    * @param passName Name of the pass to reference
    * @param options Optional texture creation options for when the texture needs to be created
    */
-  getPassTexture(passName: string, options?: {
-    format?: GPUTextureFormat;
-    mipmaps?: boolean;
-    usage?: GPUTextureUsageFlags;
-    mipLevelCount?: number;
-  }): PassTextureRef;
+  getPassTexture(passName: string, options?: PassTextureOptions): PassTextureRef;
   /**
    * Resolve a PassTextureRef to actual GPUTextureView with validation
    */
@@ -205,7 +267,7 @@ declare class WGSLRenderer {
   /**
    * Get pass by name
    */
-  getPassByName(passName: string): RenderPass | undefined;
+  getPassByName(passName: string): ComputePass | RenderPass | undefined;
   /**
    * Get the raw GPUTexture for a pass (useful for creating custom views)
    * Note: The returned texture should not be used directly as a render attachment
@@ -231,15 +293,15 @@ declare class WGSLRenderer {
   /**
    * Get all passes (enabled and disabled)
    */
-  getAllPasses(): RenderPass[];
+  getAllPasses(): Array<ComputePass | RenderPass>;
   /**
    * Get only enabled passes
    */
-  getEnabledPasses(): RenderPass[];
+  getEnabledPasses(): Array<ComputePass | RenderPass>;
   /**
    * Set the entire passes array (replaces existing passes)
    */
-  setPasses(passes: RenderPass[]): void;
+  setPasses(passes: Array<ComputePass | RenderPass>): void;
   /**
    * Switch bind group set for a specific pass
    */
@@ -250,10 +312,12 @@ declare class WGSLRenderer {
    */
   updateBindGroupSetResources(passName: string, setName: string, resources: BindingResource[]): void;
   private createPass;
+  private createComputePass;
   /**
    * Add a render pass to the multi-pass pipeline
    */
   addPass(descriptor: RenderPassOptions): void;
+  addComputePass(descriptor: ComputePassOptions): void;
   /**
    * Validate all shader compilations
    * Call this after adding all passes to check for shader errors
@@ -261,6 +325,7 @@ declare class WGSLRenderer {
    */
   validateShaders(): Promise<void>;
   insertPassesTo(passName: string, descriptors: RenderPassOptions[]): void;
+  insertComputePassesTo(passName: string, descriptors: ComputePassOptions[]): void;
   /**
    * Resolve resource to actual GPU binding resource
    * Handles PassTextureRef by getting the current texture view with validation
@@ -302,7 +367,15 @@ declare class WGSLRenderer {
    * @returns Uint8Array格式的RGBA像素数据
    */
   captureFrameFast(): Promise<Uint8Array>;
+  /**
+   * Create a storage-capable texture (useful for compute passes)
+   */
+  createStorageTexture(options?: StorageTextureOptions): GPUTexture;
+  /**
+   * Create ping-pong textures and a swap helper for iterative compute simulation
+   */
+  createPingPongTextures(options?: StorageTextureOptions): PingPongTextureSet;
 }
 declare function createWGSLRenderer(cvs: HTMLCanvasElement, options?: WGSLRendererOptions): Promise<WGSLRenderer>;
 //#endregion
-export { BindingResource, PassTextureRef, RenderMode, RenderPassOptions, Uniforms, WGSLRenderer, createSamplingView, createWGSLRenderer };
+export { BindingResource, type ComputePassOptions, PassTextureRef, type PingPongTextureSet, RenderMode, RenderPassOptions, type StorageTextureOptions, type Uniforms, WGSLRenderer, createSamplingView, createWGSLRenderer };

package/dist/esm/index.js

@@ -1,5 +1,6 @@
 //#region src/RenderPass.ts
 var RenderPass = class {
+	passType = "render";
 	name;
 	pipeline;
 	bindGroup;
@@ -111,7 +112,8 @@ var RenderPass = class {
 		if (this.bindGroups[setName]) {
 			this.activeBindGroupSet = setName;
 			this.bindGroup = this.bindGroups[setName];
-		} else throw new Error(`Bind group set '${setName}' not found. Available sets: ${Object.keys(this.bindGroups).join(", ")}`);
+		} else if (this.descriptor.bindGroupSets?.[setName]) this.activeBindGroupSet = setName;
+		else throw new Error(`Bind group set '${setName}' not found. Available sets: ${Object.keys(this.bindGroups).join(", ")}`);
 	}
 	/**
 	* Get the current active bind group
@@ -308,6 +310,78 @@ var RenderPass = class {
 	}
 };
 //#endregion
+//#region src/ComputePass.ts
+var ComputePass = class {
+	passType = "compute";
+	name;
+	pipeline;
+	bindGroup;
+	passResources = [];
+	bindGroups = {};
+	activeBindGroupSet = "default";
+	enabled = true;
+	descriptor;
+	compilationInfo;
+	dispatch;
+	device;
+	constructor(descriptor, device, layout = "auto") {
+		this.device = device;
+		this.descriptor = descriptor;
+		this.name = descriptor.name;
+		this.dispatch = descriptor.dispatch;
+		const module = this.device.createShaderModule({
+			code: descriptor.shaderCode,
+			label: `Compute shader for ${descriptor.name}`
+		});
+		this.compilationInfo = module.getCompilationInfo();
+		const entryPoint = descriptor.entryPoint || "cs_main";
+		this.pipeline = this.device.createComputePipeline({
+			layout,
+			compute: {
+				module,
+				entryPoint
+			}
+		});
+		this.bindGroup = null;
+	}
+	updateBindGroup(newEntries) {
+		const bindGroupLayout = this.pipeline.getBindGroupLayout(0);
+		this.bindGroup = this.device.createBindGroup({
+			layout: bindGroupLayout,
+			entries: newEntries
+		});
+		this.bindGroups.default = this.bindGroup;
+	}
+	switchBindGroupSet(setName) {
+		if (this.bindGroups[setName]) {
+			this.activeBindGroupSet = setName;
+			this.bindGroup = this.bindGroups[setName];
+		} else if (this.descriptor.bindGroupSets?.[setName]) this.activeBindGroupSet = setName;
+		else throw new Error(`Bind group set '${setName}' not found. Available sets: ${Object.keys(this.bindGroups).join(", ")}`);
+	}
+	getActiveBindGroup() {
+		return this.bindGroups[this.activeBindGroupSet] || this.bindGroup;
+	}
+	getBindGroupSets() {
+		return Object.keys(this.bindGroups);
+	}
+	updateBindGroupSetResources(setName, resources) {
+		const entries = [];
+		resources.forEach((resource, index) => {
+			if (resource) entries.push({
+				binding: index,
+				resource
+			});
+		});
+		const bindGroupLayout = this.pipeline.getBindGroupLayout(0);
+		this.bindGroups[setName] = this.device.createBindGroup({
+			layout: bindGroupLayout,
+			entries
+		});
+		if (this.activeBindGroupSet === setName) this.bindGroup = this.bindGroups[setName];
+	}
+};
+//#endregion
 //#region src/TextureManager.ts
 var TextureManager = class {
 	textures = /* @__PURE__ */ new Map();
@@ -321,12 +395,12 @@ var TextureManager = class {
 		this.width = width;
 		this.height = height;
 	}
-	createTexture(name, format, mipLevelCount) {
+	createTexture(name, format, mipLevelCount, usage) {
 		if (this.textures.has(name)) this.textures.get(name).destroy();
 		const texture = this.device.createTexture({
 			size: [this.width, this.height],
 			format: format || "bgra8unorm",
-			usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST,
+			usage: usage ?? GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST,
 			mipLevelCount: mipLevelCount || 1
 		});
 		this.textures.set(name, texture);
@@ -469,6 +543,9 @@ var WGSLRenderer = class {
 	renderMode = "normal";
 	readBuffer = null;
 	hasClearedCanvasThisFrame = false;
+	getPassOutputTextureName(passName) {
+		return `pass_${passName}_output`;
+	}
 	constructor(canvas, options) {
 		this.canvas = canvas;
 		this.options = options;
@@ -541,12 +618,14 @@ var WGSLRenderer = class {
 	resolveTextureRef(ref) {
 		const targetPass = this.passes.find((pass) => pass.name === ref.passName);
 		if (!targetPass) throw new Error(`Cannot find pass named '${ref.passName}'. Available passes: [${this.passes.map((p) => p.name).join(", ")}]`);
-		if (targetPass.view) return targetPass.view;
-		const textureName = `pass_${this.passes.indexOf(targetPass)}_output`;
+		if (targetPass.passType === "render" && targetPass.view) return targetPass.view;
+		const textureName = this.getPassOutputTextureName(targetPass.name);
 		let texture = this.textureManager.getTexture(textureName);
 		if (!texture) {
-			const format = this.passes.find((pass) => pass.name === ref.passName)?.format || this.format;
-			texture = this.textureManager.createTexture(textureName, format, ref.options?.mipLevelCount);
+			const targetPass = this.passes.find((pass) => pass.name === ref.passName);
+			const format = ref.options?.format ?? (targetPass?.passType === "render" ? targetPass.format || this.format : this.format);
+			const usage = ref.options?.usage ?? GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST;
+			texture = this.textureManager.createTexture(textureName, format, ref.options?.mipLevelCount, usage);
 		}
 		return texture.createView({
 			baseMipLevel: 0,
@@ -567,7 +646,7 @@ var WGSLRenderer = class {
 	getPassTextureRaw(passName) {
 		const targetPass = this.passes.find((pass) => pass.name === passName);
 		if (!targetPass) throw new Error(`Cannot find pass named '${passName}'. Available passes: [${this.passes.map((p) => p.name).join(", ")}]`);
-		const textureName = `pass_${this.passes.indexOf(targetPass)}_output`;
+		const textureName = this.getPassOutputTextureName(targetPass.name);
 		const texture = this.textureManager.getTexture(textureName);
 		if (texture) return texture;
 		return null;
@@ -674,6 +753,28 @@ var WGSLRenderer = class {
 		const pipelineFormat = descriptor.format || this.format;
 		return new RenderPass(internalDescriptor, this.device, pipelineFormat);
 	}
+	createComputePass(descriptor) {
+		const finalBindGroupEntries = [];
+		descriptor.resources?.forEach((resource, index) => {
+			finalBindGroupEntries.push({
+				binding: index,
+				resource
+			});
+		});
+		let bindGroupSetsCopy = void 0;
+		if (descriptor.bindGroupSets) {
+			bindGroupSetsCopy = {};
+			for (const [setName, resources] of Object.entries(descriptor.bindGroupSets)) bindGroupSetsCopy[setName] = [...resources];
+		}
+		return new ComputePass({
+			name: descriptor.name,
+			shaderCode: descriptor.shaderCode,
+			entryPoint: descriptor.entryPoint,
+			bindGroupEntries: finalBindGroupEntries,
+			bindGroupSets: bindGroupSetsCopy,
+			dispatch: descriptor.dispatch
+		}, this.device);
+	}
 	/**
 	* Add a render pass to the multi-pass pipeline
 	*/
@@ -682,6 +783,11 @@ var WGSLRenderer = class {
 		pass.passResources = descriptor.resources ?? [];
 		this.passes.push(pass);
 	}
+	addComputePass(descriptor) {
+		const pass = this.createComputePass(descriptor);
+		pass.passResources = descriptor.resources ?? [];
+		this.passes.push(pass);
+	}
 	/**
 	* Validate all shader compilations
 	* Call this after adding all passes to check for shader errors
@@ -694,7 +800,8 @@ var WGSLRenderer = class {
 				for (const msg of info.messages) errMsg += `[WGSL ${msg.type}] Shader compilation failed for pass ${pass.name} (${msg.lineNum}:${msg.linePos}): ${msg.message}\n`;
 				return Promise.reject({
 					messages: info.messages,
-					cause: errMsg
+					cause: errMsg,
+					pass: pass.name
 				});
 			}
 		}));
@@ -720,6 +827,16 @@ var WGSLRenderer = class {
 		});
 		this.passes.splice(i, 0, ...newPasses);
 	}
+	insertComputePassesTo(passName, descriptors) {
+		const i = this.passes.findIndex((p) => p.name === passName);
+		if (i === -1) throw new Error(`Cannot find pass named '${passName}'. Available passes: [${this.passes.map((p) => p.name).join(", ")}]`);
+		const newPasses = descriptors.map((desc) => {
+			const pass = this.createComputePass(desc);
+			pass.passResources = desc.resources ?? [];
+			return pass;
+		});
+		this.passes.splice(i, 0, ...newPasses);
+	}
 	/**
 	* Resolve resource to actual GPU binding resource
 	* Handles PassTextureRef by getting the current texture view with validation
@@ -742,6 +859,14 @@ var WGSLRenderer = class {
 				});
 			});
 			pass.updateBindGroup(finalBindGroupEntries);
+			const bindGroupSets = pass.descriptor.bindGroupSets;
+			if (bindGroupSets) for (const [setName, resources] of Object.entries(bindGroupSets)) {
+				const resolvedResources = resources.map((resource) => {
+					if (resource) return this.resolveResource(resource);
+					return resource;
+				});
+				pass.updateBindGroupSetResources(setName, resolvedResources);
+			}
 		});
 	}
 	/**
@@ -818,16 +943,36 @@ var WGSLRenderer = class {
 		if (this.passes.length === 0) return;
 		const enabledPasses = this.getEnabledPasses();
 		if (enabledPasses.length === 0) return;
+		const enabledRenderPasses = enabledPasses.filter((pass) => pass.passType === "render");
+		if (enabledRenderPasses.length === 0) return;
 		this.hasClearedCanvasThisFrame = false;
 		this.updateBindGroups();
 		const commandEncoder = this.device.createCommandEncoder();
 		const canvasWidth = this.canvas.width || this.canvas.clientWidth;
 		const canvasHeight = this.canvas.height || this.canvas.clientHeight;
+		const lastRenderPass = enabledRenderPasses[enabledRenderPasses.length - 1];
 		for (let i = 0; i < enabledPasses.length; i++) {
 			const pass = enabledPasses[i];
+			if (pass.passType === "compute") {
+				const computePass = commandEncoder.beginComputePass();
+				computePass.setPipeline(pass.pipeline);
+				const activeBindGroup = pass.getActiveBindGroup();
+				if (activeBindGroup) computePass.setBindGroup(0, activeBindGroup);
+				const dispatch = typeof pass.dispatch === "function" ? pass.dispatch({
+					width: canvasWidth,
+					height: canvasHeight,
+					passName: pass.name
+				}) : pass.dispatch;
+				const x = Math.max(1, Math.floor(dispatch.x));
+				const y = Math.max(1, Math.floor(dispatch.y ?? 1));
+				const z = Math.max(1, Math.floor(dispatch.z ?? 1));
+				computePass.dispatchWorkgroups(x, y, z);
+				computePass.end();
+				continue;
+			}
 			let loadOp = "load";
 			const isFirst = i === 0;
-			const isLastPass = i === enabledPasses.length - 1;
+			const isLastPass = pass.name === lastRenderPass.name;
 			if (isFirst) loadOp = "clear";
 			let renderTargetView;
 			let isRenderingToCanvas = false;
@@ -844,7 +989,7 @@ var WGSLRenderer = class {
 				renderTargetView = this.ctx.getCurrentTexture().createView();
 				isRenderingToCanvas = true;
 			} else {
-				const textureName = `pass_${i}_output`;
+				const textureName = this.getPassOutputTextureName(pass.name);
 				let texture = this.textureManager.getTexture(textureName);
 				if (!texture) texture = this.textureManager.createTexture(textureName, pass.format || this.format);
 				renderTargetView = texture.createView();
@@ -926,6 +1071,55 @@ var WGSLRenderer = class {
 		}
 		return pixelData;
 	}
+	/**
+	* Create a storage-capable texture (useful for compute passes)
+	*/
+	createStorageTexture(options) {
+		const width = options?.width ?? (this.canvas.width || this.canvas.clientWidth);
+		const height = options?.height ?? (this.canvas.height || this.canvas.clientHeight);
+		const format = options?.format ?? "rgba8unorm";
+		const usage = options?.usage ?? GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.COPY_SRC;
+		return this.device.createTexture({
+			label: options?.label,
+			size: [
+				width,
+				height,
+				1
+			],
+			format,
+			usage
+		});
+	}
+	/**
+	* Create ping-pong textures and a swap helper for iterative compute simulation
+	*/
+	createPingPongTextures(options) {
+		const textureA = this.createStorageTexture({
+			...options,
+			label: options?.label ? `${options.label}_A` : "pingpong_A"
+		});
+		const textureB = this.createStorageTexture({
+			...options,
+			label: options?.label ? `${options.label}_B` : "pingpong_B"
+		});
+		let read = textureA;
+		let write = textureB;
+		return {
+			get read() {
+				return read;
+			},
+			get write() {
+				return write;
+			},
+			getReadView: () => read.createView(),
+			getWriteView: () => write.createView(),
+			swap: () => {
+				const nextRead = write;
+				write = read;
+				read = nextRead;
+			}
+		};
+	}
 };
 async function createWGSLRenderer(cvs, options) {
 	const renderer = new WGSLRenderer(cvs, options);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wgsl-renderer",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "A multi-pass renderer based on WebGPU and WGSL.",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -34,13 +34,13 @@
     "dist"
   ],
   "devDependencies": {
-    "@taiyuuki/eslint-config": "^1.6.6",
+    "@taiyuuki/eslint-config": "^1.6.9",
     "@types/node": "^25.5.2",
     "@webgpu/types": "^0.1.69",
     "eslint": "^10.2.0",
     "rimraf": "^6.1.3",
-    "rolldown": "1.0.0-rc.17",
-    "rolldown-plugin-dts": "^0.23.2",
+    "rolldown": "1.0.0-rc.18",
+    "rolldown-plugin-dts": "^0.24.1",
     "typescript": "^6.0.2"
   },
   "scripts": {