wgsl-renderer 0.1.9 → 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;
 	}
@@ -395,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;
@@ -404,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,
@@ -437,6 +444,13 @@ 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
@@ -445,7 +459,9 @@ var WGSLRenderer = class {
 	* @param options Optional texture creation options for when the texture needs to be created
 	*/
 	getPassTexture(passName, options) {
-		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(", ")}]`);
+		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);
 	}
 	/**
@@ -461,11 +477,13 @@ var WGSLRenderer = class {
 			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: ref.options?.sampleCount || 1
+				sampleCount: actualSampleCount
 			});
 			this.textureManager.setTexture(textureName, texture);
 		}
@@ -577,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);
@@ -586,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);
@@ -702,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
@@ -751,4 +822,6 @@ async function createWGSLRenderer(cvs, options) {
 }
 
 //#endregion
+exports.PassTextureRef = PassTextureRef;
+exports.WGSLRenderer = WGSLRenderer;
 exports.createWGSLRenderer = createWGSLRenderer;

package/dist/esm/index.d.ts

@@ -53,6 +53,7 @@ interface RenderPassOptions {
   view?: GPUTextureView;
   format?: GPUTextureFormat;
   renderToCanvas?: boolean;
+  sampleCount?: number;
 }
 interface InternalRenderPassDescriptor {
   name: string;
@@ -75,6 +76,7 @@ interface InternalRenderPassDescriptor {
   view?: GPUTextureView;
   format?: GPUTextureFormat;
   renderToCanvas?: boolean;
+  sampleCount?: number;
 }
 declare class RenderPass {
   name: string;
@@ -91,6 +93,7 @@ declare class RenderPass {
   view?: GPUTextureView;
   format?: GPUTextureFormat;
   renderToCanvas?: boolean;
+  sampleCount: number;
   passResources: BindingResource[];
   bindGroups: {
     [setName: string]: GPUBindGroup;
@@ -148,11 +151,15 @@ 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
@@ -256,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;
 	}
@@ -394,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;
@@ -403,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,
@@ -436,6 +443,13 @@ 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
@@ -444,7 +458,9 @@ var WGSLRenderer = class {
 	* @param options Optional texture creation options for when the texture needs to be created
 	*/
 	getPassTexture(passName, options) {
-		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(", ")}]`);
+		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);
 	}
 	/**
@@ -460,11 +476,13 @@ var WGSLRenderer = class {
 			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: ref.options?.sampleCount || 1
+				sampleCount: actualSampleCount
 			});
 			this.textureManager.setTexture(textureName, texture);
 		}
@@ -576,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);
@@ -585,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);
@@ -701,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
@@ -750,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.9",
+  "version": "0.2.0",
   "description": "A multi-pass renderer based on WebGPU and WGSL.",
   "type": "module",
   "main": "./dist/cjs/index.js",