wgsl-renderer 0.6.0 → 0.7.0

package/dist/cjs/index.js

@@ -542,7 +542,7 @@ var WGSLRenderer = class {
 	animationFrameId = null;
 	isResizing = false;
 	renderMode = "normal";
-	readBuffer = null;
+	readedBuffer = null;
 	hasClearedCanvasThisFrame = false;
 	getPassOutputTextureName(passName) {
 		return `pass_${passName}_output`;
@@ -1033,8 +1033,8 @@ var WGSLRenderer = class {
 		this.stopLoop();
 		this.passes = [];
 		this.textureManager.destroy();
-		this.readBuffer?.destroy();
-		this.readBuffer = null;
+		this.readedBuffer?.destroy();
+		this.readedBuffer = null;
 	}
 	/**
 	* 快速捕获当前帧的像素数据
@@ -1048,22 +1048,22 @@ var WGSLRenderer = class {
 		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({
+		if (!this.readedBuffer || this.readedBuffer.size !== bufferSize) {
+			this.readedBuffer?.destroy();
+			this.readedBuffer = this.device.createBuffer({
 				size: bufferSize,
 				usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
 			});
 		}
 		const commandEncoder = this.device.createCommandEncoder();
 		commandEncoder.copyTextureToBuffer({ texture: outputTexture }, {
-			buffer: this.readBuffer,
+			buffer: this.readedBuffer,
 			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();
+		await this.readedBuffer.mapAsync(GPUMapMode.READ);
+		const mappedBuffer = new Uint8Array(this.readedBuffer.getMappedRange().slice(0));
+		this.readedBuffer.unmap();
 		const pixelData = new Uint8Array(width * height * 4);
 		for (let row = 0; row < height; row++) {
 			const srcOffset = row * bytesPerRow;
@@ -1073,6 +1073,44 @@ var WGSLRenderer = class {
 		return pixelData;
 	}
 	/**
+	* Create a storage buffer for compute shader read/write
+	*/
+	createStorageBuffer(size, label) {
+		return this.device.createBuffer({
+			label,
+			size,
+			usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC | GPUBufferUsage.COPY_DST
+		});
+	}
+	/**
+	* Create an indirect buffer for GPU-driven draw/dispatch
+	*/
+	createIndirectBuffer(size, label) {
+		return this.device.createBuffer({
+			label,
+			size,
+			usage: GPUBufferUsage.INDIRECT | GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
+		});
+	}
+	/**
+	* Read back data from a GPU buffer
+	* Buffer must have COPY_SRC usage
+	*/
+	async readBuffer(buffer) {
+		const stagingBuffer = this.device.createBuffer({
+			size: buffer.size,
+			usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
+		});
+		const commandEncoder = this.device.createCommandEncoder();
+		commandEncoder.copyBufferToBuffer(buffer, 0, stagingBuffer, 0, buffer.size);
+		this.device.queue.submit([commandEncoder.finish()]);
+		await stagingBuffer.mapAsync(GPUMapMode.READ);
+		const data = stagingBuffer.getMappedRange().slice(0);
+		stagingBuffer.unmap();
+		stagingBuffer.destroy();
+		return data;
+	}
+	/**
 	* Create a storage-capable texture (useful for compute passes)
 	*/
 	createStorageTexture(options) {

package/dist/esm/index.d.ts

@@ -235,7 +235,7 @@ declare class WGSLRenderer {
   private animationFrameId;
   private isResizing;
   private renderMode;
-  private readBuffer;
+  private readedBuffer;
   private hasClearedCanvasThisFrame;
   private getPassOutputTextureName;
   constructor(canvas: HTMLCanvasElement, options?: WGSLRendererOptions | undefined);
@@ -367,6 +367,19 @@ declare class WGSLRenderer {
    * @returns Uint8Array格式的RGBA像素数据
    */
   captureFrameFast(): Promise<Uint8Array>;
+  /**
+   * Create a storage buffer for compute shader read/write
+   */
+  createStorageBuffer(size: number, label?: string): GPUBuffer;
+  /**
+   * Create an indirect buffer for GPU-driven draw/dispatch
+   */
+  createIndirectBuffer(size: number, label?: string): GPUBuffer;
+  /**
+   * Read back data from a GPU buffer
+   * Buffer must have COPY_SRC usage
+   */
+  readBuffer(buffer: GPUBuffer): Promise<ArrayBuffer>;
   /**
    * Create a storage-capable texture (useful for compute passes)
    */

package/dist/esm/index.js

@@ -541,7 +541,7 @@ var WGSLRenderer = class {
 	animationFrameId = null;
 	isResizing = false;
 	renderMode = "normal";
-	readBuffer = null;
+	readedBuffer = null;
 	hasClearedCanvasThisFrame = false;
 	getPassOutputTextureName(passName) {
 		return `pass_${passName}_output`;
@@ -1032,8 +1032,8 @@ var WGSLRenderer = class {
 		this.stopLoop();
 		this.passes = [];
 		this.textureManager.destroy();
-		this.readBuffer?.destroy();
-		this.readBuffer = null;
+		this.readedBuffer?.destroy();
+		this.readedBuffer = null;
 	}
 	/**
 	* 快速捕获当前帧的像素数据
@@ -1047,22 +1047,22 @@ var WGSLRenderer = class {
 		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({
+		if (!this.readedBuffer || this.readedBuffer.size !== bufferSize) {
+			this.readedBuffer?.destroy();
+			this.readedBuffer = this.device.createBuffer({
 				size: bufferSize,
 				usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
 			});
 		}
 		const commandEncoder = this.device.createCommandEncoder();
 		commandEncoder.copyTextureToBuffer({ texture: outputTexture }, {
-			buffer: this.readBuffer,
+			buffer: this.readedBuffer,
 			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();
+		await this.readedBuffer.mapAsync(GPUMapMode.READ);
+		const mappedBuffer = new Uint8Array(this.readedBuffer.getMappedRange().slice(0));
+		this.readedBuffer.unmap();
 		const pixelData = new Uint8Array(width * height * 4);
 		for (let row = 0; row < height; row++) {
 			const srcOffset = row * bytesPerRow;
@@ -1072,6 +1072,44 @@ var WGSLRenderer = class {
 		return pixelData;
 	}
 	/**
+	* Create a storage buffer for compute shader read/write
+	*/
+	createStorageBuffer(size, label) {
+		return this.device.createBuffer({
+			label,
+			size,
+			usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC | GPUBufferUsage.COPY_DST
+		});
+	}
+	/**
+	* Create an indirect buffer for GPU-driven draw/dispatch
+	*/
+	createIndirectBuffer(size, label) {
+		return this.device.createBuffer({
+			label,
+			size,
+			usage: GPUBufferUsage.INDIRECT | GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
+		});
+	}
+	/**
+	* Read back data from a GPU buffer
+	* Buffer must have COPY_SRC usage
+	*/
+	async readBuffer(buffer) {
+		const stagingBuffer = this.device.createBuffer({
+			size: buffer.size,
+			usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
+		});
+		const commandEncoder = this.device.createCommandEncoder();
+		commandEncoder.copyBufferToBuffer(buffer, 0, stagingBuffer, 0, buffer.size);
+		this.device.queue.submit([commandEncoder.finish()]);
+		await stagingBuffer.mapAsync(GPUMapMode.READ);
+		const data = stagingBuffer.getMappedRange().slice(0);
+		stagingBuffer.unmap();
+		stagingBuffer.destroy();
+		return data;
+	}
+	/**
 	* Create a storage-capable texture (useful for compute passes)
 	*/
 	createStorageTexture(options) {

package/package.json

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