wgsl-renderer 0.0.1 → 0.0.3

package/dist/esm/index.js

@@ -6,8 +6,12 @@ var RenderPass = class {
 	vertexBuffer;
 	clearColor;
 	blendMode;
-	hasOutputTexture = false;
+	view;
+	format;
+	passResources = [];
+	device;
 	constructor(descriptor, device, format, layout) {
+		this.device = device;
 		this.name = descriptor.name;
 		this.clearColor = descriptor.clearColor || {
 			r: 0,
@@ -15,9 +19,12 @@ var RenderPass = class {
 			b: 0,
 			a: 1
 		};
-		this.blendMode = descriptor.blendMode || "alpha";
-		const module = device.createShaderModule({ code: descriptor.shaderCode });
-		this.vertexBuffer = device.createBuffer({
+		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
@@ -34,11 +41,13 @@ var RenderPass = class {
 			0
 		]);
 		this.vertexBuffer.unmap();
-		this.pipeline = device.createRenderPipeline({
+		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: [{
@@ -50,18 +59,24 @@ var RenderPass = class {
 			},
 			fragment: {
 				module,
-				entryPoint: "fs_main",
+				entryPoint: fragmentEntryPoint,
 				targets: [{
-					format,
+					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 = device.createBindGroup({
+		this.bindGroup = this.device.createBindGroup({
 			layout: bindGroupLayout,
-			entries: descriptor.bindGroupEntries || []
+			entries: newEntries
 		});
 	}
 	getBlendState() {
@@ -125,7 +140,7 @@ var TextureManager = class {
 		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;
@@ -135,10 +150,12 @@ 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) => {
+			texture.destroy();
+		});
+		this.textures.clear();
 	}
 	destroy() {
 		this.textures.forEach((texture) => texture.destroy());
@@ -152,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 {
@@ -160,145 +201,122 @@ 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;
+		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;
 	}
 	/**
-	* Ensure background pass is added
+	* Get texture reference by pass name
+	* Returns a PassTextureRef that will resolve to the actual texture at render time
 	*/
-	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);
-		}
+	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 = [];
-		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) => {
+		descriptor.resources?.forEach((resource, index) => {
 			finalBindGroupEntries.push({
-				binding: index + 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");
-		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
+			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);
 	}
 	/**
-	* Force create output texture for a specific pass
-	* This is useful when you need the output texture immediately after adding a pass
+	* Resolve resource to actual GPU binding resource
+	* Handles PassTextureRef by getting the current texture view with validation
 	*/
-	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);
+	resolveResource(resource) {
+		if (isPassTextureRef(resource)) return this.resolveTextureRef(resource);
+		return resource;
 	}
 	/**
-	* Get the output texture of a specific pass
+	* Update bind groups to resolve current texture references
+	* Call this before rendering to ensure all PassTextureRef are resolved
 	*/
-	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);
+	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
@@ -311,20 +329,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
@@ -337,25 +348,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);
@@ -380,25 +373,25 @@ var WGSLRenderer = class {
 	}
 	renderFrame() {
 		if (this.passes.length === 0) return;
+		this.updateBindGroups();
 		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 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
 			}] });
@@ -411,9 +404,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) {
@@ -421,11 +416,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);

package/dist/types/index.d.ts

@@ -1,7 +1,11 @@
 //#region src/RenderPass.d.ts
-interface RenderPassDescriptor {
+interface RenderPassOptions {
   name: string;
   shaderCode: string;
+  entryPoints?: {
+    vertex?: string;
+    fragment?: string;
+  };
   clearColor?: {
     r: number;
     g: number;
@@ -10,10 +14,16 @@ interface RenderPassDescriptor {
   };
   blendMode?: 'additive' | 'alpha' | 'multiply' | 'none';
   resources: GPUBindingResource[];
+  view?: GPUTextureView;
+  format?: GPUTextureFormat;
 }
 interface InternalRenderPassDescriptor {
   name: string;
   shaderCode: string;
+  entryPoints?: {
+    vertex?: string;
+    fragment?: string;
+  };
   clearColor?: {
     r: number;
     g: number;
@@ -22,15 +32,13 @@ interface InternalRenderPassDescriptor {
   };
   blendMode?: 'additive' | 'alpha' | 'multiply' | 'none';
   bindGroupEntries: GPUBindGroupEntry[];
-}
-interface RenderPassOutput {
-  texture?: GPUTexture;
-  writeToCanvas?: boolean;
+  view?: GPUTextureView;
+  format?: GPUTextureFormat;
 }
 declare class RenderPass {
   name: string;
   pipeline: GPURenderPipeline;
-  bindGroup: GPUBindGroup;
+  bindGroup: GPUBindGroup | null;
   vertexBuffer: GPUBuffer;
   clearColor: {
     r: number;
@@ -39,101 +47,102 @@ declare class RenderPass {
     a: number;
   };
   blendMode: 'additive' | 'alpha' | 'multiply' | 'none';
-  hasOutputTexture: boolean;
+  view?: GPUTextureView;
+  format?: GPUTextureFormat;
+  passResources: GPUBindingResource[];
+  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;
   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: RenderPassDescriptor[];
-  output?: RenderPassOutput;
+  passes: RenderPassOptions[];
 }
 interface WGSLRendererOptions {
-  backgroundColor?: number | string | {
-    r: number;
-    g: number;
-    b: number;
-  };
+  config?: GPUCanvasConfiguration;
 }
 declare class WGSLRenderer {
   canvas: HTMLCanvasElement;
-  ctx: GPUCanvasContext;
-  device: GPUDevice;
-  format: GPUTextureFormat;
-  passes: RenderPass[];
+  options?: WGSLRendererOptions | undefined;
+  private ctx;
+  private device;
+  private format;
+  private passes;
   private textureManager;
-  private backgroundPassAdded;
-  private backgroundColor;
-  private uniforms;
   private animationFrameId;
-  constructor(canvas: HTMLCanvasElement, options?: WGSLRendererOptions);
+  private isResizing;
+  constructor(canvas: HTMLCanvasElement, options?: WGSLRendererOptions | undefined);
   init(): Promise<void>;
+  resize(width: number, height: number): Promise<void>;
+  getContext(): GPUCanvasContext;
+  getDevice(): GPUDevice;
   /**
-   * Ensure background pass is added
+   * Get texture reference by pass name
+   * Returns a PassTextureRef that will resolve to the actual texture at render time
    */
-  private ensureBackgroundPass;
+  getPassTexture(passName: string): PassTextureRef;
   /**
-   * Add a render pass to the multi-pass pipeline
+   * Resolve a PassTextureRef to actual GPUTextureView with validation
    */
-  addPass(descriptor: RenderPassDescriptor): void;
+  private resolveTextureRef;
   /**
-   * Set background color
+   * Get pass by name
+   */
+  getPassByName(passName: string): RenderPass | undefined;
+  /**
+   * Add a render pass to the multi-pass pipeline
    */
-  setBackgroundColor(r: number, g: number, b: number, a?: number): void;
+  addPass(descriptor: RenderPassOptions): void;
   /**
-   * Force create output texture for a specific pass
-   * This is useful when you need the output texture immediately after adding a pass
+   * Resolve resource to actual GPU binding resource
+   * Handles PassTextureRef by getting the current texture view with validation
    */
-  createPassOutput(passIndex: number): GPUTexture | undefined;
+  private resolveResource;
   /**
-   * Get the output texture of a specific pass
+   * Update bind groups to resolve current texture references
+   * Call this before rendering to ensure all PassTextureRef are resolved
    */
-  getPassOutput(passIndex: number): GPUTexture | undefined;
+  private updateBindGroups;
   /**
    * 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): {
-    id: symbol;
     values: Float32Array<ArrayBuffer>;
     apply: () => void;
     getBuffer: () => GPUBuffer;
   };
-  getUniformsByID(id: symbol): {
-    id: symbol;
-    values: Float32Array;
-    apply: {
-      (): void;
-    };
-    getBuffer: {
-      (): GPUBuffer;
-    };
-  } | undefined;
   /**
    * Create a sampler
    */
   createSampler(options?: GPUSamplerDescriptor): GPUSampler;
-  /**
-   * Create a bind group entry for texture
-   */
-  createTextureBinding(texture: GPUTexture): GPUTextureView;
-  /**
-   * Configure multi-pass rendering
-   */
-  setupMultiPass(descriptor: MultiPassDescriptor): void;
-  loadTexture(url: string): Promise<{
+  loadImageTexture(url: string): Promise<{
     texture: GPUTexture;
     width: number;
     height: number;
   }>;
   renderFrame(): void;
   loopRender(cb?: {
-    (): void;
+    (t?: number): void;
   }): void;
   stopLoop(): void;
-  resize(width: number, height: number): void;
 }
 declare function createWGSLRenderer(cvs: HTMLCanvasElement, options?: WGSLRendererOptions): Promise<WGSLRenderer>;
 //#endregion