wgsl-renderer 0.1.3 → 0.1.5

package/README.md

@@ -206,7 +206,8 @@ interface RenderPassOptions {
     blendMode?: 'additive' | 'alpha' | 'multiply' | 'none';
     resources?: GPUBindingResource[];
     bindGroupSets?: { [setName: string]: GPUBindingResource[] }; // Multiple bind group sets
-    view?: GPUTextureView; 		// Optional custom view for this pass
+    renderToCanvas?: boolean;   // Optional render current pass to canvas, default is false and the lastest pass always true.
+    view?: GPUTextureView; 		// Optional custom view for this pass, invalid when rederToCanvas is ture.
     format?: GPUTextureFormat; 	// Optional format for the view (required when using custom view with different format)
 }
 ```

package/README.zh-CN.md

@@ -223,7 +223,8 @@ interface RenderPassOptions {
     blendMode?: 'additive' | 'alpha' | 'multiply' | 'none';
     resources?: GPUBindingResource[];
     bindGroupSets?: { [setName: string]: GPUBindingResource[] }; // 可选的设置多个绑定组，用于动态切换
-    view?: GPUTextureView; 		// 可选的自定义View
+    renderToCanvas?: boolean;   // 可选的将当前通道输出到canvas，默认是false，最后一个通道始终是true
+    view?: GPUTextureView; 		// 可选的自定义View，renderToCanvas为true时无效。
     format?: GPUTextureFormat; 	// 可选的自定义格式（使用自定义View时需要指定格式一致）
 }
 ```

package/dist/cjs/index.js

