wgsl-renderer 0.1.8 → 0.2.0

package/dist/cjs/index.js

@@ -10,6 +10,7 @@ var RenderPass = class {
 	view;
 	format;
 	renderToCanvas;
+	sampleCount = 1;
 	passResources = [];
 	bindGroups = {};
 	activeBindGroupSet = "default";
@@ -30,6 +31,7 @@ var RenderPass = class {
 		this.view = descriptor.view;
 		this.format = descriptor.format;
 		this.renderToCanvas = descriptor.renderToCanvas;
+		this.sampleCount = descriptor.sampleCount || 1;
 		const actualFormat = descriptor.format || format;
 		const module$1 = this.device.createShaderModule({
 			code: descriptor.shaderCode,
@@ -76,7 +78,8 @@ var RenderPass = class {
 					blend: this.getBlendState()
 				}]
 			},
-			primitive: { topology: "triangle-list" }
+			primitive: { topology: "triangle-list" },
+			multisample: { count: this.sampleCount }
 		});
 		this.bindGroup = null;
 	}
@@ -341,6 +344,12 @@ var TextureManager = class {
 		});
 		this.textures.clear();
 	}
+	/**
+	* Store a texture in the manager
+	*/
+	setTexture(name, texture) {
+		this.textures.set(name, texture);
+	}
 	destroy() {
 		this.textures.forEach((texture) => texture.destroy());
 		this.textures.clear();
@@ -359,8 +368,10 @@ const PASS_TEXTURE_REF_SYMBOL = Symbol("PassTextureRef");
 var PassTextureRef = class PassTextureRef {
 	[PASS_TEXTURE_REF_SYMBOL] = true;
 	passName;
-	constructor(passName) {
+	options;
+	constructor(passName, options) {
 		this.passName = passName;
+		this.options = options;
 	}
 	static is(obj) {
 		return obj && typeof obj === "object" && PASS_TEXTURE_REF_SYMBOL in obj;
@@ -369,8 +380,8 @@ var PassTextureRef = class PassTextureRef {
 		if (this.is(resource)) return resource;
 		return null;
 	}
-	static create(passName) {
-		return new PassTextureRef(passName);
+	static create(passName, options) {
+		return new PassTextureRef(passName, options);
 	}
 };
 function isPassTextureRef(obj) {
@@ -387,6 +398,8 @@ var WGSLRenderer = class {
 	textureManager;
 	animationFrameId = null;
 	isResizing = false;
+	supportedSampleCounts = [];
+	testedSampleCounts = /* @__PURE__ */ new Set();
 	constructor(canvas, options) {
 		this.canvas = canvas;
 		this.options = options;
@@ -396,6 +409,8 @@ var WGSLRenderer = class {
 	async init() {
 		this.device = await (await navigator.gpu.requestAdapter()).requestDevice();
 		this.format = navigator.gpu.getPreferredCanvasFormat();
+		this.supportedSampleCounts = [1];
+		this.testedSampleCounts = new Set([1]);
 		const config = Object.assign({
 			device: this.device,
 			format: this.format,
@@ -429,13 +444,25 @@ var WGSLRenderer = class {
 	getDevice() {
 		return this.device;
 	}
+	getSupportedSampleCounts() {
+		return [...this.supportedSampleCounts];
+	}
+	isSampleCountSupported(sampleCount) {
+		if (this.testedSampleCounts.has(sampleCount)) return this.supportedSampleCounts.includes(sampleCount);
+		return this.supportedSampleCounts.includes(sampleCount);
+	}
 	/**
 	* Get texture reference by pass name
 	* Returns a PassTextureRef that will resolve to the actual texture at render time
+	*
+	* @param passName Name of the pass to reference
+	* @param options Optional texture creation options for when the texture needs to be created
 	*/
-	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);
+	getPassTexture(passName, options) {
+		const pass = this.passes.find((pass$1) => pass$1.name === passName);
+		if (!pass) throw new Error(`Cannot find pass named '${passName}'. Available passes: [${this.passes.map((p) => p.name).join(", ")}]`);
+		if ((options?.format ?? "rgba8unorm") !== pass.format) throw new Error(`Format must be set to ${pass.format}, pass name: '${passName}'`);
+		return PassTextureRef.create(passName, options);
 	}
 	/**
 	* Resolve a PassTextureRef to actual GPUTextureView with validation
@@ -446,8 +473,24 @@ var WGSLRenderer = class {
 		if (targetPass.view) return targetPass.view;
 		const textureName = `pass_${this.passes.indexOf(targetPass)}_output`;
 		let texture = this.textureManager.getTexture(textureName);
-		if (!texture) texture = this.textureManager.createTexture(textureName, this.format);
-		return texture.createView();
+		if (!texture) {
+			const format = ref.options?.format || this.format;
+			const usage = ref.options?.usage || GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT;
+			const size = this.textureManager.getPixelSize();
+			const requestedSampleCount = ref.options?.sampleCount || 1;
+			const actualSampleCount = this.isSampleCountSupported(requestedSampleCount) ? requestedSampleCount : 1;
+			texture = this.device.createTexture({
+				size: [size.width, size.height],
+				format,
+				usage,
+				sampleCount: actualSampleCount
+			});
+			this.textureManager.setTexture(textureName, texture);
+		}
+		return texture.createView({
+			baseMipLevel: 0,
+			mipLevelCount: ref.options?.mipmaps ? texture.mipLevelCount : 1
+		});
 	}
 	/**
 	* Get pass by name
@@ -552,7 +595,8 @@ var WGSLRenderer = class {
 			bindGroupSets: bindGroupSetsCopy,
 			view: descriptor.view,
 			format: descriptor.format,
-			renderToCanvas: descriptor.renderToCanvas
+			renderToCanvas: descriptor.renderToCanvas,
+			sampleCount: descriptor.sampleCount
 		};
 		const pipelineFormat = descriptor.format || this.format;
 		return new RenderPass(internalDescriptor, this.device, pipelineFormat);
@@ -561,6 +605,10 @@ var WGSLRenderer = class {
 	* Add a render pass to the multi-pass pipeline
 	*/
 	addPass(descriptor) {
+		if (descriptor.sampleCount && !this.isSampleCountSupported(descriptor.sampleCount)) {
+			console.warn(`Sample count ${descriptor.sampleCount} is not supported. Using sample count 1 instead.`);
+			descriptor.sampleCount = 1;
+		}
 		const pass = this.createPass(descriptor);
 		pass.passResources = descriptor.resources ?? [];
 		this.passes.push(pass);
@@ -677,16 +725,64 @@ var WGSLRenderer = class {
 			let loadOp = "load";
 			if (i === 0) loadOp = "clear";
 			let renderTarget;
-			if (pass.renderToCanvas || i === enabledPasses.length - 1) renderTarget = this.ctx.getCurrentTexture().createView();
+			let resolveTarget;
+			const canvasTexture = this.ctx.getCurrentTexture();
+			const isLastPass = i === enabledPasses.length - 1;
+			if (pass.renderToCanvas || isLastPass && !pass.view) if (pass.sampleCount && pass.sampleCount > 1) {
+				const actualSampleCount = this.isSampleCountSupported(pass.sampleCount) ? pass.sampleCount : 1;
+				if (actualSampleCount === 1) renderTarget = canvasTexture.createView();
+				else {
+					renderTarget = this.device.createTexture({
+						size: [canvasTexture.width, canvasTexture.height],
+						format: canvasTexture.format,
+						usage: GPUTextureUsage.RENDER_ATTACHMENT,
+						sampleCount: actualSampleCount
+					}).createView();
+					resolveTarget = canvasTexture.createView();
+				}
+			} else renderTarget = canvasTexture.createView();
 			else if (pass.view) renderTarget = pass.view;
 			else {
 				const textureName = `pass_${i}_output`;
 				let texture = this.textureManager.getTexture(textureName);
-				if (!texture) texture = this.textureManager.createTexture(textureName, pass.format || this.format);
-				renderTarget = texture.createView();
+				if (texture) {
+					const msaaTexture = this.textureManager.getTexture(`${textureName}_msaa`);
+					const resolveTexture = this.textureManager.getTexture(`${textureName}_resolve`);
+					if (msaaTexture && resolveTexture && pass.sampleCount && pass.sampleCount > 1) {
+						renderTarget = msaaTexture.createView();
+						resolveTarget = resolveTexture.createView();
+					} else renderTarget = texture.createView();
+				} else if (pass.sampleCount && pass.sampleCount > 1) {
+					const actualSampleCount = this.isSampleCountSupported(pass.sampleCount) ? pass.sampleCount : 1;
+					if (actualSampleCount > 1) {
+						texture = this.device.createTexture({
+							size: [this.textureManager.getPixelSize().width, this.textureManager.getPixelSize().height],
+							format: pass.format || this.format,
+							usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
+							sampleCount: actualSampleCount
+						});
+						const resolveTexture = this.device.createTexture({
+							size: [this.textureManager.getPixelSize().width, this.textureManager.getPixelSize().height],
+							format: pass.format || this.format,
+							usage: GPUTextureUsage.TEXTURE_BINDING,
+							sampleCount: 1
+						});
+						this.textureManager.setTexture(`${textureName}_msaa`, texture);
+						this.textureManager.setTexture(`${textureName}_resolve`, resolveTexture);
+						renderTarget = texture.createView();
+						resolveTarget = resolveTexture.createView();
+					} else {
+						texture = this.textureManager.createTexture(textureName, pass.format || this.format);
+						renderTarget = texture.createView();
+					}
+				} else {
+					texture = this.textureManager.createTexture(textureName, pass.format || this.format);
+					renderTarget = texture.createView();
+				}
 			}
 			const renderPass = commandEncoder.beginRenderPass({ colorAttachments: [{
 				view: renderTarget,
+				resolveTarget,
 				loadOp,
 				storeOp: "store",
 				clearValue: pass.clearColor
@@ -726,4 +822,6 @@ async function createWGSLRenderer(cvs, options) {
 }
 
 //#endregion
+exports.PassTextureRef = PassTextureRef;
+exports.WGSLRenderer = WGSLRenderer;
 exports.createWGSLRenderer = createWGSLRenderer;

package/dist/esm/index.d.ts

@@ -3,10 +3,26 @@ declare const PASS_TEXTURE_REF_SYMBOL: unique symbol;
 declare class PassTextureRef {
   readonly [PASS_TEXTURE_REF_SYMBOL] = true;
   readonly passName: string;
-  constructor(passName: string);
+  readonly options?: {
+    format?: GPUTextureFormat;
+    mipmaps?: boolean;
+    sampleCount?: number;
+    usage?: GPUTextureUsageFlags;
+  };
+  constructor(passName: string, options?: {
+    format?: GPUTextureFormat;
+    mipmaps?: boolean;
+    sampleCount?: number;
+    usage?: GPUTextureUsageFlags;
+  });
   static is(obj: any): obj is PassTextureRef;
   static fromGPUBindingResource(resource: GPUBindingResource): PassTextureRef | null;
-  static create(passName: string): PassTextureRef;
+  static create(passName: string, options?: {
+    format?: GPUTextureFormat;
+    mipmaps?: boolean;
+    sampleCount?: number;
+    usage?: GPUTextureUsageFlags;
+  }): PassTextureRef;
 }
 //#endregion
 //#region src/RenderPass.d.ts
@@ -37,6 +53,7 @@ interface RenderPassOptions {
   view?: GPUTextureView;
   format?: GPUTextureFormat;
   renderToCanvas?: boolean;
+  sampleCount?: number;
 }
 interface InternalRenderPassDescriptor {
   name: string;
@@ -59,6 +76,7 @@ interface InternalRenderPassDescriptor {
   view?: GPUTextureView;
   format?: GPUTextureFormat;
   renderToCanvas?: boolean;
+  sampleCount?: number;
 }
 declare class RenderPass {
   name: string;
@@ -75,6 +93,7 @@ declare class RenderPass {
   view?: GPUTextureView;
   format?: GPUTextureFormat;
   renderToCanvas?: boolean;
+  sampleCount: number;
   passResources: BindingResource[];
   bindGroups: {
     [setName: string]: GPUBindGroup;
@@ -132,16 +151,28 @@ declare class WGSLRenderer {
   private textureManager;
   private animationFrameId;
   private isResizing;
+  private supportedSampleCounts;
+  private testedSampleCounts;
   constructor(canvas: HTMLCanvasElement, options?: WGSLRendererOptions | undefined);
   init(): Promise<void>;
   resize(width: number, height: number): Promise<void>;
   getContext(): GPUCanvasContext;
   getDevice(): GPUDevice;
+  getSupportedSampleCounts(): number[];
+  isSampleCountSupported(sampleCount: number): boolean;
   /**
    * Get texture reference by pass name
    * Returns a PassTextureRef that will resolve to the actual texture at render time
+   *
+   * @param passName Name of the pass to reference
+   * @param options Optional texture creation options for when the texture needs to be created
    */
-  getPassTexture(passName: string): PassTextureRef;
+  getPassTexture(passName: string, options?: {
+    format?: GPUTextureFormat;
+    mipmaps?: boolean;
+    sampleCount?: number;
+    usage?: GPUTextureUsageFlags;
+  }): PassTextureRef;
   /**
    * Resolve a PassTextureRef to actual GPUTextureView with validation
    */
@@ -232,4 +263,4 @@ declare class WGSLRenderer {
 }
 declare function createWGSLRenderer(cvs: HTMLCanvasElement, options?: WGSLRendererOptions): Promise<WGSLRenderer>;
 //#endregion
-export { type BindingResource, type PassTextureRef, type RenderPassOptions, type WGSLRenderer, createWGSLRenderer };
+export { BindingResource, PassTextureRef, RenderPassOptions, WGSLRenderer, createWGSLRenderer };

package/dist/esm/index.js

@@ -9,6 +9,7 @@ var RenderPass = class {
 	view;
 	format;
 	renderToCanvas;
+	sampleCount = 1;
 	passResources = [];
 	bindGroups = {};
 	activeBindGroupSet = "default";
@@ -29,6 +30,7 @@ var RenderPass = class {
 		this.view = descriptor.view;
 		this.format = descriptor.format;
 		this.renderToCanvas = descriptor.renderToCanvas;
+		this.sampleCount = descriptor.sampleCount || 1;
 		const actualFormat = descriptor.format || format;
 		const module = this.device.createShaderModule({
 			code: descriptor.shaderCode,
@@ -75,7 +77,8 @@ var RenderPass = class {
 					blend: this.getBlendState()
 				}]
 			},
-			primitive: { topology: "triangle-list" }
+			primitive: { topology: "triangle-list" },
+			multisample: { count: this.sampleCount }
 		});
 		this.bindGroup = null;
 	}
@@ -340,6 +343,12 @@ var TextureManager = class {
 		});
 		this.textures.clear();
 	}
+	/**
+	* Store a texture in the manager
+	*/
+	setTexture(name, texture) {
+		this.textures.set(name, texture);
+	}
 	destroy() {
 		this.textures.forEach((texture) => texture.destroy());
 		this.textures.clear();
@@ -358,8 +367,10 @@ const PASS_TEXTURE_REF_SYMBOL = Symbol("PassTextureRef");
 var PassTextureRef = class PassTextureRef {
 	[PASS_TEXTURE_REF_SYMBOL] = true;
 	passName;
-	constructor(passName) {
+	options;
+	constructor(passName, options) {
 		this.passName = passName;
+		this.options = options;
 	}
 	static is(obj) {
 		return obj && typeof obj === "object" && PASS_TEXTURE_REF_SYMBOL in obj;
@@ -368,8 +379,8 @@ var PassTextureRef = class PassTextureRef {
 		if (this.is(resource)) return resource;
 		return null;
 	}
-	static create(passName) {
-		return new PassTextureRef(passName);
+	static create(passName, options) {
+		return new PassTextureRef(passName, options);
 	}
 };
 function isPassTextureRef(obj) {
@@ -386,6 +397,8 @@ var WGSLRenderer = class {
 	textureManager;
 	animationFrameId = null;
 	isResizing = false;
+	supportedSampleCounts = [];
+	testedSampleCounts = /* @__PURE__ */ new Set();
 	constructor(canvas, options) {
 		this.canvas = canvas;
 		this.options = options;
@@ -395,6 +408,8 @@ var WGSLRenderer = class {
 	async init() {
 		this.device = await (await navigator.gpu.requestAdapter()).requestDevice();
 		this.format = navigator.gpu.getPreferredCanvasFormat();
+		this.supportedSampleCounts = [1];
+		this.testedSampleCounts = new Set([1]);
 		const config = Object.assign({
 			device: this.device,
 			format: this.format,
@@ -428,13 +443,25 @@ var WGSLRenderer = class {
 	getDevice() {
 		return this.device;
 	}
+	getSupportedSampleCounts() {
+		return [...this.supportedSampleCounts];
+	}
+	isSampleCountSupported(sampleCount) {
+		if (this.testedSampleCounts.has(sampleCount)) return this.supportedSampleCounts.includes(sampleCount);
+		return this.supportedSampleCounts.includes(sampleCount);
+	}
 	/**
 	* Get texture reference by pass name
 	* Returns a PassTextureRef that will resolve to the actual texture at render time
+	*
+	* @param passName Name of the pass to reference
+	* @param options Optional texture creation options for when the texture needs to be created
 	*/
-	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);
+	getPassTexture(passName, options) {
+		const pass = this.passes.find((pass$1) => pass$1.name === passName);
+		if (!pass) throw new Error(`Cannot find pass named '${passName}'. Available passes: [${this.passes.map((p) => p.name).join(", ")}]`);
+		if ((options?.format ?? "rgba8unorm") !== pass.format) throw new Error(`Format must be set to ${pass.format}, pass name: '${passName}'`);
+		return PassTextureRef.create(passName, options);
 	}
 	/**
 	* Resolve a PassTextureRef to actual GPUTextureView with validation
@@ -445,8 +472,24 @@ var WGSLRenderer = class {
 		if (targetPass.view) return targetPass.view;
 		const textureName = `pass_${this.passes.indexOf(targetPass)}_output`;
 		let texture = this.textureManager.getTexture(textureName);
-		if (!texture) texture = this.textureManager.createTexture(textureName, this.format);
-		return texture.createView();
+		if (!texture) {
+			const format = ref.options?.format || this.format;
+			const usage = ref.options?.usage || GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT;
+			const size = this.textureManager.getPixelSize();
+			const requestedSampleCount = ref.options?.sampleCount || 1;
+			const actualSampleCount = this.isSampleCountSupported(requestedSampleCount) ? requestedSampleCount : 1;
+			texture = this.device.createTexture({
+				size: [size.width, size.height],
+				format,
+				usage,
+				sampleCount: actualSampleCount
+			});
+			this.textureManager.setTexture(textureName, texture);
+		}
+		return texture.createView({
+			baseMipLevel: 0,
+			mipLevelCount: ref.options?.mipmaps ? texture.mipLevelCount : 1
+		});
 	}
 	/**
 	* Get pass by name
@@ -551,7 +594,8 @@ var WGSLRenderer = class {
 			bindGroupSets: bindGroupSetsCopy,
 			view: descriptor.view,
 			format: descriptor.format,
-			renderToCanvas: descriptor.renderToCanvas
+			renderToCanvas: descriptor.renderToCanvas,
+			sampleCount: descriptor.sampleCount
 		};
 		const pipelineFormat = descriptor.format || this.format;
 		return new RenderPass(internalDescriptor, this.device, pipelineFormat);
@@ -560,6 +604,10 @@ var WGSLRenderer = class {
 	* Add a render pass to the multi-pass pipeline
 	*/
 	addPass(descriptor) {
+		if (descriptor.sampleCount && !this.isSampleCountSupported(descriptor.sampleCount)) {
+			console.warn(`Sample count ${descriptor.sampleCount} is not supported. Using sample count 1 instead.`);
+			descriptor.sampleCount = 1;
+		}
 		const pass = this.createPass(descriptor);
 		pass.passResources = descriptor.resources ?? [];
 		this.passes.push(pass);
@@ -676,16 +724,64 @@ var WGSLRenderer = class {
 			let loadOp = "load";
 			if (i === 0) loadOp = "clear";
 			let renderTarget;
-			if (pass.renderToCanvas || i === enabledPasses.length - 1) renderTarget = this.ctx.getCurrentTexture().createView();
+			let resolveTarget;
+			const canvasTexture = this.ctx.getCurrentTexture();
+			const isLastPass = i === enabledPasses.length - 1;
+			if (pass.renderToCanvas || isLastPass && !pass.view) if (pass.sampleCount && pass.sampleCount > 1) {
+				const actualSampleCount = this.isSampleCountSupported(pass.sampleCount) ? pass.sampleCount : 1;
+				if (actualSampleCount === 1) renderTarget = canvasTexture.createView();
+				else {
+					renderTarget = this.device.createTexture({
+						size: [canvasTexture.width, canvasTexture.height],
+						format: canvasTexture.format,
+						usage: GPUTextureUsage.RENDER_ATTACHMENT,
+						sampleCount: actualSampleCount
+					}).createView();
+					resolveTarget = canvasTexture.createView();
+				}
+			} else renderTarget = canvasTexture.createView();
 			else if (pass.view) renderTarget = pass.view;
 			else {
 				const textureName = `pass_${i}_output`;
 				let texture = this.textureManager.getTexture(textureName);
-				if (!texture) texture = this.textureManager.createTexture(textureName, pass.format || this.format);
-				renderTarget = texture.createView();
+				if (texture) {
+					const msaaTexture = this.textureManager.getTexture(`${textureName}_msaa`);
+					const resolveTexture = this.textureManager.getTexture(`${textureName}_resolve`);
+					if (msaaTexture && resolveTexture && pass.sampleCount && pass.sampleCount > 1) {
+						renderTarget = msaaTexture.createView();
+						resolveTarget = resolveTexture.createView();
+					} else renderTarget = texture.createView();
+				} else if (pass.sampleCount && pass.sampleCount > 1) {
+					const actualSampleCount = this.isSampleCountSupported(pass.sampleCount) ? pass.sampleCount : 1;
+					if (actualSampleCount > 1) {
+						texture = this.device.createTexture({
+							size: [this.textureManager.getPixelSize().width, this.textureManager.getPixelSize().height],
+							format: pass.format || this.format,
+							usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
+							sampleCount: actualSampleCount
+						});
+						const resolveTexture = this.device.createTexture({
+							size: [this.textureManager.getPixelSize().width, this.textureManager.getPixelSize().height],
+							format: pass.format || this.format,
+							usage: GPUTextureUsage.TEXTURE_BINDING,
+							sampleCount: 1
+						});
+						this.textureManager.setTexture(`${textureName}_msaa`, texture);
+						this.textureManager.setTexture(`${textureName}_resolve`, resolveTexture);
+						renderTarget = texture.createView();
+						resolveTarget = resolveTexture.createView();
+					} else {
+						texture = this.textureManager.createTexture(textureName, pass.format || this.format);
+						renderTarget = texture.createView();
+					}
+				} else {
+					texture = this.textureManager.createTexture(textureName, pass.format || this.format);
+					renderTarget = texture.createView();
+				}
 			}
 			const renderPass = commandEncoder.beginRenderPass({ colorAttachments: [{
 				view: renderTarget,
+				resolveTarget,
 				loadOp,
 				storeOp: "store",
 				clearValue: pass.clearColor
@@ -725,4 +821,4 @@ async function createWGSLRenderer(cvs, options) {
 }
 
 //#endregion
-export { createWGSLRenderer };
+export { PassTextureRef, WGSLRenderer, createWGSLRenderer };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wgsl-renderer",
-  "version": "0.1.8",
+  "version": "0.2.0",
   "description": "A multi-pass renderer based on WebGPU and WGSL.",
   "type": "module",
   "main": "./dist/cjs/index.js",