wgsl-renderer 0.0.1

package/dist/types/index.js

@@ -0,0 +1,437 @@
+//#region src/RenderPass.ts
+var RenderPass = class {
+	name;
+	pipeline;
+	bindGroup;
+	vertexBuffer;
+	clearColor;
+	blendMode;
+	hasOutputTexture = false;
+	constructor(descriptor, device, format, layout) {
+		this.name = descriptor.name;
+		this.clearColor = descriptor.clearColor || {
+			r: 0,
+			g: 0,
+			b: 0,
+			a: 1
+		};
+		this.blendMode = descriptor.blendMode || "alpha";
+		const module = device.createShaderModule({ code: descriptor.shaderCode });
+		this.vertexBuffer = 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 = 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 = device.createBindGroup({
+			layout: bindGroupLayout,
+			entries: descriptor.bindGroupEntries || []
+		});
+	}
+	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;
+	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();
+		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.textures.forEach((texture) => texture.destroy());
+		this.textures.clear();
+		this.width = width;
+		this.height = height;
+	}
+	destroy() {
+		this.textures.forEach((texture) => texture.destroy());
+		this.textures.clear();
+	}
+	getPixelSize() {
+		return {
+			width: this.width,
+			height: this.height
+		};
+	}
+};
+
+//#endregion
+//#region src/index.ts
+var WGSLRenderer = class {
+	ctx;
+	device;
+	format;
+	passes = [];
+	textureManager;
+	backgroundPassAdded = false;
+	backgroundColor = {
+		r: .1,
+		g: .1,
+		b: .1,
+		a: 1
+	};
+	uniforms = /* @__PURE__ */ new Map();
+	animationFrameId = null;
+	constructor(canvas, options) {
+		this.canvas = canvas;
+		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({
+			device: this.device,
+			format: this.format,
+			alphaMode: "opaque"
+		});
+		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();
+	}
+	/**
+	* Ensure background pass is added
+	*/
+	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);
+		}
+	}
+	/**
+	* Add a render pass to the multi-pass pipeline
+	*/
+	addPass(descriptor) {
+		const finalBindGroupEntries = [];
+		if (this.passes.length > 0) {
+			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 + 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");
+		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;
+	}
+	/**
+	* 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 (!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
+		});
+		const uniformID = Symbol();
+		const uniforms = {
+			id: uniformID,
+			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
+	*/
+	createSampler(options) {
+		return this.device.createSampler(Object.assign({
+			magFilter: "linear",
+			minFilter: "linear",
+			addressModeU: "clamp-to-edge",
+			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) {
+		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();
+		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;
+			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;
+		}
+	}
+	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);
+	await renderer.init();
+	return renderer;
+}
+
+//#endregion
+export { createWGSLRenderer };

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "wgsl-renderer",
+  "version": "0.0.1",
+  "description": "一个基于WebGPU和WGSL的多通道渲染器",
+  "type": "module",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/types/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/taiyuuki/wgsl-renderer"
+  },
+  "bugs": "https://github.com/taiyuuki/wgsl-renderer/issues",
+  "homepage": "https://github.com/taiyuuki/wgsl-renderer#readme",
+  "keywords": [
+    "webgpu",
+    "wgsl",
+    "renderer",
+    "graphics",
+    "webgl",
+    "typescript"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    }
+  },
+  "author": "taiyuuki <taiyuuki@qq.com>",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "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",
+    "rolldown-plugin-dts": "^0.18.1",
+    "typescript": "^5.4.5"
+  },
+  "scripts": {
+    "lint": "eslint --fix",
+    "build": "rolldown -c",
+    "clean": "rimraf dist",
+    "prebuild": "npm run clean"
+  }
+}