wgsl-renderer 0.0.5 → 0.1.1

package/README.md

@@ -198,13 +198,14 @@ Add a render pass.
 interface RenderPassOptions {
     name: string;
     shaderCode: string;
-    entryPoints?: { 
+    entryPoints?: {
         vertex?: string;	// Default is 'vs_main' function
         fragment?: string;	// Default is 'fs_main' function
     };
     clearColor?: { r: number; g: number; b: number; a: number };
     blendMode?: 'additive' | 'alpha' | 'multiply' | 'none';
     resources?: GPUBindingResource[];
+    bindGroupSets?: { [setName: string]: GPUBindingResource[] }; // Multiple bind group sets
     view?: GPUTextureView; 		// Optional custom view for this pass
     format?: GPUTextureFormat; 	// Optional format for the view (required when using custom view with different format)
 }
@@ -293,7 +294,193 @@ renderer.loopRender(time => {
 #### renderer.stopLoop()
 Stop loop rendering.
 
+### Bind Group Switching
 
+The renderer supports switching between different bind group sets at runtime. This is useful for:
+- Switching between different textures
+- Changing shader parameters dynamically
+- Implementing multi-material rendering
+
+#### renderer.switchBindGroupSet(passName, setName)
+
+Switch to a different bind group set for a specific pass.
+
+```typescript
+// Add pass with multiple bind group sets
+renderer.addPass({
+    name: 'main',
+    shaderCode: myShader,
+    resources: [uniforms, sampler, texture1], // Default resources
+    bindGroupSets: {
+        'material1': [uniforms, sampler, texture1],
+        'material2': [uniforms, sampler, texture2],
+        'material3': [uniforms, sampler, texture3],
+    }
+});
+
+// Switch between materials
+renderer.switchBindGroupSet('main', 'material1');
+renderer.switchBindGroupSet('main', 'material2');
+renderer.switchBindGroupSet('main', 'material3');
+```
+
+**Example: Dynamic Texture Switching**
+
+```typescript
+// Create multiple textures
+const textures = [
+    await renderer.loadImageTexture('texture1.png'),
+    await renderer.loadImageTexture('texture2.png'),
+    await renderer.loadImageTexture('texture3.png'),
+];
+
+// Add pass with bind group sets
+renderer.addPass({
+    name: 'renderer',
+    shaderCode: textureShader,
+    resources: [uniforms, sampler, textures[0]], // Default
+    bindGroupSets: {
+        'texture0': [uniforms, sampler, textures[0]],
+        'texture1': [uniforms, sampler, textures[1]],
+        'texture2': [uniforms, sampler, textures[2]],
+    }
+});
+
+// User controls
+document.getElementById('btn1').onclick = () => {
+    renderer.switchBindGroupSet('renderer', 'texture0');
+};
+document.getElementById('btn2').onclick = () => {
+    renderer.switchBindGroupSet('renderer', 'texture1');
+};
+document.getElementById('btn3').onclick = () => {
+    renderer.switchBindGroupSet('renderer', 'texture2');
+};
+```
+
+#### renderer.updateBindGroupSetResources(passName, setName, resources)
+
+Dynamically update or add a bind group set with new resources. This allows runtime modification of bind groups without recreating the entire pass.
+
+```typescript
+// Update a bind group set with new texture
+const newTexture = renderer.createTexture({ /* options */ });
+renderer.updateBindGroupSetResources('main', 'textureSet', [
+    uniforms,
+    sampler,
+    newTexture,
+]);
+
+// Create a new bind group set on the fly
+renderer.updateBindGroupSetResources('main', 'newSet', [
+    newUniforms,
+    newSampler,
+    anotherTexture,
+]);
+renderer.switchBindGroupSet('main', 'newSet');
+```
+
+This is useful for:
+- Streaming textures in real-time
+- Updating shader parameters dynamically
+- Creating procedural content at runtime
+- Memory-efficient resource management
+
+## Render Pass Management
+
+The renderer provides flexible pass management capabilities, allowing you to enable, disable, and remove passes dynamically.
+
+### renderer.enablePass(passName)
+
+Enable a render pass for rendering.
+
+```typescript
+renderer.enablePass('background-effect');
+```
+
+### renderer.disablePass(passName)
+
+Disable a render pass (it will be skipped during rendering).
+
+```typescript
+renderer.disablePass('post-process');
+```
+
+### renderer.isPassEnabled(passName)
+
+Check if a pass is currently enabled.
+
+```typescript
+if (renderer.isPassEnabled('main-effect')) {
+    console.log('Main effect is active');
+}
+```
+
+### renderer.removePass(passName)
+
+Permanently remove a render pass from the pipeline.
+
+```typescript
+const removed = renderer.removePass('debug-pass');
+if (removed) {
+    console.log('Pass successfully removed');
+}
+```
+
+### renderer.getAllPasses()
+
+Get all passes (both enabled and disabled).
+
+```typescript
+const allPasses = renderer.getAllPasses();
+allPasses.forEach(pass => {
+    console.log(`Pass: ${pass.name}, Enabled: ${pass.enabled}`);
+});
+```
+
+### renderer.getEnabledPasses()
+
+Get only the enabled passes.
+
+```typescript
+const activePasses = renderer.getEnabledPasses();
+console.log(`Active passes: ${activePasses.length}`);
+```
+
+### Pass Management Use Cases
+
+**Debugging and Development**
+```typescript
+// Isolate a specific pass for debugging
+renderer.disablePass('post-process');
+renderer.disablePass('effects');
+// Only background will render
+
+// Re-enable all passes
+const allPasses = renderer.getAllPasses();
+allPasses.forEach(pass => renderer.enablePass(pass.name));
+```
+
+**Performance Optimization**
+```typescript
+// Disable expensive effects on low-end devices
+if (isLowEndDevice) {
+    renderer.disablePass('bloom');
+    renderer.disablePass('ssao');
+}
+```
+
+**Dynamic Feature Toggling**
+```typescript
+// UI controls for enabling/disabling effects
+document.getElementById('toggle-bloom').onclick = () => {
+    if (renderer.isPassEnabled('bloom')) {
+        renderer.disablePass('bloom');
+    } else {
+        renderer.enablePass('bloom');
+    }
+};
+```
 
 ### renderer.createSampler(options?)
 

package/README.zh-CN.md

@@ -201,7 +201,7 @@ const renderer = await createWGSLRenderer(canvas)
 
 options：
 
-```ts
+```typescript
 interface WGSLRendererOptions { 
     config?: GPUCanvasConfiguration;
 }
@@ -211,7 +211,7 @@ interface WGSLRendererOptions {
 
 添加渲染通道。
 
-```ts
+```typescript
 interface RenderPassOptions {
     name: string;
     shaderCode: string;
@@ -221,7 +221,8 @@ interface RenderPassOptions {
     };
     clearColor?: { r: number; g: number; b: number; a: number };
     blendMode?: 'additive' | 'alpha' | 'multiply' | 'none';
-    resources: GPUBindingResource[];
+    resources?: GPUBindingResource[];
+    bindGroupSets?: { [setName: string]: GPUBindingResource[] }; // 可选的设置多个绑定组，用于动态切换
     view?: GPUTextureView; 		// 可选的自定义View
     format?: GPUTextureFormat; 	// 可选的自定义格式（使用自定义View时需要指定格式一致）
 }
@@ -312,11 +313,214 @@ renderer.loopRender((time) => {
 #### renderer.stopLoop()
 停止循环渲染。
 
+### 切换绑定组
+
+渲染器支持在运行时在不同的绑定组之间切换，用于：
+
+- 切换不同的纹理
+- 动态修改着色器参数
+- 实现多材质渲染
+
+#### renderer.switchBindGroupSet(passName, setName)
+
+给指定的通道切换绑定组
+
+```typescript
+// 给渲染通道添加多个绑定组
+renderer.addPass({
+    name: 'main',
+    shaderCode: myShader,
+    resources: [uniforms, sampler, texture1], // Default resources
+    bindGroupSets: {
+        'material1': [uniforms, sampler, texture1],
+        'material2': [uniforms, sampler, texture2],
+        'material3': [uniforms, sampler, texture3],
+    }
+});
+
+// Switch between materials
+renderer.switchBindGroupSet('main', 'material1');
+renderer.switchBindGroupSet('main', 'material2');
+renderer.switchBindGroupSet('main', 'material3');
+```
+
+**示例：动态切换纹理**
+
+
+
+
+
+```typescript
+// 创建多个纹理
+const textures = [
+    await renderer.loadImageTexture('texture1.png'),
+    await renderer.loadImageTexture('texture2.png'),
+    await renderer.loadImageTexture('texture3.png'),
+];
+
+// 给渲染通道设置多个绑定
+renderer.addPass({
+    name: 'renderer',
+    shaderCode: textureShader,
+    resources: [uniforms, sampler, textures[0]], // Default
+    bindGroupSets: {
+        'texture0': [uniforms, sampler, textures[0]],
+        'texture1': [uniforms, sampler, textures[1]],
+        'texture2': [uniforms, sampler, textures[2]],
+    }
+});
+
+// 用户控制
+document.getElementById('btn1').onclick = () => {
+    renderer.switchBindGroupSet('renderer', 'texture0');
+};
+document.getElementById('btn2').onclick = () => {
+    renderer.switchBindGroupSet('renderer', 'texture1');
+};
+document.getElementById('btn3').onclick = () => {
+    renderer.switchBindGroupSet('renderer', 'texture2');
+};
+```
+
+#### renderer.updateBindGroupSetResources(passName, setName, resources)
+
+动态增、改设置的绑定组。这可以让你在运行时修改绑定组。
+
+```typescript
+// 添加新纹理到已有绑定组（假设textureSet绑定组已经添加到了main通道）
+const newTexture = renderer.createTexture({ /* options */ });
+renderer.updateBindGroupSetResources('main', 'textureSet', [
+    uniforms,
+    sampler,
+    newTexture,
+]);
+
+// 即时创建一个新的绑定组
+renderer.updateBindGroupSetResources('main', 'newSet', [
+    newUniforms,
+    newSampler,
+    anotherTexture,
+]);
+renderer.switchBindGroupSet('main', 'newSet');
+```
+
+可用于：
+
+- 实时流式传输纹理
+- 动态更新着色器参数
+- 运行时创建编程式内容
+- 高效内存资源管理
+
+### 渲染通道管理
+
+渲染器提供了灵活的渲染通道管理功能，你可以动态的开启、关闭、移除渲染通道。
+
+#### renderer.enablePass(passName)
+
+开启渲染通道。
+
+```typescript
+renderer.enablePass('background-effect');
+```
+
+#### renderer.disablePass(passName)
+
+禁用渲染通道（在渲染过程中将跳过该通道的渲染）。
+
+```typescript
+renderer.disablePass('post-process');
+```
+
+#### renderer.isPassEnabled(passName)
+
+检查通道当前是否开启。
+
+```typescript
+if (renderer.isPassEnabled('main-effect')) {
+    console.log('Main effect is active');
+}
+```
+
+
+
+#### renderer.removePass(passName)
+
+从渲染管线中永久删除渲染通道。
+
+```typescript
+const removed = renderer.removePass('debug-pass');
+if (removed) {
+    console.log('Pass successfully removed');
+}
+```
+
+#### renderer.getEnabledPasses()
+
+获取所有开启的渲染通道。
+
+```typescript
+const activePasses = renderer.getEnabledPasses();
+console.log(`Active passes: ${activePasses.length}`);
+```
+
+
+
+#### renderer.getAllPasses()
+
+获取所有渲染通道（包括开启和禁用的）。
+
+```typescript
+const allPasses = renderer.getAllPasses();
+allPasses.forEach(pass => {
+    console.log(`Pass: ${pass.name}, Enabled: ${pass.enabled}`);
+});
+```
+
+#### 通道管理示例
+
+**开发调试**
+
+```typescript
+// Isolate a specific pass for debugging
+renderer.disablePass('post-process');
+renderer.disablePass('effects');
+// Only background will render
+
+// Re-enable all passes
+const allPasses = renderer.getAllPasses();
+allPasses.forEach(pass => renderer.enablePass(pass.name));
+```
+
+**性能优化**
+
+```typescript
+// Disable expensive effects on low-end devices
+if (isLowEndDevice) {
+    renderer.disablePass('bloom');
+    renderer.disablePass('ssao');
+}
+```
+
+**动态功能切换**
+
+```typescript
+// UI controls for enabling/disabling effects
+document.getElementById('toggle-bloom').onclick = () => {
+    if (renderer.isPassEnabled('bloom')) {
+        renderer.disablePass('bloom');
+    } else {
+        renderer.enablePass('bloom');
+    }
+};
+```
+
+
+
 ### renderer.createSampler(options?)
 
 创建采样器，默认参数：
 
-```ts
+```typescript
 const options = {
     magFilter: 'linear',
     minFilter: 'linear',

package/dist/cjs/index.js

@@ -10,9 +10,14 @@ var RenderPass = class {
 	view;
 	format;
 	passResources = [];
+	bindGroups = {};
+	activeBindGroupSet = "default";
 	device;
+	descriptor;
+	enabled = true;
 	constructor(descriptor, device, format, layout) {
 		this.device = device;
+		this.descriptor = descriptor;
 		this.name = descriptor.name;
 		this.clearColor = descriptor.clearColor || {
 			r: 0,
@@ -24,7 +29,10 @@ var RenderPass = class {
 		this.view = descriptor.view;
 		this.format = descriptor.format;
 		const actualFormat = descriptor.format || format;
-		const module$1 = this.device.createShaderModule({ code: descriptor.shaderCode });
+		const module$1 = this.device.createShaderModule({
+			code: descriptor.shaderCode,
+			label: `Shader for ${descriptor.name}`
+		});
 		this.vertexBuffer = this.device.createBuffer({
 			size: 36,
 			usage: GPUBufferUsage.VERTEX,
@@ -79,6 +87,59 @@ var RenderPass = class {
 			layout: bindGroupLayout,
 			entries: newEntries
 		});
+		this.bindGroups.default = this.bindGroup;
+	}
+	/**
+	* Update a specific bind group set with new entries
+	*/
+	updateBindGroupSet(setName, newEntries) {
+		if (!this.bindGroups[setName]) {
+			const bindGroupLayout = this.pipeline.getBindGroupLayout(0);
+			this.bindGroups[setName] = this.device.createBindGroup({
+				layout: bindGroupLayout,
+				entries: newEntries
+			});
+		}
+	}
+	/**
+	* Switch to a different bind group set
+	*/
+	switchBindGroupSet(setName) {
+		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(", ")}`);
+	}
+	/**
+	* Get the current active bind group
+	*/
+	getActiveBindGroup() {
+		return this.bindGroups[this.activeBindGroupSet] || this.bindGroup;
+	}
+	/**
+	* Get all available bind group set names
+	*/
+	getBindGroupSets() {
+		return Object.keys(this.bindGroups);
+	}
+	/**
+	* Update or add a bind group set with new resources
+	* This allows dynamic modification of bind groups at runtime
+	*/
+	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];
 	}
 	getBlendState() {
 		switch (this.blendMode) {
@@ -270,6 +331,74 @@ var WGSLRenderer = class {
 		return this.passes.find((pass) => pass.name === passName);
 	}
 	/**
+	* Disable a render pass (it will be skipped during rendering)
+	*/
+	disablePass(passName) {
+		const pass = this.getPassByName(passName);
+		if (!pass) throw new Error(`Cannot find pass named '${passName}'. Available passes: [${this.passes.map((p) => p.name).join(", ")}]`);
+		pass.enabled = false;
+	}
+	/**
+	* Enable a render pass
+	*/
+	enablePass(passName) {
+		const pass = this.getPassByName(passName);
+		if (!pass) throw new Error(`Cannot find pass named '${passName}'. Available passes: [${this.passes.map((p) => p.name).join(", ")}]`);
+		pass.enabled = true;
+	}
+	/**
+	* Check if a pass is enabled
+	*/
+	isPassEnabled(passName) {
+		const pass = this.getPassByName(passName);
+		if (!pass) throw new Error(`Cannot find pass named '${passName}'. Available passes: [${this.passes.map((p) => p.name).join(", ")}]`);
+		return pass.enabled;
+	}
+	/**
+	* Remove a render pass permanently
+	*/
+	removePass(passName) {
+		const index = this.passes.findIndex((pass) => pass.name === passName);
+		if (index !== -1) {
+			this.passes.splice(index, 1);
+			return true;
+		}
+		return false;
+	}
+	/**
+	* Get all passes (enabled and disabled)
+	*/
+	getAllPasses() {
+		return [...this.passes];
+	}
+	/**
+	* Get only enabled passes
+	*/
+	getEnabledPasses() {
+		return this.passes.filter((pass) => pass.enabled);
+	}
+	/**
+	* Switch bind group set for a specific pass
+	*/
+	switchBindGroupSet(passName, setName) {
+		const pass = this.getPassByName(passName);
+		if (!pass) throw new Error(`Cannot find pass named '${passName}'. Available passes: [${this.passes.map((p) => p.name).join(", ")}]`);
+		pass.switchBindGroupSet(setName);
+	}
+	/**
+	* Update bind group set resources for a specific pass
+	* This allows dynamic modification of bind groups at runtime
+	*/
+	updateBindGroupSetResources(passName, setName, resources) {
+		const pass = this.getPassByName(passName);
+		if (!pass) throw new Error(`Cannot find pass named '${passName}'. Available passes: [${this.passes.map((p) => p.name).join(", ")}]`);
+		const resolvedResources = resources.map((resource) => {
+			if (resource && isPassTextureRef(resource)) return this.resolveResource(resource);
+			return resource;
+		});
+		pass.updateBindGroupSetResources(setName, resolvedResources);
+	}
+	/**
 	* Add a render pass to the multi-pass pipeline
 	*/
 	addPass(descriptor) {
@@ -280,6 +409,11 @@ var WGSLRenderer = class {
 				resource
 			});
 		});
+		let bindGroupSetsCopy = void 0;
+		if (descriptor.bindGroupSets) {
+			bindGroupSetsCopy = {};
+			for (const [setName, resources] of Object.entries(descriptor.bindGroupSets)) bindGroupSetsCopy[setName] = [...resources];
+		}
 		const internalDescriptor = {
 			name: descriptor.name,
 			shaderCode: descriptor.shaderCode,
@@ -287,6 +421,7 @@ var WGSLRenderer = class {
 			clearColor: descriptor.clearColor,
 			blendMode: descriptor.blendMode,
 			bindGroupEntries: finalBindGroupEntries,
+			bindGroupSets: bindGroupSetsCopy,
 			view: descriptor.view,
 			format: descriptor.format
 		};
@@ -317,6 +452,19 @@ var WGSLRenderer = class {
 				});
 			});
 			pass.updateBindGroup(finalBindGroupEntries);
+			if (pass.descriptor && pass.descriptor.bindGroupSets) for (const [setName, resources] of Object.entries(pass.descriptor.bindGroupSets)) {
+				const entries = [];
+				resources.forEach((resource, index) => {
+					if (resource) {
+						const resolved = this.resolveResource(resource);
+						entries.push({
+							binding: index,
+							resource: resolved
+						});
+					}
+				});
+				pass.updateBindGroupSet(setName, entries);
+			}
 		});
 	}
 	/**
@@ -349,13 +497,22 @@ var WGSLRenderer = class {
 			addressModeV: "clamp-to-edge"
 		}, options));
 	}
-	async loadImageTexture(url) {
-		const resp = fetch(url);
-		resp.catch((err) => {
-			console.error("Failed to load texture:", err);
-		});
-		const res = await resp;
-		const future = createImageBitmap(await res.blob());
+	async loadImageTexture(image, format) {
+		if (typeof image === "string") if (image.startsWith("data:")) {
+			const base64Data = image.split(",")[1];
+			const binaryString = atob(base64Data);
+			const len = binaryString.length;
+			const bytes = new Uint8Array(len);
+			for (let i = 0; i < len; i++) bytes[i] = binaryString.charCodeAt(i);
+			image = new Blob([bytes], { type: "application/octet-stream" });
+		} else {
+			const resp = fetch(image);
+			resp.catch((err) => {
+				console.error("Failed to load texture:", err);
+			});
+			image = await (await resp).blob();
+		}
+		const future = createImageBitmap(image);
 		future.catch((err) => {
 			console.error("Failed to load texture:", err);
 		});
@@ -366,24 +523,27 @@ var WGSLRenderer = class {
 				imgBitmap.height,
 				1
 			],
-			format: "rgba8unorm",
+			format: format || "rgba8unorm",
 			usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
 		});
 		this.device.queue.copyExternalImageToTexture({ source: imgBitmap }, { texture }, [imgBitmap.width, imgBitmap.height]);
 		return {
 			texture,
+			bitMap: imgBitmap,
 			width: imgBitmap.width,
 			height: imgBitmap.height
 		};
 	}
 	renderFrame() {
 		if (this.passes.length === 0) return;
+		const enabledPasses = this.getEnabledPasses();
+		if (enabledPasses.length === 0) return;
 		this.updateBindGroups();
 		const commandEncoder = this.device.createCommandEncoder();
-		for (let i = 0; i < this.passes.length; i++) {
-			const pass = this.passes[i];
+		for (let i = 0; i < enabledPasses.length; i++) {
+			const pass = enabledPasses[i];
 			let loadOp = "load";
-			const isLast = i === this.passes.length - 1;
+			const isLast = i === enabledPasses.length - 1;
 			if (isLast) loadOp = "clear";
 			let renderTarget;
 			if (pass.view) renderTarget = pass.view;
@@ -391,7 +551,7 @@ var WGSLRenderer = class {
 			else {
 				const textureName = `pass_${i}_output`;
 				let texture = this.textureManager.getTexture(textureName);
-				if (!texture) texture = this.textureManager.createTexture(textureName, "rgba16float");
+				if (!texture) texture = this.textureManager.createTexture(textureName, pass.format || this.format);
 				renderTarget = texture.createView();
 			}
 			const renderPass = commandEncoder.beginRenderPass({ colorAttachments: [{
@@ -401,7 +561,8 @@ var WGSLRenderer = class {
 				clearValue: pass.clearColor
 			}] });
 			renderPass.setPipeline(pass.pipeline);
-			if (pass.bindGroup) renderPass.setBindGroup(0, pass.bindGroup);
+			const activeBindGroup = pass.getActiveBindGroup();
+			if (activeBindGroup) renderPass.setBindGroup(0, activeBindGroup);
 			renderPass.setVertexBuffer(0, pass.vertexBuffer);
 			renderPass.draw(3, 1, 0, 0);
 			renderPass.end();

package/dist/esm/index.d.ts

@@ -30,6 +30,9 @@ interface RenderPassOptions {
   };
   blendMode?: 'additive' | 'alpha' | 'multiply' | 'none';
   resources?: BandingResource[];
+  bindGroupSets?: {
+    [setName: string]: BandingResource[];
+  };
   view?: GPUTextureView;
   format?: GPUTextureFormat;
 }
@@ -48,6 +51,9 @@ interface InternalRenderPassDescriptor {
   };
   blendMode?: 'additive' | 'alpha' | 'multiply' | 'none';
   bindGroupEntries: BindingEntry[];
+  bindGroupSets?: {
+    [setName: string]: BandingResource[];
+  };
   view?: GPUTextureView;
   format?: GPUTextureFormat;
 }
@@ -66,12 +72,45 @@ declare class RenderPass {
   view?: GPUTextureView;
   format?: GPUTextureFormat;
   passResources: BandingResource[];
+  bindGroups: {
+    [setName: string]: GPUBindGroup;
+  };
+  activeBindGroupSet: string;
   private device;
+  descriptor: InternalRenderPassDescriptor;
+  enabled: boolean;
   constructor(descriptor: InternalRenderPassDescriptor, device: GPUDevice, format: GPUTextureFormat, layout: GPUPipelineLayout | 'auto');
   /**
    * Update bind group with new entries (e.g., after texture resize)
    */
-  updateBindGroup(newEntries: BindingEntry[]): void;
+  updateBindGroup(newEntries: {
+    binding: number;
+    resource: GPUBindingResource;
+  }[]): void;
+  /**
+   * Update a specific bind group set with new entries
+   */
+  updateBindGroupSet(setName: string, newEntries: {
+    binding: number;
+    resource: GPUBindingResource;
+  }[]): void;
+  /**
+   * Switch to a different bind group set
+   */
+  switchBindGroupSet(setName: string): void;
+  /**
+   * Get the current active bind group
+   */
+  getActiveBindGroup(): GPUBindGroup | null;
+  /**
+   * Get all available bind group set names
+   */
+  getBindGroupSets(): string[];
+  /**
+   * Update or add a bind group set with new resources
+   * This allows dynamic modification of bind groups at runtime
+   */
+  updateBindGroupSetResources(setName: string, resources: BandingResource[]): void;
   private getBlendState;
 }
 //#endregion
@@ -110,6 +149,39 @@ declare class WGSLRenderer {
    * Get pass by name
    */
   getPassByName(passName: string): RenderPass | undefined;
+  /**
+   * Disable a render pass (it will be skipped during rendering)
+   */
+  disablePass(passName: string): void;
+  /**
+   * Enable a render pass
+   */
+  enablePass(passName: string): void;
+  /**
+   * Check if a pass is enabled
+   */
+  isPassEnabled(passName: string): boolean;
+  /**
+   * Remove a render pass permanently
+   */
+  removePass(passName: string): boolean;
+  /**
+   * Get all passes (enabled and disabled)
+   */
+  getAllPasses(): RenderPass[];
+  /**
+   * Get only enabled passes
+   */
+  getEnabledPasses(): RenderPass[];
+  /**
+   * Switch bind group set for a specific pass
+   */
+  switchBindGroupSet(passName: string, setName: string): void;
+  /**
+   * Update bind group set resources for a specific pass
+   * This allows dynamic modification of bind groups at runtime
+   */
+  updateBindGroupSetResources(passName: string, setName: string, resources: BandingResource[]): void;
   /**
    * Add a render pass to the multi-pass pipeline
    */
@@ -138,8 +210,9 @@ declare class WGSLRenderer {
    * Create a sampler
    */
   createSampler(options?: GPUSamplerDescriptor): GPUSampler;
-  loadImageTexture(url: string): Promise<{
+  loadImageTexture(image: Blob | string, format?: GPUTextureFormat): Promise<{
     texture: GPUTexture;
+    bitMap: ImageBitmap;
     width: number;
     height: number;
   }>;
@@ -151,4 +224,4 @@ declare class WGSLRenderer {
 }
 declare function createWGSLRenderer(cvs: HTMLCanvasElement, options?: WGSLRendererOptions): Promise<WGSLRenderer>;
 //#endregion
-export { MultiPassDescriptor, createWGSLRenderer };
+export { MultiPassDescriptor, type WGSLRenderer, createWGSLRenderer };

package/dist/esm/index.js

@@ -9,9 +9,14 @@ var RenderPass = class {
 	view;
 	format;
 	passResources = [];
+	bindGroups = {};
+	activeBindGroupSet = "default";
 	device;
+	descriptor;
+	enabled = true;
 	constructor(descriptor, device, format, layout) {
 		this.device = device;
+		this.descriptor = descriptor;
 		this.name = descriptor.name;
 		this.clearColor = descriptor.clearColor || {
 			r: 0,
@@ -23,7 +28,10 @@ var RenderPass = class {
 		this.view = descriptor.view;
 		this.format = descriptor.format;
 		const actualFormat = descriptor.format || format;
-		const module = this.device.createShaderModule({ code: descriptor.shaderCode });
+		const module = this.device.createShaderModule({
+			code: descriptor.shaderCode,
+			label: `Shader for ${descriptor.name}`
+		});
 		this.vertexBuffer = this.device.createBuffer({
 			size: 36,
 			usage: GPUBufferUsage.VERTEX,
@@ -78,6 +86,59 @@ var RenderPass = class {
 			layout: bindGroupLayout,
 			entries: newEntries
 		});
+		this.bindGroups.default = this.bindGroup;
+	}
+	/**
+	* Update a specific bind group set with new entries
+	*/
+	updateBindGroupSet(setName, newEntries) {
+		if (!this.bindGroups[setName]) {
+			const bindGroupLayout = this.pipeline.getBindGroupLayout(0);
+			this.bindGroups[setName] = this.device.createBindGroup({
+				layout: bindGroupLayout,
+				entries: newEntries
+			});
+		}
+	}
+	/**
+	* Switch to a different bind group set
+	*/
+	switchBindGroupSet(setName) {
+		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(", ")}`);
+	}
+	/**
+	* Get the current active bind group
+	*/
+	getActiveBindGroup() {
+		return this.bindGroups[this.activeBindGroupSet] || this.bindGroup;
+	}
+	/**
+	* Get all available bind group set names
+	*/
+	getBindGroupSets() {
+		return Object.keys(this.bindGroups);
+	}
+	/**
+	* Update or add a bind group set with new resources
+	* This allows dynamic modification of bind groups at runtime
+	*/
+	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];
 	}
 	getBlendState() {
 		switch (this.blendMode) {
@@ -269,6 +330,74 @@ var WGSLRenderer = class {
 		return this.passes.find((pass) => pass.name === passName);
 	}
 	/**
+	* Disable a render pass (it will be skipped during rendering)
+	*/
+	disablePass(passName) {
+		const pass = this.getPassByName(passName);
+		if (!pass) throw new Error(`Cannot find pass named '${passName}'. Available passes: [${this.passes.map((p) => p.name).join(", ")}]`);
+		pass.enabled = false;
+	}
+	/**
+	* Enable a render pass
+	*/
+	enablePass(passName) {
+		const pass = this.getPassByName(passName);
+		if (!pass) throw new Error(`Cannot find pass named '${passName}'. Available passes: [${this.passes.map((p) => p.name).join(", ")}]`);
+		pass.enabled = true;
+	}
+	/**
+	* Check if a pass is enabled
+	*/
+	isPassEnabled(passName) {
+		const pass = this.getPassByName(passName);
+		if (!pass) throw new Error(`Cannot find pass named '${passName}'. Available passes: [${this.passes.map((p) => p.name).join(", ")}]`);
+		return pass.enabled;
+	}
+	/**
+	* Remove a render pass permanently
+	*/
+	removePass(passName) {
+		const index = this.passes.findIndex((pass) => pass.name === passName);
+		if (index !== -1) {
+			this.passes.splice(index, 1);
+			return true;
+		}
+		return false;
+	}
+	/**
+	* Get all passes (enabled and disabled)
+	*/
+	getAllPasses() {
+		return [...this.passes];
+	}
+	/**
+	* Get only enabled passes
+	*/
+	getEnabledPasses() {
+		return this.passes.filter((pass) => pass.enabled);
+	}
+	/**
+	* Switch bind group set for a specific pass
+	*/
+	switchBindGroupSet(passName, setName) {
+		const pass = this.getPassByName(passName);
+		if (!pass) throw new Error(`Cannot find pass named '${passName}'. Available passes: [${this.passes.map((p) => p.name).join(", ")}]`);
+		pass.switchBindGroupSet(setName);
+	}
+	/**
+	* Update bind group set resources for a specific pass
+	* This allows dynamic modification of bind groups at runtime
+	*/
+	updateBindGroupSetResources(passName, setName, resources) {
+		const pass = this.getPassByName(passName);
+		if (!pass) throw new Error(`Cannot find pass named '${passName}'. Available passes: [${this.passes.map((p) => p.name).join(", ")}]`);
+		const resolvedResources = resources.map((resource) => {
+			if (resource && isPassTextureRef(resource)) return this.resolveResource(resource);
+			return resource;
+		});
+		pass.updateBindGroupSetResources(setName, resolvedResources);
+	}
+	/**
 	* Add a render pass to the multi-pass pipeline
 	*/
 	addPass(descriptor) {
@@ -279,6 +408,11 @@ var WGSLRenderer = class {
 				resource
 			});
 		});
+		let bindGroupSetsCopy = void 0;
+		if (descriptor.bindGroupSets) {
+			bindGroupSetsCopy = {};
+			for (const [setName, resources] of Object.entries(descriptor.bindGroupSets)) bindGroupSetsCopy[setName] = [...resources];
+		}
 		const internalDescriptor = {
 			name: descriptor.name,
 			shaderCode: descriptor.shaderCode,
@@ -286,6 +420,7 @@ var WGSLRenderer = class {
 			clearColor: descriptor.clearColor,
 			blendMode: descriptor.blendMode,
 			bindGroupEntries: finalBindGroupEntries,
+			bindGroupSets: bindGroupSetsCopy,
 			view: descriptor.view,
 			format: descriptor.format
 		};
@@ -316,6 +451,19 @@ var WGSLRenderer = class {
 				});
 			});
 			pass.updateBindGroup(finalBindGroupEntries);
+			if (pass.descriptor && pass.descriptor.bindGroupSets) for (const [setName, resources] of Object.entries(pass.descriptor.bindGroupSets)) {
+				const entries = [];
+				resources.forEach((resource, index) => {
+					if (resource) {
+						const resolved = this.resolveResource(resource);
+						entries.push({
+							binding: index,
+							resource: resolved
+						});
+					}
+				});
+				pass.updateBindGroupSet(setName, entries);
+			}
 		});
 	}
 	/**
@@ -348,13 +496,22 @@ var WGSLRenderer = class {
 			addressModeV: "clamp-to-edge"
 		}, options));
 	}
-	async loadImageTexture(url) {
-		const resp = fetch(url);
-		resp.catch((err) => {
-			console.error("Failed to load texture:", err);
-		});
-		const res = await resp;
-		const future = createImageBitmap(await res.blob());
+	async loadImageTexture(image, format) {
+		if (typeof image === "string") if (image.startsWith("data:")) {
+			const base64Data = image.split(",")[1];
+			const binaryString = atob(base64Data);
+			const len = binaryString.length;
+			const bytes = new Uint8Array(len);
+			for (let i = 0; i < len; i++) bytes[i] = binaryString.charCodeAt(i);
+			image = new Blob([bytes], { type: "application/octet-stream" });
+		} else {
+			const resp = fetch(image);
+			resp.catch((err) => {
+				console.error("Failed to load texture:", err);
+			});
+			image = await (await resp).blob();
+		}
+		const future = createImageBitmap(image);
 		future.catch((err) => {
 			console.error("Failed to load texture:", err);
 		});
@@ -365,24 +522,27 @@ var WGSLRenderer = class {
 				imgBitmap.height,
 				1
 			],
-			format: "rgba8unorm",
+			format: format || "rgba8unorm",
 			usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
 		});
 		this.device.queue.copyExternalImageToTexture({ source: imgBitmap }, { texture }, [imgBitmap.width, imgBitmap.height]);
 		return {
 			texture,
+			bitMap: imgBitmap,
 			width: imgBitmap.width,
 			height: imgBitmap.height
 		};
 	}
 	renderFrame() {
 		if (this.passes.length === 0) return;
+		const enabledPasses = this.getEnabledPasses();
+		if (enabledPasses.length === 0) return;
 		this.updateBindGroups();
 		const commandEncoder = this.device.createCommandEncoder();
-		for (let i = 0; i < this.passes.length; i++) {
-			const pass = this.passes[i];
+		for (let i = 0; i < enabledPasses.length; i++) {
+			const pass = enabledPasses[i];
 			let loadOp = "load";
-			const isLast = i === this.passes.length - 1;
+			const isLast = i === enabledPasses.length - 1;
 			if (isLast) loadOp = "clear";
 			let renderTarget;
 			if (pass.view) renderTarget = pass.view;
@@ -390,7 +550,7 @@ var WGSLRenderer = class {
 			else {
 				const textureName = `pass_${i}_output`;
 				let texture = this.textureManager.getTexture(textureName);
-				if (!texture) texture = this.textureManager.createTexture(textureName, "rgba16float");
+				if (!texture) texture = this.textureManager.createTexture(textureName, pass.format || this.format);
 				renderTarget = texture.createView();
 			}
 			const renderPass = commandEncoder.beginRenderPass({ colorAttachments: [{
@@ -400,7 +560,8 @@ var WGSLRenderer = class {
 				clearValue: pass.clearColor
 			}] });
 			renderPass.setPipeline(pass.pipeline);
-			if (pass.bindGroup) renderPass.setBindGroup(0, pass.bindGroup);
+			const activeBindGroup = pass.getActiveBindGroup();
+			if (activeBindGroup) renderPass.setBindGroup(0, activeBindGroup);
 			renderPass.setVertexBuffer(0, pass.vertexBuffer);
 			renderPass.draw(3, 1, 0, 0);
 			renderPass.end();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wgsl-renderer",
-  "version": "0.0.5",
+  "version": "0.1.1",
   "description": "一个基于WebGPU和WGSL的多通道渲染器",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -33,12 +33,11 @@
   "files": [
     "dist"
   ],
-  "dependencies": {
-    "@webgpu/types": "^0.1.66"
-  },
+  "dependencies": {},
   "devDependencies": {
     "@taiyuuki/eslint-config": "^1.4.14",
     "@types/node": "^20.14.2",
+    "@webgpu/types": "^0.1.66",
     "eslint": "^9.5.0",
     "rimraf": "^6.1.2",
     "rolldown": "1.0.0-beta.52",