wgsl-renderer 0.0.1 → 0.0.2

package/dist/cjs/index.js

@@ -8,7 +8,12 @@ var RenderPass = class {
 	clearColor;
 	blendMode;
 	hasOutputTexture = false;
+	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,
@@ -17,8 +22,8 @@ var RenderPass = class {
 			a: 1
 		};
 		this.blendMode = descriptor.blendMode || "alpha";
-		const module$1 = device.createShaderModule({ code: descriptor.shaderCode });
-		this.vertexBuffer = device.createBuffer({
+		const module$1 = this.device.createShaderModule({ code: descriptor.shaderCode });
+		this.vertexBuffer = this.device.createBuffer({
 			size: 36,
 			usage: GPUBufferUsage.VERTEX,
 			mappedAtCreation: true
@@ -35,7 +40,7 @@ var RenderPass = class {
 			0
 		]);
 		this.vertexBuffer.unmap();
-		this.pipeline = device.createRenderPipeline({
+		this.pipeline = this.device.createRenderPipeline({
 			layout,
 			vertex: {
 				module: module$1,
@@ -60,9 +65,20 @@ var RenderPass = class {
 			primitive: { topology: "triangle-list" }
 		});
 		const bindGroupLayout = this.pipeline.getBindGroupLayout(0);
-		this.bindGroup = device.createBindGroup({
+		this.bindGroup = this.device.createBindGroup({
+			layout: bindGroupLayout,
+			entries: this.originalBindGroupEntries
+		});
+	}
+	/**
+	* 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: descriptor.bindGroupEntries || []
+			entries: newEntries
 		});
 	}
 	getBlendState() {
@@ -116,13 +132,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)) this.textures.get(name).destroy();
+		if (this.textures.has(name)) {
+			const oldTexture = this.textures.get(name);
+			this.oldTextures.push(oldTexture);
+		}
 		const texture = this.device.createTexture({
 			size: [this.width, this.height],
 			format: format || "bgra8unorm",
@@ -136,14 +156,40 @@ var TextureManager = class {
 	}
 	resize(width, height) {
 		if (width === this.width && height === this.height) return;
-		this.textures.forEach((texture) => texture.destroy());
-		this.textures.clear();
 		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;
 	}
 	destroy() {
 		this.textures.forEach((texture) => texture.destroy());
 		this.textures.clear();
+		this.oldTextures.forEach((texture) => texture.destroy());
+		this.oldTextures.length = 0;
 	}
 	getPixelSize() {
 		return {
@@ -161,89 +207,93 @@ var WGSLRenderer = class {
 	format;
 	passes = [];
 	textureManager;
-	backgroundPassAdded = false;
-	backgroundColor = {
-		r: .1,
-		g: .1,
-		b: .1,
-		a: 1
-	};
-	uniforms = /* @__PURE__ */ new Map();
 	animationFrameId = null;
+	isResizing = false;
 	constructor(canvas, options) {
 		this.canvas = canvas;
+		this.options = options;
 		if (!navigator.gpu) throw new Error("WebGPU is not supported in this browser.");
 		this.ctx = canvas.getContext("webgpu");
-		switch (typeof options?.backgroundColor) {
-			case "number":
-				const hex = options.backgroundColor;
-				this.backgroundColor = {
-					r: (hex >> 16 & 255) / 255,
-					g: (hex >> 8 & 255) / 255,
-					b: (hex & 255) / 255,
-					a: 1
-				};
-				break;
-			case "string":
-				const m = options.backgroundColor.match(/^#?([\da-f]{2})([\da-f]{2})([\da-f]{2})$/i);
-				if (m) this.backgroundColor = {
-					r: Number.parseInt(m[1], 16) / 255,
-					g: Number.parseInt(m[2], 16) / 255,
-					b: Number.parseInt(m[3], 16) / 255,
-					a: 1
-				};
-				break;
-			case "object":
-				Object.assign(this.backgroundColor, options.backgroundColor);
-				break;
-		}
 	}
 	async init() {
 		this.device = await (await navigator.gpu.requestAdapter()).requestDevice();
 		this.format = navigator.gpu.getPreferredCanvasFormat();
-		this.ctx.configure({
+		const config = Object.assign({
 			device: this.device,
 			format: this.format,
 			alphaMode: "opaque"
-		});
+		}, this.options?.config);
+		this.ctx.configure(config);
 		const canvasWidth = this.canvas.width || this.canvas.clientWidth;
 		const canvasHeight = this.canvas.height || this.canvas.clientHeight;
 		this.textureManager = new TextureManager(this.device, canvasWidth, canvasHeight);
-		this.ensureBackgroundPass();
+	}
+	async resize(width, height) {
+		if (this.isResizing) return;
+		const currentSize = this.textureManager.getPixelSize();
+		if (currentSize.width === width && currentSize.height === height) return;
+		this.isResizing = true;
+		this.canvas.width = width;
+		this.canvas.height = height;
+		const future = this.device.queue.onSubmittedWorkDone();
+		future.catch(() => {
+			this.isResizing = false;
+		});
+		await future;
+		this.textureManager.cleanupOldTextures();
+		this.textureManager.resize(width, height);
+		this.updateAllBindGroups();
+		this.isResizing = false;
+	}
+	getContext() {
+		return this.ctx;
+	}
+	getDevice() {
+		return this.device;
 	}
 	/**
-	* Ensure background pass is added
+	* Update bind groups for all passes after texture resize
 	*/
-	ensureBackgroundPass() {
-		if (!this.backgroundPassAdded) {
-			const backgroundPass = new RenderPass({
-				name: "builtin_background",
-				shaderCode: `
-                @vertex
-                fn vs_main(@location(0) p: vec3<f32>) -> @builtin(position) vec4<f32> {
-                    return vec4<f32>(p, 1.0);
-                }
-
-                @fragment
-                fn fs_main() -> @location(0) vec4<f32> {
-                    return vec4<f32>(${this.backgroundColor.r}, ${this.backgroundColor.g}, ${this.backgroundColor.b}, ${this.backgroundColor.a});
-                }
-            `,
-				blendMode: "none",
-				clearColor: this.backgroundColor,
-				bindGroupEntries: []
-			}, this.device, this.format, "auto");
-			this.passes.unshift(backgroundPass);
-			this.backgroundPassAdded = true;
-			this.textureManager.createTexture("pass_0_output", this.format);
-		}
+	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);
+		});
+	}
+	/**
+	* Recreate all pass output textures after resize
+	*/
+	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);
+			}
+		});
 	}
 	/**
 	* Add a render pass to the multi-pass pipeline
 	*/
 	addPass(descriptor) {
 		const finalBindGroupEntries = [];
-		if (this.passes.length > 0) {
+		const firstPass = this.passes.length === 0;
+		if (!firstPass) {
 			const previousOutput = this.getPassOutput(this.passes.length - 1);
 			if (previousOutput) finalBindGroupEntries.push({
 				binding: 0,
@@ -252,7 +302,7 @@ var WGSLRenderer = class {
 		}
 		descriptor.resources.forEach((resource, index) => {
 			finalBindGroupEntries.push({
-				binding: index + 1,
+				binding: index + (firstPass ? 0 : 1),
 				resource
 			});
 		});
@@ -263,6 +313,7 @@ var WGSLRenderer = class {
 			blendMode: descriptor.blendMode,
 			bindGroupEntries: finalBindGroupEntries
 		}, this.device, this.format, "auto");
+		pass.passResources = [...descriptor.resources];
 		this.passes.push(pass);
 		const currentPassIndex = this.passes.length - 1;
 		const textureName = `pass_${currentPassIndex}_output`;
@@ -270,32 +321,11 @@ var WGSLRenderer = class {
 		this.passes[currentPassIndex].hasOutputTexture = true;
 	}
 	/**
-	* Set background color
-	*/
-	setBackgroundColor(r, g, b, a = 1) {
-		this.backgroundColor = {
-			r,
-			g,
-			b,
-			a
-		};
-	}
-	/**
-	* Force create output texture for a specific pass
-	* This is useful when you need the output texture immediately after adding a pass
-	*/
-	createPassOutput(passIndex) {
-		if (passIndex < 0 || passIndex >= this.passes.length) return;
-		if (passIndex === this.passes.length - 1) return;
-		const textureName = `pass_${passIndex}_output`;
-		return this.textureManager.createTexture(textureName, this.format);
-	}
-	/**
 	* Get the output texture of a specific pass
 	*/
 	getPassOutput(passIndex) {
 		if (passIndex < 0 || passIndex >= this.passes.length) return;
-		if (passIndex !== 0 && passIndex === this.passes.length - 1) {
+		if (passIndex === this.passes.length - 1) {
 			if (!this.passes[passIndex]?.hasOutputTexture) return;
 		}
 		const textureName = `pass_${passIndex}_output`;
@@ -312,20 +342,13 @@ var WGSLRenderer = class {
 			size: values.byteLength,
 			usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
 		});
-		const uniformID = Symbol();
-		const uniforms = {
-			id: uniformID,
+		return {
 			values,
 			apply: () => {
 				this.device.queue.writeBuffer(buffer, 0, values.buffer, values.byteOffset, values.byteLength);
 			},
 			getBuffer: () => buffer
 		};
-		this.uniforms.set(uniformID, uniforms);
-		return uniforms;
-	}
-	getUniformsByID(id) {
-		return this.uniforms.get(id);
 	}
 	/**
 	* Create a sampler
@@ -338,25 +361,7 @@ var WGSLRenderer = class {
 			addressModeV: "clamp-to-edge"
 		}, options));
 	}
-	/**
-	* Create a bind group entry for texture
-	*/
-	createTextureBinding(texture) {
-		return texture.createView();
-	}
-	/**
-	* Configure multi-pass rendering
-	*/
-	setupMultiPass(descriptor) {
-		this.passes = [];
-		this.textureManager.destroy();
-		const canvasWidth = this.canvas.width || this.canvas.clientWidth;
-		const canvasHeight = this.canvas.height || this.canvas.clientHeight;
-		this.textureManager = new TextureManager(this.device, canvasWidth, canvasHeight);
-		descriptor.passes.forEach((passDesc) => this.addPass(passDesc));
-		if (descriptor.output?.texture && !descriptor.output.writeToCanvas) this.textureManager.createTexture("final_output");
-	}
-	async loadTexture(url) {
+	async loadImageTexture(url) {
 		const resp = fetch(url);
 		resp.catch((err) => {
 			console.error("Failed to load texture:", err);
@@ -382,9 +387,6 @@ var WGSLRenderer = class {
 	renderFrame() {
 		if (this.passes.length === 0) return;
 		const commandEncoder = this.device.createCommandEncoder();
-		const canvasWidth = this.canvas.width || this.canvas.clientWidth;
-		const canvasHeight = this.canvas.height || this.canvas.clientHeight;
-		this.textureManager.resize(canvasWidth, canvasHeight);
 		for (let i = 0; i < this.passes.length; i++) {
 			const pass = this.passes[i];
 			let renderTarget;
@@ -422,11 +424,6 @@ var WGSLRenderer = class {
 			this.animationFrameId = null;
 		}
 	}
-	resize(width, height) {
-		this.canvas.width = width;
-		this.canvas.height = height;
-		this.textureManager.resize(width, height);
-	}
 };
 async function createWGSLRenderer(cvs, options) {
 	const renderer = new WGSLRenderer(cvs, options);