wgsl-renderer 0.0.2 → 0.0.4

package/dist/esm/index.js

@@ -6,13 +6,12 @@ var RenderPass = class {
 	vertexBuffer;
 	clearColor;
 	blendMode;
-	hasOutputTexture = false;
+	view;
+	format;
 	passResources = [];
 	device;
-	originalBindGroupEntries;
 	constructor(descriptor, device, format, layout) {
 		this.device = device;
-		this.originalBindGroupEntries = [...descriptor.bindGroupEntries || []];
 		this.name = descriptor.name;
 		this.clearColor = descriptor.clearColor || {
 			r: 0,
@@ -20,7 +19,10 @@ var RenderPass = class {
 			b: 0,
 			a: 1
 		};
-		this.blendMode = descriptor.blendMode || "alpha";
+		this.blendMode = descriptor.blendMode || "none";
+		this.view = descriptor.view;
+		this.format = descriptor.format;
+		const actualFormat = descriptor.format || format;
 		const module = this.device.createShaderModule({ code: descriptor.shaderCode });
 		this.vertexBuffer = this.device.createBuffer({
 			size: 36,
@@ -39,11 +41,13 @@ var RenderPass = class {
 			0
 		]);
 		this.vertexBuffer.unmap();
+		const vertexEntryPoint = descriptor.entryPoints?.vertex || "vs_main";
+		const fragmentEntryPoint = descriptor.entryPoints?.fragment || "fs_main";
 		this.pipeline = this.device.createRenderPipeline({
 			layout,
 			vertex: {
 				module,
-				entryPoint: "vs_main",
+				entryPoint: vertexEntryPoint,
 				buffers: [{
 					arrayStride: 12,
 					attributes: [{
@@ -55,26 +59,21 @@ var RenderPass = class {
 			},
 			fragment: {
 				module,
-				entryPoint: "fs_main",
+				entryPoint: fragmentEntryPoint,
 				targets: [{
-					format,
+					format: actualFormat,
 					blend: this.getBlendState()
 				}]
 			},
 			primitive: { topology: "triangle-list" }
 		});
-		const bindGroupLayout = this.pipeline.getBindGroupLayout(0);
-		this.bindGroup = this.device.createBindGroup({
-			layout: bindGroupLayout,
-			entries: this.originalBindGroupEntries
-		});
+		this.bindGroup = null;
 	}
 	/**
 	* Update bind group with new entries (e.g., after texture resize)
 	*/
 	updateBindGroup(newEntries) {
 		const bindGroupLayout = this.pipeline.getBindGroupLayout(0);
-		this.originalBindGroupEntries = [...newEntries];
 		this.bindGroup = this.device.createBindGroup({
 			layout: bindGroupLayout,
 			entries: newEntries
@@ -131,21 +130,17 @@ var TextureManager = class {
 	device;
 	width;
 	height;
-	oldTextures = [];
 	constructor(device, width, height) {
 		this.device = device;
 		this.width = width;
 		this.height = height;
 	}
 	createTexture(name, format) {
-		if (this.textures.has(name)) {
-			const oldTexture = this.textures.get(name);
-			this.oldTextures.push(oldTexture);
-		}
+		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
+			usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST
 		});
 		this.textures.set(name, texture);
 		return texture;
@@ -158,37 +153,13 @@ var TextureManager = class {
 		this.width = width;
 		this.height = height;
 		this.textures.forEach((texture) => {
-			this.oldTextures.push(texture);
-		});
-		this.textures.clear();
-	}
-	/**
-	* Recreate a specific texture with current dimensions
-	*/
-	recreateTexture(name, format) {
-		const texture = this.device.createTexture({
-			size: [this.width, this.height],
-			format: format || "bgra8unorm",
-			usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING
-		});
-		this.textures.set(name, texture);
-		return texture;
-	}
-	/**
-	* Clean up old textures that are no longer needed
-	* Call this after ensuring GPU work is complete
-	*/
-	cleanupOldTextures() {
-		this.oldTextures.forEach((texture) => {
 			texture.destroy();
 		});
-		this.oldTextures.length = 0;
+		this.textures.clear();
 	}
 	destroy() {
 		this.textures.forEach((texture) => texture.destroy());
 		this.textures.clear();
-		this.oldTextures.forEach((texture) => texture.destroy());
-		this.oldTextures.length = 0;
 	}
 	getPixelSize() {
 		return {
@@ -198,6 +169,30 @@ var TextureManager = class {
 	}
 };
 
+//#endregion
+//#region src/PassTextureRef.ts
+const PASS_TEXTURE_REF_SYMBOL = Symbol("PassTextureRef");
+var PassTextureRef = class PassTextureRef {
+	[PASS_TEXTURE_REF_SYMBOL] = true;
+	passName;
+	constructor(passName) {
+		this.passName = passName;
+	}
+	static is(obj) {
+		return obj && typeof obj === "object" && PASS_TEXTURE_REF_SYMBOL in obj;
+	}
+	static fromGPUBindingResource(resource) {
+		if (this.is(resource)) return resource;
+		return null;
+	}
+	static create(passName) {
+		return new PassTextureRef(passName);
+	}
+};
+function isPassTextureRef(obj) {
+	return PassTextureRef.is(obj);
+}
+
 //#endregion
 //#region src/index.ts
 var WGSLRenderer = class {
@@ -229,19 +224,17 @@ var WGSLRenderer = class {
 	}
 	async resize(width, height) {
 		if (this.isResizing) return;
-		const currentSize = this.textureManager.getPixelSize();
-		if (currentSize.width === width && currentSize.height === height) return;
+		if (this.canvas.width === width && this.canvas.height === height) return;
 		this.isResizing = true;
 		this.canvas.width = width;
 		this.canvas.height = height;
 		const future = this.device.queue.onSubmittedWorkDone();
 		future.catch(() => {
+			console.warn("GPU work submission failed during resize.");
 			this.isResizing = false;
 		});
 		await future;
-		this.textureManager.cleanupOldTextures();
 		this.textureManager.resize(width, height);
-		this.updateAllBindGroups();
 		this.isResizing = false;
 	}
 	getContext() {
@@ -251,84 +244,79 @@ var WGSLRenderer = class {
 		return this.device;
 	}
 	/**
-	* Update bind groups for all passes after texture resize
+	* Get texture reference by pass name
+	* Returns a PassTextureRef that will resolve to the actual texture at render time
 	*/
-	updateAllBindGroups() {
-		this.recreatePassTextures();
-		this.passes.forEach((pass, index) => {
-			const finalBindGroupEntries = [];
-			if (index >= 1) {
-				const previousOutputTextureName = `pass_${index - 1}_output`;
-				let previousOutput = this.textureManager.getTexture(previousOutputTextureName);
-				if (!previousOutput) previousOutput = this.textureManager.recreateTexture(previousOutputTextureName, this.format);
-				finalBindGroupEntries.push({
-					binding: 0,
-					resource: previousOutput.createView()
-				});
-			}
-			if (pass.passResources) pass.passResources.forEach((resource, resourceIndex) => {
-				finalBindGroupEntries.push({
-					binding: resourceIndex + 1,
-					resource
-				});
-			});
-			pass.updateBindGroup(finalBindGroupEntries);
-		});
+	getPassTexture(passName) {
+		if (!this.passes.find((pass) => pass.name === passName)) throw new Error(`Cannot find pass named '${passName}'. Available passes: [${this.passes.map((p) => p.name).join(", ")}]`);
+		return PassTextureRef.create(passName);
 	}
 	/**
-	* Recreate all pass output textures after resize
+	* Resolve a PassTextureRef to actual GPUTextureView with validation
 	*/
-	recreatePassTextures() {
-		this.passes.forEach((pass, index) => {
-			if (index < this.passes.length - 1 || pass.hasOutputTexture) {
-				const textureName = `pass_${index}_output`;
-				this.textureManager.recreateTexture(textureName, this.format);
-			}
-		});
+	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`;
+		let texture = this.textureManager.getTexture(textureName);
+		if (!texture) texture = this.textureManager.createTexture(textureName, this.format);
+		return texture.createView();
+	}
+	/**
+	* Get pass by name
+	*/
+	getPassByName(passName) {
+		return this.passes.find((pass) => pass.name === passName);
 	}
 	/**
 	* Add a render pass to the multi-pass pipeline
 	*/
 	addPass(descriptor) {
 		const finalBindGroupEntries = [];
-		const firstPass = this.passes.length === 0;
-		if (!firstPass) {
-			const previousOutput = this.getPassOutput(this.passes.length - 1);
-			if (previousOutput) finalBindGroupEntries.push({
-				binding: 0,
-				resource: previousOutput.createView()
-			});
-		}
-		descriptor.resources.forEach((resource, index) => {
+		descriptor.resources?.forEach((resource, index) => {
 			finalBindGroupEntries.push({
-				binding: index + (firstPass ? 0 : 1),
+				binding: index,
 				resource
 			});
 		});
-		const pass = new RenderPass({
+		const internalDescriptor = {
 			name: descriptor.name,
 			shaderCode: descriptor.shaderCode,
+			entryPoints: descriptor.entryPoints,
 			clearColor: descriptor.clearColor,
 			blendMode: descriptor.blendMode,
-			bindGroupEntries: finalBindGroupEntries
-		}, this.device, this.format, "auto");
-		pass.passResources = [...descriptor.resources];
+			bindGroupEntries: finalBindGroupEntries,
+			view: descriptor.view,
+			format: descriptor.format
+		};
+		const pipelineFormat = descriptor.format || this.format;
+		const pass = new RenderPass(internalDescriptor, this.device, pipelineFormat, "auto");
+		pass.passResources = descriptor.resources ?? [];
 		this.passes.push(pass);
-		const currentPassIndex = this.passes.length - 1;
-		const textureName = `pass_${currentPassIndex}_output`;
-		this.textureManager.createTexture(textureName, this.format);
-		this.passes[currentPassIndex].hasOutputTexture = true;
 	}
 	/**
-	* Get the output texture of a specific pass
+	* Resolve resource to actual GPU binding resource
+	* Handles PassTextureRef by getting the current texture view with validation
 	*/
-	getPassOutput(passIndex) {
-		if (passIndex < 0 || passIndex >= this.passes.length) return;
-		if (passIndex === this.passes.length - 1) {
-			if (!this.passes[passIndex]?.hasOutputTexture) return;
-		}
-		const textureName = `pass_${passIndex}_output`;
-		return this.textureManager.getTexture(textureName);
+	resolveResource(resource) {
+		if (isPassTextureRef(resource)) return this.resolveTextureRef(resource);
+		return resource;
+	}
+	/**
+	* Update bind groups to resolve current texture references
+	* Call this before rendering to ensure all PassTextureRef are resolved
+	*/
+	updateBindGroups() {
+		this.passes.forEach((pass) => {
+			const finalBindGroupEntries = [];
+			pass.passResources.forEach((resource, index) => {
+				if (resource) finalBindGroupEntries.push({
+					binding: index,
+					resource: this.resolveResource(resource)
+				});
+			});
+			pass.updateBindGroup(finalBindGroupEntries);
+		});
 	}
 	/**
 	* Create a uniforms
@@ -366,7 +354,11 @@ var WGSLRenderer = class {
 			console.error("Failed to load texture:", err);
 		});
 		const res = await resp;
-		const imgBitmap = await createImageBitmap(await res.blob());
+		const future = createImageBitmap(await res.blob());
+		future.catch((err) => {
+			console.error("Failed to load texture:", err);
+		});
+		const imgBitmap = await future;
 		const texture = this.device.createTexture({
 			size: [
 				imgBitmap.width,
@@ -385,22 +377,25 @@ var WGSLRenderer = class {
 	}
 	renderFrame() {
 		if (this.passes.length === 0) return;
+		this.updateBindGroups();
 		const commandEncoder = this.device.createCommandEncoder();
 		for (let i = 0; i < this.passes.length; i++) {
 			const pass = this.passes[i];
+			let loadOp = "load";
+			const isLast = i === this.passes.length - 1;
+			if (isLast) loadOp = "clear";
 			let renderTarget;
-			let loadOp = "clear";
-			if (i === this.passes.length - 1) renderTarget = this.ctx.getCurrentTexture().createView();
+			if (pass.view) renderTarget = pass.view;
+			else if (isLast) renderTarget = this.ctx.getCurrentTexture().createView();
 			else {
 				const textureName = `pass_${i}_output`;
-				const texture = this.textureManager.getTexture(textureName);
-				if (!texture) continue;
+				let texture = this.textureManager.getTexture(textureName);
+				if (!texture) texture = this.textureManager.createTexture(textureName, "rgba16float");
 				renderTarget = texture.createView();
-				loadOp = "load";
 			}
 			const renderPass = commandEncoder.beginRenderPass({ colorAttachments: [{
 				view: renderTarget,
-				loadOp: i === 0 ? "clear" : loadOp,
+				loadOp,
 				storeOp: "store",
 				clearValue: pass.clearColor
 			}] });
@@ -413,9 +408,11 @@ var WGSLRenderer = class {
 		this.device.queue.submit([commandEncoder.finish()]);
 	}
 	loopRender(cb) {
-		cb?.();
-		this.renderFrame();
-		this.animationFrameId = requestAnimationFrame(() => this.loopRender(cb));
+		this.animationFrameId = requestAnimationFrame((t) => {
+			cb?.(t);
+			this.renderFrame();
+			this.loopRender(cb);
+		});
 	}
 	stopLoop() {
 		if (this.animationFrameId !== null) {

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "wgsl-renderer",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "一个基于WebGPU和WGSL的多通道渲染器",
   "type": "module",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
-  "types": "./dist/types/index.d.ts",
+  "typings": "./dist/esm/index.d.ts",
   "repository": {
     "type": "git",
     "url": "https://github.com/taiyuuki/wgsl-renderer"
@@ -23,7 +23,7 @@
   "sideEffects": false,
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
+      "types": "./dist/esm/index.d.ts",
       "import": "./dist/esm/index.js",
       "require": "./dist/cjs/index.js"
     }
@@ -33,10 +33,12 @@
   "files": [
     "dist"
   ],
+  "dependencies": {
+    "@webgpu/types": "^0.1.66"
+  },
   "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",

package/dist/types/index.d.ts

@@ -1,85 +0,0 @@
-//#region src/RenderPass.d.ts
-interface RenderPassDescriptor {
-  name: string;
-  shaderCode: string;
-  clearColor?: {
-    r: number;
-    g: number;
-    b: number;
-    a: number;
-  };
-  blendMode?: 'additive' | 'alpha' | 'multiply' | 'none';
-  resources: GPUBindingResource[];
-}
-interface RenderPassOutput {
-  texture?: GPUTexture;
-  writeToCanvas?: boolean;
-}
-//#endregion
-//#region src/index.d.ts
-interface MultiPassDescriptor {
-  passes: RenderPassDescriptor[];
-  output?: RenderPassOutput;
-}
-interface WGSLRendererOptions {
-  config?: Omit<GPUCanvasConfiguration, 'device' | 'format'>;
-}
-declare class WGSLRenderer {
-  canvas: HTMLCanvasElement;
-  options?: WGSLRendererOptions | undefined;
-  private ctx;
-  private device;
-  private format;
-  private passes;
-  private textureManager;
-  private animationFrameId;
-  private isResizing;
-  constructor(canvas: HTMLCanvasElement, options?: WGSLRendererOptions | undefined);
-  init(): Promise<void>;
-  resize(width: number, height: number): Promise<void>;
-  getContext(): GPUCanvasContext;
-  getDevice(): GPUDevice;
-  /**
-   * Update bind groups for all passes after texture resize
-   */
-  private updateAllBindGroups;
-  /**
-   * Recreate all pass output textures after resize
-   */
-  private recreatePassTextures;
-  /**
-   * Add a render pass to the multi-pass pipeline
-   */
-  addPass(descriptor: RenderPassDescriptor): void;
-  /**
-   * Get the output texture of a specific pass
-   */
-  private getPassOutput;
-  /**
-   * Create a uniforms
-   * @param length The length of the uniform buffer in number of floats
-   * @return The uniform object containing the buffer and data array
-   */
-  createUniforms(length: number): {
-    values: Float32Array<ArrayBuffer>;
-    apply: () => void;
-    getBuffer: () => GPUBuffer;
-  };
-  /**
-   * Create a sampler
-   */
-  createSampler(options?: GPUSamplerDescriptor): GPUSampler;
-  loadImageTexture(url: string): Promise<{
-    texture: GPUTexture;
-    width: number;
-    height: number;
-  }>;
-  renderFrame(): void;
-  loopRender(cb?: {
-    (): void;
-  }): void;
-  stopLoop(): void;
-}
-declare function createWGSLRenderer(cvs: HTMLCanvasElement, options?: WGSLRendererOptions): Promise<WGSLRenderer>;
-//#endregion
-export { MultiPassDescriptor, createWGSLRenderer };