wgsl-renderer 0.0.2 → 0.0.4

package/dist/types/index.js

@@ -1,434 +0,0 @@
-//#region src/RenderPass.ts
-var RenderPass = class {
-	name;
-	pipeline;
-	bindGroup;
-	vertexBuffer;
-	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,
-			g: 0,
-			b: 0,
-			a: 1
-		};
-		this.blendMode = descriptor.blendMode || "alpha";
-		const module = this.device.createShaderModule({ code: descriptor.shaderCode });
-		this.vertexBuffer = this.device.createBuffer({
-			size: 36,
-			usage: GPUBufferUsage.VERTEX,
-			mappedAtCreation: true
-		});
-		new Float32Array(this.vertexBuffer.getMappedRange()).set([
-			-1,
-			-1,
-			0,
-			3,
-			-1,
-			0,
-			-1,
-			3,
-			0
-		]);
-		this.vertexBuffer.unmap();
-		this.pipeline = this.device.createRenderPipeline({
-			layout,
-			vertex: {
-				module,
-				entryPoint: "vs_main",
-				buffers: [{
-					arrayStride: 12,
-					attributes: [{
-						shaderLocation: 0,
-						offset: 0,
-						format: "float32x3"
-					}]
-				}]
-			},
-			fragment: {
-				module,
-				entryPoint: "fs_main",
-				targets: [{
-					format,
-					blend: this.getBlendState()
-				}]
-			},
-			primitive: { topology: "triangle-list" }
-		});
-		const bindGroupLayout = this.pipeline.getBindGroupLayout(0);
-		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: newEntries
-		});
-	}
-	getBlendState() {
-		switch (this.blendMode) {
-			case "none": return;
-			case "alpha": return {
-				color: {
-					srcFactor: "src-alpha",
-					dstFactor: "one-minus-src-alpha",
-					operation: "add"
-				},
-				alpha: {
-					srcFactor: "one",
-					dstFactor: "one-minus-src-alpha",
-					operation: "add"
-				}
-			};
-			case "additive": return {
-				color: {
-					srcFactor: "src-alpha",
-					dstFactor: "one",
-					operation: "add"
-				},
-				alpha: {
-					srcFactor: "one",
-					dstFactor: "one",
-					operation: "add"
-				}
-			};
-			case "multiply": return {
-				color: {
-					srcFactor: "src",
-					dstFactor: "dst",
-					operation: "add"
-				},
-				alpha: {
-					srcFactor: "one",
-					dstFactor: "one-minus-src-alpha",
-					operation: "add"
-				}
-			};
-			default: return;
-		}
-	}
-};
-
-//#endregion
-//#region src/TextureManager.ts
-var TextureManager = class {
-	textures = /* @__PURE__ */ new Map();
-	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);
-		}
-		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;
-	}
-	getTexture(name) {
-		return this.textures.get(name);
-	}
-	resize(width, height) {
-		if (width === this.width && height === this.height) return;
-		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 {
-			width: this.width,
-			height: this.height
-		};
-	}
-};
-
-//#endregion
-//#region src/index.ts
-var WGSLRenderer = class {
-	ctx;
-	device;
-	format;
-	passes = [];
-	textureManager;
-	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");
-	}
-	async init() {
-		this.device = await (await navigator.gpu.requestAdapter()).requestDevice();
-		this.format = navigator.gpu.getPreferredCanvasFormat();
-		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);
-	}
-	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;
-	}
-	/**
-	* Update bind groups for all passes after texture resize
-	*/
-	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 = [];
-		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) => {
-			finalBindGroupEntries.push({
-				binding: index + (firstPass ? 0 : 1),
-				resource
-			});
-		});
-		const pass = new RenderPass({
-			name: descriptor.name,
-			shaderCode: descriptor.shaderCode,
-			clearColor: descriptor.clearColor,
-			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`;
-		this.textureManager.createTexture(textureName, this.format);
-		this.passes[currentPassIndex].hasOutputTexture = true;
-	}
-	/**
-	* Get the output texture of a specific pass
-	*/
-	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);
-	}
-	/**
-	* 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) {
-		const values = new Float32Array(Math.ceil(length));
-		const buffer = this.device.createBuffer({
-			size: values.byteLength,
-			usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
-		});
-		return {
-			values,
-			apply: () => {
-				this.device.queue.writeBuffer(buffer, 0, values.buffer, values.byteOffset, values.byteLength);
-			},
-			getBuffer: () => buffer
-		};
-	}
-	/**
-	* Create a sampler
-	*/
-	createSampler(options) {
-		return this.device.createSampler(Object.assign({
-			magFilter: "linear",
-			minFilter: "linear",
-			addressModeU: "clamp-to-edge",
-			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 imgBitmap = await createImageBitmap(await res.blob());
-		const texture = this.device.createTexture({
-			size: [
-				imgBitmap.width,
-				imgBitmap.height,
-				1
-			],
-			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,
-			width: imgBitmap.width,
-			height: imgBitmap.height
-		};
-	}
-	renderFrame() {
-		if (this.passes.length === 0) return;
-		const commandEncoder = this.device.createCommandEncoder();
-		for (let i = 0; i < this.passes.length; i++) {
-			const pass = this.passes[i];
-			let renderTarget;
-			let loadOp = "clear";
-			if (i === this.passes.length - 1) renderTarget = this.ctx.getCurrentTexture().createView();
-			else {
-				const textureName = `pass_${i}_output`;
-				const texture = this.textureManager.getTexture(textureName);
-				if (!texture) continue;
-				renderTarget = texture.createView();
-				loadOp = "load";
-			}
-			const renderPass = commandEncoder.beginRenderPass({ colorAttachments: [{
-				view: renderTarget,
-				loadOp: i === 0 ? "clear" : loadOp,
-				storeOp: "store",
-				clearValue: pass.clearColor
-			}] });
-			renderPass.setPipeline(pass.pipeline);
-			if (pass.bindGroup) renderPass.setBindGroup(0, pass.bindGroup);
-			renderPass.setVertexBuffer(0, pass.vertexBuffer);
-			renderPass.draw(3, 1, 0, 0);
-			renderPass.end();
-		}
-		this.device.queue.submit([commandEncoder.finish()]);
-	}
-	loopRender(cb) {
-		cb?.();
-		this.renderFrame();
-		this.animationFrameId = requestAnimationFrame(() => this.loopRender(cb));
-	}
-	stopLoop() {
-		if (this.animationFrameId !== null) {
-			cancelAnimationFrame(this.animationFrameId);
-			this.animationFrameId = null;
-		}
-	}
-};
-async function createWGSLRenderer(cvs, options) {
-	const renderer = new WGSLRenderer(cvs, options);
-	await renderer.init();
-	return renderer;
-}
-
-//#endregion
-export { createWGSLRenderer };