wgsl-renderer 0.0.3 → 0.0.4

package/README.zh-CN.md

@@ -104,7 +104,7 @@ renderer.loopRender((t) => {
     uniforms.apply()						// 应用到GPU
 })
 
-// 或者手动改执行官单帧渲染
+// 或者手动执行单帧渲染
 renderer.renderFrame()
 ```
 

package/dist/cjs/index.js

@@ -311,7 +311,7 @@ var WGSLRenderer = class {
 		this.passes.forEach((pass) => {
 			const finalBindGroupEntries = [];
 			pass.passResources.forEach((resource, index) => {
-				finalBindGroupEntries.push({
+				if (resource) finalBindGroupEntries.push({
 					binding: index,
 					resource: this.resolveResource(resource)
 				});
@@ -355,7 +355,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,

package/dist/{types → esm}/index.d.ts

@@ -1,4 +1,20 @@
+//#region src/PassTextureRef.d.ts
+declare const PASS_TEXTURE_REF_SYMBOL: unique symbol;
+declare class PassTextureRef {
+  readonly [PASS_TEXTURE_REF_SYMBOL] = true;
+  readonly passName: string;
+  constructor(passName: string);
+  static is(obj: any): obj is PassTextureRef;
+  static fromGPUBindingResource(resource: GPUBindingResource): PassTextureRef | null;
+  static create(passName: string): PassTextureRef;
+}
+//#endregion
 //#region src/RenderPass.d.ts
+type BandingResource = GPUBindingResource | PassTextureRef;
+type BindingEntry = {
+  binding: number;
+  resource: BandingResource;
+};
 interface RenderPassOptions {
   name: string;
   shaderCode: string;
@@ -13,7 +29,7 @@ interface RenderPassOptions {
     a: number;
   };
   blendMode?: 'additive' | 'alpha' | 'multiply' | 'none';
-  resources: GPUBindingResource[];
+  resources?: BandingResource[];
   view?: GPUTextureView;
   format?: GPUTextureFormat;
 }
@@ -31,7 +47,7 @@ interface InternalRenderPassDescriptor {
     a: number;
   };
   blendMode?: 'additive' | 'alpha' | 'multiply' | 'none';
-  bindGroupEntries: GPUBindGroupEntry[];
+  bindGroupEntries: BindingEntry[];
   view?: GPUTextureView;
   format?: GPUTextureFormat;
 }
@@ -49,27 +65,16 @@ declare class RenderPass {
   blendMode: 'additive' | 'alpha' | 'multiply' | 'none';
   view?: GPUTextureView;
   format?: GPUTextureFormat;
-  passResources: GPUBindingResource[];
+  passResources: BandingResource[];
   private device;
   constructor(descriptor: InternalRenderPassDescriptor, device: GPUDevice, format: GPUTextureFormat, layout: GPUPipelineLayout | 'auto');
   /**
    * Update bind group with new entries (e.g., after texture resize)
    */
-  updateBindGroup(newEntries: GPUBindGroupEntry[]): void;
+  updateBindGroup(newEntries: BindingEntry[]): void;
   private getBlendState;
 }
 //#endregion
-//#region src/PassTextureRef.d.ts
-declare const PASS_TEXTURE_REF_SYMBOL: unique symbol;
-declare class PassTextureRef {
-  readonly [PASS_TEXTURE_REF_SYMBOL] = true;
-  readonly passName: string;
-  constructor(passName: string);
-  static is(obj: any): obj is PassTextureRef;
-  static fromGPUBindingResource(resource: GPUBindingResource): PassTextureRef | null;
-  static create(passName: string): PassTextureRef;
-}
-//#endregion
 //#region src/index.d.ts
 interface MultiPassDescriptor {
   passes: RenderPassOptions[];

package/dist/esm/index.js

@@ -310,7 +310,7 @@ var WGSLRenderer = class {
 		this.passes.forEach((pass) => {
 			const finalBindGroupEntries = [];
 			pass.passResources.forEach((resource, index) => {
-				finalBindGroupEntries.push({
+				if (resource) finalBindGroupEntries.push({
 					binding: index,
 					resource: this.resolveResource(resource)
 				});
@@ -354,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,

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "wgsl-renderer",
-  "version": "0.0.3",
+  "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"
     }

package/dist/types/index.js

@@ -1,427 +0,0 @@
-//#region src/RenderPass.ts
-var RenderPass = class {
-	name;
-	pipeline;
-	bindGroup;
-	vertexBuffer;
-	clearColor;
-	blendMode;
-	view;
-	format;
-	passResources = [];
-	device;
-	constructor(descriptor, device, format, layout) {
-		this.device = device;
-		this.name = descriptor.name;
-		this.clearColor = descriptor.clearColor || {
-			r: 0,
-			g: 0,
-			b: 0,
-			a: 1
-		};
-		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,
-			usage: GPUBufferUsage.VERTEX,
-			mappedAtCreation: true
-		});
-		new Float32Array(this.vertexBuffer.getMappedRange()).set([
-			-1,
-			-1,
-			0,
-			3,
-			-1,
-			0,
-			-1,
-			3,
-			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: vertexEntryPoint,
-				buffers: [{
-					arrayStride: 12,
-					attributes: [{
-						shaderLocation: 0,
-						offset: 0,
-						format: "float32x3"
-					}]
-				}]
-			},
-			fragment: {
-				module,
-				entryPoint: fragmentEntryPoint,
-				targets: [{
-					format: actualFormat,
-					blend: this.getBlendState()
-				}]
-			},
-			primitive: { topology: "triangle-list" }
-		});
-		this.bindGroup = null;
-	}
-	/**
-	* Update bind group with new entries (e.g., after texture resize)
-	*/
-	updateBindGroup(newEntries) {
-		const bindGroupLayout = this.pipeline.getBindGroupLayout(0);
-		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;
-	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 | GPUTextureUsage.COPY_DST
-		});
-		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) => {
-			texture.destroy();
-		});
-		this.textures.clear();
-	}
-	destroy() {
-		this.textures.forEach((texture) => texture.destroy());
-		this.textures.clear();
-	}
-	getPixelSize() {
-		return {
-			width: this.width,
-			height: this.height
-		};
-	}
-};
-
-//#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 {
-	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;
-		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.resize(width, height);
-		this.isResizing = false;
-	}
-	getContext() {
-		return this.ctx;
-	}
-	getDevice() {
-		return this.device;
-	}
-	/**
-	* Get texture reference by pass name
-	* Returns a PassTextureRef that will resolve to the actual texture at render time
-	*/
-	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);
-	}
-	/**
-	* 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`;
-		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 = [];
-		descriptor.resources?.forEach((resource, index) => {
-			finalBindGroupEntries.push({
-				binding: index,
-				resource
-			});
-		});
-		const internalDescriptor = {
-			name: descriptor.name,
-			shaderCode: descriptor.shaderCode,
-			entryPoints: descriptor.entryPoints,
-			clearColor: descriptor.clearColor,
-			blendMode: descriptor.blendMode,
-			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);
-	}
-	/**
-	* Resolve resource to actual GPU binding resource
-	* Handles PassTextureRef by getting the current texture view with validation
-	*/
-	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) => {
-				finalBindGroupEntries.push({
-					binding: index,
-					resource: this.resolveResource(resource)
-				});
-			});
-			pass.updateBindGroup(finalBindGroupEntries);
-		});
-	}
-	/**
-	* 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;
-		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;
-			if (pass.view) renderTarget = pass.view;
-			else if (isLast) renderTarget = this.ctx.getCurrentTexture().createView();
-			else {
-				const textureName = `pass_${i}_output`;
-				let texture = this.textureManager.getTexture(textureName);
-				if (!texture) texture = this.textureManager.createTexture(textureName, "rgba16float");
-				renderTarget = texture.createView();
-			}
-			const renderPass = commandEncoder.beginRenderPass({ colorAttachments: [{
-				view: renderTarget,
-				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) {
-		this.animationFrameId = requestAnimationFrame((t) => {
-			cb?.(t);
-			this.renderFrame();
-			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 };