wgsl-renderer 0.3.4 → 0.4.0

package/dist/cjs/index.js

@@ -314,6 +314,8 @@ var TextureManager = class {
 	device;
 	width;
 	height;
+	renderTarget = null;
+	outputTexture = null;
 	constructor(device, width, height) {
 		this.device = device;
 		this.width = width;
@@ -348,9 +350,64 @@ var TextureManager = class {
 	setTexture(name, texture) {
 		this.textures.set(name, texture);
 	}
+	/**
+	* 获取或创建渲染目标纹理
+	* 所有渲染到这里的内容会再复制到 canvas 和输出纹理
+	* 必须支持 COPY_SRC 以便复制到 canvas 和输出纹理
+	*/
+	getOrCreateRenderTarget(width, height, format) {
+		if (!this.renderTarget || this.renderTarget.width !== width || this.renderTarget.height !== height) {
+			this.renderTarget?.destroy();
+			this.renderTarget = this.device.createTexture({
+				size: [
+					width,
+					height,
+					1
+				],
+				format,
+				usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC | GPUTextureUsage.TEXTURE_BINDING
+			});
+		}
+		return this.renderTarget;
+	}
+	/**
+	* 获取当前渲染目标纹理
+	*/
+	getRenderTarget() {
+		return this.renderTarget;
+	}
+	/**
+	* 获取或创建输出纹理
+	* 用于视频导出，始终包含最新的渲染结果
+	*/
+	getOrCreateOutputTexture(width, height, format) {
+		if (!this.outputTexture || this.outputTexture.width !== width || this.outputTexture.height !== height) {
+			this.outputTexture?.destroy();
+			this.outputTexture = this.device.createTexture({
+				size: [
+					width,
+					height,
+					1
+				],
+				format,
+				usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC | GPUTextureUsage.TEXTURE_BINDING
+			});
+		}
+		return this.outputTexture;
+	}
+	/**
+	* 获取当前输出纹理
+	*/
+	getOutputTexture() {
+		return this.outputTexture;
+	}
 	destroy() {
 		this.textures.forEach((texture) => texture.destroy());
 		this.textures.clear();
+		this.renderTarget?.destroy();
+		this.renderTarget = null;
+		this.outputTexture?.destroy();
+		this.outputTexture = null;
 	}
 	getPixelSize() {
 		return {
@@ -398,6 +455,11 @@ function createSamplingView(texture, ref) {
 
 //#endregion
 //#region src/index.ts
+var RenderMode = /* @__PURE__ */ function(RenderMode$1) {
+	RenderMode$1["NORMAL"] = "normal";
+	RenderMode$1["EXPORT"] = "export";
+	return RenderMode$1;
+}(RenderMode || {});
 var WGSLRenderer = class {
 	ctx;
 	device;
@@ -406,6 +468,9 @@ var WGSLRenderer = class {
 	textureManager;
 	animationFrameId = null;
 	isResizing = false;
+	renderMode = RenderMode.NORMAL;
+	readBuffer = null;
+	hasClearedCanvasThisFrame = false;
 	constructor(canvas, options) {
 		this.canvas = canvas;
 		this.options = options;
@@ -442,6 +507,19 @@ var WGSLRenderer = class {
 		this.textureManager.resize(width, height);
 		this.isResizing = false;
 	}
+	/**
+	* 设置渲染模式
+	* @param mode NORMAL模式渲染到canvas和outputTexture，EXPORT模式只渲染到outputTexture
+	*/
+	setRenderMode(mode) {
+		this.renderMode = mode;
+	}
+	/**
+	* 获取当前渲染模式
+	*/
+	getRenderMode() {
+		return this.renderMode;
+	}
 	getContext() {
 		return this.ctx;
 	}
@@ -710,30 +788,45 @@ var WGSLRenderer = class {
 		if (this.passes.length === 0) return;
 		const enabledPasses = this.getEnabledPasses();
 		if (enabledPasses.length === 0) return;
+		this.hasClearedCanvasThisFrame = false;
 		this.updateBindGroups();
 		const commandEncoder = this.device.createCommandEncoder();
+		const canvasWidth = this.canvas.width || this.canvas.clientWidth;
+		const canvasHeight = this.canvas.height || this.canvas.clientHeight;
 		for (let i = 0; i < enabledPasses.length; i++) {
 			const pass = enabledPasses[i];
 			let loadOp = "load";
-			if (i === 0) loadOp = "clear";
-			let renderTarget;
-			let resolveTarget;
-			const canvasTexture = this.ctx.getCurrentTexture();
+			const isFirst = i === 0;
 			const isLastPass = i === enabledPasses.length - 1;
-			if (pass.renderToCanvas || isLastPass && !pass.view) renderTarget = canvasTexture.createView();
-			else if (pass.view) renderTarget = pass.view;
-			else {
+			if (isFirst) loadOp = "clear";
+			let renderTargetView;
+			let isRenderingToCanvas = false;
+			if (pass.view) renderTargetView = pass.view;
+			else if (this.renderMode === RenderMode.EXPORT && (pass.renderToCanvas || isLastPass)) {
+				renderTargetView = this.textureManager.getOrCreateOutputTexture(canvasWidth, canvasHeight, this.format).createView();
+				if (this.hasClearedCanvasThisFrame) {
+					if (loadOp === "clear") loadOp = "load";
+				} else {
+					if (loadOp === "load") loadOp = "clear";
+					this.hasClearedCanvasThisFrame = true;
+				}
+			} else if (pass.renderToCanvas || isLastPass) {
+				renderTargetView = this.ctx.getCurrentTexture().createView();
+				isRenderingToCanvas = true;
+			} 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({
-					baseMipLevel: 0,
-					mipLevelCount: 1
-				});
+				renderTargetView = texture.createView();
+			}
+			if (isRenderingToCanvas) if (this.hasClearedCanvasThisFrame) {
+				if (loadOp === "clear") loadOp = "load";
+			} else {
+				if (loadOp === "load") loadOp = "clear";
+				this.hasClearedCanvasThisFrame = true;
 			}
 			const renderPass = commandEncoder.beginRenderPass({ colorAttachments: [{
-				view: renderTarget,
-				resolveTarget,
+				view: renderTargetView,
 				loadOp,
 				storeOp: "store",
 				clearValue: pass.clearColor
@@ -764,6 +857,44 @@ var WGSLRenderer = class {
 		this.stopLoop();
 		this.passes = [];
 		this.textureManager.destroy();
+		this.readBuffer?.destroy();
+		this.readBuffer = null;
+	}
+	/**
+	* 快速捕获当前帧的像素数据
+	* 从outputTexture读取，不经过canvas，用于视频导出
+	* @returns Uint8Array格式的RGBA像素数据
+	*/
+	async captureFrameFast() {
+		const outputTexture = this.textureManager.getOutputTexture();
+		if (!outputTexture) throw new Error("Output texture not available. Please render a frame first.");
+		const width = outputTexture.width;
+		const height = outputTexture.height;
+		const bytesPerRow = Math.ceil(width * 4 / 256) * 256;
+		const bufferSize = bytesPerRow * height;
+		if (!this.readBuffer || this.readBuffer.size !== bufferSize) {
+			this.readBuffer?.destroy();
+			this.readBuffer = this.device.createBuffer({
+				size: bufferSize,
+				usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
+			});
+		}
+		const commandEncoder = this.device.createCommandEncoder();
+		commandEncoder.copyTextureToBuffer({ texture: outputTexture }, {
+			buffer: this.readBuffer,
+			bytesPerRow
+		}, [width, height]);
+		this.device.queue.submit([commandEncoder.finish()]);
+		await this.readBuffer.mapAsync(GPUMapMode.READ);
+		const mappedBuffer = new Uint8Array(this.readBuffer.getMappedRange().slice(0));
+		this.readBuffer.unmap();
+		const pixelData = new Uint8Array(width * height * 4);
+		for (let row = 0; row < height; row++) {
+			const srcOffset = row * bytesPerRow;
+			const dstOffset = row * width * 4;
+			pixelData.set(mappedBuffer.subarray(srcOffset, srcOffset + width * 4), dstOffset);
+		}
+		return pixelData;
 	}
 };
 async function createWGSLRenderer(cvs, options) {
@@ -774,6 +905,7 @@ async function createWGSLRenderer(cvs, options) {
 
 //#endregion
 exports.PassTextureRef = PassTextureRef;
+exports.RenderMode = RenderMode;
 exports.WGSLRenderer = WGSLRenderer;
 exports.createSamplingView = createSamplingView;
 exports.createWGSLRenderer = createWGSLRenderer;

package/dist/esm/index.d.ts

@@ -140,6 +140,11 @@ declare class RenderPass {
 }
 //#endregion
 //#region src/index.d.ts
+declare enum RenderMode {
+  NORMAL = "normal",
+  // 正常模式：渲染到canvas和outputTexture
+  EXPORT = "export",
+}
 interface WGSLRendererOptions {
   config?: Partial<GPUCanvasConfiguration>;
 }
@@ -153,9 +158,21 @@ declare class WGSLRenderer {
   private textureManager;
   private animationFrameId;
   private isResizing;
+  private renderMode;
+  private readBuffer;
+  private hasClearedCanvasThisFrame;
   constructor(canvas: HTMLCanvasElement, options?: WGSLRendererOptions | undefined);
   init(): Promise<void>;
   resize(width: number, height: number): Promise<void>;
+  /**
+   * 设置渲染模式
+   * @param mode NORMAL模式渲染到canvas和outputTexture，EXPORT模式只渲染到outputTexture
+   */
+  setRenderMode(mode: RenderMode): void;
+  /**
+   * 获取当前渲染模式
+   */
+  getRenderMode(): RenderMode;
   getContext(): GPUCanvasContext;
   getDevice(): GPUDevice;
   /**
@@ -264,7 +281,13 @@ declare class WGSLRenderer {
   }): void;
   stopLoop(): void;
   reset(): void;
+  /**
+   * 快速捕获当前帧的像素数据
+   * 从outputTexture读取，不经过canvas，用于视频导出
+   * @returns Uint8Array格式的RGBA像素数据
+   */
+  captureFrameFast(): Promise<Uint8Array>;
 }
 declare function createWGSLRenderer(cvs: HTMLCanvasElement, options?: WGSLRendererOptions): Promise<WGSLRenderer>;
 //#endregion
-export { BindingResource, PassTextureRef, RenderPassOptions, WGSLRenderer, createSamplingView, createWGSLRenderer };
+export { BindingResource, PassTextureRef, RenderMode, RenderPassOptions, WGSLRenderer, createSamplingView, createWGSLRenderer };

package/dist/esm/index.js

@@ -313,6 +313,8 @@ var TextureManager = class {
 	device;
 	width;
 	height;
+	renderTarget = null;
+	outputTexture = null;
 	constructor(device, width, height) {
 		this.device = device;
 		this.width = width;
@@ -347,9 +349,64 @@ var TextureManager = class {
 	setTexture(name, texture) {
 		this.textures.set(name, texture);
 	}
+	/**
+	* 获取或创建渲染目标纹理
+	* 所有渲染到这里的内容会再复制到 canvas 和输出纹理
+	* 必须支持 COPY_SRC 以便复制到 canvas 和输出纹理
+	*/
+	getOrCreateRenderTarget(width, height, format) {
+		if (!this.renderTarget || this.renderTarget.width !== width || this.renderTarget.height !== height) {
+			this.renderTarget?.destroy();
+			this.renderTarget = this.device.createTexture({
+				size: [
+					width,
+					height,
+					1
+				],
+				format,
+				usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC | GPUTextureUsage.TEXTURE_BINDING
+			});
+		}
+		return this.renderTarget;
+	}
+	/**
+	* 获取当前渲染目标纹理
+	*/
+	getRenderTarget() {
+		return this.renderTarget;
+	}
+	/**
+	* 获取或创建输出纹理
+	* 用于视频导出，始终包含最新的渲染结果
+	*/
+	getOrCreateOutputTexture(width, height, format) {
+		if (!this.outputTexture || this.outputTexture.width !== width || this.outputTexture.height !== height) {
+			this.outputTexture?.destroy();
+			this.outputTexture = this.device.createTexture({
+				size: [
+					width,
+					height,
+					1
+				],
+				format,
+				usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC | GPUTextureUsage.TEXTURE_BINDING
+			});
+		}
+		return this.outputTexture;
+	}
+	/**
+	* 获取当前输出纹理
+	*/
+	getOutputTexture() {
+		return this.outputTexture;
+	}
 	destroy() {
 		this.textures.forEach((texture) => texture.destroy());
 		this.textures.clear();
+		this.renderTarget?.destroy();
+		this.renderTarget = null;
+		this.outputTexture?.destroy();
+		this.outputTexture = null;
 	}
 	getPixelSize() {
 		return {
@@ -397,6 +454,11 @@ function createSamplingView(texture, ref) {
 
 //#endregion
 //#region src/index.ts
+var RenderMode = /* @__PURE__ */ function(RenderMode$1) {
+	RenderMode$1["NORMAL"] = "normal";
+	RenderMode$1["EXPORT"] = "export";
+	return RenderMode$1;
+}(RenderMode || {});
 var WGSLRenderer = class {
 	ctx;
 	device;
@@ -405,6 +467,9 @@ var WGSLRenderer = class {
 	textureManager;
 	animationFrameId = null;
 	isResizing = false;
+	renderMode = RenderMode.NORMAL;
+	readBuffer = null;
+	hasClearedCanvasThisFrame = false;
 	constructor(canvas, options) {
 		this.canvas = canvas;
 		this.options = options;
@@ -441,6 +506,19 @@ var WGSLRenderer = class {
 		this.textureManager.resize(width, height);
 		this.isResizing = false;
 	}
+	/**
+	* 设置渲染模式
+	* @param mode NORMAL模式渲染到canvas和outputTexture，EXPORT模式只渲染到outputTexture
+	*/
+	setRenderMode(mode) {
+		this.renderMode = mode;
+	}
+	/**
+	* 获取当前渲染模式
+	*/
+	getRenderMode() {
+		return this.renderMode;
+	}
 	getContext() {
 		return this.ctx;
 	}
@@ -709,30 +787,45 @@ var WGSLRenderer = class {
 		if (this.passes.length === 0) return;
 		const enabledPasses = this.getEnabledPasses();
 		if (enabledPasses.length === 0) return;
+		this.hasClearedCanvasThisFrame = false;
 		this.updateBindGroups();
 		const commandEncoder = this.device.createCommandEncoder();
+		const canvasWidth = this.canvas.width || this.canvas.clientWidth;
+		const canvasHeight = this.canvas.height || this.canvas.clientHeight;
 		for (let i = 0; i < enabledPasses.length; i++) {
 			const pass = enabledPasses[i];
 			let loadOp = "load";
-			if (i === 0) loadOp = "clear";
-			let renderTarget;
-			let resolveTarget;
-			const canvasTexture = this.ctx.getCurrentTexture();
+			const isFirst = i === 0;
 			const isLastPass = i === enabledPasses.length - 1;
-			if (pass.renderToCanvas || isLastPass && !pass.view) renderTarget = canvasTexture.createView();
-			else if (pass.view) renderTarget = pass.view;
-			else {
+			if (isFirst) loadOp = "clear";
+			let renderTargetView;
+			let isRenderingToCanvas = false;
+			if (pass.view) renderTargetView = pass.view;
+			else if (this.renderMode === RenderMode.EXPORT && (pass.renderToCanvas || isLastPass)) {
+				renderTargetView = this.textureManager.getOrCreateOutputTexture(canvasWidth, canvasHeight, this.format).createView();
+				if (this.hasClearedCanvasThisFrame) {
+					if (loadOp === "clear") loadOp = "load";
+				} else {
+					if (loadOp === "load") loadOp = "clear";
+					this.hasClearedCanvasThisFrame = true;
+				}
+			} else if (pass.renderToCanvas || isLastPass) {
+				renderTargetView = this.ctx.getCurrentTexture().createView();
+				isRenderingToCanvas = true;
+			} 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({
-					baseMipLevel: 0,
-					mipLevelCount: 1
-				});
+				renderTargetView = texture.createView();
+			}
+			if (isRenderingToCanvas) if (this.hasClearedCanvasThisFrame) {
+				if (loadOp === "clear") loadOp = "load";
+			} else {
+				if (loadOp === "load") loadOp = "clear";
+				this.hasClearedCanvasThisFrame = true;
 			}
 			const renderPass = commandEncoder.beginRenderPass({ colorAttachments: [{
-				view: renderTarget,
-				resolveTarget,
+				view: renderTargetView,
 				loadOp,
 				storeOp: "store",
 				clearValue: pass.clearColor
@@ -763,6 +856,44 @@ var WGSLRenderer = class {
 		this.stopLoop();
 		this.passes = [];
 		this.textureManager.destroy();
+		this.readBuffer?.destroy();
+		this.readBuffer = null;
+	}
+	/**
+	* 快速捕获当前帧的像素数据
+	* 从outputTexture读取，不经过canvas，用于视频导出
+	* @returns Uint8Array格式的RGBA像素数据
+	*/
+	async captureFrameFast() {
+		const outputTexture = this.textureManager.getOutputTexture();
+		if (!outputTexture) throw new Error("Output texture not available. Please render a frame first.");
+		const width = outputTexture.width;
+		const height = outputTexture.height;
+		const bytesPerRow = Math.ceil(width * 4 / 256) * 256;
+		const bufferSize = bytesPerRow * height;
+		if (!this.readBuffer || this.readBuffer.size !== bufferSize) {
+			this.readBuffer?.destroy();
+			this.readBuffer = this.device.createBuffer({
+				size: bufferSize,
+				usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
+			});
+		}
+		const commandEncoder = this.device.createCommandEncoder();
+		commandEncoder.copyTextureToBuffer({ texture: outputTexture }, {
+			buffer: this.readBuffer,
+			bytesPerRow
+		}, [width, height]);
+		this.device.queue.submit([commandEncoder.finish()]);
+		await this.readBuffer.mapAsync(GPUMapMode.READ);
+		const mappedBuffer = new Uint8Array(this.readBuffer.getMappedRange().slice(0));
+		this.readBuffer.unmap();
+		const pixelData = new Uint8Array(width * height * 4);
+		for (let row = 0; row < height; row++) {
+			const srcOffset = row * bytesPerRow;
+			const dstOffset = row * width * 4;
+			pixelData.set(mappedBuffer.subarray(srcOffset, srcOffset + width * 4), dstOffset);
+		}
+		return pixelData;
 	}
 };
 async function createWGSLRenderer(cvs, options) {
@@ -772,4 +903,4 @@ async function createWGSLRenderer(cvs, options) {
 }
 
 //#endregion
-export { PassTextureRef, WGSLRenderer, createSamplingView, createWGSLRenderer };
+export { PassTextureRef, RenderMode, WGSLRenderer, createSamplingView, createWGSLRenderer };

package/package.json

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