@@ -9,13 +9,14 @@ var RenderPass = class {
 	blendMode;
 	view;
 	format;
+	renderToCanvas;
 	passResources = [];
 	bindGroups = {};
 	activeBindGroupSet = "default";
 	device;
 	descriptor;
 	enabled = true;
-	constructor(descriptor, device, format, layout) {
+	constructor(descriptor, device, format, layout = "auto") {
 		this.device = device;
 		this.descriptor = descriptor;
 		this.name = descriptor.name;
@@ -28,6 +29,7 @@ var RenderPass = class {
 		this.blendMode = descriptor.blendMode || "none";
 		this.view = descriptor.view;
 		this.format = descriptor.format;
+		this.renderToCanvas = descriptor.renderToCanvas;
 		const actualFormat = descriptor.format || format;
 		const module$1 = this.device.createShaderModule({
 			code: descriptor.shaderCode,
@@ -146,38 +148,158 @@ var RenderPass = class {
 			case "none": return;
 			case "alpha": return {
 				color: {
+					operation: "add",
 					srcFactor: "src-alpha",
-					dstFactor: "one-minus-src-alpha",
-					operation: "add"
+					dstFactor: "one-minus-src-alpha"
 				},
 				alpha: {
+					operation: "add",
 					srcFactor: "one",
-					dstFactor: "one-minus-src-alpha",
-					operation: "add"
+					dstFactor: "one-minus-src-alpha"
 				}
 			};
 			case "additive": return {
 				color: {
+					operation: "add",
 					srcFactor: "src-alpha",
-					dstFactor: "one",
-					operation: "add"
+					dstFactor: "one"
 				},
 				alpha: {
-					srcFactor: "one",
-					dstFactor: "one",
-					operation: "add"
+					operation: "add",
+					srcFactor: "src-alpha",
+					dstFactor: "one"
 				}
 			};
 			case "multiply": return {
 				color: {
-					srcFactor: "src",
-					dstFactor: "dst",
-					operation: "add"
+					operation: "add",
+					srcFactor: "zero",
+					dstFactor: "src"
+				},
+				alpha: {
+					operation: "add",
+					srcFactor: "zero",
+					dstFactor: "src-alpha"
+				}
+			};
+			case "screen": return {
+				color: {
+					operation: "add",
+					srcFactor: "one",
+					dstFactor: "one-minus-src"
+				},
+				alpha: {
+					operation: "add",
+					srcFactor: "one",
+					dstFactor: "one-minus-src-alpha"
+				}
+			};
+			case "subtract": return {
+				color: {
+					operation: "reverse-subtract",
+					srcFactor: "src-alpha",
+					dstFactor: "one"
+				},
+				alpha: {
+					operation: "reverse-subtract",
+					srcFactor: "src-alpha",
+					dstFactor: "one"
+				}
+			};
+			case "min": return {
+				color: {
+					operation: "min",
+					srcFactor: "one",
+					dstFactor: "one"
+				},
+				alpha: {
+					operation: "min",
+					srcFactor: "one",
+					dstFactor: "one"
+				}
+			};
+			case "max": return {
+				color: {
+					operation: "max",
+					srcFactor: "one",
+					dstFactor: "one"
+				},
+				alpha: {
+					operation: "max",
+					srcFactor: "one",
+					dstFactor: "one"
+				}
+			};
+			case "darken": return {
+				color: {
+					operation: "min",
+					srcFactor: "one",
+					dstFactor: "one"
+				},
+				alpha: {
+					operation: "add",
+					srcFactor: "src-alpha",
+					dstFactor: "one-minus-src-alpha"
+				}
+			};
+			case "lighten": return {
+				color: {
+					operation: "max",
+					srcFactor: "one",
+					dstFactor: "one"
 				},
 				alpha: {
+					operation: "add",
+					srcFactor: "src-alpha",
+					dstFactor: "one-minus-src-alpha"
+				}
+			};
+			case "linear-dodge": return {
+				color: {
+					operation: "add",
 					srcFactor: "one",
-					dstFactor: "one-minus-src-alpha",
-					operation: "add"
+					dstFactor: "one"
+				},
+				alpha: {
+					operation: "add",
+					srcFactor: "src-alpha",
+					dstFactor: "one"
+				}
+			};
+			case "linear-burn": return {
+				color: {
+					operation: "reverse-subtract",
+					srcFactor: "one",
+					dstFactor: "one"
+				},
+				alpha: {
+					operation: "add",
+					srcFactor: "src-alpha",
+					dstFactor: "one-minus-src-alpha"
+				}
+			};
+			case "difference": return {
+				color: {
+					operation: "reverse-subtract",
+					srcFactor: "one",
+					dstFactor: "one"
+				},
+				alpha: {
+					operation: "add",
+					srcFactor: "src-alpha",
+					dstFactor: "one-minus-src-alpha"
+				}
+			};
+			case "exclusion": return {
+				color: {
+					operation: "add",
+					srcFactor: "zero",
+					dstFactor: "one"
+				},
+				alpha: {
+					operation: "add",
+					srcFactor: "src-alpha",
+					dstFactor: "one-minus-src-alpha"
 				}
 			};
 			default: return;
@@ -290,6 +412,8 @@ var WGSLRenderer = class {
 		this.isResizing = true;
 		this.canvas.width = width;
 		this.canvas.height = height;
+		this.canvas.style.width = `${width / (window.devicePixelRatio || 1)}px`;
+		this.canvas.style.height = `${height / (window.devicePixelRatio || 1)}px`;
 		const future = this.device.queue.onSubmittedWorkDone();
 		future.catch(() => {
 			console.warn("GPU work submission failed during resize.");
@@ -317,9 +441,10 @@ var WGSLRenderer = class {
 	* Resolve a PassTextureRef to actual GPUTextureView with validation
 	*/
 	resolveTextureRef(ref) {
-		const targetPassIndex = this.passes.findIndex((pass) => pass.name === ref.passName);
-		if (targetPassIndex === -1) throw new Error(`Cannot find pass named '${ref.passName}'. Available passes: [${this.passes.map((p) => p.name).join(", ")}]`);
-		const textureName = `pass_${targetPassIndex}_output`;
+		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`;
 		let texture = this.textureManager.getTexture(textureName);
 		if (!texture) texture = this.textureManager.createTexture(textureName, this.format);
 		return texture.createView();
@@ -378,6 +503,12 @@ var WGSLRenderer = class {
 		return this.passes.filter((pass) => pass.enabled);
 	}
 	/**
+	* Set the entire passes array (replaces existing passes)
+	*/
+	setPasses(passes) {
+		this.passes = passes;
+	}
+	/**
 	* Switch bind group set for a specific pass
 	*/
 	switchBindGroupSet(passName, setName) {
@@ -398,10 +529,7 @@ var WGSLRenderer = class {
 		});
 		pass.updateBindGroupSetResources(setName, resolvedResources);
 	}
-	/**
-	* Add a render pass to the multi-pass pipeline
-	*/
-	addPass(descriptor) {
+	createPass(descriptor) {
 		const finalBindGroupEntries = [];
 		descriptor.resources?.forEach((resource, index) => {
 			finalBindGroupEntries.push({
@@ -423,13 +551,30 @@ var WGSLRenderer = class {
 			bindGroupEntries: finalBindGroupEntries,
 			bindGroupSets: bindGroupSetsCopy,
 			view: descriptor.view,
-			format: descriptor.format
+			format: descriptor.format,
+			renderToCanvas: descriptor.renderToCanvas
 		};
 		const pipelineFormat = descriptor.format || this.format;
-		const pass = new RenderPass(internalDescriptor, this.device, pipelineFormat, "auto");
+		return new RenderPass(internalDescriptor, this.device, pipelineFormat);
+	}
+	/**
+	* Add a render pass to the multi-pass pipeline
+	*/
+	addPass(descriptor) {
+		const pass = this.createPass(descriptor);
 		pass.passResources = descriptor.resources ?? [];
 		this.passes.push(pass);
 	}
+	insertPassesTo(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.createPass(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
@@ -543,11 +688,10 @@ var WGSLRenderer = class {
 		for (let i = 0; i < enabledPasses.length; i++) {
 			const pass = enabledPasses[i];
 			let loadOp = "load";
-			const isLast = i === enabledPasses.length - 1;
-			if (isLast) loadOp = "clear";
+			if (i === 0) loadOp = "clear";
 			let renderTarget;
-			if (pass.view) renderTarget = pass.view;
-			else if (isLast) renderTarget = this.ctx.getCurrentTexture().createView();
+			if (pass.renderToCanvas || i === enabledPasses.length - 1) renderTarget = this.ctx.getCurrentTexture().createView();
+			else if (pass.view) renderTarget = pass.view;
 			else {
 				const textureName = `pass_${i}_output`;
 				let texture = this.textureManager.getTexture(textureName);

package/dist/esm/index.d.ts

@@ -10,11 +10,12 @@ declare class PassTextureRef {
 }
 //#endregion
 //#region src/RenderPass.d.ts
-type BandingResource = GPUBindingResource | PassTextureRef;
+type BindingResource = GPUBindingResource | PassTextureRef;
 type BindingEntry = {
   binding: number;
-  resource: BandingResource;
+  resource: BindingResource;
 };
+type BlendMode = 'additive' | 'alpha' | 'darken' | 'difference' | 'exclusion' | 'lighten' | 'linear-burn' | 'linear-dodge' | 'max' | 'min' | 'multiply' | 'none' | 'screen' | 'subtract';
 interface RenderPassOptions {
   name: string;
   shaderCode: string;
@@ -28,13 +29,14 @@ interface RenderPassOptions {
     b: number;
     a: number;
   };
-  blendMode?: 'additive' | 'alpha' | 'multiply' | 'none';
-  resources?: BandingResource[];
+  blendMode?: BlendMode;
+  resources?: BindingResource[];
   bindGroupSets?: {
-    [setName: string]: BandingResource[];
+    [setName: string]: BindingResource[];
   };
   view?: GPUTextureView;
   format?: GPUTextureFormat;
+  renderToCanvas?: boolean;
 }
 interface InternalRenderPassDescriptor {
   name: string;
@@ -49,13 +51,14 @@ interface InternalRenderPassDescriptor {
     b: number;
     a: number;
   };
-  blendMode?: 'additive' | 'alpha' | 'multiply' | 'none';
+  blendMode?: BlendMode;
   bindGroupEntries: BindingEntry[];
   bindGroupSets?: {
-    [setName: string]: BandingResource[];
+    [setName: string]: BindingResource[];
   };
   view?: GPUTextureView;
   format?: GPUTextureFormat;
+  renderToCanvas?: boolean;
 }
 declare class RenderPass {
   name: string;
@@ -68,10 +71,11 @@ declare class RenderPass {
     b: number;
     a: number;
   };
-  blendMode: 'additive' | 'alpha' | 'multiply' | 'none';
+  blendMode: BlendMode;
   view?: GPUTextureView;
   format?: GPUTextureFormat;
-  passResources: BandingResource[];
+  renderToCanvas?: boolean;
+  passResources: BindingResource[];
   bindGroups: {
     [setName: string]: GPUBindGroup;
   };
@@ -79,7 +83,7 @@ declare class RenderPass {
   private device;
   descriptor: InternalRenderPassDescriptor;
   enabled: boolean;
-  constructor(descriptor: InternalRenderPassDescriptor, device: GPUDevice, format: GPUTextureFormat, layout: GPUPipelineLayout | 'auto');
+  constructor(descriptor: InternalRenderPassDescriptor, device: GPUDevice, format: GPUTextureFormat, layout?: GPUPipelineLayout | 'auto');
   /**
    * Update bind group with new entries (e.g., after texture resize)
    */
@@ -110,7 +114,7 @@ declare class RenderPass {
    * 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;
+  updateBindGroupSetResources(setName: string, resources: BindingResource[]): void;
   private getBlendState;
 }
 //#endregion
@@ -170,6 +174,10 @@ declare class WGSLRenderer {
    * Get only enabled passes
    */
   getEnabledPasses(): RenderPass[];
+  /**
+   * Set the entire passes array (replaces existing passes)
+   */
+  setPasses(passes: RenderPass[]): void;
   /**
    * Switch bind group set for a specific pass
    */
@@ -178,11 +186,13 @@ declare class WGSLRenderer {
    * 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;
+  updateBindGroupSetResources(passName: string, setName: string, resources: BindingResource[]): void;
+  private createPass;
   /**
    * Add a render pass to the multi-pass pipeline
    */
   addPass(descriptor: RenderPassOptions): void;
+  insertPassesTo(passName: string, descriptors: RenderPassOptions[]): void;
   /**
    * Resolve resource to actual GPU binding resource
    * Handles PassTextureRef by getting the current texture view with validation
@@ -221,4 +231,4 @@ declare class WGSLRenderer {
 }
 declare function createWGSLRenderer(cvs: HTMLCanvasElement, options?: WGSLRendererOptions): Promise<WGSLRenderer>;
 //#endregion
-export { type BandingResource, type RenderPassOptions, type WGSLRenderer, createWGSLRenderer };
+export { type BindingResource, type PassTextureRef, type RenderPassOptions, type WGSLRenderer, createWGSLRenderer };

package/dist/esm/index.js

@@ -8,13 +8,14 @@ var RenderPass = class {
 	blendMode;
 	view;
 	format;
+	renderToCanvas;
 	passResources = [];
 	bindGroups = {};
 	activeBindGroupSet = "default";
 	device;
 	descriptor;
 	enabled = true;
-	constructor(descriptor, device, format, layout) {
+	constructor(descriptor, device, format, layout = "auto") {
 		this.device = device;
 		this.descriptor = descriptor;
 		this.name = descriptor.name;
@@ -27,6 +28,7 @@ var RenderPass = class {
 		this.blendMode = descriptor.blendMode || "none";
 		this.view = descriptor.view;
 		this.format = descriptor.format;
+		this.renderToCanvas = descriptor.renderToCanvas;
 		const actualFormat = descriptor.format || format;
 		const module = this.device.createShaderModule({
 			code: descriptor.shaderCode,
@@ -145,38 +147,158 @@ var RenderPass = class {
 			case "none": return;
 			case "alpha": return {
 				color: {
+					operation: "add",
 					srcFactor: "src-alpha",
-					dstFactor: "one-minus-src-alpha",
-					operation: "add"
+					dstFactor: "one-minus-src-alpha"
 				},
 				alpha: {
+					operation: "add",
 					srcFactor: "one",
-					dstFactor: "one-minus-src-alpha",
-					operation: "add"
+					dstFactor: "one-minus-src-alpha"
 				}
 			};
 			case "additive": return {
 				color: {
+					operation: "add",
 					srcFactor: "src-alpha",
-					dstFactor: "one",
-					operation: "add"
+					dstFactor: "one"
 				},
 				alpha: {
-					srcFactor: "one",
-					dstFactor: "one",
-					operation: "add"
+					operation: "add",
+					srcFactor: "src-alpha",
+					dstFactor: "one"
 				}
 			};
 			case "multiply": return {
 				color: {
-					srcFactor: "src",
-					dstFactor: "dst",
-					operation: "add"
+					operation: "add",
+					srcFactor: "zero",
+					dstFactor: "src"
+				},
+				alpha: {
+					operation: "add",
+					srcFactor: "zero",
+					dstFactor: "src-alpha"
+				}
+			};
+			case "screen": return {
+				color: {
+					operation: "add",
+					srcFactor: "one",
+					dstFactor: "one-minus-src"
+				},
+				alpha: {
+					operation: "add",
+					srcFactor: "one",
+					dstFactor: "one-minus-src-alpha"
+				}
+			};
+			case "subtract": return {
+				color: {
+					operation: "reverse-subtract",
+					srcFactor: "src-alpha",
+					dstFactor: "one"
+				},
+				alpha: {
+					operation: "reverse-subtract",
+					srcFactor: "src-alpha",
+					dstFactor: "one"
+				}
+			};
+			case "min": return {
+				color: {
+					operation: "min",
+					srcFactor: "one",
+					dstFactor: "one"
+				},
+				alpha: {
+					operation: "min",
+					srcFactor: "one",
+					dstFactor: "one"
+				}
+			};
+			case "max": return {
+				color: {
+					operation: "max",
+					srcFactor: "one",
+					dstFactor: "one"
+				},
+				alpha: {
+					operation: "max",
+					srcFactor: "one",
+					dstFactor: "one"
+				}
+			};
+			case "darken": return {
+				color: {
+					operation: "min",
+					srcFactor: "one",
+					dstFactor: "one"
+				},
+				alpha: {
+					operation: "add",
+					srcFactor: "src-alpha",
+					dstFactor: "one-minus-src-alpha"
+				}
+			};
+			case "lighten": return {
+				color: {
+					operation: "max",
+					srcFactor: "one",
+					dstFactor: "one"
 				},
 				alpha: {
+					operation: "add",
+					srcFactor: "src-alpha",
+					dstFactor: "one-minus-src-alpha"
+				}
+			};
+			case "linear-dodge": return {
+				color: {
+					operation: "add",
 					srcFactor: "one",
-					dstFactor: "one-minus-src-alpha",
-					operation: "add"
+					dstFactor: "one"
+				},
+				alpha: {
+					operation: "add",
+					srcFactor: "src-alpha",
+					dstFactor: "one"
+				}
+			};
+			case "linear-burn": return {
+				color: {
+					operation: "reverse-subtract",
+					srcFactor: "one",
+					dstFactor: "one"
+				},
+				alpha: {
+					operation: "add",
+					srcFactor: "src-alpha",
+					dstFactor: "one-minus-src-alpha"
+				}
+			};
+			case "difference": return {
+				color: {
+					operation: "reverse-subtract",
+					srcFactor: "one",
+					dstFactor: "one"
+				},
+				alpha: {
+					operation: "add",
+					srcFactor: "src-alpha",
+					dstFactor: "one-minus-src-alpha"
+				}
+			};
+			case "exclusion": return {
+				color: {
+					operation: "add",
+					srcFactor: "zero",
+					dstFactor: "one"
+				},
+				alpha: {
+					operation: "add",
+					srcFactor: "src-alpha",
+					dstFactor: "one-minus-src-alpha"
 				}
 			};
 			default: return;
@@ -289,6 +411,8 @@ var WGSLRenderer = class {
 		this.isResizing = true;
 		this.canvas.width = width;
 		this.canvas.height = height;
+		this.canvas.style.width = `${width / (window.devicePixelRatio || 1)}px`;
+		this.canvas.style.height = `${height / (window.devicePixelRatio || 1)}px`;
 		const future = this.device.queue.onSubmittedWorkDone();
 		future.catch(() => {
 			console.warn("GPU work submission failed during resize.");
@@ -316,9 +440,10 @@ var WGSLRenderer = class {
 	* Resolve a PassTextureRef to actual GPUTextureView with validation
 	*/
 	resolveTextureRef(ref) {
-		const targetPassIndex = this.passes.findIndex((pass) => pass.name === ref.passName);
-		if (targetPassIndex === -1) throw new Error(`Cannot find pass named '${ref.passName}'. Available passes: [${this.passes.map((p) => p.name).join(", ")}]`);
-		const textureName = `pass_${targetPassIndex}_output`;
+		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`;
 		let texture = this.textureManager.getTexture(textureName);
 		if (!texture) texture = this.textureManager.createTexture(textureName, this.format);
 		return texture.createView();
@@ -377,6 +502,12 @@ var WGSLRenderer = class {
 		return this.passes.filter((pass) => pass.enabled);
 	}
 	/**
+	* Set the entire passes array (replaces existing passes)
+	*/
+	setPasses(passes) {
+		this.passes = passes;
+	}
+	/**
 	* Switch bind group set for a specific pass
 	*/
 	switchBindGroupSet(passName, setName) {
@@ -397,10 +528,7 @@ var WGSLRenderer = class {
 		});
 		pass.updateBindGroupSetResources(setName, resolvedResources);
 	}
-	/**
-	* Add a render pass to the multi-pass pipeline
-	*/
-	addPass(descriptor) {
+	createPass(descriptor) {
 		const finalBindGroupEntries = [];
 		descriptor.resources?.forEach((resource, index) => {
 			finalBindGroupEntries.push({
@@ -422,13 +550,30 @@ var WGSLRenderer = class {
 			bindGroupEntries: finalBindGroupEntries,
 			bindGroupSets: bindGroupSetsCopy,
 			view: descriptor.view,
-			format: descriptor.format
+			format: descriptor.format,
+			renderToCanvas: descriptor.renderToCanvas
 		};
 		const pipelineFormat = descriptor.format || this.format;
-		const pass = new RenderPass(internalDescriptor, this.device, pipelineFormat, "auto");
+		return new RenderPass(internalDescriptor, this.device, pipelineFormat);
+	}
+	/**
+	* Add a render pass to the multi-pass pipeline
+	*/
+	addPass(descriptor) {
+		const pass = this.createPass(descriptor);
 		pass.passResources = descriptor.resources ?? [];
 		this.passes.push(pass);
 	}
+	insertPassesTo(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.createPass(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
@@ -542,11 +687,10 @@ var WGSLRenderer = class {
 		for (let i = 0; i < enabledPasses.length; i++) {
 			const pass = enabledPasses[i];
 			let loadOp = "load";
-			const isLast = i === enabledPasses.length - 1;
-			if (isLast) loadOp = "clear";
+			if (i === 0) loadOp = "clear";
 			let renderTarget;
-			if (pass.view) renderTarget = pass.view;
-			else if (isLast) renderTarget = this.ctx.getCurrentTexture().createView();
+			if (pass.renderToCanvas || i === enabledPasses.length - 1) renderTarget = this.ctx.getCurrentTexture().createView();
+			else if (pass.view) renderTarget = pass.view;
 			else {
 				const textureName = `pass_${i}_output`;
 				let texture = this.textureManager.getTexture(textureName);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wgsl-renderer",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "A multi-pass renderer based on WebGPU and WGSL.",
   "type": "module",
   "main": "./dist/cjs/index.js",